ES5、ES6、ES7、ES8、ES9 、ES10 数组方法总结
原创ES5、ES6、ES7、ES8、ES9 、ES10 数组方法总结
原创
星辰大海c
发布于 2023-11-08 16:37:35
发布于 2023-11-08 16:37:35
代码可运行
运行总次数：0
代码可运行
WechatIMG800.png
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); // trueES8 新增方法：
- 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!'原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
