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)


目录
相关文章
|
3天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
16天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
16天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
15 0
|
1天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
12 4
|
5天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
9天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
12天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
16 0