导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

Array.of()

• 代替 new Array()

console.log(new Array());
console.log(new Array(3));
console.log(new Array(3, 1));
console.log(Array.of());
console.log(Array.of(1));
console.log(Array.of(1, 2));

⭐️ Array.from()

• 将类数组转为数组
• 将部署了 iterator 的对象转为数组

var obj = {
    start: [12,3,4,5],
    end: [7,8,9],
    [Symbol.iterator](){
        let index = 0,
            arr = [...this.start,...this.end],
            len = arr.length;
        return {
            next(){
                if(index<len){
                    return {
                        value: arr[index++],
                        done: false
                    }
                }else{
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }
}
console.log(Array.from(obj))

参数

• arrayLike 类数组
• mapFn（可选）转为数组后，再执行mapFn
• thisArg（可选）

var obj = {
    start: [12,3,4,5],
    end: [7,8,9],
    [Symbol.iterator](){
        let index = 0,
            arr = [...this.start,...this.end],
            len = arr.length;
        return {
            next(){
                if(index<len){
                    return {
                        value: arr[index++],
                        done: false
                    }
                }else{
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }
}
console.log(Array.from(obj, function mapper(val, index){
	return val * 2;
}))

fill()

arr.fill(value, start, end) 填充, 修改原数组（左闭右开区间）

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

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

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

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

var arr = [1,2,3,4];
arr.fill(5, NaN, -2); // NaN 被当成0处理
console.log(arr); // [5, 5, 3, 4]

var arr = [1,2,3,4];
arr.fill(5, NaN, NaN); // 不做处理
console.log(arr); // [1, 2, 3, 4]

对象使用

console.log([].fill.call({length: 3}, 4))

⭐️ keys()、values()、entries()

var obj = {
	a: 'a',
  b: 'v',
  c: 'd'
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));

var arr = [1,2,3,4];
console.log(Object.keys(arr)); // ['0', '1', '2', '3']
console.log(Object.values(arr)); // [1, 2, 3, 4]
console.log(Object.entries(arr)); // [['0', 1], ['1', 2], ['2', 3], ['3', 4]]

var arr = ['a', 'c', 'e', 'g'];
console.log(arr.keys());
console.log(arr.values());
console.log(arr.entries());

var arr = ['a', 'c', 'e'];
var iter = arr.keys()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

var arr = ['a', 'c', 'e'];
var iter = arr.values()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

var arr = ['a', 'c', 'e'];
var iter = arr.entries()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

for...of 循环

var arr = ['a', 'c', 'e', 'g'];
var iter = arr.keys();
for(let i of iter){
	console.log(i);
}

var arr = ['a', 'c', 'e'];
var iter = arr.entries()
for(let i of iter){
	console.log(i);
}

var arr = ['a', 'c', 'e'];
var iter = arr.values()
for(let i of iter){
	console.log(i);
}

var arr = ['a', 'c', 'e'];
for(let i of arr){
	console.log(i);
}

copyWithIn()

• arr.copyWithin(target, start, end) 会改变原数组
  • target: 目标位置

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

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

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

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

[].copyWithin.call({length: 5, 3: 'a', 4: 'b', 5: '6'}, 0, 3)

includes()

[1,2,3,4].includes(2); // true
var arr = [NaN];
arr.includes(NaN); // true

⭐️ find()、findIndex()

• 返回第一个符合条件的
• 找不到 find 返回 undefined，findIndex 返回 -1

var arr = [1,2,3,4,5];
arr.find(function(value, index, arr){
	return value > 3;
})

var arr = [1,2,3,4,5];
arr.findIndex(function(value, index, arr){
	return value > 3;
})

indexOf 弊端 - 识别不了 NaN

var arr = [NaN];
console.log(arr.indexOf(NaN));
console.log(arr.findIndex(v => Object.is(NaN, v)));
arr.includes(NaN); // true

Array.flat

有一个二维数组，我想让他变成一维数组：

const arr = [1, 2, 3, [4, 5, 6]]

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

还可以传参数，参数为降维的次数

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]

console.log(arr.flat(2))
[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]

如果传的是一个无限大的数字，那么就实现了多维数组(无论几维)降为一维数组

const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]]

console.log(arr.flat(Infinity))
[
   1,  2, 3, 4,  5,
   6,  7, 8, 9, 10,
   11, 12
]

Array.flatMap

现在给你一个需求

let arr = ["科比 詹姆斯 安东尼", "利拉德 罗斯 麦科勒姆"];

将上面数组转为

[ '科比', '詹姆斯', '安东尼', '利拉德', '罗斯', '麦科勒姆' ]

第一时间想到 map + flat

console.log(arr.map(x => x.split(" ")).flat());
// [ '科比', '詹姆斯', '安东尼', '利拉德', '罗斯', '麦科勒姆' ]

flatMap 就是 flat + map，一个方法顶两个

console.log(arr.flatMap(x => x.split(" ")));
// [ '科比', '詹姆斯', '安东尼', '利拉德', '罗斯', '麦科勒姆' ]