JavaScript中操作陣列的方法示例介紹

好多陣列的操作方法發現有些都不記得了，這里總結了一些基本的操作方法，可能不是很多，大家可以在評論區補充，話不多說，上代碼

// 1. concat 
// 合并陣列 
// 需要合并的陣列 
// 合成之后的陣列 
// 原有陣列沒有被改變
var concatArr1 = [1, 2, 3, 4]
var concatArr2 = [5, 6, 7, 8]
var concatArr3 = [9, 10]
var concatAdd = concatArr1.concat(concatArr2, concatArr3)
console.log(concatArr1, concatArr2, concatArr3);
console.log(concatAdd);
// 2. copyWithin 
// 復制前面幾位資料替換掉后面幾位資料 
// 1.復制資料多少位，2.元素復制的起始位置，3.停止復制的索引位置 
// 回傳值：更改后的資料 
// 原有陣列被改變
var copyWithinArr = [1, 2, 3, 4, 5, 6, 7]
copyWithinArr.copyWithin(2, 0, 2)
console.log(copyWithinArr);
// 3. entries 
// 查詢陣列的下標和值 
// 無 
// 使用一個變數接受再使用next方法,進行下一個值, 這個方法實在雞肋
// 回傳值：第n條資料的下標和值
// 原有陣列沒有被改變
var entriesArr = ['張三', '李四', '王五', '趙六']
var entriesArrReturn = entriesArr.entries()
console.log(entriesArrReturn.next().value);
console.log(entriesArrReturn.next().value);
console.log(entriesArrReturn.next().value);
console.log(entriesArrReturn.next().value);
// 4.every
// 查詢陣列中是否所有的都符合條件
// 陣列
// true 或 false
// 不改變原陣列
var everyArr = [10, 15, 20, 30]
function everyfilter(item) {
    return item < 40
}
console.log(everyArr.every(everyfilter));
// 5.fill
// 使用固定值替換掉陣列的所有值
// 需要換成的新值
// 改變后的陣列
// 改變原陣列
var fillArr = ['張三', '李四', '王五', '趙六']
fillArr.fill('李四')
console.log(fillArr);
// 6.filter
// 過濾陣列
// 回呼函式
// 改變后的陣列
// 不改變原陣列
var filterArr = [10, 20, 30, 40, 50, 60, 17]
var filterList = filterArr.filter(i => {
    return i > 20
})
console.log(filterList);
// 7.find
// 查找到陣列中符合條件的第一個元素
// 回呼函式
// 符合條件的第一個值
// 不改變原陣列
var findArr = [1, 2, 3, 4, 5, 6, 7]
console.log(findArr.find((a) => {
    return a > 3
}));
// 8.findIndex
// 查找到陣列中符合條件的第一個元素的下標
// 回呼函式
// 符合條件的第一個值的下標
// 不改變原陣列
var findIndexArr = [1, 2, 3, 4, 5, 6, 7]
console.log(findIndexArr.findIndex((a) => {
    return a > 3
}));
// 9.forEach
// 回圈遍歷陣列
// 回呼函式
// 陣列中的每一個值，和下標，第三個值是當前的陣列
// 不改變原陣列
var forEachArr = ['a', 'b', 'c', 'd']
forEachArr.forEach((element, index) => {
    console.log(element, index);
});
// 10.from
// 將擁有length屬性的物件轉換成一個陣列
// 需要轉換的值
// 轉換成功的陣列
// 改變原本的字串或者偽陣列
var fromStr = Array.from('sfhoisjfp')
console.log(fromStr);

// 11.includes
// 查找陣列中是否擁有該值
// 查詢的值
// true或者false
// 不改變原陣列
var includesArr = [10,20,30,50,90]
console.log(includesArr.includes(10));
// 12.indexOf
// 查找陣列中是否擁有該值
// 查詢的值
// 回傳第一個相同的值的下表，沒有相同的值的話回傳-1
// 不改變原陣列
var indexOfArr = [20,30,50,90,10]
console.log(indexOfArr.indexOf(10));
// 13.isArray
// 查看當前值是否是一個陣列
// 查詢的值
// true或false
// 不改變原陣列
var isArrayArr = []
console.log(Array.isArray(isArrayArr));
// 14. join
// 將陣列轉換成字串
// 將陣列改變后的字串
// 符號，可以將轉換之后的默認逗號替換掉，或者填and可以去掉符號
// 不改變原陣列
var joinArray = ["Banana", "Orange", "Apple", "Mango"];
var joinStr = joinArray.join('/');
console.log(joinStr);
// 15.fruit 
// 取出陣列的下表默認拿第一個再次呼叫next方法可以獲取下個值的下標
// 無
// 下表
// 不改變原陣列
var fruitArray = ["Banana", "Orange", "Apple", "Mango"];
var index = fruitArray.keys()
console.log(index.next().value);
console.log(index.next().value);
console.log(index.next().value);
console.log(index.next().value);
// 16.lastIndexOf
// 查找最后一個相同的值的下標
// 一個需要尋找的值
// 最后一個符合條件值的下標，沒有就回傳-1
// 不改變原陣列
var lastIndexOfArr = [10, 20, 30, 40, 10, 20, 10]
console.log(lastIndexOfArr.lastIndexOf(77));
//17.map() 方法回傳一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理后的值，
// map() 方法按照原始陣列元素順序依次處理元素，
// 注意： map() 不會對空陣列進行檢測，
// 注意： map() 不會改變原始陣列，
// 18.pop() 方法用于洗掉陣列的最后一個元素并回傳洗掉的元素，
// 注意：此方法改變陣列的長度！
var popArray = ["Banana", "Orange", "Apple", "Mango"];
popArray.pop();
console.log(popArray);//Banana,Orange,Apple
// 19.push() 方法可向陣列的末尾添加一個或多個元素，并回傳新的長度，
// 注意： 新元素將添加在陣列的末尾，
// 注意： 此方法改變陣列的長度，
var pushArr = ["Banana", "Orange", "Apple", "Mango"];
pushArr.push("Kiwi")
console.log(pushArr);//Banana,Orange,Apple,Mango,Kiwi
// 20.reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）
// 開始縮減，最終計算為一個值，
// reduce() 可以作為一個高階函式，用于函式的 compose，
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

// 21.reduceRight() 方法的功能和 reduce() 功能是一樣的，
// 不同的是 reduceRight()從陣列的末尾向前將陣列中的陣列項做累加，
// 注意: reduce() 對于空陣列是不會執行回呼函式的，
// 22.reverse() 方法用于顛倒陣列中元素的順序，
var reverseArr = ["Banana", "Orange", "Apple", "Mango"];
reverseArr.reverse(); 不改變原陣列
// 23.shift() 方法用于把陣列的第一個元素從其中洗掉，并回傳第一個元素的值，
// 注意： 此方法改變陣列的長度！
var shiftArr = ["Banana", "Orange", "Apple", "Mango"];
shiftArr.shift() //Orange,Apple,Mango
// 24.slice() 方法可從已有的陣列中回傳選定的元素，
// slice()方法可提取字串的某個部分，并以新的字串回傳被提取的部分，
// 注意： slice() 方法不會改變原始陣列，
var sliceArr = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var sliceNew = sliceArr.slice(1, 3);//Orange,Lemon
// 25.some() 方法用于檢測陣列中的元素是否滿足指定條件（函式提供），
// some() 方法會依次執行陣列的每個元素：
// 如果有一個元素滿足條件，則運算式回傳true, 剩余的元素不會再執行檢測，
// 如果沒有滿足條件的元素，則回傳false，
// 注意： some() 不會對空陣列進行檢測，
// 注意： some() 不會改變原始陣列，
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);//true
}
// 26.sort() 方法用于對陣列的元素進行排序，
// 排序順序可以是字母或數字，并按升序或降序，
// 默認排序順序為按字母升序，
// 注意：當數字是按字母順序排列時"40"將排在"5"前面，
// 使用數字排序，你必須通過一個函式作為引數來呼叫，
// 函式指定數字是按照升序還是降序排列，
// 這些說起來可能很難理解，你可以通過本頁底部實體進一步了解它，
// 注意： 這種方法會改變原始陣列！，
var sortArr = ["Banana", "Orange", "Apple", "Mango"];
sortArr.sort();//Apple,Banana,Mango,Orange
// 27.splice() 方法用于添加或洗掉陣列中的元素，
// 注意：這種方法會改變原始陣列，
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");//Banana,Orange,Lemon,Kiwi,Apple,Mango
// 28.toString() 方法可把陣列轉換為字串，并回傳結果，
// 注意： 陣列中的元素之間用逗號分隔，
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();//Banana,Orange,Apple,Mango
// 29.unshift() 方法可向陣列的開頭添加一個或更多元素，并回傳新的長度，
// 注意： 該方法將改變陣列的數目，
var unshiftArr = ["Banana", "Orange", "Apple", "Mango"];
unshiftArr.unshift("Lemon", "Pineapple");//Lemon,Pineapple,Banana,Orange,Apple,Mango
// 30.valueOf() 方法回傳 Array 物件的原始值，
// 該原始值由 Array 物件派生的所有物件繼承，
// valueOf() 方法通常由 JavaScript 在后臺自動呼叫，并不顯式地出現在代碼中，
// 注意： valueOf() 方法不會改變原陣列，
var valueOfArr = ["Banana", "Orange", "Apple", "Mango"];
var v = valueOfArr.valueOf();//Banana,Orange,Apple,Mango