es6基础知识点2
上篇总结了let、const、箭头函数、参数,现在继续总结。
5. spread运算符(…)
es6新增了一种三点运算符(…),称为数组运算符,也可称为spread运算符。可以将一个数组转换成以逗号分割的参数序列。
举例说明:
function add(x,y){
return x+y;
}
//使用es5方法传递一个数组给add函数,如何实现?可以使用apply
var res1 = add.apply(null,[1,2]);
console.log(res1);//3
//使用spread运算符
var res2 = add(...[1,2]);
console.log(res2);//3
5.1 在push()中使用
比如合并两个数组:
var nums1 = [1,2,3];
var nums2 = [4,5,6];
//使用es5
Array.prototype.push.apply(nums1,nums2);
console.log(nums1);//[1,2,3,4,5,6]
//使用spread运算符
nums1.push(...nums2);
console.log(nums1);//[1,2,3,4,5,6]
5.2 构造数组
将一个数组插入另一个数组中:
var a = ['a1','a2'];
var b = [...a,'b1','b2'];
console.log(b);//["a1", "a2", "b1", "b2"]
5.3 连接数组
连接两个或更多数组
var a = [1,2];
var b = [3,4];
var c = [4,5,6];
var res = [...a,...b,...c];
console.log(res);//[1, 2, 3, 4, 4, 5, 6]
5.4 复制数组
var a = [1,2];
var b = [...a];
console.log(b);//[1,2]
5.5 spread运算符与字符串
首先,一个例子:
console.log(['a',...'bc','d']);//["a", "b", "c", "d"]
当在一个数组的某字符串项前使用spread运算符,可以将该字符串拆成单个字符的项
6. 对象语法扩展
//es5
function test(name,age) {
return {
name:name,
age:age,
getAge:function() {
console.log(`${this.name} and ${this.age}`);
return this.age
}
};
}
//es6
function test(name,age) {
return {
name,
age,
getAge(){
return this.age
}
};
}
//调用
test('Summer',18).height();//18
7. 循环for…of
for…of,创建一个循环遍历一个迭代对象,如Array、Map、Set或实现迭代器的对象。
7.1 数组和字符串
let a = [1,2,3];
for(let i of a) {
console.log(i)
}
let b = 'abc';
for(let j of b) {
console.log(j)//a b c
}
7.2 Map
var c = new Map();
c.set('red','#f30');
c.set('white','#fff');
c.set('black','#000');
for(let k of c) {
console.log(k)
}
//["red", "#f30"]
//["white", "#fff"]
//["black", "#000"]
7.3 Set
let nums = new Set([1, 2, 3]);
for (let num of nums) {
console.log(num); //
}
// 1
// 2
// 3
7.4 for…of 与 for…in
for…in循环遍历对象的属性,不遍历Array、Map、Set。
for…of循环迭代集合,不是对象。
举例说明:
let numbers = [6, 7, 8];
numbers.foo = "foo";
for (let i in numbers) {
console.log(i);
}
// 0
// 1
// 2
// foo
for (let i of numbers) {
console.log(i);
}
// 6
// 7
// 8
8. 解构
将对象或者数组拆分成单个变量。
let nums = [1,2,3,4];
let [a,b,c] = nums;
console.log(a);//1
console.log(b);//2
console.log(c);//3
//spread运算符
let [a,b,...c] = nums;
console.log(a);//1
console.log(b);//2
console.log(c);//[3,4]
8.1 分配
可以在赋值中拆分与变量声明分离的数组。如:
var a,b;
[a,b]=[1,2];
console.log(a);//1
console.log(b);//2
[a,,b]=[1,2,3];
console.log(a);//1
console.log(b);//3
8.2 默认值
如果数组没有对应的值,则取变量的默认值。
var a,b;
[a=1,b=2]=[3];
console.log(a);//3
console.log(b);//2 默认值
8.3 变量值交换
在不适用临时变量的情况下,可以完成交换变量的值。如:
var a = 10, b = 20;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10
8.4 对象解构
对象解构时,变量名必须与对象中的属性名称一致,否则会undefined。
let person = {
name:'Summer',
'age':18,
likes: {
first:'money',
second:'money'
}
}
let {name,age} = person;
console.log(name);//Summer
console.log(age);//18
let {like:{first,second}} = person;
console.log(first);//money
console.log(second);//money
9. 模板文字
字符串通常使用但银行(‘‘)和双引号(“”)。es6出了新语法,反引号(`)。
var str = `这是一串字符`;
有以下优势:
1.可以换行
2.可以将将一部分字符串替换为变量或表达式(字符串插值)
节本语法:
let str = `这是一大串字符`;
let str1 = `这是一大\`串字符`;
let str2 =
`这是
一大串
字符串`;//空格也是字符串的一部分
var a = '1234';
let str = `这是一串数字:${a}`;
以上两篇文章是对es6新语法点的简单梳理。下面继续总结es6的其他知识点。
回顾上一篇:let、const、箭头函数、参数