建站须知
企业网站建设的流程主要有哪些

UI设计、域名服务器、写代码、后台开发

js数组常用方法归类,更利于记忆

时间:2025-04-17   查看:112次

基本操作方法

添加/删除元素

1. push() - 向数组的末尾添加一个或多个元素,并返回新的长度

    特点:

    · 直接修改原数组

    · 可以一次添加多个元素

    · 返回值为添加元素后的数组长度

let fruits = ['apple', 'banana'];

fruits.push('orange'); 

// ['apple', 'banana', 'orange']

2. pop() - 删除数组的最后一个元素并返回该元素

    特点:

    · 直接修改原数组

    · 空数组调用返回undefined

    · 会减少数组长度

let fruits = ['apple', 'banana', 'orange'];

let last = fruits.pop(); 

// last = 'orange', fruits = ['apple', 'banana']

3. unshift() - 向数组的开头添加一个或多个元素,并返回新的长度

    特点:

    · 直接修改原数组

    · 可以一次添加多个元素

    · 需要移动所有现有元素,性能比push差

let fruits = ['banana', 'orange'];

fruits.unshift('apple'); 

// ['apple', 'banana', 'orange']

4. shift() - 删除数组的第一个元素并返回该元素

    特点:

    · 直接修改原数组

    · 空数组调用返回undefined

    · 需要移动剩余所有元素

let fruits = ['apple', 'banana', 'orange'];

let first = fruits.shift(); 

// first = 'apple', fruits = ['banana', 'orange']


合并与拆分

1. concat() - 合并两个或多个数组,返回新数组

    特点:

    · 不修改原数组

    · 可以合并多个数组

    · 执行浅拷贝

let arr1 = [1, 2], arr2 = [3, 4];

let combined = arr1.concat(arr2); 

// [1, 2, 3, 4]

2. join() - 将数组所有元素连接成一个字符串

    特点:

    · 不修改原数组

    · 可以指定分隔符(默认为逗号)

    · 空数组返回空字符串

let fruits = ['apple', 'banana', 'orange'];

let str = fruits.join(', '); 

// "apple, banana, orange"

3. slice() - 返回数组的一部分(浅拷贝)

    特点:

    · 不修改原数组

    · 参数为(start, end),end可选

    · 负数索引表示从末尾开始计算

let nums = [1, 2, 3, 4, 5];

let part = nums.slice(1, 3); 

// [2, 3] (原数组不变)

4. splice() - 添加/删除数组元素(会修改原数组)

    特点:

    · 直接修改原数组

    · 参数为(start, deleteCount, ...items)

    · 可以同时实现删除和插入

let nums = [1, 2, 3, 4, 5];

nums.splice(2, 1, 'a', 'b'); 

// 从索引2开始删除1个元素,添加'a','b'

// nums变为 [1, 2, 'a', 'b', 4, 5]


搜索与查询方法

1. indexOf() - 返回元素在数组中首次出现的索引

    特点:

    · 使用严格相等(===)比较

    · 未找到返回-1

    · 可指定起始搜索位置

let fruits = ['apple', 'banana', 'orange'];

let index = fruits.indexOf('banana'); 

// 1

2. lastIndexOf() - 返回元素在数组中最后一次出现的索引

    特点:

    · 从后向前搜索

    · 使用严格相等(===)比较

    · 可指定起始搜索位置

let nums = [1, 2, 3, 2, 1];

let lastIndex = nums.lastIndexOf(2); 

// 3

3. includes() - 判断数组是否包含某元素

    特点:

    · ES7新增方法

    · 使用SameValueZero算法比较

    · 可处理NaN比较

let nums = [1, 2, 3];

let hasTwo = nums.includes(2); 

// true

4. find() - 返回满足条件的第一个元素

    特点:

    · ES6新增方法

    · 回调函数返回true时返回当前元素

    · 未找到返回undefined

let users = [

  {id: 1, name: 'John'},

  {id: 2, name: 'Mary'}

];

let user = users.find(u => u.id === 2); 

// {id: 2, name: 'Mary'}

5. findIndex() - 返回满足条件的第一个元素的索引

    特点:

    · ES6新增方法

    · 回调函数返回true时返回当前索引

    · 未找到返回-1

let nums = [5, 12, 8, 130, 44];

let index = nums.findIndex(num => num > 10); 

// 1


迭代方法

