刷前端面經筆記（十）

1.陣列方法

1）join()把陣列上午所有元素放入一個字串。元素通過指定的分隔符進行分隔。 該方法只接收一個引數，用作分隔符的字串，然後返回包含所有陣列項的字串，如果不給join()方法傳入任何值，則使用逗號作為分隔符。

var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'
var b = new Array(10);
b.join('-');//'---------'，9個連字元組成的字串
複製程式碼

注意：如果join()方法的引數是undefined，標準瀏覽器以逗號為分隔符返回字串，而IE7-瀏覽器以"undefined"為分隔符返回字串； 如果陣列中某一項的值是null或者undefined，則該值在join()方法返回的結果中以空字串表示。 2）push()方法可以接收任意數量的引數，把它們逐個新增到陣列末尾，並且返回修改後陣列的長度。

var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5
複製程式碼

3）pop()方法從陣列末尾移除最後一項，減少陣列的length，然後返回移除的項。

var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'
複製程式碼

注意：給pop引數傳其他數字不起作用，也不報錯。還是隻刪除最後一項； 對空陣列使用pop()方法，不會報錯，而是返回undefined 4）shift()方法移除陣列中的第一個項並返回該項，同時陣列的長度減1

var a = ['a', 'b', 'c'];
console.log(a,a.shift());//['b', 'c'] 'a'
var arr6 = [1];
console.log(arr6,arr6.shift()); //[] 1
複製程式碼

注意：對空陣列使用shift()方法，不會報錯，而是返回undefined 5）unshift()方法在陣列前面新增任意個項並返回新陣列長度。

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4
複製程式碼

注意：當傳入多個引數時，是一次性插入。最終的陣列中插入的元素的順序和它們在引數列表中的 順序一致； 在IE-7瀏覽器中，unshift()方法的返回值總是undefined 6）reserve()方法用於反轉陣列的順序，返回經過排序之後的陣列；而原來陣列的順序也發生改變。

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']
複製程式碼

7）sort()按照字元編碼的順序進行排序。sort()方法會呼叫每個陣列項的toString()方法，然後比較得到的字串排序，返回經過排序之後的陣列，而原陣列順序也發生改變。

var array = [2,1,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
複製程式碼

注意：如果陣列包含undefined元素，它們會被排到陣列的尾部；

arrayObject.sort(sortby) 引數可選。規定排序順序。必須是函式。比較函式接收兩個引數，如果第一個引數應該位於第二個之前則返回一個負數，如果兩個引數相等則返回0，如果第一個引數應該位於第二個之後則返回一個正數。 8）concat()方法基於當前陣列中的所有項建立一個新的陣列，先建立當前陣列一個副本，然後將接收到的引數新增到這個副本的末尾，最後返回新構建的陣列。所以concat()不影響原陣列。

// 如果不給concat()方法傳遞引數時，它只是複製當前的陣列；
var arr = [1,2,3];
console.log(arr,arr.concat()); //[1,2,3] [1,2,3]

// 如果引數是一個或多個陣列，則該方法會將這些陣列中的每一項都新增到結果陣列中；
console.log(arr,arr.concat([6,7,8],[77,33,44]));
//[1, 2, 3] [1, 2, 3, 6, 7, 8, 77, 33, 44]
var arr1 = [4,5,6];
console.log(arr,arr.concat(arr1)); //[1,2,3] [1,2,3,4,5,6]

// 如果傳遞的值不是陣列，這些值就會被簡單地新增到結果陣列的末尾。console.log(arr,arr.concat(4,5));//[1,2,3] [1,2,3,4,5]
console.log(arr,arr.concat(4,[5,[6,7]]));
//[1,2,3] [1, 2, 3, 4, 5, [6,7]]
複製程式碼

淺拷貝 如果不提供引數，concat()方法返回當前陣列的一個淺拷貝。

// 該方法實際只複製了陣列的第一維。
// 陣列第一維存放的是第二維的引用，而第二維才是實際存放他們的內容
var numbers = [1,2];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]
var numbers = [[1,2]];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]
複製程式碼

9）slice()方法基於當前陣列中的一個或多個項建立一個新陣列，接受一個或兩個引數，最後返回新陣列，所以slice()不影響原陣列。 slice(start,end)方法需要兩個引數start和end，返回這個陣列從start位置到end位置(不包含)的一個子陣列，左閉右開。 注意：a.如果end為undefined或不存在，則返回從start位置到陣列結尾的所有項； b.如果沒有引數，則返回原陣列，即返回當前陣列的一個淺拷貝； 10）splice()方法用於刪除原陣列的一部分成員，並可以在被刪除的位置新增入新的陣列成員，該方法會改變原陣列。 splice()返回一個由刪除元素組成的陣列，或者如果沒有刪除元素就返回一個空陣列 splice(start,number...)的第一個引數start指定了插入或刪除的起始位置，第二個引數number指定了應該從陣列中刪除的元素的個數，如果後面還有更多的引數，則表示這些就是要被插入陣列的新元素。 11）indexOf(search,start)方法接收search和start兩個引數，返回search首次出現的位置，如果沒有找到則返回-1，start代表從start位置開始尋找。 12）lastIndexOf(search,start)方法從右向左查詢。 接收search和start兩個引數，返回search第一次出現的位置，如果沒有找到則返回-1 13）reduce()方法需要兩個引數，第一個是執行化簡操作的函式，化簡函式的任務就是用某種方法把兩個值組合或化簡為一個值，並返回化簡後的值。

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
// total is 6
複製程式碼

