JS基礎知識之數組

一、類數組轉化爲數組

1.Array.prototype.slice.call()

function sum (){
    let arr = Array.prototype.slice.call(arguments);
    console.log(arr.reduce((sum,cur)=> sum + cur),arr)//arr可以調用數組原生方法了
}
sum(1,2);//3 [1,2]

2.Array.form()

function sum(a,b){
    let arr = Array.from(arguments);
    console.log(arr.reduce((sum,cur)=> sum + cur))//arr可以調用原生方法
}
sum(1,2);//3

3.ES6展開運算符

function sum (a,b){
    let arr = [...arguments];
    console.log(arr.reduce((sum,cur)=> sum + cur));//arr可以調用數組原生方法
}
sum(1,2)//3

4.利用concat + apply

function sum (a,b){
    let arr = Array.prototype.concat.apply([],arguments);
    console.log(arr.reduce((sum,cur)=> sum + cur));//arr可以調用數組原生方法
}
sum(1,2)//3

二、JS判斷數組中是否包含某個值

1.array.indexOf

返回數組原素的下標，否則返回-1

var arr = [1,2,3,4];
var index = arr.indexOf(3); 
console.log(index)//返回數組原素的下標，否則返回-1

2.arr.includes(valueToFind[, fromIndex])

---

此方法判斷數組中是否存在某個值，如果存在返回true，否則返回false

參數 
valueToFind 需要查找的元素值。
fromIndex 可選 從fromIndex 索引處開始查找 valueToFind。
如果爲負值，則按升序從 array.length + fromIndex 的索引開始搜 
（即使從末尾開始往前跳 fromIndex 的絕對值個索引，然後往後搜尋）。默認爲 0。

var arr = [1,2,3,4];
if(arr.includes(3)){
    console.log('存在')
}else{
    console.log('不存在')
}

3.arr.find(callback[, thisArg])

返回數組中滿足條件的第一個元素的值，如果沒有，返回undefined

參數
callback(element,index,array) 可傳入三個值 
    element 當前遍歷到的元素;index可選 當前遍歷到的索引;array可選 數組本身;
thisArg可選 執行回調時用作this 的對象。

var arr = [1,2,3,4,78];
var result = arr.find(item=>{
    return item > 3;
})
console.log(result);//4

4.arr.findIndex(callback[, thisArg])

findIndex()方法返回數組中滿足條件的第一個元素的下標。否則返回-1。
參數
callback()針對數組中的每個元素, 都會執行該回調函數, 執行時會自動傳入下面三個參數:
    element當前元素。
    index 當前元素的索引
    array 調用findIndex的數組。

thisArg 可選。執行callback時作爲this對象的值.

var arr = [1,2,3,4];
var result = arr.findIndex(item=>{
    return item > 3
});
console.log(result)//3

三、JS中flat----數組扁平化

需求：多維數組=》一維數組
let arr = [1, [2, [3, [4, 5]]], 6];// -> [1, 2, 3, 4, 5, 6]
let str = JSON.stringify(arr);

1. 調用ES6中的flat方法

flat() 方法會按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合併爲一個新數組返回。
var newArray = arr.flat([depth])
參數
    depth 可選
    指定要提取嵌套數組的結構深度，默認值爲 1。
返回值
    一個包含將數組與子數組中所有元素的新數組。

arr = arr.flat(Infinity);

2. replace + split

replace() 方法返回一個由替換值（replacement）替換一些或所有匹配的模式（pattern）後的新字符串。
模式可以是一個字符串或者一個正則表達式，替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。
原字符串不會改變。

語法：str.replace(regexp|substr, newSubStr|function)

參數：
    regexp (pattern)
    一個RegExp 對象或者其字面量。該正則所匹配的內容會被第二個參數的返回值替換掉。
    substr (pattern)
    一個將被 newSubStr 替換的 字符串。其被視爲一整個字符串，而不是一個正則表達式。僅第一個匹配
   項會被替換                      
    newSubStr (replacement)
    用於替換掉第一個參數在原字符串中的匹配部分的字符串。該字符串中可以內插一些特殊的變量名。
    參考下面的使用字符串作爲參數。    
    
    function (replacement)
     一個用來創建新子字符串的函數，該函數的返回值將替換掉第一個參數匹配到的結果。
     參考下面的指定一個函數作爲參數。
返回值
  一個部分或全部匹配由替代模式所取代的新的字符串。
arr = str.replace(/(\[|\])/g, '').split(',')

3. replace + JSON.parse

str = str.replace(/(\[|\])/g, '');
str = '[' + str + ']';
ary = JSON.parse(str);

4. 普通遞歸

let result = [];
let fn = function(ary) {
  for(let i = 0; i < ary.length; i++) {
    let item = arr[i];
    if (Array.isArray(arr[i])){
      fn(item);
    } else {
      result.push(item);
    }
  }
}

5. 利用reduce函數迭代

reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值

function flatten(arr) {
    return arr.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }, []);
}
let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))

6：擴展運算符

//只要有一個元素有數組，那麼循環繼續
while (ary.some(Array.isArray)) {
  ary = [].concat(...ary);
}