Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ES5、ES6、ES7、ES8、ES9 、ES10 数组方法总结

ES5、ES6、ES7、ES8、ES9 、ES10 数组方法总结

原创
作者头像
星辰大海c
发布于 2023-11-08 08:37:35
发布于 2023-11-08 08:37:35
58703
代码可运行
举报
文章被收录于专栏:前端学习教程前端学习教程
运行总次数:3
代码可运行
WechatIMG800.png
WechatIMG800.png

JavaScript 数组方法的总结,包括ES5、ES6、ES7、ES8、ES9 和 ES10

ES5 基本方法:

  1. push() 和 pop():
    • push(): 在数组的末尾添加一个或多个元素,并返回新数组的长度。
    • pop(): 移除并返回数组的最后一个元素。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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'
  1. unshift() 和 shift():
    • unshift(): 在数组的开头添加一个或多个元素,并返回新数组的长度。
    • shift(): 移除并返回数组的第一个元素。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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'
  1. concat(): 合并两个或多个数组,创建一个新的数组。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArray = arr1.concat(arr2);
console.log(mergedArray); // [1, 2, 3, 4]
  1. join() 和 split():
    • join(): 将数组的元素连接成一个字符串。
    • split(): 将字符串拆分为数组。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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']
  1. forEach() 和 map():
    • forEach(): 遍历数组并对每个元素执行指定的回调函数。
    • map(): 创建一个新数组,其中的元素是原数组经过回调函数处理后的结果。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 新增方法:

  1. find() 和 findIndex():
    • find(): 查找数组中满足条件的第一个元素,如果找不到返回 undefined。
    • findIndex(): 查找数组中满足条件的第一个元素的索引,如果找不到返回 -1。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
  1. filter(): 创建一个新数组,其中包含满足条件的元素。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
  1. reduce() 和 reduceRight():
    • reduce(): 从左到右依次执行回调函数,将数组元素减少为单个值。
    • reduceRight(): 从右到左依次执行回调函数,将数组元素减少为单个值。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 新增方法:

  1. includes(): 检查数组是否包含某个元素,如果包含则返回 true,否则返回 false
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const fruits = ['apple', 'banana', 'cherry'];
const includesBanana = fruits.includes('banana');
console.log(includesBanana); // true

ES8 新增方法:

  1. Object.values() 和 Object.entries():
    • Object.values(): 返回一个包含对象的所有值的数组。
    • Object.entries(): 返回一个包含对象的所有键/值对的数组。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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]]
  1. String.padStart() 和 String.padEnd(): 在字符串的开头或结尾添加空格或其他字符,以达到指定的长度。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const str = '5';
const paddedStr = str.padStart(3, '0');
console.log(paddedStr); // '005'

ES9 新增方法:

  1. Object.fromEntries(): 将键/值对的数组转换为对象。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const entries = [['name', 'Alice'], ['age', 30]];
const person = Object.fromEntries(entries);
console.log(person); // { name: 'Alice', age: 30 }

ES10 新增方法:

  1. Array.flat() 和 Array.flatMap():
    • Array.flat(): 将多维数组降维。
    • Array.flatMap(): 先使用 map() 方法对数组的每个元素进行映射,然后将结果压平一层。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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]
  1. String.trimStart() 和 String.trimEnd(): 去除字符串开头或结尾的空格。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const str = '   Hello, World!   ';
const trimmedStr = str.trimStart();
console.log(trimmedStr); // 'Hello, World!   '

