JS中数组的常用方法
我是knockkey, 这是我坚持更新博客第2天.
对原数组无改变的:
1. findIndex
- findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
- findIndex() 方法为数组中的每个元素都调用一次函数执行
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1
- 是否对空数组进行检测：否
- 是否改变原数组：否
const arr = [4, 9, 16, 25];
const b = arr.findIndex(item => item > 10)
const c = arr.findIndex(item => item < 1)
const d = arr.findIndex(item => item > 8)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 2
console.log(c) // -1
console.log(d) // 1
2. find
- find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
- find() 方法为数组中的每个元素都调用一次函数执行：
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
- 是否对空数组进行检测：否
- 是否改变原数组：否
const arr = [4, 9, 16, 25];
const b = arr.find(item => item > 10)
const c = arr.find(item => item < 1)
const d = arr.find(item => item > 8)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 16
console.log(c) // undefined
console.log(d) // 9
3. forEach
- forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
- 是否对空数组进行检测：否
- forEach()中不支持使用break(报错)和return(不能结束循环)，有需要时可使用常规的for循环
const arr = [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [4, 9, 16, 25]
4. map
- map() 方法返回一个新数组，数组中的元素为 原始数组元素调用函数处理后的值
- map() 方法按照原始数组元素顺序依次处理元素
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr = [4, 9, 16, 25];
const arr1 = arr.map(item => item + 2)
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [6, 11, 18, 27]
4. filter
- filter() 方法创建一个新的数组，新数组中的元素是 通过检查指定数组中符合条件的所有元素
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr = [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr) // [32, 33, 16, 40]
console.log(arr1) // [32, 33, 40]
5. every
- every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
- every() 方法使用指定函数检测数组中的所有元素
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr = [4, 9, 16, 25];
const b = arr.every(item => item > 10)
const c = arr.every(item => item > 1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // false
console.log(c) // true
6. some
- some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
- some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr = [4, 9, 16, 25];
const b = arr.some(item => item > 10)
const c = arr.some(item => item < 1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // true
console.log(c) // false
7. join
- join方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。
- 是否改变原数组：否
- 是否对空数组进行检测：否
const arr = [1, 2, 3, 4];
// const arr = ['a', 'b', 'c','d'];
console.log(arr);
console.log(arr.join()); // '1,2,3,4' //'a,b,c,d'
console.log(arr.join('')); // '1234' //'abcd'
console.log(arr.join('-')); // '1-2-3-4' //'a-b-c-d'
console.log(arr.join('|')); // '1|2|3|4' // 'a|b|c|d'
8. concat
- 连接多个（含两个）数组，两边的原始数组都不会变化，返回被连接数组的一个副本，可继续 concat。
- 是否改变原数组：否
const arr1 = ['a', 'b', 'c', 'd']
const arr2 = [1, 2, 3, 4]
const arr3 = arr1.concat(arr2)
console.log(arr3); //['a', 'b', 'c', 'd', 1, 2, 3, 4]
9. slice
- 从开始到结束(左闭右开，即不包括结束）选择数组的一部分浅拷贝到一个新数组。
- 是否改变原数组：否
const arr=[1,2,3,4]
const arr1 = arr.slice(1,3)
console.log(arr1); // [2,3]
10. reduce
- 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。若是空数组是不会执行回调函数的
- 是否对空数组进行检测：报错： 举例1
const arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
// 打印
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10
举例2
var sum = arr.reduce(function (prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
}, 0) //注意这里设置了初始值
console.log(arr, sum);
// 打印
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10
计算数组中每个元素出现的次数
// 计算数组中每个元素出现的次数
let names = ['knock', 'key', 'Tom', 'knock', 'Jerry'];
let nameNum = names.reduce((pre, cur) => {
if (cur in pre) {
console.log(pre);
console.log(cur);
pre[cur]++
} else {
pre[cur] = 1
}
return pre
}, {})
console.log(nameNum); //{knock: 2, key: 1, Tom: 1, Jerry: 1}
对原数组有改变的:
最基本的
-
push: 将一个或多个元素添加到数组的末尾，返回值是
改变后的数组的长度 -
unshift: 将一个或多个元素添加到数组的开头，返回值是
改变后的数组的长度 -
pop: 删除数组的最后一个元素，并
返回这个元素(即被删除的元素), 空数组返回undefined -
shift: 删除数组的第一个元素，并
返回这个元素 -
reverse: 颠倒数组中元素的位置，返回该
数组的引用 -
sort: 对数组的元素进行排序，并
返回数组。排序不一定是稳定的。默认排序顺序是根据字符串 Unicode 码点。
splice
- 向数组中添加/删除项目，返回值是
被删除项目
// 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。
const arr1 = ['a', 'b', 'c', 'd']
arr1.splice(0, 1)
console.log(arr1); // ['b','c','d']
// 插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。
const arr2 = ['a','b','c','d']
arr2.splice(1,0,'第二个')
console.log(arr2); // ['a','第二个','b','c','d']
// 替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。
const arr3 = ['a','b','c','d']
arr3.splice(1,0,'第二个','第三个')
console.log(arr3);
fill
- fill() 方法用于将一个固定值替换数组的元素。
- 是否改变原数组：是
- 是否对空数组进行检测：否
const arr1 = [4, 9, 16, 25];
const b = arr1.fill(100);
const arr2 = [4, 9, 16, 25];
const c = arr2.fill(100, 2, 4) // 2为开始填充的起始位置，4为结束位置（不包含）
console.log(arr1) // [100, 100, 100, 100]
console.log(b) // [100, 100, 100, 100]
console.log(arr2) // [4, 9, 100, 100]
console.log(c) // [4, 9, 100, 100]
