脚本语言规范ES6-知识点2
文章目录
解构赋值
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