Js 中你一定用到的 [].APi

82 阅读6分钟

push()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 push() 方法向数组添加元素
const newLength = arr.push(4, 5);
// 输出新数组和新长度
console.log('新数组:', arr); // Output: 新数组: [1, 2, 3, 4, 5]
console.log('新长度:', newLength); // Output: 新长度: 5

这个方法会在数组末尾添加指定的元素,并返回新的长度。它会改变原始数组

pop()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 pop() 方法从数组中移除最后一个元素
const removedItem = arr.pop();
// 输出被移除的元素和新数组
console.log('移除的元素:', removedItem); // Output: 移除的元素: 3
console.log('新数组:', arr); // Output: 新数组: [1, 2]

这个方法会移除数组中的最后一个元素,并返回该元素。它会改变原始数组

shift()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 shift() 方法从数组中移除第一个元素
const removedItem = arr.shift();
// 输出被移除的元素和新数组
console.log('移除的元素:', removedItem); // Output: 移除的元素: 1
console.log('新数组:', arr); // Output: 新数组: [2, 3]

这个方法会移除数组中的第一个元素,并返回该元素。它会改变原始数组

unshift()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 unshift() 方法向数组开头添加元素
const newLength = arr.unshift(4, 5);
// 输出新数组和新长度
console.log('新数组:', arr); // Output: 新数组: [4, 5, 1, 2, 3]
console.log('新长度:', newLength); // Output: 新长度: 5

这个方法会在数组开头添加指定的元素,并返回新的长度。它会改变原始数组

splice()

// 定义一个数组
const arr = [1, 2, 3, 4, 5];
// 使用 splice() 方法删除从索引 1 开始的 2 个元素,并添加 6 和 7
const removedItems = arr.splice(1, 2, 6, 7);
// 输出被移除的元素和新数组
console.log('移除的元素:', removedItems); // Output: 移除的元素: [2, 3]
console.log('新数组:', arr); // Output: 新数组: [1, 6, 7, 4, 5]

这个方法可以添加或删除数组中的元素。第一个参数定义了要删除或添加的元素的起始位置,第二个参数定义了要删除的元素数量,而后面的参数则是要添加到数组中的元素。它会改变原始数组

slice()

// 定义一个数组
const arr = [1, 2, 3, 4, 5];
// 使用 slice() 方法从索引 1 开始到索引 4(不包括 4)返回一个新数组
const newArray = arr.slice(1, 4);
// 输出原始数组和新数组
console.log('原始数组:', arr); // Output: 原始数组: [1, 2, 3, 4, 5]
console.log('新数组:', newArray); // Output: 新数组: [2, 3, 4]

这个方法返回一个新的数组,其中包含从开始到结束(不包括结束)选择的元素。它不会改变原始数组

concat()

// 定义两个数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
// 使用 concat() 方法将两个数组合并成一个新数组
const newArray = arr1.concat(arr2);
// 输出原始数组和新数组
console.log('原始数组 1:', arr1); // Output: 原始数组 1: [1, 2, 3]
console.log('原始数组 2:', arr2); // Output: 原始数组 2: [4, 5]
console.log('新数组:', newArray); // Output: 新数组: [1, 2, 3, 4, 5]

这个方法将两个或多个数组合并成一个新数组。它不会改变原始数组

reverse()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 reverse() 方法反转数组顺序
arr.reverse();
// 输出新数组
console.log('新数组:', arr); // Output: 新数组: [3, 2, 1]

这个方法会反转数组中元素的顺序。它会改变原始数组

sort()

// 定义一个数组
const arr = [2, 3, 1];
// 使用 sort() 方法对数组进行排序
arr.sort();
// 输出新数组
console.log('新数组:', arr); // Output: 新数组: [1, 2, 3]

这个方法会对数组中的元素进行排序。默认情况下,它会将元素转换为字符串,并按照 Unicode 值排序。它会改变原始数组

join()

