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)


目录
相关文章
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
6月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
108 13
|
12月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
525 1
|
5月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
12月前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
191 11
|
11月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践

热门文章

最新文章