ES6-数组拓展

97 阅读4分钟

数组拓展

Array.of()声明数组

数组声明的时候有时候会有歧义,用Array.of()就可以解决这个问题

console.log(new Array(3));  //[empty x 3]
console.log(Array.of(3));  //[3]

Array.from() 转化数组

参数:arrayLike、mapFn(map方法)、thisArg(this指向)

将类数组或者部署了iterator接口的对象转化为数组

ES5是用数组原型上的slice方法转化,ES6直接用Array.from()就行

var oList = document.getElementsByClassName('p');
console.log([].slice.call(oList));
console.log( Array.from(oList));

部署了iterator接口的对象(见上例)

console.log(Array.from(obj)); //[1,2,3,4,5,6,7]
console.log(Array.from(obj, function mapper(val, idx){
    return val * 2;  //[2,4,6,8,10,12,14]
}))

Array.prototype.fill(val, start, end)

修改原数组,start默认从0开始,end默认为this.length,没有指定后两个参数,就全部替代

let arr1 = [1,2,3,4];
let arr = arr1.fill(5);
console.log(arr, arr1); //都是[5,5,5,5]

区间左闭右开

let arr1 = [1,2,3,4];
arr1.fill(5, 1, 2);
console.log(arr1); // [1,5,3,4]

如果起始和结束一样,就不处理

负数

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

如果start给的数字不合法,就用默认的0

arr1.fill(5, NaN, -2);
console.log(arr1); // [5,5,3,4]

如果start和end都不合法,不做任何处理

还要注意的是这个方法是个通用方法,也可以对对象强制指定

console.log([].fill.call({lenngth: 3}, 4)); //{0: 4, 1: 4, 2: 4}

长度为3的对象强制填充4

[].keys()索引 / [].values()值 / [].entries()键值对

Object.keys()/Object.values()/Object.entries()返回数组,数组自然可以各种循环,for循环、for of都可

let obj = {a: 1, b: 2};
console.log(Object.keys(obj)); //["a", "b"]

[].keys() / [].values() / [].entries() 返回迭代器对象

let arr = ["a", "b"];
console.log(arr.keys());  //Array Iterator

既然是迭代器,就可以用next方法和for of

let arr = ["a", "b"];
var iter = arr.keys();
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
{value: 0, done: false}
{value: 1, done: false}
{value: undefined, done: true}

循环

for(let i of iter){
    console.log(i); //0 1
}

用普通的for循环,因为iter没有length属性,所以不行

对象和数组都有这几种方法,但是不同的是,返回值不同

[].copyWithin(target, start, end)

target指的是位置,在第几位插入,插入的数值由后两位决定,并且保持没替代的值和数组长度不变。

let arr = [1,2,3,4,5,6,7];
console.log(arr.copyWithin(2)); //[1, 2, 1, 2, 3,4,5]

在第2位,开始用原数组依次填充,直到填满

console.log(arr.copyWithin(-2)); //[1, 2, 3, 4, 5, 1, 2]
console.log(arr.copyWithin(0,3)); //[4, 5, 6, 7, 5, 6, 7]

在0的位置插入,从第三位开始到结尾4567替换值,没被替换到的值不变

console.log(arr.copyWithin(0,3,4)); //[4, 2, 3, 4, 5, 6 , 7]
console.log(arr.copyWithin(-2,-3,-1)); //[1,2,3,4,5,5,6]

这个属性用的比较少,一般用fill代替这个方法

[].find() / [].findIndex

获取数组索引,之前都是用indexOf,indexOf语义化不是特别明显,并且在NaN这里有一点问题

console.log([NaN].indexOf(NaN));  //-1

[NaN].findIndex(y => Object.is(NaN, y));  //0

find()返回第一个满足条件的值

var arr = [1,2,3,4];
var arr 1 = arr.find(function(value, index, arr) {
    return value > 2;
})
console.log(arr1);  //3,没有4,有一个成功就会返回

但是这个方法返回点永远都是一个值,就算是return idx > 2,结果也是4,找不到返回undefined

所以就需要findIndex,返回第一个满足条件的索引

var arr 1 = arr.findIndex(function(value, index, arr) {
    return value > 2;
})
console.log(arr1);  //2

找不到返回-1

[].includes()

判断数组是否包含某个值

console.log([1,2,NaN].includes(NaN)); //true

数值的拓展

ES5的16进制表示方法:在数值前面加0x

ES6新增了二进制(0b)和八进制(0o)的表示方法,大小写不分

十进制转二进制

Number.prototype.toString.call(502, 2);

二进制转十进制

parseInt(111110111, 2);

在ES6里可以不用这么麻烦,直接0b + 要转的二进制就好了

0b111110111

已有方法点调整

ES6把和数值有关的方法挂在Number的构造器上,不在是全局上了

  • isNaN()
  • isFinite()[判断是否有限]
  • parseInt()、parseFoloat():parseInt和parseFoloat用法没有变,只是挪了个位置

并且对isNaN()和isFinite()进行了调整:

之前全局的isNaN(),会进行隐式转化

console.log(isNaN("NaN")); //true

调整之后点isNaN()不会

console.log(Number(isNaN("NaN"))); //false

isFinite()同理,全局上如果传入的是字符串,会隐式转换

新增方法

  • Number.isInteger()判断是否整数:24.0也是整数
  • Number.MAX_SAFE_INTEGER最大安全整数:整数处理的上限,全等于Math.pow(2, 53) - 1
  • Number.MIM_SAFE_INTEGER === -Math.pow(2, 53) + 1
  • Number.isSafeInteger()是否安全整数