ES6新增语法核心基础知识

目录

1.解构赋值

2.箭头函数

3.剩余参数

4.扩展运算符（展开语法）

5.Array的扩展方法

6.String的扩展方法

7.set数据结构

---

1.解构赋值

按照一定的模式，从数组或者对象中提取值，按照对应位置，对变量赋值，对象也可以实现解构

（1）数组解构

如果找不到对应的变量值，那就会输出undefined

  let ary=[1,2,3]
        //等号左边的值不是一个数组，他们都是变量，与上面的的右边的值是一一对应的。
        let [a,b,c，d，e]=ary
        console.log(a);
        console.log(b);
        console.log(c);
       //如果找不到对应的变量值，那就会输出undefined
        console.log(d);//undefined
        console.log(e);//undefined

（2）对象解构

对象结构允许我们使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋值给变量

有两种一种是同名，另一种是不同名

  // 对象结构允许我们使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋值给变量
        let person={name:'张三',age:18,sex:'男'}
        // 在es6之前是使用person.age,person.name来去声明变量中的属性的，这样子会很麻烦，浪费空间
     /*    let {name,age,sex}=person//其含义是用name变量的名字去匹配person当中的name属性，如果在person对象中有name属性的话，那么就将name属性的值会赋值给name变量，以此类推
        console.log(name);
        console.log(age);
        console.log(sex); */
    // 在解构语法中，冒号左边的name只用于属性匹配，冒号右边的myName才是真正的变量
        let{name:myName}=person/*其含义是用name属性匹配person对象中的name属性,匹配完成之后将张三赋值给myName这个变量*/
        console.log(myName);//张三

2.箭头函数

（1）箭头函数是用来简化函数定义语法的

（）=>{ } 通常将箭头函数赋值给一个变量，变量名字就是函数名字,利用变量名字调用函数就可以了

const fn=()=>{}

（2）在箭头函数中，如果函数体只有一句代码，且代码执行结果就是返回值，可以省略大括号

      // 原来书写的方式
        function sum(num1,num2){
            return num1+num2
        }
        // 箭头函数的定义方式
        const sum=(num1,num2)=>num1+num2

（3）如果形参只有一个，可以省略小括号

     // 原来书写方式
        function fn(v) {
            return v
        }
        // 箭头函数书写方式
        const fn=v=>v

（4）this指向问题

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

也就是说他所在区域的函数中的this指向谁，箭头函数中的this就指向谁

要注意对象是不能产生作用域的，如果说箭头函数定义在这里面，那么箭头函数中的this是指向window的

 function fn() {
            console.log(this);//obj
            return ()=>{
   /*箭头函数没有自己的this，箭头函数被定义在fn函数内部，所以说这里的this指向的是fn这个区域的this，也就是obj*/
                console.log(this);
            }
        }
        const obj={name:'张三'}
        const resfn=fn.call(obj)
        resfn()

       var age=100
        var obj={
            age:20,
            say:()=>{
                alert(this.age)
            }
        }
        obj.say()//100
        /* 
        因为obj是一个对象，他不能产生作用域，
        所以说这个箭头函数被定义在了全局作用域下，
        this就直接指向window，而window中是没有age属性的
        */

3.剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组，用  ‘... ’ 表示

要计算里面的数值就需要遍历。一般剩余参数和解构赋值配合使用

    let ary1=['张三','李四','王五'];
        //s1表示ary1中的第一个元素，...s2则表示剩余的元素。
        let[s1,...s2]=ary1
        console.log(s1);//张三
        console.log(s2);//包含李四和王五的数组

4.扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

         let ary=['a','b','c'];
        // ...ary  // 这里就相当于'a','b','c'
        console.log(...ary);//这样写就相当于下列写法
        console.log('a','b','c');// a b c

（1）扩展运算符作用

扩展运算符可用于合并数组，主要有两种方法

       //合并数组方法一
        let ary=[1,2,3]
        let ary2=[4,5,6]
        let ary3=[...ary,...ary2]
        console.log(ary3);//[1,2,3,4,5,6]

       // 合并数组方法二
        let ary=[1,2,3]
        let ary2=[4,5,6]
        ary.push(...ary2)
        console.log(ary);

