Array.from() : 用於將兩類對象轉化爲數組
let arr1 = {
'1':'a',
'2':'b',
'3':'c',
length:3
}
let arr2 = Array.from(arr1)
arr2 ---- ['a','b','c']
Array.from() 還可以將對象中只有長度屬性的轉換成數組,得到的數組是多少長度的undefined的值
如果瀏覽器不支持這個寫法,可以使用 Array.prototype.slice代替
const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)();
Array.from()還可以接受第二個參數,作用類似於數組的map方法,用來對每個元素進行處理,將處理後的值放入返回的數組
Array.from([1,2,3],(x) => x * x)
// 1 4 9
獲取dom節點的文本內容
let span = document.querySelectorAll('span name')
let name = Array.from(span, s => s.textContent )
布爾值
Array.from( [1,,2,,3],(n) => n || 0 )
[1,0,2,0,3]
返回各種數據類型
function typeOf() {
return Array.from(arguments,value => typeof value )
}
typeOf( null, [] , NaN )
// [ 'object' , 'object' , 'number']
Array.from() 還有一個應用就是可以將 字符串 轉化成 數組, 然後返回字符串的長度,
因爲它能正確處理各種unicode字符
function countSymbols(string) {
return Array.from(string).length
}
---------------------------------------------------------------------------------------------------------------------------------------
擴展運算符(...)
使用擴展運算符也可以將對象轉換成數組
擴展運算符的應用:
1: 合併數組
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
2: 與解構賦值結合,生成數組
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
如果將擴展運算符用於數組賦值,只能放在參數的最後一位,否則會報錯
3: 函數的返回值 如果函數需要返回多個值,就可以使用到擴展運算符
var dateFields = readDateFields(database);
var d = new Date(...dateFields);
4: 字符串 將字符串轉換成真正的數組
[...'hello']
// [ "h", "e", "l", "l", "o" ]
5: 實現了Iterator接口的對象
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
6: Map, Set結構,Generator函數 擴展運算符內部調用的是數據結構的Iterator接口,因此只要有Iterator接口的對象都可以使用
Array.of() 用於將一組 值 轉化成 數組
Array.of() [ ]
Array.of(undefined) undefined
Array.of(3,2,1) ===> [3,2,1]
Array.of(3) ====> [3]
Array.of(2,1).length ===> 2
Array.of() 總是把參數值組成數組,如果沒有參數,則返回一個空數組
Array() 後面可以接數組,也可以什麼都不接,什麼都不接代表空數組,一個數代表長度,數值爲空,多個數表示一個數組
copyWithin() 再當前數組內部,將指定位置的成員複製到其他位置上(原本數據會被覆蓋)
Array.prototype.copyWithin( target , start = 0 , end = this.length )
target 必填 從該位置開始替換數據
start 可選 從該位置開始讀取數據,默認值爲0 ,如果爲負數,表示倒數
end 可選 到該位置停止讀取數據,默認等於數組長度,如果爲負數,表示倒數
這三個參數都是數組,如果不是數組會自動轉換成數值
find() findIndex()
find() 用於找出 第一個 符合條件的數組成員,它的參數是一個回調函數,所有數組
成員依次執行該回調函數,直到找出第一個返回值,返回該返回值,如果沒有找到則
返回undefined
find() 的回調函數可以接受三個參數, 第一個爲當前的值, 第二個爲 當前值的位置
第三個是原數組
[ 1,2,3,10].find( (n) => n >9 )
// 10
[ 1,2,3,10].find( ( value , index , arr ) => return value)
//
findIndex() 返回第一個符合條件的數組成員的位置,如果沒有成員符合條件,則返回-1
findIndex() 可以藉助Object.is()來識別數組的NaN成員
fill() 給定值,填充數組
將數組中的元素全部抹去
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
fill() 還可以接受三個參數,第二個參數表示填充的起始位置, 第三個表示填充的結束位置
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
entries() keys() values()
entries() 對鍵值對進行遍歷
keys() 對鍵名進行遍歷
values() 對鍵值進行遍歷
三者可以是使用for ...of進行遍歷
for ( let index of ['a],'b'].keys()) {
console.log(index) //0 //1
}
for ( let el of ['c','d'].values()){
console.log(el) //c //d
}
for ( let [index,value] of ['a','v'].entries()){
console.log(index,value) // 0 "a" // 1 "v"
}
如果不適用for ..of 循環,可以手動調用遍歷器對象的next方法,進行遍歷
let arr = ['1','2','3']
let entries = arr.entries()
console.log(entries.next().value) //[0.'1']
console.log(entries.next().value); // [1, '2']
console.log(entries.next().value); // [2, '3']
includes() 表示某個數組是否包含給定的值,與字符串的includes方法類似 返回一個布爾值
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
includes(n,m) m表示搜索的起始位置,如果值爲負數表示倒數的位置,如果位置大於長度會重置爲0
n表示搜索的數值
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
下面代碼用來檢查當前環境是否支持該方法，如果不支持，部署一個簡易的替代版本。
const contains = (() =>
Array.prototype.includes
? (arr, value) => arr.includes(value)
: (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false
數組的空位 空位指的是數組中的某個值爲空,也就是沒有任何值
注意 空位並不是Undefined , 一個位置的值是undefined,依然是有值的
es6明確將空位轉爲undefined, 空位不能忽略
Array.from() 方法將數組的空位轉化爲undefined,
擴展運算符(...) 也會將空位轉化爲undefined
copyWithin() 會連空位一個複製過去
fill() 將空位視爲正常的數組位置
for ...or 循環的時候會連空位也一起循環遍歷
entries() keys() values() find() findIndex() 都將空位視爲undefined
由於空位的處理規則非常不統一,請避免出現空位