刷前端面經筆記（十）

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

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'

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

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]]

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]

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