// 定义一个数组
const arr = ['Hello', 'World'];
// 使用 join() 方法将数组中的所有元素转为一个字符串
const str = arr.join(' ');
// 输出新字符串
console.log('新字符串:', str); // Output: 新字符串: "Hello World"

这个方法将数组中的所有元素转换为一个字符串。可以指定分隔符,其默认值是逗号。它不会改变原始数组

indexOf()

// 定义一个数组
const arr = ['apple', 'orange', 'banana'];
// 使用 indexOf() 方法查找数组中某个元素的索引
const index = arr.indexOf('orange');
// 输出索引
console.log('索引:', index); // Output: 索引: 1

这个方法会返回指定元素在数组中第一次出现的位置的索引。如果没有找到该元素,则返回 -1。它不会改变原始数组

类似API:lastIndexOffindLastIndex

includes()

// 定义一个数组
const arr = ['apple', 'orange', 'banana'];
// 使用 includes() 方法检查数组中是否包含某个元素
const hasOrange = arr.includes('orange');
// 输出结果
console.log('hasOrange:', hasOrange); // Output: hasOrange: true

这个方法会检查数组中是否包含指定元素。如果包含,则返回 true;否则返回 false。它不会改变原始数组

every()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 every() 方法检查数组中的所有元素是否都满足某个条件
const isAllPositive = arr.every(num => num > 0);
// 输出结果
console.log('isAllPositive:', isAllPositive); // Output: isAllPositive: true

这个方法会检查数组中的所有元素是否都满足指定的条件。如果是,则返回 true;否则返回 false。它不会改变原始数组

some()

// 定义一个数组
const arr = [-1, 2, 3];
// 使用 some() 方法检查数组中是否有任意一个元素满足某个条件
const hasPositive = arr.some(num => num > 0);
// 输出结果
console.log('hasPositive:', hasPositive); // Output: hasPositive: true

这个方法会检查数组中是否有任意一个元素满足指定的条件。如果是,则返回 true;否则返回 false。它不会改变原始数组

filter()

// 定义一个数组
const arr = [1, 2, 3, 4, 5];
// 使用 filter() 方法过滤符合条件的元素,生成一个新数组
const newArray = arr.filter(num => num % 2 === 0);
// 输出原始数组和新数组
console.log('原始数组:', arr); // Output: 原始数组: [1, 2, 3, 4, 5]
console.log('新数组:', newArray); // Output: 新数组: [2, 4]

这个方法会创建一个新数组,并筛选出原始数组中符合指定条件的所有元素。它不会改变原始数组

find()

// 定义一个数组
const arr = [1, 2, 3, 4, 5];
// 使用 find() 方法过滤符合条件的元素(第一个)
const new = arr.find(num => num % 2 === 0);
// 输出原始数组和新数组
console.log('原始数组:', arr); // Output: 原始数组: [1, 2, 3, 4, 5]
console.log('新数组:', new); // Output: 新数据: 2

这个方法会找到数组中符合条件的第一个数据。它不会改变原始数组

类似API:findIndexfindLastfindLastIndex

map()

// 定义一个数组
const arr = [1, 2, 3];
// 使用 map() 方法将数组中的每个元素映射到一个新数组中
const newArray = arr.map(num => num * 2);
// 输出原始数组和新数组
console.log('原始数组:', arr); // Output: 原始数组: [1, 2, 3]
console.log('新数组:', newArray); // Output: 新数组: [2, 4, 6]

这个方法会创建一个新数组,并将原始数组中的每个元素映射到新数组中。它不会改变原始数组

reduce()

// 定义一个数组
const arr = [1, 2, 3, 4, 5];
// 使用 reduce() 方法将数组中的所有元素归约到一个值
const sum = arr.reduce((acc, num) => acc + num, 0);
// 输出结果
console.log('sum:', sum); // Output: sum: 15

可以用于求和、计算平均数、过滤数组等多种场景。