Javascript -- 數組prototype方法探究

1、數組prototype方法探究

一、不改變原數組

1. concat()

這個是數組拼接方法，能夠將兩個數組或多個數組拼接並返回一個包含兩個數組或多個數組內容的新數組，不會改變原數組

方法裏面理論上能夠寫入n個參數，

const arr = [1,2];
var str = 'Hello';
var newArr = [3,4,5];
const ComArr = arr.concat(str, newArr)
console.log(ComArr)

// 打印結果
[1, 2, "Hello", 3, 4, 5]

2.find()

這個方法是遍歷查找數組裏面第一個知足條件的值，並將這個值返回回來，該方法有兩個參數：

第一個是數組每一項都會執行的回調函數，這個函數有三個參數，第一個是數組的每一項，第二個是數組每一項的下表索引，第三個就是遍歷的原數組

第二個是回調時this的指向對象

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(item => item > 3)
console.log(result)

// 打印結果
5

改變this

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

// 打印結果
5

Tips 這個方法只要找到知足條件的值，就會當即返回，並中止後續操做，若是沒有找到則返回undefined

3.findIndex()

這個方法跟上面的方法能夠說是同樣的，惟一不一樣的是這個方法返回的不是第一個知足條件的值，而是這個值所在位置的下標索引，若是沒有找到則返回-1

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

// 打印結果，注意這個是索引值
3

4.flat()

這個方法省去了本身去遞歸深度拷貝，能夠將數組的裏面全部項都遍歷並添加到第一層數組中返回一個新數組，這個方法只有一個參數，這個參數能夠是數值，默認是1，數值是多少，就表示深刻遞歸幾回，也能夠是一個固定的詞(Infinity)，表示任意深刻遞歸

const arr = [1, 2, 3, 5, 4, [3, 2, 1]]
const newArr = arr.flat()
console.log(newArr)

// 打印結果
[1, 2, 3, 5, 4, 3, 2, 1]

Tips 這個方法也能夠移除數組裏面的空值

5.flatMap()

不說了，有興趣能夠本身瞭解flatMap

6.includes()

這個方法說有用有用，說沒用也沒用，由於有不少數組其餘的方法也能夠達到目的

這個方法就是用來檢測數組裏面是否存在某個數據，存在則返回true，不存在則返回false，這個方法有兩個參數，第一個就是咱們要查找的數據，第二個是查詢的起始位置(index)，沒有則按照length+index的方法繼續，默認爲0

Tips 對象數組不能使用該方法

Tips 該方法是個通用方法

Tips 查找數據區分大小寫

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.includes(5))
console.log(arr2.includes('王翠花'))
console.log(arr3.includes({age: 23}))

// 打印結果
true
true
false

7.indexOf()

這個方法跟includes是同樣的，只不過這個方法是返回的指定查找元素的索引，沒有則返回-1，該方法有兩個參數，第一個就是要查詢的數據，第二個就是查找的起始位置索引

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.indexOf(5))
console.log(arr2.indexOf('王翠花'))
console.log(arr3.indexOf({age: 23}))

// 打印結果
3
1
-1

8.lastIndexOf()

這個方法能夠看做是indexOf方法的一個查找方向相反的一個相同方法，indexOf是從數組第一項查找到最後一項，而lastIndexOf方法是從數組最後一項查找到數組第一項

該方法有兩個參數，第一個就是要查詢的數據，第二個就是查找的起始位置索引

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.lastIndexOf(5))
console.log(arr2.lastIndexOf('王翠花'))
console.log(arr3.lastIndexOf({age: 23}))

// 打印結果
3
1
-1

Tips 雖然這個查找是最後一項，從後面開始，可是索引值依舊是從第一項開始，而不是從最後開始算的

9.join()

方法是經過指定的分割符號將數組裏面的每一項分割並拼接成一個字符串返回，若是沒有寫入任何符號，則默認是逗號,

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.join())
console.log(arr2.join(''))
console.log(arr3.join('+'))

// 打印結果
1,2,3,5,4,3,2,1
李狗蛋王翠花李二丫
[object Object]+[object Object]+[object Object]

10.keys()

這個方法不知道有什麼卵用？返回的是個Array Iterator對象，這個對象看不出什麼東西，可是能夠同for...in或者for...of方法打印其key值，發現是數組的索引值

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
for(var key of arr2.keys()) {
  console.log(key)
}

// 打印結果
0
1
2

11.slice()

數組淺拷貝，拷貝指定範圍內得數組元素並返回一個新數組，可是原數組並不會改變

這個方法有兩個參數，第一個開始拷貝得索引值(包括)，默認是0，第二個是結束拷貝得索引值(不包括)，默認數組長度

若是參數是負數則表示從數組後面往前拷貝

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.slice(1, 2)
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "王翠花", "李二丫"]
["王翠花"]

12.toString()

將一個指定數組的全部元素，提取出來返回成一個用逗號隔開的字符串，和join方法同樣

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.toString()
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋,王翠花,李二丫

13.values()

這個方法返回一個包含數組每一項元素的Array Iterator對象

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.values()
console.log(arr2)
console.log(arr4.next().value)
console.log(arr4.next().value)
console.log(arr4.next().value)

// 打印結果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋
王翠花
李二丫

二、改變原數組

1.copyWithin()

