es6

js/jquery

===

解构赋值

数组解构赋值

将数组的每一项进行解构

console.log(...[1, 2, 3])
1, 2, 3

对多个变量同时赋值
eg1：

let [x, y, z] = [4, 5, 6];
console.log(x, y, z);
//4  5  6

eg2:

如果数组本身还有嵌套，注意嵌套的层次和位置要保持一致

let [x, [y, z]] = [4, [5, 6]]
console.log(x, y, z);
//4  5  6

eg3:

还可以忽略某些元素进行赋值

let [, , z] = [4, 5, 6];
console.log(z);
//6

对象解构赋值

eg:

let info = {
    name: 'zmm',
    sex: 'girl',
    address: {
        province: 'zhejiang',
        city: 'hagnzhou',
        code: 330223
    },
};

eg1:

let {name, sex, address:{city, town}} = info;
console.log(name, sex, address, city, town);

//zmm
//girl
//address is not defined
//hangzhou
//undefined

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined

eg2:
解构赋值可以使用默认值，避免不存在的属性返回undefined的问题

let {name, town = 'hecun', sex = 'boy'} = info;
console.log(name, town, sex);

//zmm
//hecun
//girl

如果info没有town属性，则town为'hecun'

eg3:

let {address} = info;
console.log(address);

//
{
    province: 'zhejiang',
    city: 'hagnzhou',
    code: 330223
}

eg4:如果要使用的变量名和属性名不一致，可以用下面的语法获取:

let {name:id, sex} = info;
console.log(id)

//zmm

eg5:

let name, sex;
({name, sex}) = info;

如果变量已经被提前声明了，则要多加一对小括号;[数组不会有这种情况]

使用场景

1.交换变量
eg:

let x = 2;
let y = 3;
[x, y] = [y, x];
console.log(x, y);
//3
//2

2.

Set

把set解构出来就是数组
set中成员的值是唯一的
Array.from()可以将Set结构转为数组
Set结构没有键名只有键值，也可以认为键名和键值是同一个值

初始化一个set

const s = new Set();

接受一个数组作为参数用来初始化

const s = new Set([1, 2, 3, 5]);

Set的属性和方法

属性：

size: 返回set实例的成员总数。

eg:

const s = new Set([1, 2, 3, 5]);
console.log(s.size);  //4

方法：

add(): 添加值,返回Set结构本身；
delete(): 删除值，返回一个布尔值，代表是否删除成功；
has(value)： 返回一个布尔值，表示value是否为Set成员；
clear():清除所有成员，没有返回值；

eg:

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

遍历操作

keys(): 返回键名
values(): 返回键值
entries(): 返回键值对
forEach(): 使用回调函数遍历每个成员

eg: keys()

let set = new Set(['apple', 'banana', 'orange']);
for(let item of set.keys()){
    console.log(item);
}
//apple
//banana
//orange

eg: values()

let set = new Set(['apple', 'banana', 'orange']);
for(let item of set.values()) {
    console.log(item);
}
//apple
//banana
//orange

eg: entries()

let set = new Set(['apple', 'banana', 'orange']);
for(let item of set.entries()) {
    console.log(item);
}
//["apple", "apple"]
//["banana", "banana"]
//["orange", "orange"]

Set默认遍历器生成函数即values();
eg:

let set = new Set(['apple', 'banana', 'orange']);
for(let item of set) {
    console.log(item);
}
//apple
//banana
//orange

eg: forEach()

let set = new Set(['apple', 'banana', 'orange']);
set.forEach((value, key, set) =>{
    console.log(key, value);
})
//apple apple
//anana banana
//orange orange

更多好玩的使用【关于数组】

set的成员都具有唯一性；
set解构出来是个数组

1.数组去重

const set = new Set([1, 2, 4, 5, 4, 3, 2]);
let a = [...set]
console.log(a);//[1, 2, 4, 5, 3]

2.两个数组取交集

let a = new Set([1, 2, 3, 4, 5]);
let b = new Set([3, 4, 5, 6, 7]);
let result = [...a].fliter(item => b.has(item));
console.log(result);//[3, 4, 5]；

3.取出属于a但不属于b的元素

let a = new Set([1, 2, 3, 4, 5]);
let b = new Set([3, 4, 5, 6, 7]);
let result = [...a].fliter(item => !b.has(item));
console.log(result);//[1, 2]；

4.两个数组取并集

let a = new Set([1, 2, 3, 4, 5]);
let b = new Set([3, 4, 5, 6, 7]); 
let result = [...new Set([...a, ...b])];
console.log(result);// [1, 2, 3, 4, 5, 6, 7]
console.log([...a, ...b])// [1, 2, 3, 4, 5, 3, 4, 5, 6, 7]

Map

Map结构，一组键值对的集合，键不一定是字符串，你爱啥啥。

初始化一个Map