const trimmedEndStr = str.trimEnd();
console.log(trimmedEndStr); // '   Hello, World!'

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ES7、ES8、ES9、ES10新特性大盘点
从 ECMAScript 2016(ES7)开始,版本发布变得更加频繁,每年发布一个新版本,好在每次版本的更新内容并不多,本文会细说这些新特性,尽可能和旧知识相关联,帮你迅速上手这些特性。
心莱科技雪雁
2019/12/11
2.1K0
ES7、ES8、ES9、ES10新特性大盘点
2025年 JavaScript 面试题的130道题目及其答案解析,万字长文,持续更新....
答案: 闭包是一个函数与其词法环境的组合。换句话说,闭包可以让一个函数访问并操作其外部函数的变量,即使外部函数已经返回。
王小婷
2025/05/25
6130
JavaScript中常用的数组方法总结
forEach()函数是JavaScript数组提供的一个用于遍历数组的方法。它接受一个回调函数作为参数,并且对数组中的每个元素依次调用该回调函数。
九仞山
2023/10/14
4770
[JavaScript] 数组与对象详解
对象是键值对的集合,每个键值对称为对象的一个 属性。键是字符串或符号,值可以是任意类型。
DevKevin
2025/01/23
1310
JavaScript中的ES7/ES8/ES9/ES10
自从前端开发流行起来,前端的各类技术如雨后春笋般出现,让人应接不暇,几年前还是jq一把梭,现在除了三大主流框架var,何种混合开发也接踵而至,还有可能取代JS的TS出现,我们要跟上时代的步伐,了解最新的技术,走在技术的前沿。
刘亦枫
2020/03/19
4.3K0
常见的数组基本用法
ES5方法:pop push shift unshift reverse sort splice
前端迷
2021/04/09
9960
ES6数组新方法[通俗易懂]
forEach()会修改原来的数组,不会返回执行结果。map()方法会得到一个新的数组并返回。 map的执行速度会更快。
全栈程序员站长
2022/09/05
4810
ES6,ES7,ES8,ES9,ES10,ES11,ES12...JS语法汇总集合
ES6,ES7,ES8,ES9,ES10,ES11,ES12...JS语法汇总集合新特性
痴心阿文
2022/11/18
3.7K0
ES6,ES7,ES8,ES9,ES10,ES11,ES12...JS语法汇总集合
汇总JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
本文集合了 ES6 至 ES11 常用到的特性,包括还在规划的 ES12,只列举大概使用,详细介绍的话内容量将十分巨大~.~。PS:使用新特性需要使用最新版的 bable 就行转义
coder_koala
2021/03/12
2.7K0
汇总JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
ES7、ES8、ES9、ES10、ES11、ES12新特性大全!
如果fromIndex为负值,使用数组长度 + fromIndex计算出的索引作为新的fromIndex,如果新的fromIndex为负值,则搜索整个数组。
zz_jesse
2024/07/04
4300
ES7、ES8、ES9、ES10、ES11、ES12新特性大全!
ES6 数组方法归纳整理
Array.from() 可接收三个参数,第一个参数为类数组对象,第二个参数为映射函数,如果使用了映射函数,可以传第三个参数表示映射函数的this值。
全栈程序员站长
2022/06/27
6410
30天学会 React | 笔记
使用var、let和const来声明一个变量。var是函数作用域,而let和const是块作用域。 在这个挑战中,我们使用 ES6 及以上的 JavaScript 特性。避免使用var。
yiyun
2023/01/08
3.7K0
30天学会 React | 笔记
Web - JavaScript 流程控制语句与数组
3.swith语句,除if语句之外,JavaScript提供了另外一种选择语句swith语句,swith语句的用途,当一个变量被分类讨论的情形。
stark张宇
2025/05/22
1010
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
综上所述,本文不只是查漏补缺的分享,更是一个详细周密的JS数组方法字典,您要是有长期的前端开发需求或是未来打算深耕前端技术,欢迎您收藏以备不时之需。要是能点个赞就更好了。
watermelo37
2025/01/22
4420
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
通过小事例来重温 ES10 几个新特性
ES10 虽然没有像 ES6 那么多新特性,但 ES10 仍然有一些有用的特性。文本通过简单示例来介绍了 ES10 新出来的特性。通过这种方式,咱们就可以快速理解,而不需要看太多的官方解释。
前端小智@大迁世界
2020/05/12
1.1K0
通过小事例来重温 ES10 几个新特性
ES10新特性(一)
BigInt 是一个任意精度的整数。这意味着变量现在可以 表示²⁵³ 数字,而不仅仅是9007199254740992。
ConardLi
2019/05/23
1.1K0
JavaScript array对象
concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
用户6973020
2020/03/01
1.5K0
8 - Array 的实例方法一
原文地址:https://dev.to/bhagatparwinder/array-instance-methods-59a2
前端黑板报
2022/06/13
3230
8 - Array 的实例方法一
📚从ES7到ES12,了解JavaScript的新特性与语法演变
Array.prototype.includes 是一个用于判断数组是否包含特定元素的方法。它返回一个布尔值,表示数组中是否存在指定的值。
linwu
2023/07/27
5000
JavaScript数组的常用方法
JavaScript数组是一种常见的数据类型,它由多个元素组成。以下是一些常用的JavaScript数组方法:
心安事随
2024/07/29
3070
推荐阅读
相关推荐
ES7、ES8、ES9、ES10新特性大盘点
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档