js中數組的方法,32種方法_ZenDei技術網路在線

數組的32中方法=>{ 1.push(): 在數組末尾添加一個或多個元素，並返回修改後的數組。 let fruits = ['apple', 'banana', 'orange']; fruits.push('mango'); console.log(fruits); // 輸出: ['apple' ...

數組的32中方法=>{

1.push(): 在數組末尾添加一個或多個元素，並返回修改後的數組。

let fruits = ['apple', 'banana', 'orange'];
fruits.push('mango');
console.log(fruits); // 輸出: ['apple', 'banana', 'orange', 'mango']

2.pop(): 移除數組的最後一個元素，並返回被移除的元素。

let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.pop();
console.log(removedFruit); // 輸出: 'orange'
console.log(fruits); // 輸出: ['apple', 'banana']

3.shift(): 移除數組的第一個元素，並返回被移除的元素。

let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.shift();
console.log(removedFruit); // 輸出: 'apple'
console.log(fruits); // 輸出: ['banana', 'orange']

4.unshift(): 在數組的開頭添加一個或多個元素，並返回修改後的數組。

let fruits = ['apple', 'banana', 'orange'];
fruits.unshift('mango', 'grape');
console.log(fruits); // 輸出: ['mango', 'grape', 'apple', 'banana', 'orange']

5.concat(): 合併兩個或多個數組，並返回新的合併後的數組，原始數組不受影響。

let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'mango'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // 輸出: ['apple', 'banana', 'orange', 'mango']
console.log(fruits); // 輸出: ['apple', 'banana']

6.slice(): 返回一個新數組，包含從開始索引到結束索引（不包括結束索引）的元素。在只有一個參數的情況下， slice()方法返回從該參數指定位置開始到當前數組末尾的所有項。

let fruits = ['apple', 'banana', 'orange', 'mango'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 輸出: ['banana', 'orange']

const arr = [1,3,5,7,9,11];
const arrCopy = arr.slice(1);
const arrCopy2 = arr.slice(1,4);
const arrCopy3 = arr.slice(1,-2);//相當於arr.slice(1,4)
const arrCopy4 = arr.slice(-4,-1);//相當於arr.slice(2,5)
console.log(arr);   //[1, 3, 5, 7, 9, 11](原數組沒變)
console.log(arrCopy);   //[3, 5, 7, 9, 11]
console.log(arrCopy2);   //[3, 5, 7]
console.log(arrCopy3);   //[3, 5, 7]
console.log(arrCopy4);   //[5, 7, 9]

7.splice(): 從數組中添加、刪除或替換元素，並返回被刪除的元素組成的數組。

array.splice(index,howmany,item1,.....,itemX)

index: 必需。規定從何處添加/刪除元素。該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。

howmany: 可選。規定應該刪除多少元素。必須是數字，但可以是 "0"。如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。

item1: 可選。要添加到數組的新元素

let fruits = ['apple', 'banana', 'orange', 'mango'];
let removedFruits = fruits.splice(1, 2, 'grape', 'cherry');
console.log(removedFruits); // 輸出: ['banana', 'orange']
console.log(fruits); // 輸出: ['apple', 'grape', 'cherry', 'mango']


let fruits1 = ['apple', 'banana', 'orange', 'mango'];
let removed1 = fruits1.splice(1);
console.log(removed1); // 輸出: ['banana', 'orange', 'mango']
console.log(fruits1); // 輸出: ['apple']

8.forEach(): 對數組中的每個元素執行指定的操作。

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 輸出:
// 'apple'
// 'banana'
// 'orange'

9.map(): 對數組中的每個元素執行指定的操作，並返回一個新數組，新數組的元素是原始數組經過操作後的結果。

let numbers = [1, 2, 3, 4, 5];
let multipliedNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(multipliedNumbers); // 輸出: [2, 4, 6, 8, 10]

10.indexOf(): 返回指定元素在數組中首次出現的索引，如果不存在則返回-1。

let fruits = ['apple', 'banana', 'orange'];
let index = fruits.indexOf('banana');
console.log(index); // 輸出: 1
let fa = fruits.indexOf('banana') !== -1;
console.log(fa) // true

11.lastIndexOf(): 返回指定元素在數組中最後一次出現的索引，如果不存在則返回-1。

let fruits = ['apple', 'banana', 'orange', 'banana'];
let lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex); // 輸出: 3

12.includes(): 檢查數組是否包含指定元素，返回布爾值。

let fruits = ['apple', 'banana', 'orange'];
let includesOrange = fruits.includes('orange');
console.log(includesOrange); // 輸出: true

13.join(): 將數組中的所有元素連接成一個字元串。

let fruits = ['apple', 'banana', 'orange'];
let fruitsString = fruits.join(', ');
console.log(fruitsString); // 輸出: 'apple, banana, orange'

14.reverse(): 反轉數組中元素的順序，原始數組會被修改。

let fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits); // 輸出: ['orange', 'banana', 'apple']

15.sort(): 對數組元素進行排序，預設按照字母順序排序，原始數組會被修改。

let fruits = ['apple', 'banana', 'orange'];
fruits.sort();
console.log(fruits); // 輸出: ['apple', 'banana', 'orange']

16.filter(): 根據指定條件篩選數組中的元素，返回一個新數組。

//需求找到數組內偶數
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter((item, i, arr) => {
    return item % 2 == 0
})
console.log(evenNumbers); // 輸出: [2, 4, 6, 8, 10]
// -------------------------------------------------------------------------
let arrObj = [
    {name: 'aa', age: 13 }, 
    { name: 'bb', age: 23 }, 
    { name: 'cc', age: 18 }, 
    { name: 'dd', age: 11 }, 
    {name: 'ee', age: 28 }
]
let ap = arrObj.filter(ele => ele.age > 18)
console.log(ap) // [{ "name": "bb", "age": 23 }, { "name": "ee", "age": 28 }]
let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => {
    return ele.name
})
console.log(arrObjFilter) // ['bb', 'ee']
// -------------------------------------------------------------------------

