ES6快速上手 —— API

前言

ES6新增了大量的api用于处理字符串，数组和对象等数据，本篇将对一些便利的api进行介绍。

字符串api

当我们需要查看一个字符串中是否包含另一个子串时，常使用indexOf方法。ES6又新增了几个新方法。

includes

let str = 'hello world!';

str.includes('w');  //true
str.includes('ein');  //false

检验一个字符串中是否包含一个子串，返回Bool值。

startsWith

1 2	str.startsWith('hel'); //true str.startsWith('whel'); //false

检测一个字符串是否以特定子串开始，返回Bool值。

endsWith

1 2	str.endsWith('world!'); //true str.endsWith('world'); //false

检测一个字符串是否以特定子串结束，返回Bool值

这三个方法都接收第二个参数，表示开始比对的位置。endsWith例外，endsWith中第二个参数，表示对前n个字符进行检测。

1
2
3

str.includes('hello', 6);  //false
str.startsWith('hello', 6);  //false
str.endsWith('hello', 5);  //true

padStart

'ein'.padStart(5, 'my');  //'myein'
'ein'.padStart(10, 'my');  //'mymymymein'

'ein'.padStart(2, 'my');  //'ein'
'ein'.padStart(5, 'my dear ');  //'myein'
'ein'.padStatr(5);  //'  ein'

padStart()用于字符串头部补全，接收两个参数，第一个参数表示字符串最小长度，第二个参数表示补全的字符串。
如果原字符串长度等于或大于指定的最小长度（第一个参数），则返回字符串。
如果用于补全的字符串和原字符串长度超过了指定的最小长度（第一个参数），则会截取补全字符串。
如果省去第二个参数，则使用空格进行补全。

padEnd

1
2
3

'ein'.padEnd(5, 'zwei');  //'einzw'
'ein'.padEnd(5);  //'ein  '
'ein'.padEnd(2, 'zwei');  //'ein'

padEnd()用于字符串尾部补全，接收两个参数，第一个参数表示字符串最小长度，第二个参数表示补全的字符串。
如果原字符串长度等于或大于指定的最小长度（第一个参数），则返回字符串。
如果用于补全的字符串和原字符串长度超过了指定的最小长度（第一个参数），则会截取补全字符串。
如果省去第二个参数，则使用空格进行补全。

数值api

ES6将一些全局方法(window对象的方法)，移植到了Number对象上面。如parseInt()和parseFloat()，但使用方法还是完全不变。

Number.isInteger

Number.isInteger(25);  //true
Number.isInteger(3.14);  //false
Number.isInteger(-3);  //true

Number.isInteger('15');  //false
Number.isInteger(3.0000000000000000000000000001);  //true

Number.isInteger用来判断一个数值是否为整数。
非数值类型，直接返回false,即isInteger不会对参数进行类型转换。
如果数值超过javascript的数值范围，判断结果可能会出错。

Math扩展

ES6在Math上进行了扩展，新增了17个方法。这里例举几个可能会使用到的方法。

Math.log10( )

1 2	Math.log10(1); //0 Math.log10(100); //2

Math.log2( )

1 2	Math.log2(2); //1 Math.log2(0.5); //-1

指数运算符（非api）

1 2	22 //4 23 //8

数组api

Array.from

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']

Array.from可以将类数组对象和可遍历对象转换为数组（Set和Map）。

Array.of

1
2
3

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

Array.of方法用于将一组值转换为数组，参数仅当数组成员处理，不会造成如Array( )所产生的歧义。

fill方法

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

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

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

fill方法应用在数组实例上，该方法注册在Array构造函数的原型对象上。用于使用给定值填充数组。fill方法还接收第二和第三个参数，用于指定填充的起始位置和结束位置。

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

如果填充值是一个对象，填充的值将引用这个对象，也就是说，如果修改数组的内容，相应的会修改填充对象，每个数组元素值都会被修改。

entries() | keys() | values()

ES6提供了三个新方法用于遍历数组。entries( )遍历数组的键值对，keys( )遍历数组的键，values( )遍历数组的值。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

includes

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

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

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法的第二个参数表示搜索的起始位置，如果第二个参数为负数，则表示倒数的位置。

对象api

Object.assign

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}

Object.assign( )方法用于对象合并，可以接收多个参数，第一个参数是合并的目标对象，后续对象参数都将合并到第一个对象中。
注意：assign方法在合并时，同名熟悉会进行覆盖，后面的同名属性会覆盖前面的属性。

应用场景：

Object.assign( )方法可以用于对象拷贝，但只进行浅拷贝，即仅对对象的第一级进行复制拷贝，深层次还是进行引用。

const b = {b: 1};
const obj1 = {a: b};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b  // 2
b.b = 1;

obj1.a.b  //1
obj2.a.b  //1

entries() | keys() | values()

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj);
//  ["foo", "baz"]

Object.values(obj);
//  ['bar', 42]

Object.entries(obj);
//  [['foo','bar'], ['baz', 42]]

对象同样支持通过entries， keys， values等方法来获取对象的键，值和键值对，并将其存储在一个数组中。键值对以二维数组的方式进行存储。

for…of

Iterator意为遍历器，ES6提供了for…of作为Javascript中所有遍历器接口的遍历方法。如此，我们可以用统一的方法来遍历这些数据结构。

数组

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

对象

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]
}