ECMAScript 6 字符串和数值的拓展

一、模板字符串

在我们的变成过程中，有时候我们需要在字符串中编写大量的HTML结构代码：

const obj = {
    img: 'http://www.baidu.com/test.png',
    title: '离思',
    subTitle: '取次花丛懒回顾，半缘修道半缘君。',
    mess: ['唐','元稹']
};

let el = '<div>'+
'<img src="'+ obj.img +'">'+
'<h3>'+ obj.title +'</h3>'+
'<p>'+obj.subTitle+'</p>'+
'<div><span>'+ obj.mess[0] +'</span><span>'+ obj.mess[1] +'</span></div>'+
'</div>';

这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题:

const obj = {
    img: 'http://www.baidu.com/test.png',
    title: '离思',
    subTitle: '取次花丛懒回顾，半缘修道半缘君。',
    mess: ['唐','元稹']
};

let el = `
    <div>
        <img src="${obj.img}">
        <h3>${obj.title}</h3>
        <p>${obj.subTitle}</p>
        <div>
            <span>${obj.mess[0]}</span>
            <span>${obj.mess[1]}</span>
        </div>
    </div>
`;

模板字符串是增强版的字符串，用反引号(``)标识，它可以当做普通字符串，也可以用来定义多行字符串，或者在字符串中嵌入变量。
注:

• 如果模板字符串中要使用反引号，那么需要使用反斜杠转义。
• 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出中。
• 在模板字符串中嵌入变量，需要将变量名写在${}中。
• ${}的大括号中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
• 如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
• 模板字符串甚至还能嵌套。

字符串的新增方法

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

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

let s = 'Hello world!';
s.startsWith('Hello');
s.endsWith('!');
s.includes('o');

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';
s.startsWith('world', 6); 
s.endsWith('Hello', 5);
s.includes('Hello', 6);

拓展: 为String类添加一个loIncludes()函数，实现和includes()一样的效果。

String.prototype.loIncludes = function(str, i) {
    const newStr = this.substr(i);
    const currI = newStr.indexOf(str);
    if(currI < 0 || newStr == '') return false;
    return true;
};

let testStr = 'hello world';
const res = testStr.loIncludes('o');

二、字符串的实例方法

1. repeat()返回一个新字符串，表示将原来的字符串重复了若干次。

'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"
'na'.repeat(0); // ""
'na'.repeat(2.9); // "nana"
'na'.repeat(Infinity); // RangeError
'na'.repeat(-1); // RangeError

2. 实例方法：trimStart()，trimEnd()。

const s = '  abc  ';
s.trim(); // "abc"
s.trimStart(); // "abc  "
s.trimEnd(); // "  abc"

数组的拓展

一、拓展运算符

扩展运算符(spread)是三个点(…)，将一个数组转为用逗号分隔的参数序列(用非循环的代码方式展开一个数组)。

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

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

[...document.querySelectorAll('div')]; // [<div>, <div>, <div>]

拓展运算符的应用

1. 当函数形参不确定时，可以代替函数内部的arguments对象。
如封装一个求若干number的和的函数。

// 在旧的语法中，我们会使用arguments对象去接受数量不定的形参
function getSum() {
    let sum = 0;
    for(let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
getSum(40, 2, 39); // 81
getSum(88, 4); // 92

这样处理可以完成效果，但是arguments对象本身不是数组，不能调用数组的函数，只能去循环它，如果代码需求中需要数组处理，那么arguments对象不能调用数组的代码，代码的逻辑处理就会很麻烦。所以ES6建议用拓展运算符(…)代替对于arguments对象的使用。并且把由拓展运算符声明的形参称为rest参数。

// 求若干个数的和
function getSum(...arr) {
    let sum = 0;
    for(let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}
getSum(40, 2, 39); // 81
getSum(88, 4); // 92

注意: 虽然利用rest参数有时候代码和效果都和arguments没什么区别，但是rest参数是数组，可以调用数组相关函数，arguments是个对象，不能调用数组相关函数。
2. 数组复制。
数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

const a1 = [1, 2];
const a2 = a1;

ES5 只能用变通方法来复制数组:

const a1 = [1, 2];
const a2 = a1.concat();

扩展运算符提供了复制数组的简便写法:

const a1 = [1, 2];

// 写法一
const a2 = [...a1];

// 写法二
const [...a3] = a1;

3. 合并数组。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
const newArr1 = arr1.concat(arr2, arr3);

// ES6 的合并数组
const newArr2 = [...arr1, ...arr2, ...arr3];

4. 与解构赋值结合使用。

const [a, ...b] = [1, 2, 3, 4, 5];

const [c, ...d] = [];

const [e, ...f] = ["foo"];

// 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const [...g, h] = [1, 2, 3, 4, 5]; // 报错

const [i, ...j, k] = [1, 2, 3, 4, 5]; // 报错

5. 将字符串展开成一个数组。

const list = [...'hello'];  

二、Array.from()函数

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

Array.from({ length: 3 }); // [ undefined, undefined, undefined]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组:

let obj = {
    '0': 4,
    '1': 30,
    '2': 9,
    length: 3
};
Array.from(obj, (x) => x * x); // [16, 900, 81]

三、Array.of()函数

Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

四、数组实例的copyWithin()

数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length);

它接受三个参数:

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

这三个参数都应该是数值，如果不是，会自动转为数值。

[1, 2, 3, 4, 5].copyWithin(0, 3); //[4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, -2, -1); // [4, 2, 3, 4, 5]

五、数组实例的 find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0); // -5

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}); // 10

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}); // 2

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

六、数组实例的 fill()

fill方法使用给定值，填充一个数组。

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

new Array(3).fill(7); // [7, 7, 7]

上面代码表明，fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

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

七、数组实例的 includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

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

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN); // -1
[NaN].includes(NaN); // true

八、数组实例的 flat()，flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

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

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

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

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

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数

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

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]); // [2, 4, 3, 6, 4, 8]

flatMap()只能展开一层数组。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。

arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg]);

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。

九、数组的空位

ES6 明确会将数组中的空位转为undefined。

对象的拓展和对象的新增方法

一、属性的简洁表示法

ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

const foo = 'bar';
const baz = {foo};

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

除了属性简写，方法也可以简写。

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于
/* const o = {
  method: function() {
    return "Hello!";
  }
}; */

二、属性名表达式

JavaScript 定义对象的属性，有两种方法。

// 方法一
obj.foo = true;

// 方法二
// obj['a' + 'bc'] = 123;

但是，如果使用字面量方式定义对象（使用大括号），在 ES5 中只能使用方法一（标识符）定义属性。

var obj = {
  foo: true,
  abc: 123
};

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

表达式还可以用于定义方法名。

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

三、super关键词

我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    console.log(this.foo);
    console.log(super.foo);
  }
};
// 设置obj的新原型为proto
Object.setPrototypeOf(obj, proto);
obj.find(); // this.foo: 'world', super.foo: 'hello'

上面代码中，对象obj.find()方法之中，通过super.foo引用了原型对象proto的foo属性，但是this.foo返回的依旧是当前对象的foo属性。
注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

// 报错
const obj = {
  foo: super.foo
}

// 报错
const obj = {
  foo: () => super.foo
}

// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

四、对象的解构赋值

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

上面代码中，变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键（a和b），将它们连同值一起拷贝过来。

由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。

let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

解构赋值必须是最后一个参数，否则会报错。

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

对象的拓展运算符

对象的扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };