网站首页 > 技术文章 正文
在Javascript中,数组是很常用的类型,也是经常使用到的类型之一。熟练掌握数组的操作方法,会在工作中,更加得心应手。
声明,初始化一个空的数组
- 声明一个没有长度的空数组
let aa = [];
- 声明一个长度为5的空数组
let aa = Array(5); // [empty * 5]
- 声明一个长度为5,内容为''的数组
let aa = Array(5).fill(''); // ['', '', '', '', '']
计算数组的总和,最大,最小值
计算数组的总和或者最值,一般情况下,会通过for循环的方式计算。但是数组中提供的reduce()方法,是可以快速计算的。
- 总和
let aa = [ 2, 3, 1, 6 ];
aa.reduce( (a, b) => a+ b ); // 12
- 最大值
let aa = [ 2, 3, 1, 6 ];
aa.reduce( (a, b) => a > b ? a : b); // 6
- 最小值
let aa = [ 2, 3, 1, 6 ];
aa.reduce( (a, b) => a < b ? a : b); // 1
注:reduce()方法还有更强大的功能,详情可以参考Array.prototype.reduce() - JavaScript | MDN
对数组的排序
对数组的排序主要分为对字符串数组的排序,对数字数组的排序,对对象数组的排序
- 字符串数组的排序
let aa = ['jk', 'gh', 'as'];
<!-- 正序 -->
aa.sort(); // ['as', 'gh', 'jk']
<!-- 返序 -->
aa.reverse(); // ['jk', 'gh', 'as']
- 数字数组的排序
let aa = [2, 5, 3, 7];
<!-- 正序 -->
aa.sort((a, b) => a - b) // [2, 3, 5, 7]
<!-- 返序 -->
aa.sort((a, b) => b - a); // [7, 5, 3, 2]
- 对象数组的排序
let aa = [
{ first_name: 'Lloer', last_name: 'Jamf' },
{ first_name: 'Pig', last_name: 'Bodine' },
{ first_name: 'Pirate', last_name: 'Prentice' }
];
aa.sort((a, b) => a.last_name.localeCompare(b.last_name));
<!--
输出:
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lloer", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3
-->
<!-- a.localeCompare(target) 用本地特定的顺序来比较两个字符串 -->
删除重复值
在一个数组中,常常会有重复值,但是有时又不需要这些重复值,则可以使用以下的方法,效率比较高
- 使用ES6中的Set降重
let aa = [1, 2, 3, 1, 5, 2];
Array.from(new Set(aa)); // [1, 2, 3, 5]
// or
[...new Set(aa)] // [1, 2, 3, 5]
// from()方法将一个类数组转化为一个数组
- 使用filter(),indexOf()组合的方式
let aa = [1, 2, 3, 1, 5, 2];
aa.filter((item, idx, arr) => arr.indexOf(item) === idx); // [1, 2, 3, 5]
打乱数组
随机打乱数组,可以使用Math.random()方法
let aa = [2,4,1,6,4]
aa.sort(() => {
return Math.random() - 0.5;
})
// 会随意打乱数组
// (5) [4, 2, 6, 4, 1]
// (5) [6, 2, 4, 1, 4]
过滤一些虚假值
在数组中常会有0,数字,undefine,null,fasle,"",''等类型,使用下面的方法就可以很容易的过滤出虚假值
let aa = [1, 2, null, true, false, '', null];
aa.filter(Boolean); // [1, 2, true]
猜你喜欢
- 2024-11-10 趣谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
- 2024-11-10 当裸辞遇到了面试难,你需要了解一下这些面试题
- 2024-11-10 JavaScript -- Map vs ForEach javascript map vs foreach
- 2024-11-10 面试官:请说下Object和Map的区别,Map的时间复杂度是多少
- 2024-11-10 从小白到专家:JavaScript 延展操作符的几个基本用法
- 2024-11-10 JavaScript slice()方法用法简介 js中slice函数
- 2024-11-10 《你不知道的 Blob》番外篇 你不知道 小说
- 2024-11-10 js中检测数据类型的方法汇总 检测js对象是数组类型
- 2024-11-10 JS函数式编程工具:数组reduce方法的运用
- 2024-11-10 「前端知乎系列」ArrayBuffer 和 Blob 对象
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-