1. forEach() - 对数组每个元素执行回调函数

    特点:

    · 不修改原数组(除非回调中修改)

    · 没有返回值

    · 不能使用break中断

let nums = [1, 2, 3];

nums.forEach(num => console.log(num)); 

// 依次输出 1, 2, 3

2. map() - 对数组每个元素执行回调,返回新数组

    特点:

    · 不修改原数组

    · 返回的新数组长度与原数组相同

    · 回调函数应返回新元素值

let nums = [1, 2, 3];

let squares = nums.map(num => num * num); 

// [1, 4, 9]

3. filter() - 返回满足条件元素组成的新数组

    特点:

    · 不修改原数组

    · 新数组长度可能小于原数组

    · 回调函数应返回布尔值

let nums = [1, 2, 3, 4, 5];

let evens = nums.filter(num => num % 2 === 0); 

// [2, 4]

4. reduce() - 从左到右对数组元素执行累加器函数。reduceRight() - 将数组减少为单个值(从右到左)

    特点:

    · 不修改原数组

    · 可以指定初始值

    · 回调函数接收(accumulator, currentValue, index, array)

let nums = [1, 2, 3, 4];

let sum = nums.reduce((total, num) => total + num, 0); 

// 10

5. some() - 测试是否至少有一个元素满足条件

    特点:

    · 不修改原数组

    · 遇到满足条件的元素立即返回true

    · 空数组返回false

let nums = [1, 2, 3, 4, 5];

let hasEven = nums.some(num => num % 2 === 0); 

// true

6. every() - 测试是否所有元素都满足条件

    特点:

    · 不修改原数组

    · 遇到不满足条件的元素立即返回false

    · 空数组返回true

let nums = [2, 4, 6, 8];

let allEven = nums.every(num => num % 2 === 0); 

// true


排序与反转

1. sort() - 对数组元素进行排序

    特点:

    · 直接修改原数组

    · 默认按字符串Unicode码点排序

    · 可以传入比较函数

let fruits = ['banana', 'apple', 'orange'];

fruits.sort(); 

// ['apple', 'banana', 'orange']

2. reverse() - 反转数组中元素的顺序

    特点:

    · 直接修改原数组

    · 会改变原数组

    · 返回反转后的数组

let nums = [1, 2, 3, 4];

nums.reverse(); 

// [4, 3, 2, 1]


其他实用方法

1. isArray() - 判断对象是否为数组

    特点:

    · 比instanceof更可靠

    · 可以跨iframe工作

    · 返回布尔值

Array.isArray([1, 2, 3]); // true

Array.isArray('hello');    // false

2. fill() - 用固定值填充数组

    特点:

    · 可以指定填充范围

    · 会修改原数组

let arr = new Array(3).fill(0); 

// [0, 0, 0]

3. flat() - 将嵌套数组"拉平"

    特点:

    · ES2019新增方法

    · 可以指定拉平深度

    · 不修改原数组

let arr = [1, [2, [3, [4]]]];

let flatArr = arr.flat(2); 

// [1, 2, 3, [4]]

4. flatMap() - 先映射再拉平(深度1)

    特点:

    · ES2019新增方法

    · 相当于map()+flat(1)

    · 性能优于分开调用

let arr = [1, 2, 3];

let result = arr.flatMap(x => [x, x * 2]); 

// [1, 2, 2, 4, 3, 6]

5. toString() - 将数组转换为字符串


ES6+新增方法

1. Array.from() - 从类数组对象或可迭代对象创建数组

    特点:

    · 可以传入映射函数

    · 可以处理Set、Map等

    · 执行浅拷贝

let str = 'hello';

let arr = Array.from(str); 

// ['h', 'e', 'l', 'l', 'o']

2. Array.of() - 创建具有可变数量参数的新数组

    特点:

    · 解决Array构造函数参数歧义问题

    · Array.of(7)创建[7],而new Array(7)创建长度为7的空数组

let nums = Array.of(1, 2, 3); 

// [1, 2, 3]

3. entries() - 返回包含键值对的迭代器

    特点:

    · 可用于for...of循环

    · 每个元素是[index, value]数组

    · 不修改原数组

let fruits = ['apple', 'banana'];

for (let [index, fruit] of fruits.entries()) {

  console.log(index, fruit); 

}

// 0 'apple'

// 1 'banana'

4. keys() - 返回键名迭代器

5. values() - 返回键值迭代器