JavaScript 數(shù)組的操作

原生js的數(shù)組方法

  1. concat

    concat()方法用于合并兩個或多個數(shù)組或給數(shù)組合并值。不會更改原有數(shù)組，而是直接返回一個新數(shù)組。

    語法：var newArray = arr.concat(value1,value2...value);

    參數(shù)：value：可選參數(shù)，可以是數(shù)組，也可以是具體的變量或值

    var arr1 = [1,2,3,4];
var arr2 = ["胃","必","治"];
var arr = arr1.concat(arr2);
console.log(arr);
// [1, 2, 3, 4, "胃", "必", "治"]

  2. join

    join()方法將一個數(shù)組(偽數(shù)組)的所有元素連接成一個字符串并返回。

    語法：arr.join([分隔符])

    參數(shù)：[分隔符]：可選參數(shù)，表示用什么符號分隔，如果不填的話默認(rèn)用逗號分隔。

    var arr = ["我今年",18,false];
console.log(arr.join()); // 我今年,18,false
console.log(arr.join("-")); // 我今年-18-false
console.log(arr.join("")); // 我今年18false

  3. push

    后增。push()方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。會改變原數(shù)組

    語法：arr.push(value1,value2...value)

    參數(shù)：value：可以是數(shù)組，也可以是具體的變量或值

    var a = [2,3,4];
var b = a.push(5,6);
console.log(a); // [2,3,4,5,6]
console.log(b); // 5

  4. pop

    后刪。pop()方法用于刪除數(shù)組最后一個元素，并返回最后一個元素，會改變原數(shù)組。

    語法：arr.pop()

    var arr = [2,3,4];
console.log(arr.pop()); // 4
console.log(arr); // [2,3]

  5. shift

    前刪。shift()方法可以把數(shù)組的第一個元素刪除，并返回第一個元素。會改變原數(shù)組。

    語法：arr.shift()

    var arr = [2,3,4];
console.log(arr.shift()); // 2
console.log(arr); // [3,4]

  6. unshift

    前增。unshift()方法向數(shù)組的開頭增加一個或多個元素，并返回新的長度。會改變原數(shù)組。

    語法：arr.unshift(value1,value2...)

    參數(shù)：value：可以是數(shù)組，也可以是具體的變量或值。

    var arr = [2,3,4,5];
console.log(arr.unshift(0,1)); // 6
console.log(arr); // [0,1,2,3,4,5]

  7. slice

    截取。slice()方法可以截取并返回一個新的數(shù)組（從start到end中的元素（不包含end））。不會修改原數(shù)組。

    語法：arr.slice(start,end)

    參數(shù)：start：number類型，截取頭的下標(biāo)；

    ? end：number類型，截取尾的下標(biāo)；

    var arr = [2,3,4,5];
console.log(arr.slice(1,3)); // [3,4]
console.log(arr) // [2,3,4,5]

  8. splice()

    更新。splice()方法很強(qiáng)大，包含了添加和刪除，所以可以達(dá)到替換的效果。該方法返回被刪除的元素組成的數(shù)組。會改變原數(shù)組。

    語法：arr.splice(index,length,value1,value2...)

    參數(shù)：

    • index：起始下標(biāo)
    • length：刪除元素的位移
    • value：插入的新元素，可以是多個
    // 使用splice完成刪除
var arr = [2,3,4,5,"haha"];
var arr2 = arr.splice(1,2); // 從index為1的元素開始，刪除2個元素并以數(shù)組形式返回，原數(shù)組發(fā)生改變
console.log(arr) // [2,5,"haha"]
console.log(arr2) // [3,4]

// 使用splice完成增加
var arr = [2,3,4,5,"haha"];
arr.splice(1,0,8,9,"bobo"); // 從index為1的位置（元素4）開始，刪除0個元素，并在index（3）對應(yīng)的元素前新增三個元素（8,9,"bobo"）
console.log(arr); //[2,8,9,"bobo",3,4,5,"haha"]

// 使用splice完成替換
var arr = ["a","b","x","d"];
arr.splice(2,1,"c"); // 從index為2的位置（"x"）開始，刪除1個元素，并在該位置上增加一個新的元素"c"。
console.log(arr); // ["a","b","c","d"]

  9. sort()

    排序。按照Unicode編碼的位置排序，默認(rèn)升序。返回排序后的數(shù)組。會改變原數(shù)組。

    var fruit = ['cherries','apples','bananas'];
console.log(fruit.sort()); // ['apples','bananas','cherries']

var scores = [1,10,21,2];
console.log(scores.sort()); // [1,10,2,21]

  10. reverse()

    倒序。reverse()方法顛倒數(shù)組中元素的順序，返回顛倒后的數(shù)組。會改變原數(shù)組。

    var arr = [2,3,4];
console.log(arr.reverse()); // [4,3,2]
console.log(arr); // 4,3,2

ES5 數(shù)組方法

  1. indexOf() 和 lastIndexOf()

    查找。indexOf()從開始往后查找，lastIndexOf()從末尾往前查找。返回第一個查找到的元素的下標(biāo)（未找到則返回-1）。不改變原數(shù)組。

    語法：

    • arr.indexOf(value)
    • arr.lastIndexOf(value)

    參數(shù)：value：查找的元素

    var arr = [2,3,4,5,2];
console.log(arr.indexOf(2)); // 0
console.log(arr.indexOf(8)); // -1
console.log(arr.lastIndexOf(2)); // 4

  2. forEach()

    遍歷。forEach()方法可以直接對數(shù)組遍歷并用回調(diào)函數(shù)進(jìn)行操作。

    語法：arr.forEach(callback(value,index,array))

    參數(shù)：

    • callback：回調(diào)函數(shù)

      有三個參數(shù)：

      1. value：當(dāng)前元素
      2. index：當(dāng)前元素的下標(biāo)
      3. array：整個數(shù)組
    var arr = [1,2,3,4,5];
