ES6学习

字符串扩展

for...of

优点正确遍历字符串

for (let codePoint of 'foo') {
  console.log(codePoint)
}
let text = String.fromCodePoint(0x20BB7);
//即使在存在Unicode字符时依然可以正确遍历
for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}

at取代charAt

同样是支持Unicode

//CSDN无法显示这个字符。。。。
//charAt
'abc'.charAt(0) // "a"
'��'.charAt(0) // "\uD842"
//at
'abc'.at(0) // "a"
'��'.at(0) // "��"

includes、startsWith、endsWith

作用顾名思义，但IE未实现includes

let s = 'Hello world!';

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

repeat

方法返回一个新字符串，表示将原字符串重复n次。

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

模板字符串

//反引号表示，变量使用${}的形式

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5" 

 let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

正则的扩展

新增u修饰符

支持unicode编码的匹配

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

新增y修饰符

叫做“粘连”（sticky）修饰符。
y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而y修饰符确保匹配必须从剩余的第一个位置开始，这也就是“粘连”的涵义。
实际上，y修饰符号隐含了头部匹配的标志^。

const REGEX = /a/gy;
'aaxa'.replace(REGEX, '-') // '--xa'

'a1a2a3'.match(/a\d/y) // ["a1"]
'a1a2a3'.match(/a\d/gy) // ["a1", "a2", "a3"]

flags属性

ES6 为正则表达式新增了flags属性，会返回正则表达式的修饰符。

// ES5 的 source 属性
// 返回正则表达式的正文
/abc/ig.source
// "abc"

// ES6 的 flags 属性
// 返回正则表达式的修饰符
/abc/ig.flags
// 'gi'

数组的扩展

扩展运算符 ...

主要功能展开成序列

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

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

取代apply

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

...的应用

//赋值数组
const a2 = [...a1];
//合并数组
[...arr1, ...arr2, ...arr3]
//与解构赋值结合，数组的赋值，扩展运算符只能在最后一个
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
//字符串的应用
[...'hello']
[...'x\uD83D\uDE80y'].length // 3，Unicode正确识别'x\uD83D\uDE80y'.length是4

Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

对象的扩展

Object.assign

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

const target = { a: 1 };

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

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

存在重复的key的时候，后面的会覆盖前面的

const target = { a: 1, b: 1 };

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

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

注意：
1. 是浅拷贝非深拷贝；
2. 嵌套对象遇到，同名属性直接替换；
3. 数组会被当作对象处理，以index为相应的key；