ES3、ES5、ES6数组常用的方法

Array对象

js中内置了一个Array构造函数,可以创建数组对象,本文主要介绍数ES3、ES5、ES6数组中一些常用的方法。

join(字符串分隔符)

// 语法：arr.join(分隔符)
var arr = ['刘备','张飞','关羽'];

// 不传参数，默认每一项之间以 逗号 进行拼接
var str = arr.join();  //刘备,张飞,关羽

//按 - 进行拼接
var str = arr.join("-");//刘备-张飞-关羽

//分隔符为空串，中间就没有分隔符
var str = arr.join("");//刘备张飞关羽

数组的增删操作：push、pop、unshift、shift

var arr = ['刘备', '张飞', '关羽'];

//在数组的最后，添加一个或多个项，返回添加后数组的length
arr.push('赵云');//["刘备", "张飞", "关羽", "赵云"]

//在数组的最后，删除一项，返回删除的项
arr.pop();// ["刘备", "张飞"]

//在数组的最前面，添加一个或多个项，返回添加后数组的length
arr.unshift('赵云');// ["赵云", "刘备", "张飞", "关羽"]

//在数组的最前面，删除一项，返回删除的项
arr.shift();//["张飞", '关羽']

数组查找元素：indexOf、lastIndexOf

//indexOf()——》查找数组中元素第一次出现的下标——》如果找不到，返回-1
var arr = [1,2,3,4,5,4,3,2,1];

//查找2在数组中第一次出现的下标
console.log(arr.indexOf(2));//1

//查找100在数组中第一次出现的下标
console.log(arr.indexOf(100));//-1

//-------------lastIndexOf()——》查找数组中元素最后一次出现的下标——》如果找不到，返回-1
var arr = [1,2,3,4,5,4,3,2,1];

//查找2在数组中最后一次出现的下标
console.log(arr.lastIndexOf(2));//7

//查找100在数组中最后一次出现的下标
console.log(arr.lastIndexOf(100));//-1

数组的合并：concat

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];

//合并数组，不会改变原数组，会返回一个新的拼接好的数组
var newArr = arr1.concat(arr2,arr3);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

数组的截取：slice

var arr = ["刘备","关羽","张飞"];

//数组的截取，从数组中截取一部分，不会改变原数组，返回截取的新数组

// 不传参=>从开始截取到最后，截取整个数组=>相当于复制一份
var newArr = arr.slice();//["刘备","关羽","张飞"]

//传1个值,代表从下标为这个值(包括这个值)开始，截取到最后
var newArr = arr.slice(1);//["关羽","张飞"]

//传2个值,代表从下标为这个值(包括这个值)开始，截取到最后(不包括最后这个值)
var newArr = arr.slice(0,2);//["刘备","关羽"]

数组的反转：reverse

var arr = ['刘备','张飞','关羽'];

//让当前数组反转
arr.reverse();//["关羽", "张飞", "刘备"]

数组的排序：sort

var arr = [3,6,1,5,10,2,11];

//如果不传参数,此时会根据字符编码进行排序
arr.sort()//[1,10,11,2,3,5,6]

//sort方法可以传递一个函数作为参数，设置是升序还是降序排序
//a表示前一项，b表示后一项
arr.sort(function(a, b){
  //从小到大升序排列
  return a - b; //[1,2,3,5,6,10,11]
});

arr.sort(function(a, b){
  //从大到小降序排列
  return b - a; //[11,10,6,5,3,2,1]
});

数组的删除、添加、替换：splice

//splice 方法可以在数组的任意位置，添加或者删除任一项（会改变原数组）,返回删除项

//语法:arr.splice(从哪开始删除，删除几个，添加的项1，添加的项2，......)

var arr = ["刘备", "关羽", "张飞"];

//删除从下标为1的关羽开始(包括关羽)，往后删除两项
arr.splice(1, 2);//["刘备"]

//添加把第一项、第二项添加到下标2的位置
arr.splice(2, 0, '马超', '赵云');//["刘备", "关羽", "马超", "赵云", "张飞"]

//替换把下标2这一项替换成'赵云'（先删除，再添加）
arr.splice(2, 1, '赵云');//["刘备","关羽","赵云"]

清空数组

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

//将数组赋值为一个空数组，推荐
arr = [];//[]

//直接修改数组的长度为0
arr.length = 0;//[]

//从下标0开始，删除arr.length个元素
arr.splice(0,arr.length);//[]

ES6新增数组方法

find()和findIndex()

// find(); 查找数组中第一个符合的元素,找不到返回-1
// findIndex(function (, i, arr1) {}); 查找数组中第一个符合元素的索引值 ,找不到返回-1

//形参可以传三个(有需要则传,不需要则不传)
//v: 数组中每一项
//i: 数组中每一项的下标
//arr1: 数组本身
arr.find(function (v, i, arr1) {
    // 遍历数组每一项,输出4个结果
    console.log(v); //11, 22, 33, 44
    console.log(i); //0, 1, 2, 3
    console.log(arr1);//[11, 22, 33, 44] 输出四遍数组本身
})

arr.findIndex(function (v, i, arr1) {
    // 遍历数组每一项,输出4个结果
    console.log(v); //11, 22, 33, 44
    console.log(i); //0, 1, 2, 3
    console.log(arr1);//[11, 22, 33, 44] 输出四遍数组本身
})

var arr = [11, 22, 33 ,44];

// 查找第一个大于11的数据 
var res1 = arr.find(function (v) {
    return v > 11;
});
console.log(res1);//22

// 箭头函数写法
var res2 = arr.find(v => v > 11);
console.log(res2);//22

// 查找第一个大于11的数据的下标
var index1 = arr.findIndex(function (v) {
    return v > 11;
})
console.log(index1);//1

// 箭头函数写法
var index2 = arr.findIndex(v => v > 11);
console.log(index2);//1

戳这里了解ES五种迭代方法