介绍一下28个JS常用数组方法


Posted in Javascript onMay 06, 2022

1.Array.map()

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const list = [:tired_face:, :tired_face:, :tired_face:, :tired_face:];
list.map((:white_circle:️) => :grinning:); // [:grinning:, :grinning:, :grinning:, :grinning:]

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

2.Array.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:];
list.filter((:white_circle:️) => :white_circle:️ === :grinning:); // [:grinning:, :grinning:]

// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

3.Array.reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.reduce((:white_large_square:️, :white_circle:️) => :white_large_square:️ + :white_circle:️); // :grinning: + :tired_face: + :grinning: + :tired_face: +   

// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

4.Array.reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.reduceRight((:white_large_square:️, :white_circle:️) => :white_large_square:️ + :white_circle:️); //    + :tired_face: + :grinning: + :tired_face: + :grinning:

// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

5.Array.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.fill(:grinning:); // [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:]


const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

6.Array.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.find((:white_circle:️) => :white_circle:️ === :grinning:); // :grinning:
list.find((:white_circle:️) => :white_circle:️ === :stuck_out_tongue_closed_eyes:); // undefined


const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

7.Array.indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.indexOf(:grinning:); // 0
list.indexOf(:rage:); // -1

// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

8.lastIndexOf()

arr.lastIndexOf(searchElement[, fromIndex])

方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.lastIndexOf(:grinning:); // 3
list.lastIndexOf(:grinning:, 1); // 0

// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

9.Array.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.findIndex((:white_circle:️) => :white_circle:️ === :grinning:); // 0

// You might be thinking how it's different from `indexOf`   
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

// OR
const array = [{
  id: :grinning:
}, {
  id: :tired_face:
}, {
  id:   
}];

array.findIndex((element) => element.id ===   ); // 2

10.Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.includes(:grinning:); // true

// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

11.Array.pop()

pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.pop(); //   
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:]

// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

12.Array.push()

push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.push(:rage:); // 5
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:,   , :rage:]

// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

13.Array.shift()

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]; list.shift(); // :grinning: list; // [:tired_face:, :grinning:, :tired_face:,   ]

// Code const list = [1, 2, 3, 4, 5]; list.shift(); // 1 list; // [2, 3, 4, 5]

14.Array.unshift()

unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.unshift(:rage:); // 6
list; // [:rage:, :grinning:, :tired_face:, :grinning:, :tired_face:,   ]

// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

15.Array.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.splice(1, 2); // [:grinning:, :tired_face:]
list; // [:grinning:, :tired_face:,   ]

// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]

16.Array.slice()

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.slice(1, 3); // [:tired_face:, :grinning:]
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]

// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

17Array.join()

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.join(':wavy_dash:'); // ":grinning::wavy_dash::tired_face::wavy_dash::grinning::wavy_dash::tired_face::wavy_dash:  "

// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"

18.Array.reverse()

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.reverse(); // [  , :tired_face:, :grinning:, :tired_face:, :grinning:]
list; // [  , :tired_face:, :grinning:, :tired_face:, :grinning:]

// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

19.Array.sort()

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.sort(); // [:grinning:, :grinning:, :tired_face:, :tired_face:,   ]

// This make more sense   
const array = ['D', 'B', 'A', 'C'];
array.sort(); // :grinning: ['A', 'B', 'C', 'D']

// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // :anguished: [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // :grinning: [1, 2, 3, 4, 10]

20.Array.some()

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.some((:white_circle:️) => :white_circle:️ === :grinning:); // true
list.some((:white_circle:️) => :white_circle:️ === :rage:); // false

// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

21.Array.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.every((:white_circle:️) => :white_circle:️ === :grinning:); // false

const list = [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:];
list.every((:white_circle:️) => :white_circle:️ === :grinning:); // true

// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

22.Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

const list = :grinning::tired_face::grinning::tired_face:  ;
Array.from(list); // [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]

const set = new Set([':grinning:', ':tired_face:', ':grinning:', ':tired_face:', '  ']);
Array.from(set); // [:grinning:, :tired_face:,   ]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

23.Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个 undefined 组成的数组)。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

24.Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

Array.isArray([:grinning:, :tired_face:, :grinning:, :tired_face:,   ]); // true
Array.isArray(  ); // false

// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

25.Array.at()

at() 方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.at(1); // :tired_face:

// Return from last   
list.at(-1); //   
list.at(-2); // :tired_face:

// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

26.copyWithin()

arr.copyWithin(target[, start[, end]])

方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.copyWithin(1, 3); // [:grinning:, :grinning:,   , :tired_face:,   ]

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.copyWithin(0, 3, 4); // [:tired_face:, :tired_face:, :grinning:, :tired_face:,   ]

// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

27.Array.flat()

var newArray = arr.flat([depth])
// depth 可选:指定要提取嵌套数组的结构深度,默认值为 1。

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:,   ]];
list.flat(Infinity); // [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]

// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

28.Array.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:,   ]];
list.flatMap((:white_circle:️) => [:white_circle:️, :white_circle:️ + :white_circle:️ ]); // [:grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:, :grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:,   ,     ]

// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

到此这篇关于28个JS常用数组方法总结的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
js判断两个数组相等的5种方法
May 06 #Javascript
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php模板原理讲解
2013/11/13 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
详解php中 === 的使用
2016/10/24 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue实现简单图片上传
2020/06/30 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python爬虫基础知识点整理
2020/06/02 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
跳槽求职信范文
2014/05/26 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
超级礼物观后感
2015/06/15 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
党员干部学习心得体会
2016/01/23 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python