对象的扩展

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = {
   
   foo};
baz // {foo: "bar"}

// 等同于
const baz = {
   
   foo: foo};

对象的展开运算符

展开对象

const apple = {
   
   
    color: '红色',
    shape: '球形',
    taste: '甜'
};
console.log({
   
   ...apple});            // { color: '红色', shape: '球形', taste: '甜' }
console.log({
   
   ...apple} === apple);    // false

const apple = {
   
   
    color: '红色',
    shape: '球形',
    taste: '甜'
};

const pen = {
   
   
    color: '黑色',
    shape: '圆柱形',
    use: '写字'
};

// 新对象拥有全部属性，相同属性，后者覆盖前者
console.log({
   
   ...apple, ...pen});    // { color: '黑色', shape: '圆柱形', taste: '甜', use: '写字' }
console.log({
   
   ...pen, ...apple});    // { color: '红色', shape: '球形', use: '写字', taste: '甜' }

非对象的展开

console.log({
   
   ...1});            // {}
console.log(new Object(1));        // [Number: 1]
console.log({
   
   ...undefined});    // {}
console.log({
   
   ...null});            // {}
console.log({
   
   ...true});            // {}

Object.is()

Object.is('foo', 'foo')
// true
Object.is({
   
   }, {
   
   })
// false

Object.assign()

const target = {
   
    a: 1 };

const source1 = {
   
    b: 2 };
const source2 = {
   
    c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

字符串的扩展

字符串拼接的巨大区别

const person = {
   
   
    name: 'zjr',
    age: 18,
    sex: '男'
};

const info =
    '我的名字是：' + person.name +
    '，性别是：' + person.sex +
    '，今年：' + person.age + '岁';

console.log(info);

// 我的名字是：zjr，性别是：男，今年：18岁

const person = {
   
   
    name: `zjr`,
    age: 18,
    sex: `男`
};

const info = `我的名字是：${person.name}，性别是：${person.sex}，今年：${
     
     person.age}岁`;

console.log(info);

// 我的名字是：zjr，性别是：male，今年：18岁

includes(), startsWith(), endsWith()

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

repeat()

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

padStart()，padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

trimStart()，trimEnd()

trimStart()和trimEnd()这两个方法，它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

运算符扩展

指数运算符

2 ** 2 // 4
2 ** 3 // 8

Set

Set 是一系列无序、没有重复值的数据集合。

const s = new Set();
s.add(1);
s.add(2);

// Set 中不能有重复的成员
s.add(1);
console.log(s);        // Set(2) { 1, 2 }

// Set 没有下标去标识每一个值，所以 Set 是无序的，也不能像数组那样通过下标去访问 Set 的成员。

方法

add 方法

const s = new Set();
s.add(0);
// 可以连写
s.add(1).add(2).add(2).add(3);
console.log(s);        // Set(4) { 0, 1, 2, 3 }

has 方法

const s = new Set();
s.add(0);
s.add(1).add(2).add(2).add(3);
console.log(s.has(1));    // true
console.log(s.has(4));    // false

delete 方法

const s = new Set();
s.add(0);
s.add(1).add(2).add(2).add(3);
s.delete(2);
// 使用 delete 删除不存在的成员，什么都不会发生，也不会报错
s.delete(4);
console.log(s);    // Set(3) { 0, 1, 3 }

clear 方法

const s = new Set();
s.add(0);
s.add(1).add(2).add(2).add(3);
s.clear();
console.log(s);    // Set(0) {}

forEach 方法

const s = new Set();
s.add(0);
s.add(1).add(2).add(2).add(3);

s.forEach(function (value, key, set) {
   
   
    // Set 中 value = key，原因：好多数据结构都有 forEach 方法，为了方便统一，所以参数是统一的，但是参数的意义各有不同
    // set 就是 s 本身
    console.log(value, key, set === s);
    console.log(this);
});

/*
0 0 true
Window
1 1 true
Window
2 2 true
Window
3 3 true
Window 
*/

size 属性

const s = new Set();
s.add(0);
s.add(1).add(2).add(2).add(3);

console.log(s.size);    // 4

应用

数组去重

const s = new Set([1, 2, 1]);
console.log(s);            // Set(2) { 1, 2 }
console.log([...s]);    // [ 1, 2 ]

字符串去重

const s = new Set('abbacbd');
console.log(s);                    // Set(4) { 'a', 'b', 'c', 'd' }
console.log([...s].join(''));    // abcd

因此使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

Map

Map 可以理解为：“映射”。

Map 和 对象 都是键值对的集合。

// 键 ——> 值，key ——> value
// 对象：
const person = {
   
   
    name: 'alex',
    age: 18
};

// Map：
const m = new Map();
m.set('name', 'alex');
m.set('age', 18);
console.log(m);        // Map(2) { 'name' => 'alex', 'age' => 18 }

// Map 和 对象 的区别：
// 对象一般用字符串当作 “键”（当然在书写时字符串键的引号可以去掉）.
// Map 中的 “键” 可以是一切类型。
const m = new Map();
m.set(true, 'true');
m.set({
   
   }, 'object');
m.set(new Set([1, 2]), 'set');
m.set(undefined, 'undefined');
console.log(m);
/*
Map(4) {
  true => 'true',
  {} => 'object',
  Set(2) { 1, 2 } => 'set',
  undefined => 'undefined'
}
*/

方法

set 方法
set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

const m = new Map();

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

get 方法
get方法读取key对应的键值，如果找不到key，返回undefined。

const m = new Map();

const hello = function() {
   
   console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数

m.get(hello)  // Hello ES6!

has 方法
has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

delete 方法
delete方法删除某个键，返回true。如果删除失败，返回false。

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false

clear 方法
clear方法清除所有成员，没有返回值。

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

map.size // 2
map.clear()
map.size // 0

forEach 方法

m.forEach(function (value, key, map) {
   
   
    console.log(this);
}, document);

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

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

map.size // 2