arr.forEach(function(value,index,array){
    arr[index] += 1;
})
console.log(arr); // [2,3,4,5,6]

  3. every

    判斷。每次遍歷回調(diào)函數(shù)都為true，才會返回true。否則返回false。

    語法：arr.every(callback(value))

    參數(shù)：

    • callback：回調(diào)函數(shù)

      參數(shù)：value：遍歷的值

    var arr = [1,2,-1,0,3]
arr.every(function(value){
    return val>0
})  // fasle

var arr2 = [5,6,7]
arr2.every(function(value){
    return val>0
})  // true

  4. some

    判斷。只要有一個元素滿足回調(diào)函數(shù)，就會返回true。全部都不滿足則返回false。

    語法：arr.some(callback(value))

    參數(shù)：

    • callback：回調(diào)函數(shù)

      參數(shù)：value：遍歷的值

    var arr = [1,2,3,0,-1];
arr.some(function(value){
    return value < 0;
}) // true

var arr2 = [1,2,3,0,6];
arr2.some(function(value){
    return value < 0;
}) // false

  5. map

    加工。遍歷數(shù)組，并通過回調(diào)函數(shù)操作后返回一個新數(shù)組。原數(shù)組不變。

    語法：arr.map(callback(value))

    參數(shù)：

    • callback：回調(diào)函數(shù)

      有一個參數(shù)：

      value：當(dāng)前元素

    var arr = [1,2,3,4,5];
var arr2 = arr.map(function(value){
    return value * 2;
})
console.log(arr); // 1,2,3,4,5
console.log(arr2); // 2,4,6,8,10

  6. filter

    過濾。遍歷數(shù)組中的元素，返回滿足回調(diào)函數(shù)的元素組成的數(shù)組。原數(shù)組不變。

    語法：arr.filter(callback)

    參數(shù)：

    • callback：回調(diào)函數(shù)

      參數(shù)：value：遍歷的值

    var arr = [1,2,3,4,5,6,7];
var arr2 = arr.filter(function(value){
    return value % 2 == 0;
})
console.log(arr); // [1,2,3,4,5,6,7]
console.log(arr2); // [2,4,6]

  7. reduce

    歸并。功能很強(qiáng)大，reduce()方法從左到右為每個數(shù)組元素執(zhí)行一次回調(diào)函數(shù)，并把上次回調(diào)函數(shù)的返回值放在一個暫存器中傳給下次回調(diào)函數(shù)，并返回最后一次回調(diào)函數(shù)的返回值。

    語法：arr.reduce(callback(acc,value,index,array)，initialValue)

    參數(shù)：

    • callback：回調(diào)函數(shù)

      acc：累積器，累計(jì)回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時返回的累積值，或initialValue（見于下方）。

      value：當(dāng)前元素

      index：當(dāng)前索引（可選參數(shù)

      array：原數(shù)組（可選參數(shù)

    • initialValue：初始值（可選參數(shù)

    // reduce 基本累加
var arr = [1,2,3,4];
var res = arr.reduce(function(acc,value){
    return acc + value;
})
console.log(res); // 10


     // reduce 對對象的值進(jìn)行操作
var initialValue = 0;
var arr = [{x:1},{x:2},{x:3},{x:4}]
var res = arr.reduce(function(acc,value){
    return acc + value.x;
},initialValue)
console.log(res); // 10

     // reduce 將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
var arr = [[0,1],[2,3],[4,5]];
var res = arr.reduce(function(acc,value){
    return acc.concat(value);
},[]);
console.log(res); // [0,1,2,3,4,5]

    // 計(jì)算數(shù)組中每個元素出現(xiàn)的次數(shù)
var arr = ['Alley','Bob','Hehe','Alley','Eric','Bruce','Alley','Eric','Tiff']
var res = arr.reduce(function(allNames,name){
    if(name in allNames){
        allNames[name] ++;
    }
    else{
        allNames[name] = 1;
    }
    return allNames;
},{});
console.log(res); // {Alley: 3,Bob: 1,Bruce: 1,Eric: 2,Hehe: 1,Tiff: 1}

    // 按照屬性對object進(jìn)行分類
var people = [
    {name:'Alley',age:30},
    {name:'Eric',age:40},
    {name:'Apple',age:20},
    {name:'Edan',age:30},
    {name:'Code00',age:20}
]
function groupBy(objectArr,property){
    return objectArr.reduce(function(acc,obj){
        var key = obj[property];
        if(!acc[key]){
            acc[key] = [];
        }
        acc[key].push(obj);
        return acc
    },{});
}
var groupPeople = groupBy(people,'age');
console.log(groupPeople);
// {
//     20:[{{name:'Apple',age:20},{name:'Code00',age:20}}],
//     30:[{name:'Edan',age:30},{name:'Alley',age:30},],
//     40:[{name:'Eric',age:40}]
// }

    // reduce 實(shí)現(xiàn)數(shù)組去重
var arr = ['a','b','a','b','c','e','f','d','c','e']
var res = arr.reduce(function(acc,currentValue){
    if(acc.indexOf(currentValue) === -1){
        acc.push(currentValue);
    }
    return acc;
},[])
console.log(res); // ['a','b','c','e','f','d']

// 2：
var arr2 = [1,2,4,6,7,8,5,3,3,2,5,7,5,4];
var newArr = arr2.sort();
var res2 = newArr.reduce((init,current)=>{
    if(init.length === 0 || init[init.length-1] !== current){
        init.push(current);
    }
    return init;
},[]);
console.log(res2); // [1,2,3,4,5,6,7,8]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容