每天一点ES6(三)

xiaoxiao2021-02-28  88

1includes(),startsWith(), endsWith()

includes():返回布尔值,表示是否找到了参数字符串。

startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。

endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部

2Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

它会返回五种值。

参数为正数,返回+1;

参数为负数,返回-1;

参数为0,返回0;

参数为-0,返回-0;

其他值,返回NaN。

 

3repeat方法返回一个新字符串,表示将原字符串重复n次,参数如果是小数,会被取整。

'x'.repeat(3) // "xxx"

'hello'.repeat(2) // "hellohello"

'na'.repeat(0) /

 

4、模板字符串

模板字符串中嵌入变量,需要将变量名写在${}之中。

 

5Math.trunc()

Math.trunc方法用于去除一个数的小数部分,返回整数部分。

 

6name属性

函数的name属性,返回该函数的函数名。

 

扩展运算符(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>]

替代数组的 apply 方法

由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

// ES5 的写法 Math.max.apply(null,[14,3,77]) // ES6 的写法 Math.max(...[14,3,77]) // 等同于 Math.max(14,3,77);

另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。

// ES5写法 var arr1 =[0,1,2]; var arr2 =[3,4,5]; Array.prototype.push.apply(arr1, arr2); // ES6 的写法 var arr1 =[0,1,2]; var arr2 =[3,4,5]; arr1.push(...arr2);

(1)合并数组

扩展运算符提供了数组合并的新写法。

// ES5 [1,2].concat(more) // ES6 [1,2,...more]

(2)与解构赋值结合

扩展运算符可以与解构赋值结合起来,用于生成数组。

// ES5 a = list[0], rest = list.slice(1) // ES6 [a,...rest]= list

下面是另外一些例子。

const [first,...rest]=[1,2,3,4,5]; first // 1 rest  // [2, 3, 4, 5] const [first,...rest]=[]; first // undefined rest  // [] const [first,...rest]=["foo"]; first  // "foo" rest   // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last]=[1,2,3,4,5]; // 报错 const [first,...middle, last]=[1,2,3,4,5]; // 报错

(3)函数的返回值

JavaScript 的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateFields =readDateFields(database); var d =newDate(...dateFields);

上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date

(4)字符串

扩展运算符还可以将字符串转为真正的数组。

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

上面的写法,有一个重要的好处,那就是能够正确识别32位的Unicode字符。

'x\uD83D\uDE80y'.length // 4 [...'x\uD83D\uDE80y'].length // 3

上面代码的第一种写法,JavaScript会将32位Unicode字符,识别为2个字符,采用扩展运算符就没有这个问题。因此,正确返回字符串长度的函数,可以像下面这样写。

functionlength(str){   return[...str].length; } length('x\uD83D\uDE80y') // 3

凡是涉及到操作32位 Unicode 字符的函数,都有这个问题。因此,最好都用扩展运算符改写。

let str ='x\uD83D\uDE80y'; str.split('').reverse().join('') // 'y\uDE80\uD83Dx' [...str].reverse().join('') // 'y\uD83D\uDE80x'

上面代码中,如果不用扩展运算符,字符串的reverse操作就不正确。

 

(5)实现了 Iterator 接口的对象

任何 Iterator 接口的对象(参阅 Iterator 一章),都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div'); var array =[...nodeList];

(6)Map 和 Set 结构,Generator 函数

扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

let map =newMap([   [1,'one'],   [2,'two'],   [3,'three'], ]); let arr =[...map.keys()]; // [1, 2, 3]

 

6Array.from()

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

下面是一个类似数组的对象,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']

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1,,2,,3],(n)=> n ||0) // [1, 0, 2, 0, 3]

 

7Array.of()

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

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

8、数组实例的 find() findIndex()

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

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

上面代码找出数组中第一个小于0的成员。

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

上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

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

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

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

另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。

 

转载请注明原文地址: https://www.6miu.com/read-37020.html

最新回复(0)