JS数组的常用10种方法详解


Posted in Javascript onMay 08, 2020

数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法:

在数组末尾插入元素

arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度。

例如:

let arr=[1,2,3,4,5]
var longth=arr.push(6,7);
console.log(arr, longth);

数组的arr的值变为arr[1,2,3,4,5,6,7];

length接收返回的是修改后数组的长度7;

删除数组末尾的元素

arr.pop()删除索引值最大的元素,并返回被删除的元素。

let arr=[1,2,3,4,5]
var delElement=arr.pop();
console.log(arr, delElement);

arr的值为[1,2,3,4] ,delElement的值为5

arr.pop()的与arr.length--的效果一样,但arr.length--没有返回值;

在数组的头部插入元素

unshift(value);在数组的头部添加一个或多个元素,并返回数组的新长度

let arr=[1,2,3,4,5]
var length= unshift(0);
console.log(arr,length);//arr的值为[0,1,2,3,4,5];length的值为更改后数组的长度6;

删除数组的头部元素

shift();删除索引为0的元素,并返回删除的元素

let arr=[1,2,3,4,5]
var delElement= unshift();
console.log(arr, delElement);

arr的值为[2,3,4,5];delElement的值为被删除的元素1;

数组和数组(或元素)的合并

concat()合并数组或元素,返回新的数组,原数组不会改变

let arr=[1,2,3,4,5]
let newArr=arr.concat([6,7,8],9,10);
console.log(newArr,arr);

newArr的值为[1,2,3,4,5,6,7,8,9,10];

arr的值还是原来的[1,2,3,4,5];

concat()还可以复制一个新数组;

let copyArr=arr.concat();//copyArr的值和arr的相同

在数组中添加删除或替换元素

splice();在任意位置添加或删除元素,返回删除或被替换的值,如果没有被删除或替换则返回空数组;

splice()方法会修改原数组的值;

只有一个值时,从当前位置删除到数组末尾

let arr=[1,2,3,4,5];
let num1=arr.splice(1)
console.log(num1;arr)//num=[2,3,4,5];arr=[1];

有两个值时,第一个值为删除的位置,第二个值为删除的个数;

let arr=[1,2,3,4,5];
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1;arr);// num1=[3,4,5],arr=[1,2]

有三个或者多个值时,第一个值为插入元素的位置,第二个值为替换的个数,后面的值都为插入的新元素;

let arr=[1,2,3,4,5];
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素,并且插入6,7,8

//如果第二个值为0,则不替换,直接插入6,7,8;
console.log(num2;arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

截取复制数组指定位置的内容

slice(开始位置,结束位置);第二个参数不写默认到尾部,只能从前往后截取;返回的值为截取到的内容形成的新数组;

let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组;
let arr=[1,2,3,4,5];
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr);//newArr=[2,3];arr=[1,2,3,4,5];

slice()方法不会更改到原数组的值

指定字符连接字符串

join();数组的每个元素以指定的字符连接形成新字符串返回;

let arr=[1,2,3,4,5];

let newArr=arr.join()//默认用逗号连接
console.log(newArr);//newArr=1,2,3,4,5;

//如果连接符为空字符串,则会无缝连接
console.log(arr.join(“”));//输出为12345;

将数组进行排序

sort()将数组进行排序(升序),返回新数组,原数组也会改变;

let arr=[2,3,5,1,4];
let newArr=arr.sort();
console.log(newArr,arr);//newArr=[1,2,3,4,5]; arr r=[1,2,3,4,5]

将数组进行倒序

reverse();可以将数组进行倒序,并返回新数组,原数组也会随之改变;

let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr);//newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];

综上为数组的常用方法!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
如何实现js拖拽效果及原理解析
May 08 #Javascript
JS图片预加载三种实现方法解析
May 08 #Javascript
JavaScript ES6 Class类实现原理详解
May 08 #Javascript
JavaScript cookie原理及使用实例
May 08 #Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
You might like
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python中星号变量的几种特殊用法
2016/09/07 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
施工安全责任书
2014/04/14 职场文书
警示教育活动总结
2014/05/05 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
旷工检讨书1000字
2015/01/01 职场文书
高中家长意见怎么写
2015/06/03 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
详解Node.js如何处理ES6模块
2021/05/15 Javascript
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS