JavaScript 数组方法的总结,包括ES5、ES6、ES7、ES8、ES9 和 ES10
ES5 基本方法:
- push() 和 pop():
push(): 在数组的末尾添加一个或多个元素,并返回新数组的长度。pop(): 移除并返回数组的最后一个元素。
const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength); // 3
const lastFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(lastFruit); // 'orange'
- unshift() 和 shift():
unshift(): 在数组的开头添加一个或多个元素,并返回新数组的长度。shift(): 移除并返回数组的第一个元素。
const fruits = ['banana', 'orange'];
const newLength = fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength); // 3
const firstFruit = fruits.shift();
console.log(fruits); // ['banana', 'orange']
console.log(firstFruit); // 'apple'
- concat(): 合并两个或多个数组,创建一个新的数组。
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArray = arr1.concat(arr2);
console.log(mergedArray); // [1, 2, 3, 4]
- join() 和 split():
join(): 将数组的元素连接成一个字符串。split(): 将字符串拆分为数组。
const fruits = ['apple', 'banana', 'cherry'];
const joined = fruits.join(', ');
console.log(joined); // 'apple, banana, cherry'
const str = 'apple,banana,cherry';
const splitArray = str.split(',');
console.log(splitArray); // ['apple', 'banana', 'cherry']
- forEach() 和 map():
forEach(): 遍历数组并对每个元素执行指定的回调函数。map(): 创建一个新数组,其中的元素是原数组经过回调函数处理后的结果。
const numbers = [1, 2, 3];
numbers.forEach((num) => {
console.log(num);
});
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6]
ES6 新增方法:
- find() 和 findIndex():
find(): 查找数组中满足条件的第一个元素,如果找不到返回 undefined。findIndex(): 查找数组中满足条件的第一个元素的索引,如果找不到返回 -1。
const numbers = [10, 20, 30, 40, 50];
const result = numbers.find((num) => num > 25);
console.log(result); // 30
const index = numbers.findIndex((num) => num > 25);
console.log(index); // 2
- filter(): 创建一个新数组,其中包含满足条件的元素。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
- reduce() 和 reduceRight():
reduce(): 从左到右依次执行回调函数,将数组元素减少为单个值。reduceRight(): 从右到左依次执行回调函数,将数组元素减少为单个值。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
const concatenated = numbers.reduceRight((acc, num) => acc + num.toString(), '');
console.log(concatenated); // '54321'
ES7 新增方法:
- includes(): 检查数组是否包含某个元素,如果包含则返回
true,否则返回false。
const fruits = ['apple', 'banana', 'cherry'];
const includesBanana = fruits.includes('banana');
console.log(includesBanana); // true
ES8 新增方法:
- Object.values() 和 Object.entries():
Object.values(): 返回一个包含对象的所有值的数组。Object.entries(): 返回一个包含对象的所有键/值对的数组。
const person = {
name: 'Alice',
age: 30,
};
const values = Object.values(person);
console.log(values); // ['Alice', 30]
const entries = Object.entries(person);
console.log(entries); // [['name', 'Alice'], ['age', 30]]
- String.padStart() 和 String.padEnd(): 在字符串的开头或结尾添加空格或其他字符,以达到指定的长度。
const str = '5';
const paddedStr = str.padStart(3, '0');
console.log(paddedStr); // '005'
ES9 新增方法:
- Object.fromEntries(): 将键/值对的数组转换为对象。
const entries = [['name', 'Alice'], ['age', 30]];
const person = Object.fromEntries(entries);
console.log(person); // { name: 'Alice', age: 30 }
ES10 新增方法:
- Array.flat() 和 Array.flatMap():
Array.flat(): 将多维数组降维。Array.flatMap(): 先使用map()方法对数组的每个元素进行映射,然后将结果压平一层。
const nestedArray = [1, [2, 3], [4, [5]]];
const flatArray
= nestedArray.flat();
console.log(flatArray); // [1, 2, 3, 4, [5]]
const array = [1, 2, 3];
const flatMapped = array.flatMap((num) => [num, num * 2]);
console.log(flatMapped); // [1, 2, 2, 4, 3, 6]
- String.trimStart() 和 String.trimEnd(): 去除字符串开头或结尾的空格。
const str = ' Hello, World! ';
const trimmedStr = str.trimStart();
console.log(trimmedStr); // 'Hello, World! '
const trimmedEndStr = str.trimEnd();
console.log(trimmedEndStr); // ' Hello, World!'