數(shù)組中常用的方法

分為四個(gè)維度記憶

• 方法的作用
• 方法的參數(shù)
• 方法的返回值
• 原有數(shù)組是否改變

push

作用：向數(shù)組”末尾“添加新的內(nèi)容。
參數(shù)：追加的內(nèi)容可以是一個(gè)或者是多個(gè)坠七。
返回值：新增數(shù)據(jù)后的長度
原有的數(shù)據(jù)發(fā)生了改變

pop

作用：刪除數(shù)組最后一項(xiàng)
參數(shù)：不需要傳遞任何參數(shù)
返回值：返回被刪除那一項(xiàng)的數(shù)值
原有的數(shù)組被改變

shift

作用：刪除數(shù)組中的第一項(xiàng)
參數(shù)：不用傳遞任何參數(shù)
返回值：返回被刪除的那一項(xiàng)的值
原有的數(shù)組被改變

基于shift刪除數(shù)組中的第一項(xiàng)，刪除后原有數(shù)組后面每一項(xiàng)的索引都要減1(往前移動(dòng)一位)

unshift

作用：向數(shù)組開始位置追加新的內(nèi)容
參數(shù)：要新增的內(nèi)容
返回值：新增數(shù)組后的長度
原有的數(shù)組發(fā)生改變

splice

基于splice對(duì)數(shù)組可以進(jìn)行很多操作肠槽，比如：
刪除數(shù)組指定位置的內(nèi)容
向數(shù)組指定位置新增內(nèi)容
還可以修改數(shù)組指定位置的內(nèi)容
刪除：splice(n.m)
從索引n開始，刪除m個(gè)內(nèi)容焕梅，把刪除掉的部分以新的數(shù)組返回迹鹅，原有的數(shù)組被改變。

新增:ary.splice(n,0,x,...)
從索引n開始往前刪除零項(xiàng)（沒刪除）贞言，或者把x的內(nèi)容放入到數(shù)組中索引n位置的前面斜棚。

修改:ary.splice(n,m,x,...)
修改的原理就是把原有的內(nèi)容刪除掉，然后把需要修改的內(nèi)容這部分被刪除信息的位置。返回的是以數(shù)組的形式被修改了的內(nèi)容（也就是被刪掉的內(nèi)容）

案例：

刪除數(shù)組最后一項(xiàng)弟蚀，有幾種方法蚤霞？

除了上面的三種方式之外，還可以用delete刪除數(shù)組中的某一項(xiàng)义钉，但是不建議用delete刪除昧绣，雖然內(nèi)容沒了，但是數(shù)組的長度依然沒有改變捶闸。

向數(shù)組末尾追加新的內(nèi)容夜畴，有幾種方法？

slice

作用：在一個(gè)數(shù)組中删壮，按照條件查找出其中其部分的內(nèi)容贪绘。
參數(shù)：兩個(gè)參數(shù)（n/m），從索引n開始醉锅，找到m處，但是不包含m发绢。
返回：以一個(gè)新數(shù)組存儲(chǔ)查找的內(nèi)容
原有數(shù)組不會(huì)變

如果不寫參數(shù)硬耍，可以實(shí)現(xiàn)數(shù)組的克隆，克隆出一個(gè)新的數(shù)組出來边酒，和原來數(shù)組的內(nèi)容一樣经柴，但是不在相同的堆內(nèi)存空間，兩個(gè)數(shù)組是不相等獨(dú)立的墩朦。
slice還支持負(fù)數(shù)索引坯认，負(fù)數(shù)運(yùn)算規(guī)則：數(shù)組總長度+負(fù)數(shù)索引

concat

作用：實(shí)現(xiàn)多個(gè)數(shù)組（或者值）的拼接
參數(shù)：數(shù)組或者值
返回：拼接后的新數(shù)組
原有數(shù)組不變

var ary1 = [12,23];
var ary2 = [100,200];
 var ary3 = [2000,3000];
 console.log(ary1.concat(ary2,"xiaoKge",ary2));
// [12, 23, 100, 200, "xiaoKge", 100, 200]

可以基于空數(shù)組作為拼接的開始，在小括號(hào)中排列拼接的順序氓涣，空數(shù)組不會(huì)占據(jù)內(nèi)容的位置牛哺。

[].concat(ary1,'xiaoKge',ary2,ary3);
(7) [12, 23, "xiaoKge", 100, 200, 2000, 3000]

tostring

作用：把數(shù)組轉(zhuǎn)換為字符串
參數(shù)：沒有任何參數(shù)
返回值：數(shù)組中的每一項(xiàng)用逗號(hào)分隔的字符串
原有的數(shù)組不變

join

作用：和toString類似，也是吧數(shù)組轉(zhuǎn)換為字符串劳吠，但是我們可以設(shè)置為字符串后每一項(xiàng)之間的鏈接符
參數(shù)：指定的鏈接符
返回值：字符串
原有的數(shù)組不變

 var ary1 = [12,23];
 var ary2 = [100,200];
console.log(ary1.join("+"));  //'12+23'

reverse

作用：把數(shù)組倒過來排列
參數(shù)：無
返回值：排列后的新數(shù)組
原有的數(shù)組不變

