ES6新属性笔记
Posted 最骚的就是你
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6新属性笔记相关的知识,希望对你有一定的参考价值。
一、destructuring--解构赋值
1、数组解构赋值
(1)完全解构
let [a,b,c] = [1,2,3];//普通 console.log(a+":"+b+":"+c); let [a1, [[b1], c1]] = [1, [[2], 3]];//嵌套 console.log(a1+":"+b1+":"+c1); let [ , , third] = ["foo", "bar", "baz"]; console.log(third); let [x, , y] = [1, 2, 3]; console.log(x+":"+y);
这种解构赋值的方式很直观,数组嵌套的多了以后也好输出。
(2)不完全解构
let [x1, y1] = [1, 2, 3]; console.log(x1+":"+y1); //x1 y1分别对应1 2 let [x3,, y3 = "cc", z3 = "ccy"] = [1, 2, 3]; console.log(x3+":"+y3+":"+z3); //x3对应1;这里的2对应x3与y3之间的空变量;y3=‘cc’只是初始化一下值,当对应的数组中有值的话会直接被覆盖,这里的cc就已经被3覆盖掉了,z3就是ccy
let [a2, [b2], d2] = [1, [2, 3], 4];
console.log(a2+":"+b2+":"+d2);
//a2对应1,b2对应2,d2对应4
2、对象解构赋值
对象解构与数组解构基本一样
/*对象的属性没有次序,变量必须与属性同名,才能取到正确的值*/
let {foo, bar ,arr:[name,age,id="001"]} = {foo: "aaa", bar: "bbb" ,arr:["zhangsan","18"]}; console.log(foo+":"+bar+":"+name+":"+age+":"+id);
3、字符串解构
let [q,w,e] = "lemon"; console.log(e);
4、函数参数解构
let funObj = { name:"lemon",
age:"18", }
function show({name,age,id="001"}){ console.log(name+":"+age+":"+id); } show(funObj);
----------------------------------------------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------------------------------------------------
二、Symbol--定义一个独一无二的值
var x = \'lemon\'; var y = \'lemon\'; console.log(x == y); console.log(x === y); //此时x与y是相等的,毋庸置疑打印出来的自然是两个true; var m = Symbol(\'lemon\'); var n = Symbol(\'lemon\'); console.log(m == n); //此时打印出的就是false了;
语法很简单,由Symbol定义出的是独一无二的;
三、set与WeakSet--ES6新增的数据类型
1、set
set是ES6新增的一种数据类型,语法特点与数组类似不同的是set数据结构里的的所有数据都是唯一的。
先来看下数组
var arr1 = [1,2,3,4,6,6,7,7,8]; for(var i = 0;i < arr1.length; i++){ console.log(arr1[i]); } for(var n in arr1){ console.log(arr1[n]); } arr1.map(function(val){ //依次遍历数组中的数据 console.log(val); });
再来看下我们set数据结构,set数据是数组通过Set来转变的
var arr1 = [1,2,3,4,6,6,7,7,8];
var set1 = new Set(arr1);
//当数组转变为set数据时,数组中所有的重复数据都将会被删除,只会保留一个,此时set里面的数据只有 1,2,3,4,5,6,7,8;
/*for of语法遍历*/ for(var ele of set1){ //请忽略报错 for in循环不能遍历set集合 用for of console.log(ele); }
add方法来添加数据,类似数组的push方法
var set2 = new Set(); for(var i = 0 ; i < 10; i++){ set2.add(i); } console.log(set2);
我们还可以使用拓展运算符“[...set]”,将set集合转换为数组
//这里我们将上面的set2转化为数组 var arr = [...set2]; console.log(arr);
我们还可以通过delete方法删除set里面的数据
//此处还是拿上面的set2进行讲解 set2.delete(2);//这里的2不是索引,是数据,这里只能删除对应的数据;
还可以通过clear方法进行清空
set2.clear(); console.log(set2);
为什么在删除的时候没有使用索引,我们先来看看遍历的结果
let set3 = new Set([\'lemon1\',\'lemon2\',\'lemon3\',4,2,3,4]); set3.forEach(function(index,val){ console.log(index+":"+val); });
//index与他的value值相同;
使用has方法进行判断set中是否有对应数据
var set = new Set([1,2,3]); console.log(set.has(3));//返回true console.log(set.has(4));//返回false
set还有size属性,像数组里面的length
var set = new Set([1,2,3]); console.log(set.size)//返回3
values方法可以遍历出所有值
var set = new Set([1,2,3]); console.log(set.values); var newSet = ser.values(); for(var val of newSet){ console.log(val) }
2、WeakSet
WeakSet类似于Set,也是不重复的值的集合。但是它只能用于存储对象。而不能是其他类型的值。
WeakSet是一个个构造函数。可以接受数组和类似数组的对象作为参数。(实际上,任何具作为iterable接口的对象都可以作为WeakSet的参数)。该数组的所有成员都会自动成为WeakSet的实例对象的成员。
WeakSet的一个用处是存储DOM节点,而不用担心这些节点从文档移除时,会引起内存的泄露。
具体内容这里就不讲解了。
代码格式如下:
/*WeakSet与Set使用方式类似,与set不同的地方在于WeakSet只能保存对象类型的数据*/ let ws1 = new WeakSet(); ws1.add(5);//报错 let ws2 = new WeakSet(); let num = new Number(5); console.log(num); ws2.add(num);//不报错 let data = new WeakSet(); var obj1 = {name:"ccy"}; var obj2 = new String("你好"); var obj3 = new Number(6); data.add(obj1); data.add(obj2); data.add(obj3); /*不能遍历、取值*/ for(let i of data){ console.log(i); } /*只能判断数据存不存在*/ console.log(data); console.log(data.has(obj1)); //没有size属性,没有clear方法,拓展运算符不可用
这篇就说这么多,学到知识记得收藏加关注哟!
以上是关于ES6新属性笔记的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript 学习笔记: ES6 新特性——对象初始器中函数属性简写