刷前端面經筆記(十)
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]
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; }