JS 數組 經常使用方法

時間  2020-01-05
標籤 數組 經常 使用方法 欄目 JavaScript 简体版
原文   原文鏈接

1、數組

一、function(value, index, array) {}

【格式：】

function (value, index, array) => {
    // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組
    // ... 自定義函數行爲
    // return ...;
}

 

二、Array.map(function() {})

　　返回值：一個新數組。
　　簡單理解爲：此方法用於 根據 自定義執行函數 處理數組中的每一個元素，並做爲一個新數組 返回，不會改變原來的數組（除非主動修改原數組的值）。數組

【舉例：給數組中的每一個元素值加 6，並生成一個新數組】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.map((value, index, array) => {
    // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組
    return array[index] += 6;
});
console.log(newArr);   // 輸出 [7, 8, 9, 10, 11]
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [7, 8, 9, 10, 11]
console.log(newArr);  // 輸出 [7, 8, 9, 10, 11]

 

 

 

三、Array.forEach(function() {})

　　返回值：undefined，即沒有返回值。
　　簡單理解爲：此方法用於 根據 自定義執行函數 處理數組中的每一個元素，返回 undefined（沒有返回值），不會改變原來的數組（除非主動修改原數組的值）。
　　注：
　　　　與 map 方法的區別在於 沒有返回值。函數

【舉例：給數組中的每一個元素值加 6，不會生成一個新數組】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.forEach((value, index, array) => {
    // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組
    return array[index] += 6;
});
console.log(newArr);   // 輸出 undefined
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [7, 8, 9, 10, 11]
console.log(newArr);  // 輸出 undefined

 

 

 

四、Array.filter(function() {})

　　返回值：返回一個新數組。
　　簡單理解爲：此方法用於 根據 自定義執行函數 處理數組中的每一個元素，過濾原數組，並返回一個新數組，不會改變原來的數組（除非主動修改原數組的值）。
　　注：
　　　　與 map 方法的區別在於 返回的是一個過濾後的數組。spa

【舉例：過濾數組中 大於 3 的數據，並做爲一個新數組】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.filter((value, index, array) => {
    // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組
    return value > 3;
});
console.log(newArr);   // 輸出 [4, 5]
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 [4, 5]

 

 

 

五、Array.every(function() {})

　　返回值：一個 布爾值。
　　簡單理解爲：此方法用於 根據 自定義執行函數 處理數組中的每一個元素，並返回一個布爾值，不會改變原來的數組（除非主動修改原數組的值）。若返回值爲 true，則表示 數組每一個元素均知足 function。不然，返回值爲 false。
　　注：
　　　　與 map 方法的區別在於 其返回的是一個 布爾值。code

【舉例：比較數組的每一個值，若值均大於 3，則返回 true，不然返回 false】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.every((value, index, array) => {
    // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組
    return value > 3;
});
console.log(newArr);   // 輸出 false
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 false

 

 

 

六、Array.some(function() {})

　　返回值：一個 布爾值。
　　簡單理解爲：此方法用於 根據 自定義執行函數 處理數組中的每一個元素，並返回一個布爾值，不會改變原來的數組（除非主動修改原數組的值）。若返回值爲 true，則表示 數組每一個元素有部分知足 function。返回值爲 false，則表示數組每一個元素 均不知足 function。
　　注：
　　　　與 map 方法的區別在於 其返回的是一個 布爾值。blog

【舉例：比較數組的每一個值，若部分值大於 3，則返回 true，若值全小於 3，則返回 false】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.some((value, index, array) => {
    // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組
    return value > 3;
});
console.log(newArr);   // 輸出 true
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 true

 

 

 

七、Array.push(data)

　　返回值：當前數組的長度。會改變原數組。
　　簡單理解爲：向數組的末尾添加一個數據，並返回添加後的數組長度。字符串

【舉例：向數組末尾添加一個數據，並返回添加後的數組長度】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.push(1);
console.log(newArr);   // 輸出 6
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5, 1]
console.log(newArr);  // 輸出 6

 

 

 

