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、箭头函数、参数