var ary = [12,23,34,45];
console.log(ary.reverse());  //[45, 34, 23, 12]

sort

作用：給數(shù)組排序
參數(shù)：無/函數(shù)
返回值：排序后的新數(shù)組
原有的數(shù)組不變

var ary = [2,4,5,3,2,4,5,6,7,8,4,9];
console.log(ary.sort());
//[2, 2, 3, 4, 4, 4, 5, 5, 6, 7, 8, 9]

其中引润，在真實(shí)項(xiàng)目中，基于sort排序痒玩，我們都需要傳遞參數(shù)（函數(shù)）

ary.sort(function (a,b){
    return a-b;  //升序

    // return b-a;  //降序
})

ES6中數(shù)組新增的方法

from

作用：from()方法是從一個(gè)類似數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的淳附，淺拷貝的數(shù)組實(shí)例。把類數(shù)組轉(zhuǎn)成數(shù)組
參數(shù)蠢古；

• arrayLike：想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象
• mapFn(可選)： 如果指定了該參數(shù)奴曙，新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)。
• thisArg (可選)：執(zhí)行回調(diào)函數(shù) mapFn 時(shí) this 對(duì)象草讶。
  返回值：一個(gè)新的數(shù)組

  <div>
    <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul> 
  </div>

  <script>
    let lis = document.querySelectorAll("#list li");
    let arr = Array.from(lis);
    console.log(lis);
    console.log(arr);
  </script>

from()方法的三個(gè)參數(shù)

    // Array.from(類數(shù)組,回調(diào)函數(shù),執(zhí)行回調(diào)函數(shù)的this)
    let data = Array.from(lis,function(item,index) {
      console.log("item: "+ item + "\nindex: " + index + "\nthis: " + this);
      return item;
    },document);
    console.log(data);

isArray

作用：檢測(cè)數(shù)據(jù)是否是一個(gè)數(shù)組
參數(shù)：data 要檢測(cè)的數(shù)據(jù)
返回值: true 數(shù)組洽糟，false 非數(shù)組

    let lis = document.querySelectorAll("#list li");
    let arr = [1,2,3,4];
    console.log(Array.isArray(lis));  //false
    console.log(Array.isArray(arr));   //true

Array.of

作用：將參數(shù)轉(zhuǎn)成一個(gè)數(shù)組
參數(shù)：elementN 要放入數(shù)組中的數(shù)據(jù)
返回值：新數(shù)組

let res1 = Array.of(2); 
console.log(res1);  // //[ 2 ]

let res2 = Array.of(1,2,3,4);
console.log(res2);  //[ 1, 2, 3, 4 ]

如果原生不支持的話，在其他代碼之前執(zhí)行以下代碼會(huì)創(chuàng)建 Array.of()

if(!Array.of) {
  return function() {
    return Array.prototype.slice.call(arguments);
  }
}

Array.flat

作用： 扁平化多維數(shù)組
參數(shù)：指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)值為 1脊框。
返回值：一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組

let arr = [
  1,2,
  [
    3,
    [4,5]
  ]
]
console.log(arr.flat(1));  //[ 1, 2, 3, [ 4, 5 ] ]
console.log(arr.flat(2)); //[ 1, 2, 3, 4, 5 ]
console.log(arr.flat(Infinity));  //到最后一層： [ 1, 2, 3, 4, 5 ]

Array.flatMap

Array arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新數(shù)組的元素
}[, thisArg])

參數(shù)：

• 回調(diào)函數(shù) (callback）颁督，可以生成一個(gè)新數(shù)組中的元素的函數(shù)，可以傳入三個(gè)參數(shù)：

  • currentValue 當(dāng)前正在數(shù)組中處理的元素
  • index可選 數(shù)組中正在處理的當(dāng)前元素的索引浇雹。
  • array可選 被調(diào)用的 map 數(shù)組

• 可選參數(shù)：thisArg

  • 執(zhí)行 callback 函數(shù)時(shí) 使用的this 值

返回值：一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組

let arr = [
  [1,2],
  [3,4],
  [6,8]
];
let arr2 = arr.flatMap(item => {
  item = item.filter(item => item >= 2);
  return item;
});
console.log(arr2);  //[ 2, 3, 4, 6, 8 ]

Array.fill

Array arr.fill(value[, start[, end]]);
用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素沉御。不包括終止索引

參數(shù)：
用來填充數(shù)組元素的值。
可選參數(shù)：

• start 起始索引昭灵，默認(rèn)值為0吠裆。
• end 終止索引，默認(rèn)值為 arr.length

let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr); //[ 'a', 'f', 'f', 'd', 'e' ]

arr.includes

Boolean arr.includes(valueToFind[, fromIndex])
作用：判斷數(shù)組中是否包含一個(gè)指定的值
參數(shù)：

• valueToFind 需要查找的值
• 可選參數(shù)：從 fromIndex 處開始向后查找

返回值： true 代表數(shù)組中包含 valueToFind烂完， false 代表數(shù)組中不包含 fromIndex

let arr = ["a","b","c","d"];
console.log(arr.includes('a'));  //true
console.log(arr.includes("a",-3));  //false