js

ES6学习记录 part2

对于es6的学习总结

Posted by AzirKxs on 2021-09-15
Estimated Reading Time 4 Minutes
Words 1.1k In Total
Viewed Times

ES6学习记录 part2

1.rest参数

ES6引入了reset用来代替arguments

rest用来获取函数的多余参数,必须在函数形参的末尾定义

1
2
3
4
5
6
7
function test(a,b,...args){

console.log(args);

}

test(1,2,3,4,5,6,7); //[3,4,5,6,7]

2…扩展运算符

①…可以将函数的实参(实参是个数组)以逗号分隔开

1
2
3
4
5
6
7
8
9
10
11
let list = ["阿里巴巴","腾讯","字节跳动"];

function getOffer(){

console.log(arguments);

}

getOffer(list); //arguments中存放了一个数组

getOffer(...list);//arguments中存放了三个值

②数组的克隆和合并

1
2
3
4
5
6
7
let hero = ["钢铁侠","绿巨人"];

let newHero = ["蜘蛛侠"];

let all = [...hero,...newHero];

console.log(all); //["钢铁侠","绿巨人","蜘蛛侠"]

//③将伪数组转换为真数组 用法 […名称]

3.Symbol

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。

摘自《ECMAScript 6 入门》

①创建一个symbol

Symbol(“描述”);

1
2
3
4
5
let a = Symbol("This is a egg");

console.log(a); //Symbol(This is a egg)

console.log(a.description); //This is a egg

Symbol 值不能与其他类型的值进行运算,会报错。

②symbol作为属性名

由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let sign = Symbol("This is a test");

/* 第一种写法 */

let b = {};

b[sign] ="hello";

/* 第二种写法 */

let c = {

[sign]: "hello"


}

console.log(b[sign]); //hello

console.log(c[sign]); //hello

③symbol属性名的遍历

获取Symbol属性名Object.getOwnPropertySymbols()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let data = Symbol("test");

let data2 = Symbol("test2")

let obj = {

[data]: "hello",

[data2]:"hello world",

"name":'azirkxs'

}

console.log(Object.getOwnPropertySymbols(obj));//[Symbol(test), Symbol(test2)]

获取键名 Reflect.ownKeys() 可以获取常规键名和Symbol键名

1
console.log(Reflect.ownKeys(obj)); //['name', Symbol(test), Symbol(test2)];

Symbol 值作为键名,不会被常规方法遍历得到。我们可以利用这个特性,为对象定义一些非私有的、但又希望只用于内部的方法。

④Symbol.for()

Symbol.for() 使用Symbol()生成的Symbol即使描述一样也是不同的Symbol,

使用Symbol.for()生成的会先搜索有没有相同的描述,如果没有会生成并全局登记,如果有就不会生成新的,例如使用Symbol.for(“abc”) 10 次也只会生成一个Symbol

1
2
3
4

console.log(Symbol('abc') === Symbol('abc')); //false

console.log(Symbol.for('zxc') === Symbol.for('zxc')); //true

Symbol.keyFor()获取已登记的Symbol的描述(key)

4.set数据结构

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//size属性,返回长度

//add()方法:向set中添加值,不会重复添加,返回set本身

//has()方法,set中是否有某个值,返回布尔值

//delete()方法,删除某个值,返回布尔值

//clear()方法,清空,没有返回值

let setList = new Set();

["腾讯","阿里","字节","腾讯"].forEach(x => setList.add(x));

console.log(setList); //"腾讯","阿里","字节"


let setList2 = new Set([1,2,3,4,5]);

console.log([...setList2]);

//向 Set 加入值的时候,不会发生类型转换,NaN等于自身

set的遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//keys(),values(),entries()



//keys() 返回键名的遍历器

//values() 返回键值的遍历器

//entries() 返回键值对的遍历器(set中键和值相等)



for(let item of setList){

console.log(item);

}





for(let item of setList.keys()){

console.log(item);

}



for(let item of setList.values()){

console.log(item);

}



for(let item of setList.entries()){

console.log(item);

}

forEach()

1
setList.forEach((value,key)=> console.log(value));

…运算

1
console.log([...setList]);

如果这篇文章对你有帮助,可以bilibili关注一波 ~ !此外,如果你觉得本人的文章侵犯了你的著作权,请联系我删除~谢谢!