数组
1、Array.from()
//将类数组对象和可遍历的对象转换为数组进行使用。
//类数组对象
const arrLike = {
'0': 'apple',
'1': 'banana',
'2': 'orange',
length: 3
};
let arr = Array.from(arrLike);
console.log(arr) // ['apple', 'banana', 'orange']
//可遍历的对象
Array.from('china'); // [ "c", "h", "i", "n", "a" ]
const set = new Set(['a', 'b', 'c', 'd']);
Array.from(set);// [ "a", "b", "c", "d" ]
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // [[1, 2], [2, 4], [4, 8]]
//回调函数(二者等价)
let arr = Array.from([1, 2, 3], function (x) {
return 2 * x;
});
let arr = Array.from([1, 2, 3]).map(function (x) {
return 2 * x;
});
//arr: [2, 4, 6]
//对回调函数中 this 的指向进行绑定
let obj = {
handle: function(n){
return n + 2
}
}
Array.from([1, 2, 3, 4, 5], function (x){
return this.handle(x)//当前this指向obj
}, obj)// [3, 4, 5, 6, 7]
/*
* 我们可以将被处理的数据和处理对象分离,将各种不同的处理数据的方法
* 封装到不同的的对象中去,处理方法采用相同的名字。只要控制好注入的对象即可,方法名都一致
*/
//数组去重
function combine(){
let arr = [].concat.apply([], arguments); //没有去重复的新数组
return Array.from(new Set(arr));
}
var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n)); //[1,2,3]
2、Array.of()
//创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined) // [undefined]
Array.of(3).length // 1
//也可以自己定义,一个方法实现上述情况
if (!Array.of) {
Array.of = function() {
return Array.prototype.slice.call(arguments);
};
}
3、includes ()
//用于查找一个数组中是否包含一个指定的元素
let arr = ['china', 'USA', 'CHN'];
console.log(arr.includes('CHN'));//true
/*
* 第二个参数为负数时(是从arr.length+当前第二个参数的位置进行查找,并且是升序)
* 如果算出来的值小于0,则整个数组进行搜寻
*/
let arr = ['china', 'USA', 'CHN'];
console.log(arr.includes('china',-1));//false (从‘CHN’开始查)
//当没有参数时,includes() 方法会把第一个参数置成 undefined(不是字符串 “undefined”)
[undefined].includes(); // true
['undefined'].includes(); // false
//可以判断数组里面是否为空,包含NaN
[,,,,,].includes(undefined) // true
[null, undefined, NaN].includes(NaN)] // true
4、find () 和 findIndex ()
//find 方法返回的是数组中符合条件的第一个值
//findIndex 方法则返回符合条件的第一个索引的位置。
//一个参数
let arr = [1, 6, 3, 4, 5]
let target = arr.find(function(item) {
return item % 2 === 0
})
console.log(target) // 6
let target = arr.findIndex(function(item) {
return item % 2 === 0
})
console.log(target) // 1
//两个参数
const obj={
handle:function(item){
return item % 2 === 0
}
}
let arr = [1, 6, 3, 4, 5]
let target = arr.find(function(item) {
return this.handle(item)
},obj)
console.log(target) // 6
5、copyWithin()
//实现数组内元素的复制和替换,不会改变原数组的长度
/*
* 先说明 正序(参数为正)判断条件为下标 倒序(参数为负)判断条件为位置
* 第二个参数是包含本身,第三个参数是不包含本身
*/
//第一个参数为0或为空时,全部复制
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0); // [1, 2, 3, 4, 5]
arr.copyWithin(); // [1, 2, 3, 4, 5]
//第一个参数不为0或者参数大于数组长度
[1, 2, 3, 4, 5].copyWithin(2); // [1, 2, 1, 2, 3](先将数组全部复制下来,然后找下标为2(包含本身))
[1, 2, 3, 4, 5].copyWithin(6); // [1, 2, 3, 4, 5](原数组)
//第一个参数为负数(位置)
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(-2); // [1, 2, 3, 1, 2](倒序,数2个位置为起始位(包括本身)替换)
var arr = [1, 2, 3, 4, 5];
//二个参数
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // [4,5,3,4,5]
/* 复制
* 正序
* 第二个参数是3,下标为3开始复制(包括本身)
* 因为没有第三个参数,所以默认到结尾,即[4,5]
*
* 替换
* 第一个参数为0,则在数组下标为0的位置开始替换(将复制的数组替换完即可)
* 即[4,5,3,4,5]
*/
arr.copyWithin(0,-3);// [3, 4, 5, 4, 5]
/* 复制
* 倒序
* 第二个参数的绝对值是3,倒序数3个位置(包括本身)
* 因为没有第三个参数,所以默认到结尾,即[3,4,5]
*
* 替换
* 第一个参数为0,则在数组下标为0的位置开始替换(将复制的数组替换完即可)
* 即[3,4,5,4,5]
*/
//三个参数(第三个参数是开始复制元素的结束位置,不包括这个位置)
arr.copyWithin(1, 3, 4); // [1, 4, 3, 4, 5] 根据规则复制4,在下标为1的位置进行替换
//如果只有第三个参数为负时,则返回原数组
arr.copyWithin(1, 3, -4); // [1, 2, 3, 4, 5]
//后俩个参数为负数时,倒序
arr.copyWithin(0, -3, -1); //[3,4,3,4,5] 根据规则复制[3,4]
arr.copyWithin(0, -2, -1); // [4,,2,3,4,5] 根据规则复制[4]
6、fill()
//fill()可以替换一个指定的值,copyWithin 则是复制数组中的值去替换指定位置的值,不能指定值。
//快速初始化一个数组,并填充一个值。
let arr = Array(5).fill(1)
console.log(arr) // [1, 1, 1, 1, 1]
//两个参数
[1, 2, 3].fill(0, 0); // [0, 0, 0] 从第二个参数的指定位置(下标)进行填充
[1, 2, 3].fill(0, 1); // [1, 0, 0] 从第二个参数的指定位置(下标)进行填充
[1, 2, 3].fill(0, -1); // [1, 2, 0] 负数,倒序,长度1开始填充
[1, 2, 3].fill(0, -3); // [0, 0, 0] 负数等于数组长度,全部填充
//三个参数
/*
* 先说明 正序(参数为正)判断条件为下标 倒序(参数为负)判断条件为位置
* 第二个参数是包含本身,第三个参数是不包含本身
*/
let arr=['a', 'b', 'c']
arr.fill(4, 1, 2);//["a", 4, "c"]
arr.fill(4, -3, -2);//[4, "b", "c"]
arr.fill(4, -3, 1);//[4, "b", "c"]
arr.fill(4, -2, 1); //["a", "b", "c"] 后两个参数都指向b,一个包含一个不包含,故不替换
//填充的内容为对象
var arr = Array(3).fill({}) // [{}, {}, {}]
//只要填充一个位置,其他位置就已经被添加了
arr[1].name = 'china'; // [{name: 'china'}, {name: 'china'}, {name: 'china'}]
7、Array.isArray()
//判断 JS 对象,如果值是 Array
// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([10]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c'))
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);
// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });
8、flat()
//将一个嵌套多层的数组进行降维操作
var arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
//参数2表示降维度为2
arr.flat(2); // [1, 2, 3, 4, 5, 6]
//使用 Infinity,可展开任意深度的嵌套数组
var arr = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
//去除空项
var arr = [1, 2, , 4, 5];
arr.flat(); // [1, 2, 4, 5]