扩展运算符将类数组或可遍历对象转换为真正的数组，之所以要做数组转换是因为伪数组转换为真数组之后就可以调用数组对象下面的方法

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>



    // 利用扩展运算符将伪数组转换为真正的数组
     var divs=document.getElementsByTagName('div')
     console.log(divs);//此时输出的是伪数组
     ary=[...divs]
     console.log(ary);//此时输出的是真数组
     // 之所以要做数组转换是因为伪数组转换为真数组之后就可以调用数组对象下面的方法
     ary.push('a')
     console.log(ary);

5.Array的扩展方法

①构造函数方法Array.from()

将伪数组或类数组转换为真正的数组，方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

参数：

参数一：要转换的伪数组

参数二：函数，数组中有多少元素，这个函数就会被调用多少次

       var arrayLike={
            '0':1,
            '1':2,
            '2':3,
            'length':3
        }
        var ary=Array.from(arrayLike,item=>item*2)
        console.log(ary);//[2,4,6]

②实例方法 find()

该方法用于查找数组中第一个符合条件的数组成员，查找到就返回找到的元素对象。如果没有找到返回undefined

参数：函数

参数一：当前循环到的值item

参数二：当前循环值索引index

        var ary=[{id:1,name:'王二'},{id:2,name:'李四'}]
        //find函数接收参数，
        /* ary.find((item,index)=>{
           return item.id==2
        }) */
       let target= ary.find(item=>item.id==2)
       let target1= ary.find(item=>item.id==3)
       console.log(target);//输出id=2的对象
       console.log(target1);//输出undefined

③实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，查找到就返回索引值，如果没有的话就返回-1

参数：传递条件函数

        let ary=[10,20,30]
        let index= ary.findIndex((item=>item>25))
        console.log(index);//2

④实例方法：includes()   es6之前是采用indexOf方法

表示某个数组是否包含给定的值，返回布尔值

参数：想判断的那个元素

        let ary=['a','b','c']
        let result= ary.includes('a')
       console.log(result);//true
       result=ary.includes('e')
       console.log(result);//false

6.String的扩展方法

模板字符串，使用反引号定义

作用：解析变量，并且在模板字符串内部是可以换行的

在es6之前拼接变量是使用加号，在es6的语法中使用反引号和${ }连接就行

         let name=`张三`
         let sayHello=`hello,我的名字叫${name}`
        console.log(sayHello);//我的名字叫张三

除了上面的两个作用之外，模板字符串还可以调用函数，模板字符串在调用函数的地方会显示函数的返回值

       const fn=()=>{
            return `我是fn函数`
        }
        let html=`我是模板字符串${fn()}`
       console.log(html);//我是模板字符串我是fn函数

字符串中的方法

①startsWith()

表示参数字符串是否在原字符串的头部，返回布尔值

②endsWith()

表示参数字符串是否在原字符串的尾部，返回布尔值

        let str='hello,boy and girls'
        let r1=str.startsWith('hello')
        console.log(r1);//true
        r2=str.endsWith('hello')
        console.log(r2);//false

③repeat()

该方法表示将原字符串重复n次，返回一个新的字符串

7.set数据结构

ES6提供了新的数据结构Set,它类似于数组，但是成员的值都是唯一的，没有重复的

Set本身是一个构造函数，用来生成Set数据结构。Set函数可以接收一个数组作为参数，用来初始化

（1）set的属性和方法

①size 返回集合的元素个数

②add(value)增加一个新元素，返回当前集合

③ delete(value)删除元素，返回Boolean值

④has(value)检测集合中是否包含某个元素，返回Boolean值

⑤clear（）清空集合返回Boolean值

（2）set作用：可以用来做数组去重，当数组中有重复的元素时，使用set,输出结构会自动去除重复的内容

（3）set遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

在每一次循环的时候都会调用forEach中的函数，调用函数时会传递当前的循环值，在函数内部就能够拿到set的值

 const s2=new Set(['a','b','c','d','b','c'])
        
        s2.forEach(value=>{
            console.log(value);//a,b,c,d  
        })