數組常用API整理

1.arr.valueOf() // 返回值爲該對象的原始值

var arr=[1,2,3,4,56,6];

在這裏插入圖片描述
2.arr.toString() // 返回數組內容的字符串表示形式

  const arr = [1, 2, 3, 4, 56, 6];
  console.log(arr.toString()); //1,2,3,4,56,6

3.String(arr) // 將數組中每個元素轉爲字符串,並用逗號連接。

 const arr = [1, 2, 3, 4, 56, 6];
        console.log(String(arr)); //1,2,3,4,56,6

4.arr.join(“連接符”) // 將數組中每個元素轉爲字符串,用自定義的"連接符"連接每個元素,需要用變量藉助

const arr = [1, 2, 3, 4, 56, 6];
  console.log(arr.join("")); //1234566
  console.log(arr.join(" ")); //1 2 3 4 56 6
 console.log(arr.join(",")); //1,2,3,4,56,6

5.arr.reverse() // 將數組中元素的位置顛倒,並返回該數組,注意:原數組會改變

const arr = [1, 2, 3, 4, 56, 6];
    console.log(arr.reverse()); // [6, 56, 4, 3, 2, 1]

6.arr.sort() // 數組排序,按字符串大小排序,會改變原數組

 const arr = [1, 2, 3, 4, 56, 6];
        console.log(arr.sort((a, b) => a - b)); // [1, 2, 3, 4, 6, 56]
         console.log(arr.sort((a, b) => b - a)); //[56, 6, 4, 3, 2, 1]

7.arr.concat(otherArr) // 合併新元素,返回一個新數組需要用變量接住,不會改變原數組

const arr = [1, 2, 3, 4, 56, 6];
        arr.concat([0, 12, 12]);
        console.log(arr.concat([0, 12, 12])); //[1, 2, 3, 4, 56, 6, 0, 12, 12]
        console.log(arr.concat(2)); //[1, 2, 3, 4, 56, 6, 2]

8.arr.slice(start,end) // 剪切數組,含頭不含尾 ,返回新的數組,不會改變原數組

  const arr = [1, 2, 3, 4, 56, 6];
        //兩個參數
        console.log(arr.slice(1, 3)); //[2, 3]
        //一個參數
        console.log(arr.slice(1)); //[2, 3, 4, 56, 6]
        console.log(arr.slice(2)); //[ 3, 4, 56, 6]

注意:拼接和截取: 都無法直接修改原數組而是返回新數組,用變量接住
arr.split([ 起始位置 | 要刪除元素的個數 | 要插入元素的值,可以寫入多個值 ] )剪切數組/替 換/新增

9.arr.indexOf(item) // 返回第一個匹配到的元素在數組中所在的位置 ,如果沒有找到就是返回 -1

 const arr = [1, 2, 3, 4, 56, 6];
        console.log(arr.indexOf(6)); //5
        console.log(arr.indexOf(66)); //-1表示沒有找到

10.arr.push() // 尾部添加元素,返回被新數組的長度,原數組會改變

const arr = [1, 2, 3, 4, 56, 6];
        console.log(arr.push(1)); //返回數組元素的個數
        console.log(arr); //[1, 2, 3, 4, 56, 6, 1]

11.arr.pop() // 尾部刪除元素,返回被刪除的元素,原數組會改變

const arr = [1, 2, 3, 4, 56, 6];
        console.log(arr.pop()); //返回被刪除的元素,原數組被修改
        console.log(arr); //[1, 2, 3, 4, 56]

12.arr.unshift(item) // 頭部添加元素,返回新數組的長度,原數組會改變

const arr = [1, 2, 3, 4, 56, 6];
        console.log(arr.unshift(1)); //在數組卡起頭添加元素,返回數組元素的個數,會修改原數組的
        console.log(arr); //[1, 1, 2, 3, 4, 56, 6]

13.arr.shift(item) // 頭部刪除元素,返回被刪除的元素,原數組會改變

const arr = [1, 2, 3, 4, 56, 6];
    console.log(arr.shift()); //返回被刪除的元素,會修改原數組的
    console.log(arr); //[ 2, 3, 4, 56, 6

14.arr.every(function(item,index,array){}) // 該函數對每一項都返回true,則返回true,否則返回false

array.every(function(item,index,array){
   //item:當前元素的值;

   //index:當前元素的索引;

  // array:當前元素的數組對象;
})

