刷前端面經筆記（十）

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;
}