数组扩展【ES6】
迈克尔·德尔 :“困难只是暂时的,放弃则是永恒的。坚持下去,你会找到解决的办法。”
目录
- 数组扩展:
- 扩展运算符:
- Array.from():
- Array.of():
- find:
- findIndex:
- 与find相对比的findLast【ES13】:
- 与findIndex相对比的findLastIndex【ES13】:
- fill:
- flat:
- flatMap:
数组扩展:
扩展运算符:
能够快速的进行数组的复制、数组的合并、与解构进行结合。
数组的复制:
let arr1 = [1, 2, 3];
let arr2 = arr1.concat();
console.log(arr2.pop());// 3
console.log(arr1); // [1, 2, 3] 因为concat()方法复制的不会之后的操作不会改变原数组
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.pop();
console.log(arr2); //[1, 2]
console.log(arr1); //[1, 2, 3]
数组的合并:
let arr1 = [1, 2, 3];
let arr2 = arr1.concat(4, 5, 6);
console.log(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(...arr1, ...arr2); // 1 2 3 4 5 6
与解构进行结合:
let myarr = [1, 2, 3, 4, 5, 6, 7, 8];
let [a, b, ...c] = myarr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5, 6, 7, 8]
Array.from():
我们之前经常用 arguments 获取函数被调用时传入的所有参数。arguments 对象不是真正的数组,但它具有类似数组的属性和方法,如 length 属性和通过索引访问元素的能力。然而,它不支持数组的其他方法,如 push、pop、slice 等。
function myFunction () {
console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments[0]); // 1
}
myFunction(1, 2, 3);
而我们的Array.from可以将类似数组的东西转化为真正的数组。
function myFunction () {
console.log(Array.from(arguments));// [1, 2, 3]
}
myFunction(1, 2, 3);
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul>
<script>
let olis = document.querySelectorAll('li');
console.log(Array.from(olis));
</script>
Array.of():
将一组值转化为数组,即新建数组。弥补 Array 创建数组只传一个参数的时候的短板,Array 传一个参数的时候,你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性。
let arr = [1, 2, 3];
let arr1 = Array(5, 6, 7);
let arr2 = Array(3); // 传一个参数的时候,你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性
let arr3 = Array.of(8, 9, 10);
let arr4 = Array.of(1);
console.log(arr); // [1, 2, 3]
console.log(arr1); // [5, 6, 7]
console.log(arr2); // [empty × 3]
console.log(arr3); // [8, 9, 10]
console.log(arr4); // [1] 就算传一个参数也可以创建成数组
find:
返回满足条件的第一个元素。
let arr = [11, 12, 13, 14, 15];
let res = arr.find((item) => {
return item > 13
})
console.log(res); //14
findIndex:
返回第一个满足条件元素的索引值。
let arr = [11, 12, 13, 14, 15];
let res = arr.findIndex((item) => {
return item > 13
})
console.log(res); //3
与find相对比的findLast【ES13】:
从后往前找,返回后面第一个满足条件的元素。
let arr = [11, 12, 13, 14, 15];
let res = arr.findLast((item) => {
return item > 13
})
console.log(res); //15
与findIndex相对比的findLastIndex【ES13】:
从后往前找,返回后面第一个满足条件元素的索引值。
let arr = [11, 12, 13, 14, 15];
let res = arr.findLastIndex((item) => {
return item > 13
)
console.log(res); //4
fill:
可以充当填充的作用!
let arr = new Array(3).fill('kitty');
console.log(arr);// ['kitty', 'kitty', 'kitty']
可以用来替换元素(可以全部替换也可以选择起始位置和结束为止来进行替换元素):
let arr = [11, 22, 33];
let arr1 = [11, 22, 33];
console.log(arr.fill('Alice')); // ['Alice', 'Alice', 'Alice']
console.log(arr1.fill('Alice', 1, 2)); //[11, 'Alice', 33]
flat:
flat 方法用于将嵌套数组“展平”成一个新数组,即移除数组的嵌套层级。它接受一个可选的深度参数,表示要展平的嵌套层数。如果未指定深度,则默认为 1,意味着它只会展平一层嵌套的数组。
let arr = [1, 2, 3, [4, 5, 6]]
console.log(arr.flat());// [1, 2, 3, 4, 5, 6]
console.log(arr);// [1, 2, 3, [4, 5, 6]] flat不会改变原数组
let arr = [
['安庆', '安阳', '鞍山'],
['北京', '保定', '包头']
]
console.log(arr.flat()); // ['安庆', '安阳', '鞍山', '北京', '保定', '包头']
flatMap:
flatMap 方法首先使用提供的映射函数对数组中的每个元素进行映射,然后将结果展平到一个新数组中。与 map 方法不同,flatMap 会将映射函数返回的每个数组展平,而不是保留它们作为嵌套数组。这使得 flatMap 特别适合于处理嵌套数组,并且想要将嵌套的元素映射到一个单一的数组中的情况。
let arr = [
{
name: "A",
list: ['安庆', '安阳', '鞍山']
}, {
name: "B",
list: ['北京', '保定', '包头']
}
]
let res = arr.flatMap(function (item) {
return item.list
})
console.log(res); // ['安庆', '安阳', '鞍山', '北京', '保定', '包头']