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

脚本语言规范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。

function fn() {
   console.log(this);
   return () => {
      console.log(this);
   }
}
const obj == {name: 'zhangsan'};
const resFn = fn.call(obj);
resFn();//输出2次   {name: 'zhangsan'}

剩余参数

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

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。

var ary = [{
   id:1,
   name:'zhangsan'
},{
   id:2,
   name:'lisi'
}];
let target = ary.find(item => item.id == 2);
console.log(target);//输出 对象{id：2,name: 'lisi'}

实例方法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

后续再更！

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