這個數組方法是複製替換，有點相似splice()方法，這個方法接收三個參數，第一個參數是替換的起始位置，第二個參數是要開始複製的數據索引，包括該項，第三個參數是結束複製的數據索引，不包括該項，沒有則一直到最後一項

const arr = [1, 2, 3, 4, 5];
const newArr = arr.copyWithin(0, 3, 5);
console.log(newArr)

// 打印結果
[4, 5, 3, 4, 5]

這段代碼就是將數組裏面從索引3開始(包括)到索引5結束(不包括)中間全部的數據複製，而後從數組索引爲0的位置開始賦值

Tips

一、這個方法只能改變數組自身內容，不能改變其餘數組

二、原數組會改變，可是長度不會改變

三、三個參數必須是整數，若是是負數，則從數組最後一項開始往前計算

四、若是開始和結束參數都沒有，則複製整個數組內容，最後多餘的被清除

2.fill()

這個方法跟上面的copyWithin類似，也是替換，不過不是用數組本身的數據去替換，而是用戶本身傳入一個數據，去替換指定範圍的數據

這個方法接收三個參數，第一個參數是用戶傳入的數據，第二個參數是要開始替換的數據索引，包括該項，默認爲0，第三個參數是結束替換的數據索引，不包括該項，沒有則一直到最後一項，默認是數組長度

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const newArr = arr.fill('?', 5, arr.length)
console.log(newArr)

// 打印結果
[1, 2, 3, 5, 4, "?", "?", "?"]

Tips

1.原數組會改變，但長度不會改變

2.這個方法是通用方法，因此該方法不要求 this 是數組對象(不理解)

3.若是開始和結束參數是負數，不是從後面開始，而是以：length+start，length+end的方式來計算替換的範圍

3.pop()

這個方法是刪除數組最後一項元素，並返回該元素值，同時原數組將減小該項元素，因此會改變原數組

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.pop()
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "王翠花"]
李二丫

4.push()

這個方法跟pop方法相反，是在數組最後一項元素後面新增一個元素或者多個元素，原數組會添加新增的元素，可是這個方法返回的新增以後的數組的長度，而不是數組

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.push('二狗子')
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "王翠花", "李二丫", "二狗子"]
4

5.shift()

這個方法是刪除數組第一項元素，並返回該元素值，同時原數組將減小該項元素

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.shift()
console.log(arr2)
console.log(arr4)

// 打印結果
["王翠花", "李二丫"]
李狗蛋

6.unshift()

這個方法跟shift方法相反，是在數組第一項元素前面新增一個元素或者多個元素，原數組會添加新增的元素，可是這個方法返回的新增以後的數組的長度，而不是數組

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.unshift('二狗子')
console.log(arr2)
console.log(arr4)

// 打印結果
["二狗子", "李狗蛋", "王翠花", "李二丫"]
4

7.reverse()

這個方法是將數組的值得順序顛倒過來，也就是原來最後一項元素變成第一項元素，以此類推，返回一個新數組，改變了原數組

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.reverse()
console.log(arr2)
console.log(arr4)

// 打印結果
["李二丫", "王翠花", "李狗蛋"]
["李二丫", "王翠花", "李狗蛋"]

8.sort()

數組排序，經過原地算法，根據字符得unicode碼進行排序，該方法有個比較函數參數，若是用戶傳入了本身得排序函數，則以這個函數進行排序，函數有兩個參數，第一個是元素一，第二個是元素二，二者進行比較，會改變原數組

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr4 = arr1.sort()
console.log(arr1)
console.log(arr4)

// 打印結果
[1, 2, 3, Array(3), 4, 5]
[1, 2, 3, Array(3), 4, 5]

自定義

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
function Compare(a, b) {
  return a-b
}
const arr4 = arr1.sort(Compare)
console.log(arr1)
console.log(arr4)

// 打印結果
[1, 2, 3, 4, 5, Array(3)]
[1, 2, 3, 4, 5, Array(3)]

9.splice()

這個方法既能夠刪除數組內容，也能夠替換數組內容，都是會返回一個數組

刪除

用來刪除，該方法只有兩個參數，第一個參數就是要刪除起始位置(包括)，第二個參數就要要刪除數據個數，返回得刪除得數據組成得數組，原數組相應得回減小被刪除得數據

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1,1)
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "李二丫"]
["王翠花"]

Tips

若是刪除個數爲0，則返回個空數組

替換

其實不只能夠用來替換，也能夠用來增長數據，並且是任意位置得添加，比原始方法如：unshift，push更靈活

用來替換，該方法至少有三個參數，第一個參數是要開始刪除位置，第二個參數是要刪除的數量，第三個到第n個是用來替換的數據，從開始刪除的位置開始替換，返回的是被替換的數據組成的新數組

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 1, '二狗子')
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "二狗子", "李二丫"]
["王翠花"]

Tips

1.不論刪除的個數是多少，替換的數據是多少個，就會替換多少個

2.若是刪除個數爲0的話，則是新增，原來的要刪除位置的數據被替換數據代替，原來的數據順勢日後挪，同時返回一個空數組，由於沒有刪除任何東西，就沒有數據

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 0, '二狗子', '三狗子', '死狗仔')
console.log(arr2)
console.log(arr4)

// 打印結果
["李狗蛋", "二狗子", "三狗子", "死狗仔", "王翠花", "李二丫"]
[]