改變原數組(9個) · record

**改變原數組的方法(9個):** ~~~ let a = [1,2,3]; ~~~ **ES5:** 1. `a.pop()` 2. `a.shift()` 3. `a.push()` 4. `a.unshift()` 5. `a.reverse()` 6. `a.splice()` 7. `a.sort() ` **ES6:** 1.`a.copyWithin()` 2.`a.fill()` 對于這些能夠改變原數組的方法，要注意避免在循環遍歷中改變原數組的選項，比如: 改變數組的長度，導致遍歷的長度出現問題。 1. **pop() 刪除一個數組中的最后的一個元素** 定義:`pop()`方法刪除一個數組中的最后的一個元素，并且返回這個元素。參數: 無。 ~~~ let a = [1,2,3]; let item = a.pop(); // 3 console.log(a); // [1,2] ~~~ 2. **shift() 刪除數組的第一個元素** 定義:`shift()`方法刪除數組的第一個元素，并返回這個元素。參數: 無。 ~~~ let a = [1,2,3]; let item = a.shift(); // 1 console.log(a); // [2,3] ~~~ 3. **push() 向數組的末尾添加元素** 定義：`push()`方法可向數組的末尾添加一個或多個元素，并返回新的長度。參數: item1, item2, …, itemX ,要添加到數組末尾的元素 ~~~ let a = [1,2,3]; let item = a.push('末尾'); // 4 console.log(a); // [1,2,3,'末尾'] ~~~ 4. **unshift()** 定義：unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。參數: item1, item2, …, itemX ,要添加到數組開頭的元素 ~~~ let a = [1,2,3]; let item = a.unshift('開頭'); // 4 console.log(a); // ['開頭',1,2,3] ~~~ 5. **reverse() 顛倒數組中元素的順序** 定義:`reverse()`方法用于顛倒數組中元素的順序。參數: 無 ~~~ let a = [1,2,3]; a.reverse(); console.log(a); // [3,2,1] ~~~ 6. **splice() 添加/刪除數組元素** 定義：`splice()`方法向/從數組中添加/刪除項目，然后返回被刪除的項目語法： array.splice(index,howmany,item1,.....,itemX) 參數: 1. index：必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。 2. howmany：必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。 3. item1, …, itemX：可選。向數組添加的新項目。返回值: 如果有元素被刪除,返回包含被刪除項目的新數組。 > eg1:刪除元素 ~~~ let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0, 3); // [1,2,3] console.log(a); // [4,5,6,7] // 從數組下標0開始，刪除3個元素 let item = a.splice(-1, 3); // [7] // 從最后一個元素開始刪除3個元素，因為最后一個元素，所以只刪除了7 ~~~ > eg2: 刪除并添加 ~~~ let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,3,'添加'); // [1,2,3] console.log(a); // ['添加',4,5,6,7] // 從數組下標0開始，刪除3個元素，并添加元素'添加' let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-2,3,'添加1','添加2'); // [6,7] console.log(b); // [1,2,3,4,5,'添加1','添加2'] // 從數組最后第二個元素開始，刪除3個元素，并添加兩個元素'添加1'、'添加2' ~~~ > eg3: 不刪除只添加: ~~~ let a = [1, 2, 3, 4, 5, 6, 7]; let item = a.splice(0,0,'添加1','添加2'); // [] 沒有刪除元素，返回空數組 console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7] let b = [1, 2, 3, 4, 5, 6, 7]; let item = b.splice(-1,0,'添加1','添加2'); // [] 沒有刪除元素，返回空數組 console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一個元素的前面添加兩個元素 ~~~ 從上述三個栗子可以得出: 1、數組如果元素不夠，會刪除到最后一個元素為止 2、操作的元素，包括開始的那個元素 3.、可以添加很多個元素 4、添加是在開始的元素前面添加的 7. **sort() 數組排序** 定義:`sort()`方法對數組元素進行排序，并返回這個數組。參數可選: 規定排序順序的比較函數。默認情況下`sort()`方法沒有傳比較函數的話，默認按字母升序，如果不是元素不是字符串的話，會調用toString()方法將元素轉化為字符串的Unicode(萬國碼)位點，然后再比較字符。 ~~~ // 字符串排列看起來很正常 var a = ["Banana", "Orange", "Apple", "Mango"]; a.sort(); // ["Apple","Banana","Mango","Orange"] // 數字排序的時候因為轉換成Unicode字符串之后，有些數字會比較大會排在后面這顯然不是我們想要的 var a = [10, 1, 3, 20,25,8]; console.log(a.sort()) // [1,10,20,25,3,8]; ~~~ **比較函數的兩個參數：** sort的比較函數有兩個默認參數，要在函數中接收這兩個參數，這兩個參數是數組中兩個要比較的元素，通常我們用 a 和 b 接收兩個將要比較的元素： * 若比較函數返回值<0，那么a將排到b的前面; * 若比較函數返回值=0，那么a 和 b 相對位置不變； * 若比較函數返回值>0，那么b 排在a 將的前面；對于sort()方法更深層級的內部實現以及處理機制可以看一下這篇文章[# 深入了解javascript 數組的sort方法]([https://www.jb51.net/article/141331.htm](https://www.jb51.net/article/141331.htm)) **sort排序常見用法：** 1、數組元素為數字的升序、降序: ~~~ var array = [10, 1, 3, 4,20,4,25,8]; // 升序 a-b < 0 a將排到b的前面，按照a的大小來排序的 // 比如被減數a是10，減數是20 10-20 < 0 被減數a(10)在減數b(20)前面 array.sort(function(a,b){ return a-b; }); console.log(array); // [1,3,4,4,8,10,20,25]; // 降序被減數和減數調換了 20-10>0 被減數b(20)在減數a(10)的前面 array.sort(function(a,b){ return b-a; }); console.log(array); // [25,20,10,8,4,4,3,1]; ~~~ 2、數組多條件排序 ~~~ var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}]; array.sort(function(a,b){ if(a.id === b.id){// 如果id的值相等，按照age的值降序 return b.age - a.age }else{ // 如果id的值不相等，按照id的值升序 return a.id - b.id } }) // [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}] ~~~ 3、自定義比較函數，天空才是你的極限類似的：運用好返回值，我們可以寫出任意符合自己需求的比較函數 ~~~ var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}]; array.sort(function(a,b){ if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ，-1<0 a排在b的前面 return -1 }else{ // 如果不是的話，a排在b的后面 return 1 } }) // [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name": ~~~ **ES6: copyWithin() 指定位置的成員復制到其他位置** 定義: 在當前數組內部，將指定位置的成員復制到其他位置,并返回這個數組。語法: array.copyWithin(target, start = 0, end = this.length) 參數: 三個參數都是數值，如果不是，會自動轉為數值. 1、target（必需）：從該位置開始替換數據。如果為負值，表示倒數。 2、start（可選）：從該位置開始讀取數據，默認為 0。如果為負值，表示倒數。 3、end（可選）：到該位置前停止讀取數據，默認等于數組長度。使用負數可從數組結尾處規定位置。瀏覽器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持 eg: ~~~ // -2相當于3號位，-1相當于4號位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5'] // 2位置開始被替換,3位置開始讀取要替換的 5位置前面停止替換 a.copyWithin(2,3,5) // ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"] ~~~ 從上述栗子: 1、第一個參數是開始被替換的元素位置 2、要替換數據的位置范圍:從第二個參數是開始讀取的元素，在第三個參數前面一個元素停止讀取 3、數組的長度不會改變 4、讀了幾個元素就從開始被替換的地方替換幾個元素 **ES6: fill() 填充數組** 定義: 使用給定值，填充一個數組。參數: 第一個元素(必須): 要填充數組的值第二個元素(可選): 填充的開始位置,默認值為0 第三個元素(可選)：填充的結束位置，默認是為this.length [MDN瀏覽器兼容]([https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Array/fill#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)) ~~~ ['a', 'b', 'c'].fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] ~~~