javascript 常用数组方法(es5数组api)

217 阅读3分钟

前言

改变,从行动开始。数组的处理是日常开发中运用的最多的数据处理方法。本篇文章主要带来的是一些常用的es5数组api方法,es6新增的api其他文章再单独去一一列举,本篇文章不做赘述。

push()和unshift()

let arr = [1, 2, 3]
arr.push(4) //arr =[1,2,3,4] 往数组最后一位添加元素 会改变原数组
arr.unshift('xx'); //arr =['xx',1,2,3,4] 往数组第一位一位添加元素 会改变原数组

pop()和shift()

let arr = [1, 2, 3]
let arrFirst = arr.pop(); //3  删除数组第一个成员并返回  arr=[2,3] 会改变原数组
let arrLast = arr.shift(); //1  删除数组最后一个成员并返回 arr=[2] 会改变原数组

删除数组成员和 splice()

因为数组属于对象,所以可以使用 delete 运算符来删除: 但是会在数组留下未定义的空洞,所以并不推荐使用。

let arr = [1, 2, 3]
delete arr[0];
console.log(arr, arr[0]); //[empty, 2, 3] undefined

那么通常我们会使用splice()来进行删除或者添加等操作
参数1 必需。定义元素删除/插入的位置。(元素下标)
参数2 可选。规定应该删除多少元素。可以是 0。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
参数3 可选。要添加到数组的新元素。

删除数组下标为2包含2后的所有成员

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

下标为2开始包含2删除1位

let arr = [1, 2, 3, 4, 5]
arr.splice(2, 1) //[1, 2, 4, 5]

下标为0(包含0)开始删一个 在下标为0处插入'x','y'

let arr = [1, 2, 3, 4, 5]
arr.splice(0, 1, 'x', 'y')//arr=["x", "y", 2, 3, 4, 5]

join()和toString()以及split() 数组拼接与分割

let arr = [1, 2, 3, 4, 5]
let str = '1,2,3,4';
// 将数组元素以指定分隔符结合为一个字符串
var arrJion = arr.join(','); //1,2,3,4,5

//将数组转为字符串
var arrToString = arr.toString(); //1,2,3,4,5

//将字符串以指定分隔符分割为一个数组
var arrSplit = str.split(',') //["1", "2", "3", "4"]  需注意数组元素均为string类型 
var splitNum = str.split(',').map(Number) //[1, 2, 3, 4]  分割时所有数组成员转number类型

数组排序 reverse()和sort()

数组排序会改变原数组

//颠倒数组中元素的顺序。
let arr = [1, 2, 3, 4, 5]
var arrReverse = arr.reverse() //[5, 4, 3, 2, 1]

//无序数组排序。
let arrProto = [1, 4, 3, 2]
arrProto.sort((a, b) => {return a - b;})//[1, 2, 3, 4] 小到大
arrProto.sort((a, b) => { return b - a;}) //[4, 3, 2, 1]大到小
//function内,只return不做其他逻辑处理时可简写,省略return
arrProto.sort((a, b) => b - a);
//随机排序
arrProto.sort((a, b) => {
    return 0.5 - Math.random()
});

concat() 合并数组 es6...

//concat() 不会更改现有数组。它总是返回一个新数组。
let arr_a = [1, 2];
let arr_b = [3, 4];
let arr_c = [5, 6];
let arrConcat = arr_a.concat(arr_b, arr_c);//[1, 2, 3, 4, 5, 6]

//es6 可以... 解构来实现数组合并
let arrEs6 = [...arr_a, ...arr_b]//[1, 2, 3, 4]

结束语

改变,从行动开始。一开始没准备用es6的一些语法,但是还是顺手写了一点,map() ...解构,等。数组的基本处理大多都会改变原数组,这是日常开发中需要注意的。在实际的日常开发中,es6的一些新的方法真的特别好用,如果你还在用一些老的语法个人建议可以开始尝试学习和使用一些新的语法,开发如逆水行舟,不进则退。当别人在进步,你还在抱着老一套不去改变,那么终将被淘汰。想要改变,并付诸行动,与君共勉。