不仅仅是数组，任何具有 Iterator接口、且每个成员都是一个双元素的数组的数据结构都可以当作Map构造函数的参数。

1.数组初始化
eg:

const map = new Map([
    ['name', 'zmm'],
    ['sex', 'girl']
]);

2.Set生成
eg:

const set = new Set([
    ['name', 'zmm'],
    ['sex', 'girl']
]);
const map = new Map(set);

3.Map 生成

const mapOld = new Map([
    ['name', 'zmm'],
    ['sex', 'girl']
]);
const map = new Map(mapOld);

以上生成的三种结果都是一样的Map结构

Map的属性和方法

属性：size返回 Map 结构的成员总数。
eg:

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

方法：

set(key, value)： 像Map中添加成员;
get(key)： 获取key对应的值；返回value（如果key不存在，则返回undefined）；
has(key)： 判断是否存在key ,返回布尔值；
delete(key): 删除key,返回布尔值；
clear()”：除所有成员，没有返回值。

eg:

const map = new Map();
const key = {name: 'mm'};
const val = {sex: 'girl'};
map.set(key, val);
map.get(key);//{sex: 'girl'}
map.has(key);//true
map.delete(key);//true
map.has(key);//false
map.delete(key);false

只有对同一个对象的引用，Map 结构才将其视为同一个键

eg:

const map = new Map();
map.set({name: 'zmm'}, 'content');
map.get({name: 'zmm'});//undefined

上面代码的set和get方法，表面是针对同一个键，但实际上这是两个值，内存地址是不一样的，因此get方法无法读取该键，返回undefined。

同理，同样的值的两个实例，在 Map 结构中被视为两个键

eg:
const map = new Map();
map.set({name: 'zmm'}, 'content');
map.set({name: 'zmm'}, 'hahaha');
map.size;//2

but

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

eg:

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

遍历操作

keys(): 返回键名
values(): 返回键值
entries(): 返回键值对
forEach(): 使用回调函数遍历每个成员

eg:

const map = new Map([
    ['name', 'zhoumm'],
    ['sex', 'girl'],
]);

key():

for (let item of map.keys()) {
    console.log(item);
}
//name
//sex

values():

for (let item of map.values()) {
    console.log(item);
}
//zhoumm
//girl

entries:

for (let item of map.entries()) {
    console.log(item);
}

//["name", "zhoumm"]
//["sex", "girl"]

forEach:

map.forEach(function(value, key, map) {
  console.log(value, key, map);
})；

//zhoumm name
//girl sex

forEach方法还可以接受第二个参数，用来绑定this

const reporter = {
  report: function(key, value) {
    console.log(key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

上面代码中，forEach方法的回调函数的this，就指向reporter。

Map 结构转为数组结构

eg:

const map = new Map([
    ['name', 'zhoumm'],
    ['sex', 'girl'],
]);

console.log([...map]);
//[['name', 'zhoumm'], ['sex', 'girl']]

console.log([...map.keys()]);
//['name', 'sex']

console.log([...map.values()]);
//['zhoumm', 'girl']

Object.defineProperty()

顾名思义Object.defineProperty()：对象定义属性；
该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

eg:

var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});


// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});

语法:

Object.defineProperty(obj, prop , descriptor)

参数：

obj： 需要被操作的目标对象；
prop: 目标对象需要定义的或者修改的属性的名称；
descriptor: 被定义或修改的属性的描述符；

descriptor属性描述符的可选键值

value

该属性对应的值。任何有效的js值【数值、对象、函数】。默认undefined

configurable

当且仅当configurable为true时，该属性的描述符才能被改变，同时该属性也能从对象上被删除。
如果为false，则任何尝试删除目标属性或修改属性以下特性（writable, configurable, enumerable）的行为将被无效化。

writable

当且仅当该属性的writable为true时，该属性才能被赋值运算符改变

enumerable

当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性（for in）中

get

一个给属性提供getter的方法，默认undefind。该方法的返回值被用作属性值

set

一个给属性提供setter的方法，默认为undefined。该方法接受唯一参数，并将该参数的新值分配给该属性

属性描述符

对象是一个属性集合，对象的基本特征是属性名和属性值，es5增加了属性描述符【configurable，writable、enumerable】；数据属性描述符和存取描述符只能存在一个，不能混合使用

数据属性描述符

【value, writable, enumerable, configurable】

存取描述符

【get, set, enumerable, configurable】

数据绑定

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <p>你好， <span id="nickName"></span></p>
        <div id="introduce"></div>
    </div>
</body>
</html>
<script>
    var userInfo = {};
    Object.defineProperty(userInfo, 'nickName', {
        get(){
            return document.getElementById("nickName").innerHTML;
        },
        set(nick) {
            document.getElementById("nickName").innerHTML = nick;
        }
    }); 
    userInfo.nickName = 'mmmm';
</script>