ES6语法

1.var let const区别

　　let有作用域限制,只限于当前代码块,没有作用域的提升

　　let不能声明相同的变量

　　const:主要声明常量

2.解构赋值

//数组解构赋值
   let [name,age,sex] = ['张三',18,'男'];
//对象解构赋值
let {name,age,sex} = {name:'李四',age:20,sex:'女'};

3.数据集合SET

　　特点:类似数组,没有重复的元素(唯一的)

　　　　开发中用于去除重复数据

　　　　Key和Value都是相等的

　　创建集合:

　let set = new Set(['张三',18,'男']);

　一个属性和4个方法:

　　set.size 大小

　　set.add()//添加

　　set.delete()//删除 --返回true 或 false

　　set.has() //查看是否有 --返回true 或 false

　　set.clear()//清楚所有无返回值

　　set.keys() //拿所有键

　　set.values()//拿所有值　

4.数据集合--map

　　特点:类似于对象

　　创建

const map = new Map([
      ['name','张三'],
      ['age',18],
      ['sex','男'],
]);
//遍历

map.forEach(function(index,value){
          console.log(index+'=='+value);
})
5.新增数据类型:symbol 是独一无二的
6.Class类,通过类产生对象
7.新增函数
　console.log('Hello word'.includes('word',index)); //判断字符串中是否包含指定字符串(包含返回true) ,index可写可不写  开始位置

console.log(url.startsWith('admin')); //以指定字符串开头

　　console.log(url.endsWith('admin')); //以指定字符串结束

　　//魔板字符串

　　let s =`

　　　　<div>

　　　　　　<span>${obj.uname}</span>

　　　　　　</div>

　　　　console.log(s);

　　8.函数

　　function foo(a ,...param){

　　　　console.log(a,param);

　　}

　　foo(1,2,3); //值 1 [2,3]

　　9.循环

　　let arr = [11,22,33,44];

　　arr.forEach((item,index)=>{

　　console.log(item,index);

　　})

ES5
function Person(name,age){
          this.name = name;
          this.age = age;
}
Person.prototype = {
          constructor:Person,
   print(){
              console.log('姓名:'+this.name+'年龄:'+this.age);
   }
}

let person = new Person('张三',29);
console.log(person);
ES6:

class Person{
          constructor(name,age){
              this.name = name;
              this.age = age;
  　　　　 }
          print(){
              console.log('姓名:'+this.name+'年龄:'+this.age);
          }
}
      let person = new Person('张三',29);
      console.log(person);

5.数组的新用法 forEach some filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul ref="hlist">
            <li style="height: 10px">1</li>
            <li style="height: 20px">2</li>
            <li style="height: 30px">3</li>
            <li style="height: 40px">4</li>
            <li style="height: 50px">5</li>
        </ul>
        <button @click="getHeight()">点击获取</button>
        <button @click="yzSome()">验证Some</button>
        <input type="text" v-model="search" >
        <table>
            <tr v-for="(s ,index) in filters(search)" :key = "index">
                <td>{{s.name}}</td>
                <td>{{s.sex}}</td>
                <td>{{s.age}}</td>
                <td>{{s.mobile}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            someArr:['张三','李四','王五'],
            students:[
                {name:'张三',sex:'男',age:20,mobile:'13922228888'},
                {name:'李四',sex:'女',age:30,mobile:'139111133333'},
                {name:'王五',sex:'男',age:50,mobile:'1394444455555'},
                {name:'赵六',sex:'女',age:60,mobile:'1396666677777'},
            ],
            search:'',
        },
        methods:{
            getHeight(){
                let heiarr = [];
                let alllis = this.$refs.hlist.getElementsByTagName('li');
                console.log(alllis);
                //slice--切割数组   call--借调
                Array.prototype.slice.call(alllis).forEach(li =>{
                    heiarr.push(li.clientHeight);
                })
                console.log(heiarr);
            },
            yzSome(){
                let result = this.someArr.some((str)=>{
                    return str === '张三1';
                })
                console.log(result);
            },
            filters(search){
                return this.students.filter((stu)=>{
                    if(stu.name.includes(search)){
                        return stu;
                    }
                })
            },
        }

    })
</script>