脚本语言规范ES6-知识点2

怼烎@ 2023-02-25 08:51 9阅读 0赞

## 脚本语言规范ES6-知识点2 ##

**文章目录**

*   *   *   *  解构赋值
             *  箭头函数
             *  剩余参数
             *  Array的扩展方法

#### 解构赋值 ####

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。  
**数组解构（允许我们按照一一对应的关系从数组中提取值**）

let ary =[1,2,3];
    let [a,b,c] = ary;
    console.log(a);//输出1
    console.log(b);//输出2
    console.log(c);//输出3

如果解构不成功，变量的值为undefined。

let ary =[1,2,3];
    let [a,b,c,d,e] = ary;
    console.log(a);//输出1
    console.log(b);//输出2
    console.log(c);//输出3
    console.log(d);//输出undefined
    console.log(e);//输出undefined

对象解构（属性匹配）（大括号\{\}代表对象解构）  
允许我们使用变量的名字匹配对象的属性，匹配成功，将对象属性的值赋值给变量。

//写法1
    let person = { name: 'lisi', age: 30, sex: '男'};
    let {  name, age, sex} = person;
    console.log(name);//输出 lisi
    console.log(age);//输出 30
    console.log(sex);//输出 男

//写法2
    let person = { name: 'lisi', age: 30, sex: '男'};
    let {  name: myname} = person;
    console.log(myname);//输出 lisi

#### 箭头函数 ####

箭头函数的语法很简单，定义自变量，然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。  
它引入了一种用「箭头」（=>）来定义函数的新语法。箭头函数与传统的JavaScript函数主要区别在于以下几点：  
1.对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境（指向的是函数定义位置的上下文this）。  
2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。  
3.this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。  
4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。

--------------------

如果形参只有一个，形参外侧的小括号也是可以省略的。

x => x * x

上面的箭头函数相当于：

function (x) { 
        return x * x;
    }

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连\{ … \}和return都可以省略掉了。还有一种可以包含多条语句，这时候就不能省略\{ … \}和return。

const sum = (n1,n2) => n1 + n2;
    const result = sum(20,10);
    console.log(result);//输出 30

箭头函数不绑定this，箭头函数没有自己的this关键字，如果箭头函数中使用this，this关键字将指向箭头函数定义位置中的this。

#### 剩余参数 ####

剩余参数语法允许我们将一个**不定数量的参数**表示为一个数组。

const sum = (...args) => { 
        let total = 0;
        args.forEach(item => total += item);
        return total;
    }
    console.log(sum(10,20));//输出 30 
    console.log(sum(10,20,30))//输出 60

剩余函数和解构配合使用

let ary1 = ['张三','李四','王五'];
    let [s1, ...s2] = ary1;
    console.log(s1)//输出 张三
    console.log(s2)//输出 Array('李四','王五')

#### Array的扩展方法 ####

##### 扩展运算符（展开语法） #####

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

let ary = ["a","b","c"];
    console.log(...ary)//输出a b c

*  扩展运算符可以应用于合并数组。

//方法1
    let ary1 = [1,2,3];
    let ary2 = [4,5,6];
    let ary3 = [...ary1, ...ary2];
    console.log(ary3);//输出 [1,2,3,4,5,6]
    //方法2
    ary1.push(...ary2);
    console.log(ary1);//输出 [1,2,3,4,5,6]

*  将类数组（伪数组）或可遍历对象转换为真正的数组。

##### 构造函数方法：Array.form() #####

*  将类数组（伪数组）或可遍历对象转换为真正的数组

var arrayLike = { 
      "0": "zhangsan",
      "1": "lisi",
      "2": "wangwu",
      "length": 3
    }
    var ary = Array.form(arrayLike);
    console.log(ary);//输出 数组[zhangsan,lisi,wangwu]

接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

var arrayLike = { 
      "0": "1",
      "1": "2",
      "length": 2
    }
    var ary = Array.form(arrayLike, item => item*2);
    console.log(ary);//输出 数组[2,4]

##### 实例方法find() #####

用于找出第一个符合条件的数组成员，如果没有找到返回undefined。

##### 实例方法findIndex() #####

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

let ary = [10,20,50];
    let index = ary.findIndex(item => item>15);
    console.log(index)//输出 1

##### 实例方法includes() #####

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

[1,2,3].includes(2);//返回 true
    ["a","b","c"].includes('d')//返回 false

## 后续再更！ ##

## 请尊重原创，如需转载，还请注明原作者，原文链接，谢谢啦！！！ ##

![在这里插入图片描述][20200711193951553.gif_pic_center]

[20200711193951553.gif_pic_center]: /images/20230209/e2899f0a7bb54f1bb2ec339c4ac58756.png