Es6

Es6常用

• includes

'abc'.includes(a) //true
['a','b'].includes(a) //true

• 函数可以赋予初始值

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World

• 函数参数的单独作用域

let x = 1;
function f(y = x) { // x指向外层的lex x = 1
  let x = 2;
  console.log(y);
}
f() // 1

var x = 1;

function foo(x = x) { // let x = x ,报错，因为还未定义就使用x
  // ...
}

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // ReferenceError: x is not defined

数组

• 扩展运算符

Es6
Math.max(...[14, 3, 77])

• 解构赋值扩展只能放在最后一位

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

• 将字符串转化为数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

• Array.from

可以将类数组（带有length属性）的转换成数组
...只能将有部有iterator的转换成数组
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]


[...{legnth:3}] // 报错

[].slice.call(arguments)

• find(返回为true的那个值,findIndex

[1,2,3].find(item => item === 2) // 2

• fill

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

• flat

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

对象简写

var a = 1
var obj = {
    a,
    say(){
        console.log('hi');
        
    }
}
console.log(obj);// { a: 1, say: [Function: say] }
obj.say() // hi

• 表达式定义对象属性名

const foo = 'bar';
const baz = { [foo]: 'abc'};//{bar: 'abc'}

• descriptor

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

• 遍历自身

for in 会便利原型上
Object.keys() //自身
JSON.stringify() //自身
Object.assign() //自身

• super表对象的原型（prototype）

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

• 对象解构赋值，扩展运算必须是最后一个

let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误

• 扩展运算符和assign concat一样浅赋值

var obj = {
    age:1,
    info:{
        name:'zs'
    }
}
var a = {...obj}
a.age = 2
a.info.name = 'ww'
console.log(a); //{ age: 2, info: { name: 'ww' } }
console.log(obj);// { age: 1, info: { name: 'ww' } }

• 区分，数组和对象，使用对象扩展运算符

let foo = { ...['a', 'b', 'c'] }; 
let fooa = [ ...['a', 'b', 'c'] ];
console.log(foo); // { '0': 'a', '1': 'b', '2': 'c' }
console.log(fooa);// // [ 'a', 'b', 'c' ]

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

• Object.assing必须传入对象（不是会自动转换，转换不了报错）

var res = Object.assign(2)
console.log(res); // [Number: 2]


Object.assign(undefined) // undefined和null无法转换成对象报错
Object.assign(null) // 报错

• Object.keys/values/entries,遍历时使用

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

class

• class的this

Es6中，const let 申明的全局变量不属于顶层对象window，而是undefined
class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger; // 这里的this不再指向Logger实例而是运行环境，也不是指向window
printName(); 



// 解决办法
class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}

export import

• default

test.js
var obj = {age:1}
export default obj // export {obj as default}

import obj from './test.js' // import { default as obj } from './test.js


所以export default后面不能跟变量
// 错误
export default var a = 1;

Set Map

• set

set.keys 等价于set.values (set没有键)

let set = new Set([1, 4, 9]);
console.log(set.keys()); // { 1, 4, 9 }

• weakSet

1 只能存放对象
2 weakset里面的对象属于弱引用，所以垃圾回收机制不会对他记一次数

所以一旦weakset里面的对象不再引用，其内存就会被回收，适合用来存放DOM
是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

• map

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

• map取值的时候，同一个对象的引用菜被视为同一个键

const map = new Map();

map.set(['a'], 555);
console.log(map);  //Map { [ 'a' ] => 555 }
console.log(map.get(['a'])); // undefined ,因为每个对象都是唯一的，有不同的地址
// 上面结果好比
let a = []
let b = []
a === b // false


const map = new Map();
let arr = ['a']
map.set(arr, 555);
console.log(map);  //Map { [ 'a' ] => 555 }
console.log(map.get(arr)); // 555
  

• 同样值2个实例，被视为2个键，Map的键是个内存地址绑定的

const map = new Map();

const k1 = ['a'];
const k2 = ['a'];

map
.set(k1, 111)
.set(k2, 222);

map.get(k1) // 111
map.get(k2) // 222
***

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

• Map.prototype.has(key) //判断是否有某个键

const m = new Map();

m.set('edition', 6);
m.has('edition')     // true

• Map.prototype.delete(key)

let m = new Map()
m.set('age',1)
console.log(m.delete('age')); //true,表示删除成功
console.log(m.delete('name'));// false,表示没有这个键

• Map的遍历

Map本身没有map filter方法，只有forEach

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

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

• Map与数组互相转换

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]


new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }