JS组数操作方法(包含ES6)

本文全面梳理了JavaScript数组的常用操作方法,包括ES6新增的特性,如push、pop、unshift、shift、reverse、splice、fill、sort等Mutator方法,join、concat、slice、toString等Accessor方法,以及forEach、find、filter、map等Iteration方法。了解这些方法将提升代码的编写效率。
摘要由CSDN通过智能技术生成

因为数组操作的方法有很多,我们在实际项目中又会经常使用,本篇文章一次性整理常用的数组操作方法 ( 包含 ES6 的 map、forEach、every、some、filter、find、from、of…等 ),熟悉了这些数组的操作方法,编起代码来也就会更加干净利落哟。
Array数组的方法:

Mutator方法————"突变方法"会改变数组自身的值;
 
Accessor方法————"访问方法"不会改变数组自身的值;
 
Iteration方法————"遍历的方法" 
 
Establish方法————"创建新方法"

一、Mutator方法(会改变数组自身的值)
1、[ ].push
作用:将一个或多个元素添加到数组的末尾,
传参:(单个或多个数组元素);
返回值:新数组的长度;

 //标准用法
 arr.push(el1, el2 ……elN);
 //合并两个数组
 [].push.apply(arr1, arr2)
let a = [1,2,3,4,5,6,7,8];
a.push(9, 10);
console.log(a); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2、[].pop(),
作用:删除最后一个元素,
传参:无;
返回值:删除的元素。

//标准用法
let a = [1 ,2 ,3 ];
a.pop();//3
let a = [1,2,3,4,5,6,7,8];
a.pop();
console.log(a); // [1, 2, 3, 4, 5, 6, 7]

3、[ ].unshift
作用:将一个或多个元素添加到数组的开头,
传参:(单个或多个数组元素);
返回值:新数组的长度;

 //标准用法
 arr.unshift(el1, el2 ……elN);
let a = [1,2,3,4,5,6,7,8];
a.unshift(100,200,300);
console.log(a); // [100, 200, 300, 1, 2, 3, 4, 5, 6, 7, 8]

4、[].shift(),
作用:删除第一个元素,
传参:无;
返回值:删除的元素。

//标准用法
let a = [1 ,2 ,3 ];
a.shift();//1
let a = [1,2,3,4,5,6,7,8];
a.shift();
console.log(a); // [2, 3, 4, 5, 6, 7, 8]

5、[].reverse(),
作用:数组元素颠倒位置,
传参:无;
返回值:颠倒后的数组。

//标准用法
arr.reverse()
let a = [1,2,3,4,5,6,7,8];
a.reverse();
console.log(a); // [8, 7, 6, 5, 4, 3, 2, 1]

6、[].splice(),
作用:移除或新增数列的元素,
传参:(索引(要移除或要添加的索引( 必填)),删除个数【要移除的长度( 选填,若不填则从第一个参数序号位置开始,后方的所有元素都会被移除,若设定为0则不会有元素被移除)】,要添加的元素【要替换的内容( 选填 )】);
返回值:被删除的元素组成的一个数组。

//标准用法
array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)
let a = [1,2,3,4,5,6,7,8];
a.splice(5,1);
console.log(a);
// [1, 2, 3, 4, 5, 7, 8] ( 6 被移除了 )

添加第三个参数就能够添加或替换元素。

let a = [1,2,3,4,5,6,7,8];
a.splice(5,1,100);
console.log(a);
// [1, 2, 3, 4, 5, 100, 7, 8] ( 6 被移除,100加到第5个位置 )
let b = [1,2,3,4,5,6,7,8];
b.splice(5,3,100,200,300);
console.log(b);
// [1, 2, 3, 4, 5, 100, 200, 300] ( 6,7,8 被移除,100,200,300 加到第 5,6,7 个位置 )
let c = [1,2,3,4,5,6,7,8];
c.splice(5,0,100);
console.log(c);
// [1, 2, 3, 4, 5, 100, 6, 7, 8] ( 沒有元素被移除,100 加到第 5 个位置 )

7、[].fill(),
作用:用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,
传参:(准备要置换的内容(必填),从什么位置开始置换(选填,不设定就全部置换) ,停止置换的元素的前一个位置(选填,预设等于数组长度)。);
返回值:修改后的数组。

//标准用法
arr.fill(value) 
arr.fill(value, start) 
arr.fill(value, start, end)
 
//例子
[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1)         // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
let a =
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值