JS你不得不知道的JavaScript数组相关知识全面总结复习专用

Posted 2021-06-29 YK菌

数组创建

1. new Array
2. Array
3. 字面量
4. Array.from() [类数组] -> [数组] 【ES6】
5. Array.of() [参数] -> [数组] 【ES6】

数组属性

length 数组长度

检测数组

1. instanceof Array
2. Array.isArray()

遍历数组

for(let i = 0; i < nums.length; i++) {
	// nums[i]
}

for(i in nums){
	// nums[i]
}

nums.forEach((item)=>{
	// item
})

for(item of nums){
	// item
}

转换方法

1. toString() [逗号分隔的字符串]
2. toLocaleString()
3. valueOf() [数组本身]

栈方法【改变原数组】

1. push() [栈顶]推入 【返回新数组的长度】
2. pop() [栈顶]弹出 【返回删除的项】

队列方法【改变原数组】

1. push() [队尾]入队 【返回新数组的长度】

2. shift()[队头]出队 【返回删除的项】

3. unshift() [队头]入队 【返回新数组的长度】

4. pop() [队尾]出队 【返回删除的项】

排序方法【改变原数组】

1. reverse() 【返回调用数组引用】
2. sort() [调用String()转型] 【返回调用数组引用】[对数字数组从小到大排序sort((a,b)=>a-b)]

操作方法【不改变原数组】

1. concat() [连接数组，会打平参数数组]【返回新构建的数组，不改变原数组】
2. slice([begin[, end]]) [截取数组]【返回新构建的数组，不改变原数组】
3. splice(start[, deleteCount[, item1[, item2[, ...]]]]) [删除，插入，替换] 【返回被删除的元素，不改变原数组】
   删除 (开始位置, 删除个数)
   插入 (开始位置, 0, 要插入的元素)
   替换 (开始位置, 删除个数, 要插入的元素)
4. flat([depth])扁平化数组 【ES10】【返回新构建的数组，不改变原数组】

const arr = [0, 1, 2, [3, 4]];
const newArr = arr.flat();
console.log(newArr); // [ 0, 1, 2, 3, 4 ]
console.log(arr); // [ 0, 1, 2, [ 3, 4 ] ]

const arr2 = [0, [1, 2], [3, [4, 5]]];
const newArr2 = arr2.flat(1);
console.log(newArr2); // [ 0, 1, 2, 3, [ 4, 5 ] ]

归并方法【不改变原数组】

1. reduce()
2. reduceRight()

【JS】JavaScript数组-归并方法-reduce-reduceRight

25个你不得不知道的数组reduce高级用法

let values = [1, 2, 3, 4, 5]
let sum = values.reduce((prev, cur, index, array) => prev + cur)
console.log(sum) // 15

搜索和位置方法【不改变原数组】

1. indexOf(要查找的元素, [起始搜索位置]) 【返回位置】
2. lastIndexOf()【返回位置】
3. includes()【返回布尔值】【ES7】
4. find() 【返回第一个匹配的元素】 【ES6】
5. findIndex() 【返回第一个匹配元素的索引】 【ES6】

const evens = [2, 4, 6]
let result = evens.find((element, index, array) => element === 4) 
let result2 = evens.findIndex((element, index, array) => element === 4) 
console.log(result) // 4
console.log(result2) // 1

迭代方法【不改变原数组】

1. every() [每一项都为真，则返回真]
2. some()[有一项为真，则返回真]
3. filter() [返回为真的项组成的数组]
4. forEach() [没有返回值]
5. map() [返回每一项运行结果组成的新数组]

【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach()

const evens = [2, 4, 6]
let result = evens.every((element, index, array) => element % 2 === 0) 
console.log(result) // true

迭代器方法【ES6】

1. keys()
2. values()
3. entries()

【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach()

复制填充方法 【改变原数组】【ES6】

1. copyWith(target[, start[, end]]) [复制数组的一部分到同一数组中的另一个位置] 【返回修改后的数组】

2. fill(target[, start[, end]]) [固定值填充一个数组] 【返回修改后的数组】

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

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const a = arr1.fill(0, 1, 5);
console.log(arr1); // [1, 0, 0, 0, 0, 6, 7, 8, 9]
console.log(a); // [1, 0, 0, 0, 0, 6, 7, 8, 9]

拓展运算符...【ES6】

const colors = ['green', 'red', 'pink'];
const colors1 = ['white', 'grey'];
const colors2 = [...colors, ...colors1];
console.log(colors2); // [ 'green', 'red', 'pink', 'white', 'grey' ]