JS中数组的增删改查操作实践总结

简介: JS中数组的增删改查操作实践总结

首先说明一下js中对象类型: JS函数对象与原型


d92e3bba1555961c10c2261a30d876d7.png

typeof 用来判定目标是什么类型。

【1】数组创建

数组下标,index是从 0开始的。

var array=new Array();//创建一个空数组
var array=new Array(10);创建一个length为10的空数组
var arry = [0,1];//number数组
var arry1 = ['2','3'];//string 数组
var arry2 = ["2","3",true];//string和boolean 数组

【2】数组添加

index从0开始,index依次增加。

array.push(0);
array.push(1);
arry.push(2);//放入number 2
arry.push('3');//放入string 3

这是数组是依次在后面添加,index依次递增。值得注意的是,这时候在页面alert数组,看到的是 0,1,2,3。但是这里的3是字符串,非number!

使用$.inArray(3 ,arry);将会弹出 -1 。

使用.inArray("3",arry);或.inArray("3" ,arry);或.inArray('3' ,arry);将会弹出 3 。

在指定index添加元素

在指定 index 处开始添加 item1,…,itemx 。

arrayObject.splice(index,0,item1,.....,itemX);
//第二个参数一定为0!!!
arry.splice(3,0,7);
alert(arry);//0,1,2,7,3;

【2】从数组中删除元素

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

arrayObject.splice(index,howmany,item1,.....,itemX)

测试代码

arry.splice(2);
//删除从index=2开始以后的所有元素,包括index=2
arry.splice(2,1);
//删除index=2的元素
arry.splice(2,2);
//删除index=2开始以后的两个元素,包括index=2

【3】修改数组元素

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

  • 这时候第三个参数列表一定不能为空
arrayObject.splice(index,howmany,item1,.....,itemX)

测试代码

arry.splice(2,1,8);//将index=2的一个元素替换为8;
arry.splice(2,2,8);//将index=2开始以后的两个元素替换为8,包括index=2;

【4】查找数组中的某个元素

① 知道下标获取值

var element = arry[index];

② 知道值获取下标

var index = $.inArry(element,arry);

【5】join方法

join() 方法将数组的所有元素组成一个字符串。

var str = arry.join();
alert(typeof str+", "+str);

0f72be4e71dce9168fb1b96080475cb8.png

以指定分隔符组成字符串:

var str = arry.join('.');
alert(typeof str+", "+str);

94118205f3b240fd6696f6c5e72a8126.png

无分隔符的字符串:

var str = arry.join("");
alert(typeof str+", "+str);

001a88894baa54c0f6b519c85e15d461.png

【6】ES6中对数组的操作

这里假设array=[1,2,3…]这样的数组。


① 判断数组中是否包含某个元素

includes方法判断数组是否包含某个元素,返回true or false

array.includes(data)

② findIndex获取数组中某个元素的索引

let findIndex = array.findIndex(function(data) {
    return data == 某个值;
});

③ splice删除某个元素

 array.splice(array.findIndex(item => item == 某个值), 1)


目录
相关文章
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
137 1
|
2月前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
2月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
10天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
25天前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
26天前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
25天前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
前端开发 JavaScript
深入理解JavaScript中的事件循环(Event Loop):从原理到实践
【10月更文挑战第12天】 深入理解JavaScript中的事件循环(Event Loop):从原理到实践
44 1
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
39 2
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
下一篇
DataWorks