every()方法使用指定函數檢測數組中的所有元素:
如果數組中檢測到有一個元素不滿足,則整個表達式返回false,且剩餘的元素不會再進行檢測。如果所有元素都滿足條件,則返回true;
注意:every()不會對空數組進行檢測;
every()不會改變原來的數組

15.arr.some(function(item,index,array){}) // 該函數對其中一項返回true,則返回true

array.some(function(item,index,array){
      //item:當前元素的值;
 
      //index:當前元素的索引;
 
      // array:當前元素的數組對象;
 }

some()方法會依次執行數組的每個元素:
如果有一個元素滿足條件,則表達式返回true,剩餘的元素不會再執行檢測。如果沒有滿足條件的元素,則返回false
注意:some()不會對空數組進行檢測;
some()不會改變原始數組;

16.arr.filter(callback) // 數組過濾,返回滿足條件的元素組成的一個新數組

17.arr.map(callback) // 對數組每一項進行計算等處理,返回處理結果組成的數組,返回的是一個新數組

var numbers = [1, 4, 9];
var doubles = numbers.map(function (num) {
    return num * 2;
});
console.log(numbers);
console.log(doubles);

注意:通常情況下,map 方法中的 callback 函數只需要接受一個參數,就是正在被遍歷的數組元素本身。但這並不意味着 map 只給 callback 傳了一個參數
eg;

["1", "2", "3"].map(parseInt);// [1, NaN, NaN]

18.arr.reduce(fn) // 前一個元素 | 當前元素,從1開始 | 後一個元素的序列,從1開始計數 | 表示該數組

var arr = [1,2,3,4,5];
var reduceArr = arr.reduce(function(pre,cur,index,array){
    return prev + cur;
})   //15

19, …[arr] 數組擴展運算符

20.Math.min(…[arr]) 等同於Math.min.apply(null,arr) 替換數組的apply方法

  var arr=[1,2,3,4,5,6,7];
      console.log(Math.min(...arr));//1

21.arr1.push(…arr2) 等同於Array.prototype.push.apply(arr1,arr2) 一個數組添加到另一個數組的尾部

  var arr=[1,2,3,4,5,6,7];
        var arr1=[8,9,10];
          arr.push(...arr1);
        console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

22.[…arr1,…arr2,…arr3] 等同於arr1.concat(arr2,arr3) 合併數組

var arr=[1,2,3,4,5,6,7];
        var arr1=[8,9,10];
        var arr2=[20,23,34,35,26];
        console.log([...arr,...arr1,...arr2]);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 23, 34, 35, 26]

23.let[first,…const]=[1,2,3,4],結果first=1,const=[2,3,4] 結合解構一起使用

let [a,...b]=[1,2,3,4,5];
      console.log(a);//1
      console.log(b);//[2, 3, 4, 5]

24.Array.from() 將類數組對象和可遍歷的對象轉換爲真正的數組(包括ES6新增的數據結構Set和Map)

Array.from(“hello”)  [“h”,”e”,”l”,”l”,”o”]
let person={
    0:'張三',
    1:'李四',
    2:'王五',
    length:3 //必須要設置對象長度
};
let arr=Array.from(person); //等同於let arr=[].slice.call(person);
Array.of(1,2,3) //將一組值轉換爲數組 [1, 2, 3]

25.Array.find(function(val,index,arr){

})
找到第一個符合條件的數組成員Array.find(function(val,index,arr)) 找到第一個符合條件的數組位置
這兩個方法都可以發現NaN,彌補了數組的IndexOf方法的不足。

//find方法
 [1, 2, 3, 4].find((value, index, arr) => {
 console.log(value,index,arr);
//  1 0 (4) [1, 2, 3, 4]
//  2 1 (4) [1, 2, 3, 4]
//  3 2 (4) [1, 2, 3, 4]
//  4 3 (4) [1, 2, 3, 4]
value:每一次迭代查找的數組元素。
index:每一次迭代查找的數組元素索引。
arr:被查找的數組。
//-------------------------------------------------
 const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        var ret1 = arr1.find((value, index, arr) => {
            return value > 4
        })
        var ret2 = arr1.find((value, index, arr) => {
            return value > 14
        })
        console.log(ret1);//5
        console.log(ret2);//undefined

26.arr.includes()方法

let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); 
// true 
site.includes('baidu'); 
// false
//------------------------------------
//arr.includes(searchElement, fromIndex)
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
//searchElement	必須。需要查找的元素值。
//fromIndex	可選。從該索引處開始查找 searchElement。如果爲負值,則按升序從 array.length + fromIndex 的索引開始搜索。默認爲 0。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章