介绍一下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代码
Mar 06 Javascript
Open and Print a Word Document
Jun 15 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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静态变量当缓存的方法
2013/11/13 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
方正Java笔试题
2014/07/03 面试题
大学团支书的自我评价分享
2013/12/14 职场文书
大一自我鉴定范文
2013/12/27 职场文书
霸王洗发水广告词
2014/03/14 职场文书
色戒观后感
2015/06/12 职场文书
电台广播稿范文
2015/08/19 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python