【ES6】(二）解构赋值、对象的拓展、Symbol、Set和Map、数组的拓展

一、解构赋值

解构赋值是对赋值运算符的一种拓展，针对数组和对象来进行操作，
优点：代码书写上简洁易读

定义一个node对象

let node = {
    type:'wuwuwuwu',
    name:'zh'
}

在以前取值的话是这样的：

 let type = node.type;
 let name = node.name;// wuwuwuwu zh

但在ES6中就非常简洁

let {type,name} = node;
console.log(type,name); // wuwuwuwu zh

使用剩余运算符也可以解构出来，返回的是一个对象

let {a,...keys} = obj;

对数组解构

let arr = [1,2,3];
let [a,b] = arr;
console.log(a,b);  //1 2

可嵌套

let [a,[b],c] = [1,[2],3];
console.log(a,b,c); //1 2

对属性重命名可使用冒号

let { uname: myname, age: myage } = obj;
console.log(myname, myage);

二、对象的扩展

属性的简洁表示

之前的写法：

const person = {
    name: name,
    age: age,
    sayName: function () {
        console.log(this.name);
    }
}
person.sayName();

ES6写法：

const person = {
    name,
    age,
    sayName(){
        console.log(this.name);
    }
}
person.sayName();

对象的两种方法

is( )
比较两个值是否严格相等

console.log(Object.is(NaN,NaN)); // true

assign( )
对象的合并

let newObj = Object.assign({},{a:1},{b:2});
console.log(newObj);//会返回一个新对象

三、Symbol

原始数据类型Symbol，他表示独一无二的值

1、相同参数的symbol返回值不相等

let s1 = Symbol('zh');
let s2 = Symbol('zh');

s1 === s2 // false

2、获取对象中的Symbol 属性值

不能用点运算符

let a = Symbol('a');
let obj={
    [a]:'zh'
}
console.log(obj[a]);// zh
console.log(obj.a); // undefined

3、Symbol属性名不能用遍历获取到

只获取到了name和age

let a = Symbol('a');
let obj={
    [a]:'zh',
    name:'nihao',
    age:18
}

for(let key in obj){
    console.log(key);
} //name age

有两种方法可以获取Symbol属性名
Object.getOwnPropertySymbols()方法，返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。
使用Reflect.ownKeys()方法，返回所有类型的键名，包括常规键名和 Symbol 键名。

let s = Object.getOwnPropertySymbols(obj);
console.log(s[0]);//Symbol(a)

let y = Reflect.ownKeys(obj);
console.log(y); //['name', 'age', Symbol(a)]

四、Set和Map

Set

Set实际上类似于数组，但是成员的值都是唯一的，没有重复的值。其本身是个构造函数，是个内置对象（看文档写的更全面）

属性:
Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

方法：
Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

const z = new Set();
z.add('h');
z.add(2);
z.delete('h');
console.log(z);
console.log(z.has('h')); //false

遍历操作
Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员

let set = new Set(['red', 'blue', 'black']);

for (let res of set.keys()) {
    console.log(res);
}
// red
// blue
// black

for (let res of set.values()) {
    console.log(res);
}
// red
// blue
// black

for (let res of set.entries()) {
    console.log(res);
}
// ["red", "red"]
// ["blue", "blue"]
// ["black", "black"]

直接遍历Set也可以这么写 [ 默认的是set.values( )方法 ]

for(let res of set){
    console.log(res);
}
// // red
// // blue
// // black

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

遍历的应用
1、用剩余运算符遍历整个Set，得到的数组就是一个没有重复的数组

let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']

假如Set的参数是字符串呢？
也可以对字符串去重，咱就是说，非常的奈斯啊

let str = new Set('zzzzhhhhaaa');
console.log(str);//{'z','h','a'}
str = [...str].join('');
console.log(str);  //'zha'

Map

Map类型是键值对的有序列表，键和值是任意类型

属性
map.size：返回 Map 结构的成员总数。
Map.prototype.set(key, value)
Map.prototype.get(key):get方法读取key对应的键值，如果找不到key，返回undefined。
Map.prototype.has(key):has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
Map.prototype.delete(key):delete方法删除某个键，返回true。如果删除失败，返回false。

const map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2

Map.prototype.set(key, value)
key是键名，value是键值

const m = new Map();

m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined
m.set(function(){},'ok')   // 键是函数

Map支持链式写法

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

遍历方法
Map.prototype.keys()：返回键名的遍历器。
Map.prototype.values()：返回键值的遍历器。
Map.prototype.entries()：返回所有成员的遍历器。
Map.prototype.forEach()：遍历 Map 的所有成员。

五、数组的拓展

1、from( )

将伪数组转换成真正的数组

function add() {
            let arr = Array.from(arguments);
            console.log(arr);  //[1, 2, 3]
        }
        add(1, 2, 3);

实际应用中，例如：

把ul里的li全部取出来放到数组里

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
    let lis = document.querySelectorAll('li');
    console.log(lis);  //NodeList(4) [li, li, li, li]
    console.log(Array.from(lis));  // [li, li, li, li]
</script>

也可以直接使用拓展运算符

console.log([...lis]);  // [li, li, li, li]

2、of( )

将任意的数据类型，转换成数组

console.log(Array.of(3,11,20,[1,2,3],{id:1})); // [3, 11, 20, Array(3), {…}]

3、find( ) 和 findIndex( )

find()找出第一个符合条件的数组成员
findIndex()找出第一个符合条件的数组成员的索引

let find = [1, 2, -100, -30, 9, 20].find(n => n < 0);
console.log(find); // -100

let findIndex = [1, 2, -100, -30, 9, 20].findIndex(n => n < 0);
console.log(findIndex); // 2

4、数组的entries( )、keys( )、values( )遍历

都返回一个遍历器，可以使用for…of循环进行，可以参考Map和Set方法，感觉差不多

entries() 对键值对遍历
keys() 对键名遍历
values() 对值遍历

for (let index of ['a', 'b'].keys()) {
    console.log(index);
} // 0 1
for (let ele of ['a', 'b'].values()) {
    console.log(ele);
} // a b
for (let [index,ele] of ['a', 'b'].entries()) {
    console.log(index,ele);
} // 0 'a' 1 'b'

还可以用next()方法逐一遍历，到没有参数的时候返回undefined

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
console.log(entries.next().value); // undefined

5、includes( ) 判断某个元素是否在数组中

返回一个布尔值，表示某个数组是否包含给定的值，感觉有点类似与Set方法中的has()
其实是为了替代之前的indexOf，省的再去写判断条件indexOf() === -1

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true