// 可以去重
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {
  return arr.indexOf(ele) === index
})
console.log(arrFilter) // [1, 2, 3, 4];

17.reduce(): 對數組中的元素執行一個累加器函數，返回一個累計值。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, number) =>{
  return acc + number;
}, 0);
console.log(sum); // 輸出: 15
// 取最大 最小值
let arr = [1, 2, 3, 4, 5];
let max = arr.reduce((pre,cur,index,arr) => {
  return pre > cur ? pre : cur
});      
let min = arr.reduce((pre,cur,index,arr) => {
  return pre < cur ? pre : cur
});  
console.log(max)  // 得到 5
console.log(min)  // 得到 1
// -----------------------------------------------
 // 數組去重
let arr = [1, 2, 3, 4, 4, 1]
let newArr = arr.reduce((pre,cur) => {
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])

18.reduceRight(): 從數組的末尾開始，對數組中的元素執行一個累加器函數，返回一個累計值。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduceRight(function(acc, number) {
  return acc + number;
}, 0);
console.log(sum); // 輸出: 15

19.every(): 檢查數組中的所有元素是否滿足指定條件，如果所有元素都滿足條件則返回true，否則返回false。

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(number) {
  return number % 2 === 0;
});
console.log(allEven); // 輸出: true

20.some(): 檢查數組中的任意元素是否滿足指定條件，如果至少有一個元素滿足條件則返回true，否則返回false。

let numbers = [2, 4, 6, 8, 9];
let hasOdd = numbers.some(function(number) {
  return number % 2 !== 0;
});
console.log(hasOdd); // 輸出: true

21.find(): 返回數組中滿足指定條件的第一個元素，如果找不到則返回undefined。

let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.find(function(number) {
  return number % 2 === 0;
});
console.log(evenNumber); // 輸出: 2


let arrObj = [
    {name: 'aa', age: 13 }, 
    { name: 'bb', age: 23 }, 
    { name: 'cc', age: 18 }, 
    { name: 'dd', age: 11 }, 
    {name: 'ee', age: 28 }
]
let ap = arrObj.find(ele => ele.age === 18)
console.log(ap); // {name: 'cc', age: 18}

22.findIndex(): 返回數組中滿足指定條件的第一個元素的索引，如果找不到則返回-1。

let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.findIndex(function(number) {
  return number === 2;
});
console.log(evenNumber); // 輸出: 1


let arrObj = [
    {name: 'aa', age: 13 }, 
    { name: 'bb', age: 23 }, 
    { name: 'cc', age: 18 }, 
    { name: 'dd', age: 11 }, 
    {name: 'ee', age: 28 }
]
let ap = arrObj.findIndex(ele => ele.age === 18)
console.log(ap); // 2

23.fill(): 將數組的所有元素替換為靜態值，可以指定起始索引和結束索引。

array.fill(value, start, end)

value: 必需。填充的值。

start: 可選。開始填充位置。

end: 可選。停止填充位置 (預設為 array.length)。

let numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);
console.log(numbers); // 輸出: [1, 2, 0, 0, 5]


let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
console.log(fruits) // ['Banana', 'Orange', 'Runoob', 'Runoob']

24.flat(depth ): 將多維數組轉換為一維數組，可以指定轉換的層數。depth :指定要提取嵌套數組的結構深度，預設值為 1。

let nestedArray = [1, [2, [3, 4]]];
let flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // 輸出: [1, 2, 3, 4]

25.flatMap(): 對數組中的每個元素執行指定的操作，並將結果展開到一個新數組中。

let numbers = [1, 2, 3, 4, 5];
let multipliedAndFlattened = numbers.flatMap(function(number) {
  return [number * 2, number * 3];
});
console.log(multipliedAndFlattened); // 輸出: [2, 3, 4, 6, 6, 9, 8, 12, 10, 15]


const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log('----