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五種迭代方法