ES 6 系列 - 对于常用对象的拓展 api

本篇中学习并记录可能会比较常用的 api ，详细请自行查找相关资料。

 

一、字符串的拓展

　　es 6 加强了对于 Unicode 的支持。javascript 允许采用 \uxxxxx 的方式表示一个字符，其中 xxxx 表示字符的 Unicode 码点。所以这就有范围限制了（\u0000 ~ \uFFFF）。

 

　　1. for ... of ...

　　　　这个遍历器最大的优点是支持大于 \uFFFF 的码点，传统 for 循环则不支持。

 

　　2. string.at(Number param) 与 string.charAt(Number param) -- 似乎还只是个提案，C\F 也得不到正确的值

　　　　at() 支持大于 \uFFFF 的码点，如：

?

1 2 3 4

'𠮷'.charAt(0) "�"  // 乱码   '𠮷'.at(0) // "𠮷"

 

　　3. include()，startsWith()，endsWith()

　　　　es 5 只有 indexOf 来判断一个字符串是否包含另一个，es 6 另外提供了三个：

　　　　　　- includes( String param [, Number param1] ) : 返回 boolean ,表示是否找到了参数字符串；

　　　　　　- startsWith( String param [, Number param1] ) : 返回 boolean ,表示参数字符串是否在原字符串头部；

　　　　　　- endsWith( String param [, Number param1] ) : 返回 boolean ,表示参数字符串是否在原字符串尾部；

　　　　其中，第二个参数表示搜索起始位置。

?

1 2 3 4 5

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

 　　　　上例中， endsWith 是从原字符串尾部向头部开始查询，这点需要注意。

 

　　4.repeat( Number param )

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // "" // 参数是 NaN ，等价于 0 'na'.repeat(NaN) // "" // 参数是字符串， 则会先转换成数字。（最终参数为0） 'na'.repeat('na') // ""     // 如果参数是小数，会被向下取整 'na'.repeat(2.9) // "nana"     // 如果参数为小于等于 -1 的数或者是 Infinity,会报错 'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError     // 如果参数在 -1 ~ 0，则等价于 0，原因是会先进行取整运算 'na'.repeat(-0.9) // ""

 

　　5.模板字符串

　　es 5 时，如果字符串中有变量需要拼接，一般都会写成：

?

1	'xxxxxxxx' <br>+ basket.name <br>+ 'xxxxxxx' <br>+ 'basket.count' <br>+ 'xxxxxxx' ...

　　而 es 6 增强了字符串的写法，我们称之为模板字符串。模板字符串的常用写法：

?

1 2 3 4

`xxxxxxxx ${basket.name} xxxxxx  xxx ${basket.count} xxxxxxxxxxxx `   // 注意：` 是反引号（键盘 Tab 上面的那个），不是单引号

　　注意：因为 `` 支持解析多行字符串（只要在两个反引号之间），故换行、空格、缩进等，都会被保留，如果想要去除，可以用 trim() 方法；

　　用途或者特性：

　　　　(1) `${}`   {}里面可以放入任意 js 表达式，可以进行运算，以及引用对象属性；

　　　　(2) `${}`   {}里面可以调用函数；

　　　　(3) `${ ${} }` 可以嵌套；

　　模板字符串的写法上限也比较高，此处只记录基础写法，如有需求，请查找详细资料。

　　　　

二、函数的拓展

　　除之前文章中记录的函数参数的解构赋值时可以给参数指定默认值外，还有其他一些新特性：

　　1. rest 参数：　（形式为  ...paramName）用于获取函数的多余参数，这样就不需要 arguments 对象了。 rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中，即可实现传入任意多的参数。

?

1 2 3 4 5 6 7 8 9 10 11

function add(...values) {   let sum = 0;     for (var val of values) {     sum += val;   }     return sum; }   add(2, 5, 3) // 10

　　需要注意的是，rest 参数之后不能再有其他参数，否则报错。

 

　　2.箭头函数：  =>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 一个参数 var f = v => v;   // 等同于 var f = function (v) {   return v; };     // 无参数或者多个参数 var f = () => 5; // 等同于 var f = function () { return 5 };   var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) {   return num1 + num2; };

　　最常用的写法：

?

1 2 3

var abc = (parm) => {     // code         }

　　注意：

　　　　（1）箭头函数中使用 this 与普通函数中的 this 所指代的对象有差异；

　　　　（2）箭头函数支持多层嵌套；

 

三、数组的拓展

　　1.拓展运算符：（...），这个符号相当于 rest 参数的逆运算，将一个数组转换成用逗号分割的参数序列。

?

1 2 3 4 5

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

　　拓展运算符后面可以放置表达式：

?

1 2 3 4

const arr = [   ...(x > 0 ? ['a'] : []),   'b', ];

　　如果拓展运算符后面是一个空数组，则不产生任何效果。

　　用途：

　　　　（1）复制数组

?

1 2 3 4 5 6 7 8 9 10 11 12

// es 5 的写法 const a1 = [1, 2]; const a2 = a1.concat();   a2[0] = 2; a1 // [1, 2]   // es 6 的写法 const a1 = [1, 2]; const a2 = [...a1];   // 这样，a1, a2 是两个数组对象，只是他们的内容相同。（a1 与 a2 中存放的是两个不同的内存地址）

　　　　（2）合并数组

?

1 2 3 4 5 6 7 8 9 10 11

const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e'];   // ES5 的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ]   // ES6 的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

　　　　注意：以上两种方法都是浅拷贝，及如果数组中的元素是对象的话，那么修改原数组中对象元素的内容，则拷贝出来的数组中对象元素的内容也会变。

　　　　（3）与解构赋值结合

　　　　（4）字符串：将字符串转化成真正的数组。

?

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

　　　　（5）find()，用于找出第一个符合条件（即回调函数）的数组成员，并将该成员返回，如果没有，则返回 undefined。

?

1 2 3

[1, 5, 10, 15].find((value, index, arr) => {   return value > 9; })  // 10<br><br>// 返回第一个大于 9 的数组成员

　　　　　　回调函数支持三个函数，如上例所示。

　　　　　findIndex() 与 find 类似，不过返回值是那个数组成员的位置，如果没有返回 -1。

　　　　（6） includes() 返回值 Boolean ，表示数组是否包含给定值。第二个参数便是搜索起始位置： 负数表示从末尾开始。

 

四、函数的拓展

　　1.对象属性的简写。

　　　　es 6 中，允许在对象中，直接写变量，这是，属性名为变量名，属性值为变量值。

?

1 2 3 4 5

function f(x, y) {   return {x, y}; }   f(1, 2) // Object {x: 1, y: 2}

 

　　2.对象中方法的简写。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// es5 const o = {   method() {     return "Hello!";   } };   // es6 const o = {   method: function() {     return "Hello!";   } };

 　　以上的简洁写法用途十分广，特别是在 Common Js 模块输出/引入一组变量时，经常使用对象属性的简写。

 

　　3. object.is()

　　　　该方法在 es 5 的 === （严格相等的基础之上），新增两条规则：

?

1 2 3 4 5 6 7

// es 6 Object.is(+0, -0) // false Object.is(NaN, NaN) // true   // es 5 +0 === -0 //true NaN === NaN // false