八、Array.pop()

　　返回值：當前刪除的數據。會改變原數組。
　　簡單理解爲：從數組的末尾刪除最後一個數據，並返回刪除後的數組數據。io

【舉例：從數組末尾刪除最後一個數據，並返回當前刪除的數據】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.pop();
console.log(newArr);   // 輸出 5
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4]
console.log(newArr);  // 輸出 5

 

 

 

九、Array.shift()

　　返回值：當前刪除的數據。會改變原數組。
　　簡單理解爲：從數組的頭部刪除第一個數據，並返回刪除後的數組數據。console

【舉例：刪除數組頭部的第一個元素，並返回該值】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.shift();
console.log(newArr);   // 輸出 1
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [2, 3, 4, 5]
console.log(newArr);  // 輸出 1

 

 

 

十、Array.unshift(data1, data2)

　　返回值：當前數組的長度，會改變原數組。
　　簡單理解爲：將一些數據添加到數組的頭部。function

【舉例：將 1, 2, 4 添加到數組的頭部】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.unshift(1, 2, 4);
console.log(newArr);   // 輸出 8
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 4, 1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 8

 

 

 

十一、Array.concat(Array)

　　返回值：一個新的數組。不會改變原數組（除非主動修改）。
　　簡單理解爲：兩個數組拼接成一個數組。class

【舉例：兩數組拼接，返回一個新數組】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.concat([1, 2, 3, 4, 5]);
console.log(newArr);   // 輸出 [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

 

 

 

十二、Array.toString()

　　返回值：一個字符串。不會改變原數組（除非主動修改）。
　　簡單理解爲：將當前數組轉爲字符串輸出，不改變原數組。

【舉例：將數組轉爲字符串，不改變原數組】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.toString();
console.log(newArr);   // 輸出 1, 2, 3, 4, 5
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 1, 2, 3, 4, 5

 

 

 

1三、Array.join()

　　返回值：一個字符串。不會改變原數組（除非主動修改）。
　　簡單理解爲：將當前數組轉爲字符串輸出，不改變原數組。
　　注：
　　　　與 toString 方法的區別在於，能夠自定義數據間鏈接的符號（默認以逗號分隔）。

【舉例：將數組轉爲字符串，並以 * 分隔】

let arr = [1, 2, 3, 4, 5];
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
let newArr = arr.join('*');
console.log(newArr);   // 輸出 1*2*3*4*5
console.log(arr === newArr);  // 輸出 false
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]
console.log(newArr);  // 輸出 1*2*3*4*5

 

 

 

1四、Array.splice(開始位置（必須）, 刪除個數（必須）, 新元素...（可選）)

　　返回值：一個新數組（刪除的元素組成的數組）。會改變原數組。
　　簡單理解爲：對數組進行增、刪、改。
　　　　若當前方法參數只有兩個必須項，沒有新元素，則進行的是刪除操做。

【舉例：對數組元素進行增刪改】

【舉例：對數組元素進行增刪改】

let arr = [1, 2, 3, 4, 5];
console.log(arr);       // 輸出 [1, 2, 3, 4, 5]
// 在數組下標爲 2 的地方，新增 2 個元素，未進行刪除操做，返回 []
let arr1 = arr.splice(2, 0, 7, 8);
console.log(arr);       // 輸出 [1, 2, 7, 8, 3, 4, 5]
console.log(arr1);      // []

// 在數組下標爲 2 的地方，刪除 3 個元素，進行刪除操做，返回刪除的數組
let arr2 = arr.splice(2, 3)
console.log(arr);        // 輸出 [1, 2, 4, 5]
console.log(arr2);        // 輸出 [7, 8, 3]

// 在數組下標爲 2 的地方，刪除 1 個元素，並新增 2 個元素，返回刪除的數組
let arr3 = arr.splice(2, 1, 8, 6);
console.log(arr);        // 輸出 [1, 2, 8, 6, 5]
console.log(arr3);        // 輸出 [4]

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程