技巧收藏|10个JavaScript常用数组操作方法
摘要:这篇文章,向大家展示了在日常开发中,数组有哪些小技巧值得借鉴和学习。
在web前端开发第二阶段Javascript中,数组是一个重要且常见的知识点,我们经常将数据存储在数组中,遍历数组或替换数组元素日常开发我们都会用到。学习web前端开发,数组也是会经常用到的。这篇文章,向大家展示了在日常开发中,数组有哪些小技巧值得借鉴和学习,那让我们开始说吧!
1.添加数组元素
1)push() 在我们数组的末尾添加一个或者多个数组元素,push在英文中也是推的意思
var arr = [1, 2, 3];
// arr. push(4,pink' );
console.1og(arr .push(4, ' pink'));
console.1og(arr);
(1)push是可以给数组追加新的元素
(2) push() 参数直接写数组元素就可以了
(3) push完毕之后,返回的结果是新数组的长度
(4) 原数组也会发生变化
2). unshift 在我们数组的开头添加一个或者多个数组元素
console.1og(arr .unshift('red', ' purple'));
console.1og(arr);
(1) unshift是可以给数组前面追加新的元素
(2) unshift() 参数直接写数组元素就可以了
(3) unshift完毕之后,返回的结果是新数组的长度
(4) 原数组也会发生变化|
2.删除数组元素
pop()它可以删除数组的最后一个元素
console .log(arr. pop());
console.log(arr);
1) pop是可以删除数组的最后一个元素记住一 次只能删除个元素
2) pop() 没有参数
3) pop完毕之后,返回的结果是删除的那个元素
4) 原数组也会发生变化
shift() 它可以删除数组的第一个元素
console.1og(arr .shift());
console.1og(arr);
(1) shift是可以删除数组的第一个元素记住一 次只能删除个元素
(2) shift() 没有参数
(3) shift完毕之后,返回的结果是删除的那个元素
(4) 原数组也会发生变化
3.数组去重
怎么对JS的数组去重,有个非常快速且简单的方法,使用new Set()以及Array.from()或者展开运算符(...)
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
// 方法一
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // 结果返回 [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// 方法二
var uniqueFruits2 = [...new Set(fruits)];
console.log(uniqueFruits2); // 结果返回[“banana”, “apple”, “orange”, “watermelon”, “grape”]
4.替换数组
日常开发中经常需要替换或者删除一些指定的数据,遇到这种场景时一定要联想到Array.protoType.splice这个方法。传参时稍微复杂点,第一个参数是开始的索引,第二个参数是需要删除的数量,剩下的就是需要添加的值(可以是一个或者多个)。
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // 结果返回[“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]
5.遍历数组
在遍历数组建议使用for()循环或者for of;
//for of遍历数组
var arr=[1,2,3,4];
for(var value of arr){
console.log(value);var arr=[1,2,3,4];
for(arr = 0; arr < arr.length; j++) {
}
6.清空数组
有时我们需要清空一个数组,比如用户点击了清空购物车。可以一条一条地删除,但是很少有像我这么可爱的程序员,hhhhh。其实一行代码就能搞定,那就是直接将length设置成0就ok啦!
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits); // 返回空 []
7.数组转换为对象
有时候需要将数组转换成对象的形式,使用.map()一类的迭代方法能达到目的,这里还有个更快的方法,前提是你正好希望对象的key就是数组的索引。
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj);
// 结果返回{0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
8.填充数组
创建数组的时候,你有没有遇到过需要填充上默认值的场景,你肯定首先想到的就是循环这个数组。可以用.fill这个方法
var newArray = new Array(10).fill(“1”);
console.log(newArray);
// 结果返回的都是1 [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
9.合并数组
你知道如何合并数组吗,答案就是.concat()。
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food);
//结果返回 [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
10.两个数组的交、差、补、并集
找出两个数组的交集的答案有很多,下面展示的是常用写法,直接使用 filter、concat 来计算
var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
//交集
var c = a.filter(function(v){ return b.indexOf(v) > -1 })
//差集
var d = a.filter(function(v){ return b.indexOf(v) == -1 })
//补集
var e = a.filter(function(v){ return !(b.indexOf(v) > -1) }).concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))
//并集
var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));
console.log("数组a:", a);
console.log("数组b:", b);
console.log("a与b的交集:", c);
console.log("a与b的差集:", d);
console.log("a与b的补集:", e);
console.log("a与b的并集:", f);
小结
这篇文章,向小伙伴们展示了在JS中怎么去操作数组的十种小技巧,其实在日常开发中,很可能还会遇到更加复杂的业务,希望你们能一一解剖成小问题,换个角度去思考,最终找到入手的地方来解决问题。
本文分享自华为云社区《web前端开发之JavaScript:数组技巧知多少》,原文作者:运气男孩。
点击关注,第一时间了解华为云新鲜技术~
技巧收藏|10个JavaScript常用数组操作方法相关推荐
- JavaScript常用数组操作方法
1.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. 2.join() join() 方法用于把数组中的所有元素放入一个字符串. ...
- 总结JavaScript常用数组操作方法,包含ES6方法
一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...
- JavaScript常用数组操作方法,包含ES6方法
一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...
- JavaScript常用数组方法
JavaScript数组方法有以下这些: forEach() 方法对数组的每一个元素执行一次提供的函数. map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变. filter( ...
- JavaScript 常用数组方法及使用技巧「数组的力量隐藏在数组方法中,必收藏」
JavaScript 数组的力量隐藏在数组方法中. 没错!如果你只知道用数组,但是不知道数组的这些方法怎么用,那么你就不是真正的懂他. 正餐开始,来看看 JavaScript 中有哪些常用的数组方法! ...
- 原生Javascript(数组操作方法总结)-更新
原生Javascript数组 创建数组 创建字面量数组 创建数组对象 根据对象创建数组 访问元素 数组的属性 数组的方法 concat() at() copyWithin() every() fill ...
- 计算机搞笑技巧,分享10个最常用的电脑操作技巧,你能掌握几个?
Hi,大家好,我是小雨!许多人都接触过电脑,都使用过电脑,但是你对电脑了解多少?比如对最常使用的键盘,你又了解多少?除了正常的打字之外,键盘上边边角角的那些按键都是做什么用的? 上图是标准键盘上一些不 ...
- JavaScript常用数组操作
<script language="JavaScript">var a = [1,2,3,4];var b = a.shift(); // 删除原数组第一项,并返回删除 ...
- JavaScript 常用数组函数方法专题
1. 由字符串生成数组 split() 分割字符串,并将分割的部分作为一个元素保存在一个新建的数组中. var str1 = "this is an emample to using the ...
最新文章
- python中处理日期和时间的标准模块是-2019python常见的170道面试题解析
- 三层学习------实践篇
- Guide: Solr performance tuning--转载
- 制作 ramdisk.img,使用cpio 和 gzip
- 远程连接——Windows远程连接CentOS远程桌面
- OnItemCommand属性使用方法
- android简单点餐系统_微信点餐和扫码点餐系统能为商家带来什么?
- git tag和分支的区别_GIT常用命令大全
- HDFS常用文件操作命令汇总
- 萌新程序员找工作该怎么写简历?
- IBM之alphablox + tomcat 安装小记
- vue高德地图H5定位及城市选择器控件实现详细教程
- 谎言,统计数据和供应商
- leapftp 软件,leapftp 软件的5大功能
- mysql 插入数据 特殊符号_使用特殊字符将数据插入mysql数据库
- 服务器3D场景建模(五):体素场景(三)
- 吐血整理公众号推文制作技巧
- springboot+thymeleaf+shiro标签
- 程序员35岁真的会被辞退吗?
- 和平精英苹果系统显示服务器暂未开放,和平精英苹果更新不了 苹果无法进行版本更新如何解决...
热门文章
- CSS 设置列表格式
- Python笔记(2) Python基础
- vim win装_vim插件管理器的安装和配置-windows
- 计算机培训专业中心架,ASEM工业电脑工业计算机全系列自动化产品-销售中心
- python解题软件哪个好用_几个好用的Python数据分析工具
- python 第三方登录_【Python web 开发】social_django 集成第三方登录
- mysql operator_mysql-operator容器化部署mysql8
- OPCDA通信--工作在透明模式下的CISCO ASA 5506-X防火墙配置
- Java——面向对象进阶(final关键字,static关键字,匿名对象,内部类,四种访问修饰符,代码块)...
- Python 多线程进程高级指南(二)