reduceRight()則從右到左執行對應的化簡函式 14）map()方法對陣列中的每一項執行給定的函式，返回每次函式呼叫的結果組成的陣列， map方法還可以接受第二個引數，表示回撥函式執行時this所指向的物件。 15）forEach()方法對陣列中的每一項執行給定的函式，這個方法沒有返回值。本質上和for迴圈迭代陣列一樣。如果需要有返回值，一般使用map方法。 forEach()方法除了接受一個必須的回撥函式引數，第二個引數還可以接受一個可選的上下文引數（改變回撥函式裡面的this指向）

array.forEach(callback(currentValue, index, array){
    //do something
}, this)
複製程式碼

16）filter()方法對陣列中的每一項執行給定的函式，返回該函式會返回true的項組成的陣列。該方法常用於查詢符合條件的所有陣列項。 filter()方法還可以接受第二個可選的上下文引數（改變回撥函式裡面的this指向）

var arr= [1,10,20,30]
var brr = arr.filter((item)=>{
    return item>10;
})
//[20,30]
複製程式碼

17）some()方法對陣列中的每一項執行給定函式，如果該函式對任一項返回true，則返回true。並且當且僅當數值中的所有元素呼叫判定函式都返回false，它才返回false 注意：在空陣列上呼叫some()方法會返回false

const isBiggerThan10 = (element, index, array) => {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  
// false

[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true
複製程式碼

18）every()方法對陣列中的每一項執行給定函式，如果函式對每一項都返回true，則返回true；只要有一項返回false，則返回false 19）fill()方法，用一個固定值填充一個陣列中起始索引到終止索引內的全部元素

arr.fill(value, start, end)
var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]
複製程式碼

20）find()方法返回陣列中滿足提供的測試函式的第一個元素的值

    function isBigEnough(element) {
    return element >= 15;
    }
    [12, 5, 8, 130, 44].find(isBigEnough); // 130
複製程式碼

21）findIndex()方法返回陣列中滿足提供的測試函式的一個元素的索引

function isBigEnough(element) {
  return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough); 
//'3'
複製程式碼

22）includes()方法用來判斷一個陣列是否包含一個指定的值，如果是，則返回true，如果沒有則返回false

let a = [1, 2, 3];
a.includes(2); 
// true 
a.includes(4); 
// false
複製程式碼

23）toLocaleString()方法返回一個字串表示陣列中的元素。陣列中的元素將使用各自的toLocaleString方法轉成字串，這些字串將使用一個特定語言環境的字串（例如一個逗號"，"）隔開

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 輸出 "1,337,2019/2/15 下午8:32:24,foo"
複製程式碼

24）copyWithin(target,start,end)方法淺複製陣列的一部分到同一陣列的另一個位置 25）Array.isArray()方法用於確定傳遞的值是否是一個Array

    Array.isArray([]) => true;
    Array.isArray({}) => false;
複製程式碼

26）Array.of()

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]
複製程式碼

27）Array.from() 對偽陣列或可迭代物件(包括arguments Array,Map,Set,String…)轉換成陣列物件 語法Array.from(arrayLike, mapFn, thisArg)

arrayLike 想要轉換成陣列的偽陣列物件或可迭代物件。

mapFn (可選引數) 如果指定了該引數，新陣列中的每個元素會執行該回撥函式。

thisArg (可選引數) 可選引數，執行回撥函式 mapFn 時 this 物件。

返回值 一個新的陣列例項

2.陣列降維

方法一：

function flattenDeep(arr) {
        arr = "" + arr;  // 或者arr = arr.toString();

        arr = arr.split(",");
        arr = arr.map(Number)
        return arr;
    }
flattenDeep([1, [[2],[3, [4]], 5]]);
複製程式碼

方法二：

function flattenDeep(arr) {
    if(!Array.isArray(arr))
        return [arr];
    return arr.reduce((prev,cur) => {        
        return [...prev, ...flattenDeep(cur)];
    },[]);
}

flattenDeep([1, [[2], [3, [4]], 5]]);
複製程式碼

方法三：

function flattenDeep(arr){
    while(arr.some(item=>Array.isArray(item)){
        arr = [].concat(...arr);
    }
    return arr;
}
複製程式碼