前端基础之数组常用方法

50 阅读4分钟

push(改变原数组,返回新的数组长度)

向数组末尾添加一个或多个元素,并返回新的长度

const arr = [];
arr.push(1);
console.log(arr); // [1]

pop(改变原数组,返回删除前的数组长度)

删除并返回数组的最后一个元素

const arr = [1, 2];
arr.pop();
console.log(arr); // [1]

unshift (改变原数组,返回新的数组长度)

向数组的开头添加一个或多个元素,并返回新的长度

const arr = [2];
arr.unshift(1);
console.log(arr); // [1, 2]

shift (改变原数组,返回第一个元素)

删除并返回数组的第一个元素。

const arr = [1, 2];
arr.shift(1);
console.log(arr); // [2]

concat(不改变原数组,返回一个新的数组)

静态方法,用于合并两个或多个数组,并返回一个新数组。

const arr1 = [1];
const arr2 = [2];
const arr3 = arr1.concat(arr2);
console.log(arr1); // [1]
console.log(arr2); // [2]
console.log(arr3); // [1, 2]

every(不改变原数组,返回布尔值)

接收一个函数并循环调用该函数直到数组结束每次调用该函数都会将当次循环的数组元素作为参数传入 返回值为布尔值测试数组的所有元素是否都通过了指定函数的测试

const arr = [1, 2, 3];
const result = arr.every(v => v > 0);
console.log(result); // true
const result2 = arr.every(v => v > 1);
console.log(result2); // false

some(不改变原数组,返回布尔值)

类似于every只是判断不一致,every是所有元素都满足条件则返回true,some则是只要一个满足就会返回true

const arr = [1, 2, 3];
arr.some(v => v > 2); // true
arr.some(v => v > 3); // false

filter(不改变原数组,返回一个新的数组)

接收一个函数并循环调用该函数直到数组结束每次调用该函数都会将当次循环的数组元素作为参数传入 返回一个新的数组,将所有满足条件的元素添加到新数组中

const arr = [1, 2, 3];
const arr2 = arr.filter(v => v > 1);
console.log(arr); // [1, 2, 3]
console.log(arr2); // [2, 3]

find(不改变原数组,返回第一个满足条件的元素的值)

接收一个函数并循环调用该函数直到数组结束每次调用该函数都会将当次循环的数组元素作为参数传入 返回数组中满足提供的测试函数的第一个元素的值

const arr = [1, 2, 3];
const result = arr.find(v => v > 1);
console.log(result); // 2

findIndex(不改变原数组,返回第一个满足条件的元素的下标没有满足条件的则返回-1)

接收一个函数并循环调用该函数直到数组结束每次调用该函数都会将当次循环的数组元素作为参数传入 返回数组中满足提供的测试函数的第一个元素的下标

const arr = [1, 2, 3];
const result = arr.findIndex(v => v > 1);
console.log(result); // 1

forEach(不改变原数组,没有返回值)

接收一个函数并循环调用该函数直到数组结束每次调用该函数都会将当次循环的数组元素作为参数传入

const arr = [1, 2, 3];
const result = arr.forEach(v => {
    console.log(v); // 1、2、3
});
console.log(result); // undefined

includes(不改变原数组,返回布尔值)

判断数组是否包含某个元素,返回 true 或 false

const arr = [1, 2, 3];
arr.includes(1); //true
arr.includes(0); //false

map(是否改变原数组取决于在传入函数内是否修改引用数据类型的属性值,返回一个新的数组)

接收一个函数并循环调用该函数直到数组结束每次调用该函数都会将当次循环的数组元素作为参数传入 返回一个新的数组,该数组由传入函数的返回值组成

const arr1 = [1, 2, 3];
const arr2 = arr1.map(v => v * 2);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [2, 4, 6]

reduce(不改变原数组,返回一个由传入函数执行计算规则的汇总值)

接收两个参数,第一个为一个函数,第二个为初始值如果不传则默认为arr[0]的值

const arr = [1, 2, 3];
const result = arr.reduce((accumulator, currentValue, currentIndex) => {
    return accumulator + currentValue;
}, 0);
console.log(result); // 6

slice(不改变原数组,返回一个新的数组,截取的起始下标至结束下标)

接收两个参数,第一个参数为截取的起始下标第二个参数为结束下标(如果不传第二个参数则认为截取到最后一项)

const arr = [1, 2, 3];
const arr2 = arr.slice(0,1);
const arr3 = arr.slice(1);
console.log(arr); // [1, 2, 3]
console.log(arr2); // [1]
console.log(arr3); // [2, 3]

splice(改变原数组,返回被删除的元素)

第一个参数为要操作的数组下标 第二个参数为从第一个参数开始数要处理几个元素 第三个参数不传则为删除,传的话则替换

const arr = [1, 2, 3];
arr.splice(1,1); // arr = [1, 3]; 返回结果为 [2] 【删除】
arr.splice(1,1,1); // arr = [1, 1, 3]; 返回结果为 [2] 【替换】
arr.splice(3, 1, 4); // arr = [1, 2, 3, 4]; 返回结果为 [] 【添加】