成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript數(shù)組學(xué)習(xí)記錄_11

TalkingData / 1500人閱讀

摘要:數(shù)組學(xué)習(xí)記錄是的實(shí)例屬性。對(duì)數(shù)組元素進(jìn)行排序,并返回當(dāng)前數(shù)組。返回一個(gè)由所有數(shù)組元素組合而成的字符串。為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)。

JavaScript數(shù)組學(xué)習(xí)記錄 Array.length

Array.length 是Array的實(shí)例屬性。返回或設(shè)置一個(gè)數(shù)組中的元素個(gè)數(shù)。該值是一個(gè)無(wú)符號(hào) 32-bit 整數(shù),并且總是大于數(shù)組最高項(xiàng)的下標(biāo)。

length 屬性的值是一個(gè) 0 到$2^{32}$-1 的整數(shù)

let arr = ["1", "2", "3", "4","5"];

console.log(arr.length);

//output: 5

可以設(shè)置 length屬性的值來(lái)截?cái)嗳魏螖?shù)組。當(dāng)通過(guò)改變length屬性值來(lái)擴(kuò)展數(shù)組時(shí),實(shí)際元素的數(shù)目將會(huì)增加。例如:將一個(gè)擁有 2 個(gè)元素的數(shù)組的 length 屬性值設(shè)為 3 時(shí),那么這個(gè)數(shù)組將會(huì)包含3個(gè)元素,并且,第三個(gè)元素的值將會(huì)是 undefined 。

let numbers = [1, 2, 3, 4, 5];
let length = numbers.length;
for (let i = 0; i < length; i++) {
  numbers[i] *= 2;
} 
console.log(numbers);

//[2, 4, 6, 8, 10]
let numbers = [1, 2, 3, 4, 5];

if (numbers.length > 3) {
  numbers.length = 3;
}

console.log(numbers); // [1, 2, 3]

console.log(numbers.length); // 3

length屬性不一定表示數(shù)組中定義值的個(gè)數(shù)。了解更多:長(zhǎng)度與數(shù)值下標(biāo)屬性之間的關(guān)系。

Array.length 屬性的屬性特性:

屬性 說(shuō)明 備注
writable true 如果設(shè)置為false,該屬性值將不能被修改
enumerable false 如果設(shè)置為false,刪除或更改任何屬性都將會(huì)失敗。
configurable false 如果設(shè)置為 true ,屬性可以通過(guò)迭代器for或for...in進(jìn)行迭代。
let fruits = [];
fruits.push("banana", "apple", "peach");

console.log(fruits.length); 
// 3

fruits[5] = "mango";

console.log(fruits[5]);
// "mango"

console.log(Object.keys(fruits));  
// ["0", "1", "2", "5"]

console.log(fruits.length);
// 6

//減少length屬性會(huì)刪除元素

fruits.length = 2;

console.log(Object.keys(fruits));
// ["0", "1"]

console.log(fruits.length);
// 2
Array.prototype

Array.prototype 屬性表示 Array 構(gòu)造函數(shù)的原型,并允許向所有Array對(duì)象添加新的屬性和方法。
Array實(shí)例繼承自 Array.prototype 。與所有構(gòu)造函數(shù)一樣,可以更改構(gòu)造函數(shù)的原型對(duì)象,以對(duì)所有 Array 實(shí)例進(jìn)行更改。例如,可以添加新方法和屬性以擴(kuò)展所有Array對(duì)象。這用于 polyfilling, 例如:

鮮為人知的事實(shí):Array.prototype 本身也是一個(gè) Array。

Array.isArray(Array.prototype); 

// true

Array.prototype 屬性

屬性 說(shuō)明
writable false
enumerable false
configurable false

Array.prototype.constructor

所有的數(shù)組實(shí)例都繼承了這個(gè)屬性,它的值就是 Array,表明了所有的數(shù)組都是由 Array 構(gòu)造出來(lái)的。

Array.prototype.length

上面說(shuō)了,因?yàn)?Array.prototype 也是個(gè)數(shù)組,所以它也有 length 屬性,這個(gè)值為 0,因?yàn)樗莻€(gè)空數(shù)組。

會(huì)改變自身的方法

下面的這些方法會(huì)改變調(diào)用它們的對(duì)象自身的值:

Array.prototype.copyWithin()

在數(shù)組內(nèi)部,將一段元素序列拷貝到另一段元素序列上,覆蓋原有的值。

Array.prototype.fill()

將數(shù)組中指定區(qū)間的所有元素的值,都替換成某個(gè)固定的值。

Array.prototype.pop()

刪除數(shù)組的最后一個(gè)元素,并返回這個(gè)元素。

Array.prototype.push()

在數(shù)組的末尾增加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長(zhǎng)度。

Array.prototype.reverse()

顛倒數(shù)組中元素的排列順序,即原先的第一個(gè)變?yōu)樽詈笠粋€(gè),原先的最后一個(gè)變?yōu)榈谝粋€(gè)。

Array.prototype.shift()

刪除數(shù)組的第一個(gè)元素,并返回這個(gè)元素。

Array.prototype.sort()

對(duì)數(shù)組元素進(jìn)行排序,并返回當(dāng)前數(shù)組。

Array.prototype.splice()

在任意的位置給數(shù)組添加或刪除任意個(gè)元素。

Array.prototype.unshift()

在數(shù)組的開(kāi)頭增加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長(zhǎng)度。

不會(huì)改變自身的方法

下面的這些方法絕對(duì)不會(huì)改變調(diào)用它們的對(duì)象的值,只會(huì)返回一個(gè)新的數(shù)組或者返回一個(gè)其它的期望值。

Array.prototype.concat()

返回一個(gè)由當(dāng)前數(shù)組和其它若干個(gè)數(shù)組或者若干個(gè)非數(shù)組值組合而成的新數(shù)組。

Array.prototype.includes()

判斷當(dāng)前數(shù)組是否包含某指定的值,如果是返回 true,否則返回 false。

Array.prototype.join()

連接所有數(shù)組元素組成一個(gè)字符串。

Array.prototype.slice()

抽取當(dāng)前數(shù)組中的一段元素組合成一個(gè)新數(shù)組。

Array.prototype.toSource()

返回一個(gè)表示當(dāng)前數(shù)組字面量的字符串。遮蔽了原型鏈上的 Object.prototype.toSource() 方法。

Array.prototype.toString()

返回一個(gè)由所有數(shù)組元素組合而成的字符串。遮蔽了原型鏈上的 Object.prototype.toString() 方法。

Array.prototype.toLocaleString()

返回一個(gè)由所有數(shù)組元素組合而成的本地化后的字符串。遮蔽了原型鏈上的 Object.prototype.toLocaleString() 方法。

Array.prototype.indexOf()

返回?cái)?shù)組中第一個(gè)與指定值相等的元素的索引,如果找不到這樣的元素,則返回 -1。

Array.prototype.lastIndexOf()

返回?cái)?shù)組中最后一個(gè)(從右邊數(shù)第一個(gè))與指定值相等的元素的索引,如果找不到這樣的元素,則返回 -1。

遍歷方法

在下面的眾多遍歷方法中,有很多方法都需要指定一個(gè)回調(diào)函數(shù)作為參數(shù)。在每一個(gè)數(shù)組元素都分別執(zhí)行完回調(diào)函數(shù)之前,數(shù)組的length屬性會(huì)被緩存在某個(gè)地方,所以,如果你在回調(diào)函數(shù)中為當(dāng)前數(shù)組添加了新的元素,那么那些新添加的元素是不會(huì)被遍歷到的。此外,如果在回調(diào)函數(shù)中對(duì)當(dāng)前數(shù)組進(jìn)行了其它修改,比如改變某個(gè)元素的值或者刪掉某個(gè)元素,那么隨后的遍歷操作可能會(huì)受到未預(yù)期的影響??傊灰獓L試在遍歷過(guò)程中對(duì)原數(shù)組進(jìn)行任何修改,雖然規(guī)范對(duì)這樣的操作進(jìn)行了詳細(xì)的定義,但為了可讀性和可維護(hù)性,請(qǐng)不要這樣做。

Array.prototype.forEach()

為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。

Array.prototype.entries()

返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)。

Array.prototype.every()

如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù),則返回 true,否則返回 false。

Array.prototype.some()

如果數(shù)組中至少有一個(gè)元素滿足測(cè)試函數(shù),則返回 true,否則返回 false。

Array.prototype.filter()

將所有在過(guò)濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回。

Array.prototype.find()

找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的值,如果找不到,則返回 undefined。

Array.prototype.findIndex()

找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的索引,如果找不到,則返回 -1。

Array.prototype.keys()

返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的鍵。

Array.prototype.map()

返回一個(gè)由回調(diào)函數(shù)的返回值組成的新數(shù)組。

Array.prototype.reduce()

從左到右為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù),并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù),并返回最后一次回調(diào)函數(shù)的返回值。

Array.prototype.reduceRight()

從右到左為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù),并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù),并返回最后一次回調(diào)函數(shù)的返回值。

Array.prototype.values()

返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的值。

Array.prototype[@@iterator]()

和上面的 values() 方法是同一個(gè)函數(shù)。

通用方法節(jié)

在 JavaScript 中,很多的數(shù)組方法被故意設(shè)計(jì)成是通用的。也就是說(shuō),那些看起來(lái)像是數(shù)組的對(duì)象(類數(shù)組對(duì)象),即擁有一個(gè) length 屬性,以及對(duì)應(yīng)的索引屬性(也就是數(shù)字類型的屬性,比如 obj[5])的非數(shù)組對(duì)象也是可以調(diào)用那些數(shù)組方法的。其中一些數(shù)組方法,比如說(shuō) join 方法,它們只會(huì)單純的讀取當(dāng)前對(duì)象的 length 屬性和索性屬性的值,并不會(huì)嘗試去改變這些屬性的值。而另外一些數(shù)組方法,比如說(shuō) reverse 方法,它們會(huì)嘗試修改那些屬性的值,因此,如果當(dāng)前對(duì)象是個(gè) String 對(duì)象,那么這些方法在執(zhí)行時(shí)就會(huì)報(bào)錯(cuò),因?yàn)樽址畬?duì)象的 length 屬性和索引屬性都是只讀的。

數(shù)組方法 Array.from()

Array.from()方法從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。

let arr= Array.from("Array")

console.log(arr);

// ["A", "r", "r", "a", "y"]

console.log(Array.from([1, 2, 3], x => x*x));

// [1, 4, 9]

Array.from() 可以通過(guò)以下方式來(lái)創(chuàng)建數(shù)組對(duì)象:

偽數(shù)組對(duì)象(擁有一個(gè)length屬性和若干索引屬性的任意對(duì)象)

可迭代對(duì)象(可以獲取對(duì)象中的元素,如 Map和 Set 等)

Array.from() 方法有一個(gè)可選參數(shù)
mapFn,讓你可以在最后生成的數(shù)組上再執(zhí)行一次 map 方法后再返回。也就是說(shuō) Array.from(obj, mapFn, thisArg) 就相當(dāng)于 Array.from(obj).map(mapFn, thisArg), 除非創(chuàng)建的不是可用的中間數(shù)組。 這對(duì)一些數(shù)組的子類,如 typed arrays 來(lái)說(shuō)很重要, 因?yàn)橹虚g數(shù)組的值在調(diào)用 map() 時(shí)需要是適當(dāng)?shù)念愋汀?/p>

from() 的 length 屬性為 1 ,即Array.from.length = 1。

在 ES2015 中, Class 語(yǔ)法允許我們?yōu)閮?nèi)置類型(比如 Array)和自定義類新建子類(比如叫 SubArray)。這些子類也會(huì)繼承父類的靜態(tài)方法,比如 SubArray.from(),調(diào)用該方法后會(huì)返回子類 SubArray 的一個(gè)實(shí)例,而不是 Array 的實(shí)例。

數(shù)組去重

function combine(){ 
    let arr = [].concat.apply([], arguments);  //沒(méi)有去重復(fù)的新數(shù)組 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 

console.log(combine(m,n)); // [1, 2, 3]
Array.isArray()

Array.isArray() 用于確定傳遞的值是否是一個(gè) Array。

// 下面的函數(shù)調(diào)用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 鮮為人知的事實(shí):其實(shí) Array.prototype 也是一個(gè)數(shù)組。
Array.isArray(Array.prototype); 

// 下面的函數(shù)調(diào)用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray("Array");
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

instanceof 和 isArray

當(dāng)檢測(cè)Array實(shí)例時(shí), Array.isArray 優(yōu)于 instanceof,因?yàn)锳rray.isArray能檢測(cè)iframes.

Array.of()

Array.of() 方法創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例,而不考慮參數(shù)的數(shù)量或類型。

Array.of() 和 Array 構(gòu)造函數(shù)之間的區(qū)別在于處理整數(shù)參數(shù):Array.of(7) 創(chuàng)建一個(gè)具有單個(gè)元素 7 的數(shù)組,而 Array(7) 創(chuàng)建一個(gè)長(zhǎng)度為7的空數(shù)組(注意:這是指一個(gè)有7個(gè)空位的數(shù)組,而不是由7個(gè)undefined組成的數(shù)組)

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

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

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組,而是返回一個(gè)新數(shù)組

Array.copyWithin()

copyWithin() 方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置,并返回它,而不修改其大小

arr.copyWithin(target[, start[, end]])

target

0 為基底的索引,復(fù)制序列到該位置。如果是負(fù)數(shù),target 將從末尾開(kāi)始計(jì)算。
如果 target 大于等于 arr.length,將會(huì)不發(fā)生拷貝。如果 target 在 start 之后,復(fù)制的序列將被修改以符合 arr.length。

start

0 為基底的索引,開(kāi)始復(fù)制元素的起始位置。如果是負(fù)數(shù),start 將從末尾開(kāi)始計(jì)算。
如果 start 被忽略,copyWithin 將會(huì)從0開(kāi)始復(fù)制。

end

0 為基底的索引,開(kāi)始復(fù)制元素的結(jié)束位置。copyWithin 將會(huì)拷貝到該位置,但不包括 end 這個(gè)位置的元素。如果是負(fù)數(shù), end 將從末尾開(kāi)始計(jì)算。
如果 end 被忽略,copyWithin 將會(huì)復(fù)制到 arr.length。

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);
({0:undefined,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5}).copyWithin(0,3,5);
結(jié)果為:
{0:1,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5};
也就是
{0:1,3:1,length:5}
// {0: 1, 3: 1, length: 5}


// ES2015 Typed Arrays are subclasses of Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// On platforms that are not yet ES2015 compliant: 
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

參數(shù)target,start和end 必須為整數(shù)。

如果start為負(fù),則其指定的索引位置等同于length+start,length為數(shù)組的長(zhǎng)度。end也是如此。

copyWithin方法不要求其this值必須是一個(gè)數(shù)組對(duì)象;除此之外,copyWithin是一個(gè)可變方法,它可以改變this對(duì)象本身,并且返回它,而不僅僅是它的拷貝。

copyWithin 就像 C 和 C++ 的 memcpy 函數(shù)一樣,且它是用來(lái)移動(dòng) Array 或者 TypedArray 數(shù)據(jù)的一個(gè)高性能的方法。復(fù)制以及粘貼序列這兩者是為一體的操作;即使復(fù)制和粘貼區(qū)域重疊,粘貼的序列也會(huì)有拷貝來(lái)的值。

copyWithin 函數(shù)是設(shè)計(jì)為通用的,其不要求其 this 值必須是一個(gè)數(shù)組對(duì)象。

The copyWithin 是一個(gè)可變方法,它不會(huì)改變 this 的 length,但是會(huì)改變 this 本身的內(nèi)容,且需要時(shí)會(huì)創(chuàng)建新的屬性。

Array.entries()

entries() 方法返回一個(gè)新的Array Iterator對(duì)象,該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)。

一個(gè)新的 Array 迭代器對(duì)象。Array Iterator是對(duì)象,它的原型(__proto__:Array Iterator)上有一個(gè)next方法,可用用于遍歷迭代器取得原數(shù)組的[key,value]。

var arr = ["a", "b", "c"];

var iteratorArr = array1.entries();

console.log(iteratorArr.next().value);
// expected output: Array [0, "a"]

console.log(iteratorArr.next().value);
// expected output: Array [1, "b"]

iterator.next方法

var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];

// for(var i=0; i< arr.length; i++){   // 實(shí)際使用的是這個(gè) 
for(var i=0; i< arr.length+1; i++){    // 注意,是length+1,比數(shù)組的長(zhǎng)度大
    var tem = iter.next();             // 每次迭代時(shí)更新next
    console.log(tem.done);             // 這里可以看到更新后的done都是false
    if(tem.done !== true){             // 遍歷迭代器結(jié)束done才是true
        console.log(tem.value);
        a[i]=tem.value;
    }
}
    
console.log(a);                         // 遍歷完畢,輸出next.value的數(shù)組

二維數(shù)組排序

function sortArr(arr) {
    var goNext = true;
    var entries = arr.entries();
    while (goNext) {
        var result = entries.next();
        if (result.done !== true) {
            result.value[1].sort((a, b) => a - b);
            goNext = true;
        } else {
            goNext = false;
        }
    }
    return arr;
}

var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];
sortArr(arr);

/*(4) [Array(2), Array(5), Array(5), Array(4)]
    0:(2) [1, 34]
    1:(5) [2, 3, 44, 234, 456]
    2:(5) [1, 4, 5, 6, 4567]
    3:(4) [1, 23, 34, 78]
    length:4
    __proto__:Array(0)
*/

使用 for...of循環(huán)

var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined

for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]
Array.every()

every() 方法測(cè)試數(shù)組的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true


function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

every 方法為數(shù)組中的每個(gè)元素執(zhí)行一次 callback 函數(shù),直到它找到一個(gè)使 callback 返回 false(表示可轉(zhuǎn)換為布爾值 false 的值)的元素。如果發(fā)現(xiàn)了一個(gè)這樣的元素,every 方法將會(huì)立即返回 false。否則,callback 為每一個(gè)元素返回 true,every 就會(huì)返回 true。callback 只會(huì)為那些已經(jīng)被賦值的索引調(diào)用。不會(huì)為那些被刪除或從來(lái)沒(méi)被賦值的索引調(diào)用。

callback 被調(diào)用時(shí)傳入三個(gè)參數(shù):元素值,元素的索引,原數(shù)組。

如果為 every 提供一個(gè) thisArg 參數(shù),則該參數(shù)為調(diào)用 callback 時(shí)的 this 值。如果省略該參數(shù),則 callback 被調(diào)用時(shí)的 this 值,在非嚴(yán)格模式下為全局對(duì)象,在嚴(yán)格模式下傳入 undefined。

every 不會(huì)改變?cè)瓟?shù)組。

every 遍歷的元素范圍在第一次調(diào)用 callback 之前就已確定了。在調(diào)用 every 之后添加到數(shù)組中的元素不會(huì)被 callback 訪問(wèn)到。如果數(shù)組中存在的元素被更改,則他們傳入 callback 的值是 every 訪問(wèn)到他們那一刻的值。那些被刪除的元素或從來(lái)未被賦值的元素將不會(huì)被訪問(wèn)到。

every 和數(shù)學(xué)中的"所有"類似,當(dāng)所有的元素都符合條件才返回true。另外,空數(shù)組也是返回true。(空數(shù)組中所有元素都符合給定的條件,注:因?yàn)榭諗?shù)組沒(méi)有元素)。

Array.fill()

fill() 方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。

arr.fill(value,[start, end])
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

fill 方法接受三個(gè)參數(shù) value, start 以及 end. start 和 end 參數(shù)是可選的, 其默認(rèn)值分別為 0 和 this 對(duì)象的 length 屬性值。

如果 start 是個(gè)負(fù)數(shù), 則開(kāi)始索引會(huì)被自動(dòng)計(jì)算成為 length+start, 其中 length 是 this 對(duì)象的 length 屬性值。如果 end 是個(gè)負(fù)數(shù), 則結(jié)束索引會(huì)被自動(dòng)計(jì)算成為 length+end。

fill 方法故意被設(shè)計(jì)成通用方法, 該方法不要求 this 是數(shù)組對(duì)象。

fill 方法是個(gè)可變方法, 它會(huì)改變調(diào)用它的 this 對(duì)象本身, 然后返回它, 而并不是返回一個(gè)副本。

當(dāng)一個(gè)對(duì)象被傳遞給 fill方法的時(shí)候, 填充數(shù)組的是這個(gè)對(duì)象的引用。

Array.filter()

filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

filter 為數(shù)組中的每個(gè)元素調(diào)用一次 callback 函數(shù),并利用所有使得 callback 返回 true 或 等價(jià)于 true 的值 的元素創(chuàng)建一個(gè)新數(shù)組。callback 只會(huì)在已經(jīng)賦值的索引上被調(diào)用,對(duì)于那些已經(jīng)被刪除或者從未被賦值的索引不會(huì)被調(diào)用。那些沒(méi)有通過(guò) callback 測(cè)試的元素會(huì)被跳過(guò),不會(huì)被包含在新數(shù)組中。

callback 被調(diào)用時(shí)傳入三個(gè)參數(shù):

1.元素的值

2.元素的索引

3.被遍歷的數(shù)組

如果為 filter 提供一個(gè) thisArg 參數(shù),則它會(huì)被作為 callback 被調(diào)用時(shí)的 this 值。否則,callback 的 this 值在非嚴(yán)格模式下將是全局對(duì)象,嚴(yán)格模式下為 undefined。

callback 最終觀察到的this值是根據(jù)通常函數(shù)所看到的 "this"的規(guī)則確定的。

filter 不會(huì)改變?cè)瓟?shù)組,它返回過(guò)濾后的新數(shù)組。

filter 遍歷的元素范圍在第一次調(diào)用 callback 之前就已經(jīng)確定了。在調(diào)用 filter 之后被添加到數(shù)組中的元素不會(huì)被 filter 遍歷到。如果已經(jīng)存在的元素被改變了,則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來(lái)未被賦值的元素不會(huì)被遍歷

過(guò)濾JSON中的無(wú)效條目

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: "undefined" }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === "number" && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log("Filtered Array
", arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("Number of Invalid Entries = ", invalidEntries); 
// Number of Invalid Entries = 5

搜索

const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems("ap")); // ["apple", "grapes"]
console.log(filterItems("an")); // ["banana", "mango", "orange"]
Array.find()

find() 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。

如果你需要找到一個(gè)元素的位置或者一個(gè)元素是否存在于數(shù)組中,使用Array.prototype.indexOf() 或 Array.prototype.includes()。

用對(duì)象的屬性查找數(shù)組里的對(duì)象

var inventory = [
    {name: "apples", quantity: 2},
    {name: "bananas", quantity: 0},
    {name: "cherries", quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === "cherries";
}

console.log(inventory.find(findCherries)); // { name: "cherries", quantity: 5 }
尋

尋找質(zhì)數(shù)

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5
Array.findIndex()

findIndex()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。否則返回-1。

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
Array.forEach()

forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)

//
function copy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);

  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });

  return copy;
}

var obj1 = { a: 1, b: 2 };
var obj2 = copy(obj1); // obj2 looks like obj1 now

如果數(shù)組在迭代時(shí)被修改了,則其他元素會(huì)被跳過(guò)。節(jié)

下面的例子輸出"one", "two", "four"。當(dāng)?shù)竭_(dá)包含值"two"的項(xiàng)時(shí),整個(gè)數(shù)組的第一個(gè)項(xiàng)被移除了,這導(dǎo)致所有剩下的項(xiàng)上移一個(gè)位置。因?yàn)樵?"four"現(xiàn)在在數(shù)組更前的位置,"three"會(huì)被跳過(guò)。 forEach()不會(huì)在迭代之前創(chuàng)建數(shù)組的副本

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four
Array.includes()

includes() 方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值,根據(jù)情況,如果包含則返回 true,否則返回false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false

fromIndex 大于等于數(shù)組長(zhǎng)度節(jié)
如果fromIndex 大于等于數(shù)組長(zhǎng)度 ,則返回 false 。該數(shù)組不會(huì)被搜索

var arr = ["a", "b", "c"];

arr.includes("c", 3);   //false
arr.includes("c", 100); // false

includes() 作為一個(gè)通用方法節(jié)

includes() 方法有意設(shè)計(jì)為通用方法。它不要求this值是數(shù)組對(duì)象,所以它可以被用于其他類型的對(duì)象 (比如類數(shù)組對(duì)象)。下面的例子展示了 在函數(shù)的arguments對(duì)象上調(diào)用的includes() 方法。

(function() {
  console.log([].includes.call(arguments, "a")); // true
  console.log([].includes.call(arguments, "d")); // false
})("a","b","c");
Array.indexOf()

indexOf()方法返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引,如果不存在,則返回-1。

arr.indexOf(searchElement)
arr.indexOf(searchElement, fromIndex = 0)

找出指定元素的所有索引位置

var indices = [];
var array = ["a", "b", "a", "c", "a", "d"];
var element = "a";
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]
Array.join()

join() 方法將一個(gè)數(shù)組(或一個(gè)類數(shù)組對(duì)象)的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。

str = arr.join()
// 默認(rèn)為 ","

str = arr.join("")
// 分隔符 === 空字符串 ""

str = arr.join(separator)
// 分隔符
Array.keys()
var array1 = ["a", "b", "c"];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

會(huì)包含沒(méi)有對(duì)應(yīng)元素的索引

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ["0", "2"]
console.log(denseKeys);  // [0, 1, 2]
Array.lastIndexOf()

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或變量)在數(shù)組中的最后一個(gè)的索引,如果不存在則返回 -1。從數(shù)組的后面向前查找,從 fromIndex 處開(kāi)始

arr.lastIndexOf(searchElement, fromIndex = arr.length - 1)

從此位置開(kāi)始逆向查找。默認(rèn)為數(shù)組的長(zhǎng)度減 1,即整個(gè)數(shù)組都被查找。如果該值大于或等于數(shù)組的長(zhǎng)度,則整個(gè)數(shù)組會(huì)被查找。如果為負(fù)值,將其視為從數(shù)組末尾向前的偏移。即使該值為負(fù),數(shù)組仍然會(huì)被從后向前查找。如果該值為負(fù)時(shí),其絕對(duì)值大于數(shù)組長(zhǎng)度,則方法返回 -1,即數(shù)組不會(huì)被查找。。

Array.map()

map() 方法創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 數(shù)組為: [{1: 10}, {2: 20}, {3: 30}], 

// kvArray 數(shù)組未被修改: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]
Array.pop()

pop()方法從數(shù)組中刪除最后一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度。

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish); 
// ["angel", "clown", "mandarin"]

console.log(popped); 
// surgeon
Array.push()

push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾,并返回該數(shù)組的新長(zhǎng)度

push 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時(shí),可應(yīng)用在類似數(shù)組的對(duì)象上。push 方法根據(jù) length 屬性來(lái)決定從哪里開(kāi)始插入給定的值。如果 length 不能被轉(zhuǎn)成一個(gè)數(shù)值,則插入的元素索引為 0,包括 length 不存在時(shí)。當(dāng) length 不存在時(shí),將會(huì)創(chuàng)建它。

Array.reduce()

reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)提供的reducer函數(shù)(升序執(zhí)行),將其結(jié)果匯總為單個(gè)返回值

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

reducer 函數(shù)接收4個(gè)參數(shù):

Accumulator (acc) (累計(jì)器)
Current Value (cur) (當(dāng)前值)
Current Index (idx) (當(dāng)前索引)
Source Array (src) (源數(shù)組)
您的 reducer 函數(shù)的返回值分配給累計(jì)器,該返回值在數(shù)組的每個(gè)迭代中被記住,并最后成為最終的單個(gè)結(jié)果值。

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和為 6
var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) // logs 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]
var people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, "age");
// groupedPeople is:
// { 
//   20: [
//     { name: "Max", age: 20 }, 
//     { name: "Jane", age: 20 }
//   ], 
//   21: [{ name: "Alice", age: 21 }] 
// }
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]
Array.reduceRight()

reduceRight() 方法接受一個(gè)函數(shù)作為累加器(accumulator)和數(shù)組的每個(gè)值(從右到左)將其減少為單個(gè)值

reduceRight 為數(shù)組中每個(gè)元素調(diào)用一次 callback 回調(diào)函數(shù),但是數(shù)組中被刪除的索引或從未被賦值的索引會(huì)跳過(guò)?;卣{(diào)函數(shù)接受四個(gè)參數(shù):初始值(或上次調(diào)用回調(diào)的返回值)、當(dāng)前元素值、當(dāng)前索引,以及調(diào)用 reduce 的數(shù)組

var a = ["1", "2", "3", "4", "5"]; 
var left  = a.reduce(function(prev, cur)      { return prev + cur; }); 
var right = a.reduceRight(function(prev, cur) { return prev + cur; }); 

console.log(left);  // "12345"
console.log(right); // "54321"
Array.reverse()

reverse() 方法將數(shù)組中元素的位置顛倒。

var myArray = ["one", "two", "three"];
myArray.reverse(); 

console.log(myArray) // ["three", "two", "one"]
Array.shift()

shift() 方法從數(shù)組中刪除第一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度

shift 方法移除索引為 0 的元素(即第一個(gè)元素),并返回被移除的元素,其他元素的索引值隨之減 1。如果 length 屬性的值為 0 (長(zhǎng)度為 0),則返回 undefined。

shift 方法并不局限于數(shù)組:這個(gè)方法能夠通過(guò) call 或 apply 方法作用于類似數(shù)組的對(duì)象上。但是對(duì)于沒(méi)有 length 屬性(從0開(kāi)始的一系列連續(xù)的數(shù)字屬性的最后一個(gè))的對(duì)象,調(diào)用該方法可能沒(méi)有任何意義。

let myFish = ["angel", "clown", "mandarin", "surgeon"];

console.log("調(diào)用 shift 之前: " + myFish);
// "調(diào)用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift(); 

console.log("調(diào)用 shift 之后: " + myFish); 
// "調(diào)用 shift 之后: clown,mandarin,surgeon" 

console.log("被刪除的元素: " + shifted); 
// "被刪除的元素: angel"
Array.slice()

slice() 方法返回一個(gè)新的數(shù)組對(duì)象,這一對(duì)象是一個(gè)由 begin和 end(不包括end)決定的原數(shù)組的淺拷貝。原始數(shù)組不會(huì)被改變。

arr.slice();
// [0, end]

arr.slice(begin);
// [begin, end]

arr.slice(begin, end);
// [begin, end)
Array.some()

some() 方法測(cè)試數(shù)組中的某些元素是否通過(guò)由提供的函數(shù)實(shí)現(xiàn)的測(cè)試

some() 為數(shù)組中的每一個(gè)元素執(zhí)行一次 callback 函數(shù),直到找到一個(gè)使得 callback 返回一個(gè)“真值”(即可轉(zhuǎn)換為布爾值 true 的值)。如果找到了這樣一個(gè)值,some() 將會(huì)立即返回 true。否則,some() 返回 false。callback 只會(huì)在那些”有值“的索引上被調(diào)用,不會(huì)在那些被刪除或從來(lái)未被賦值的索引上調(diào)用。

callback 被調(diào)用時(shí)傳入三個(gè)參數(shù):元素的值,元素的索引,被遍歷的數(shù)組。

將會(huì)把它傳給被調(diào)用的 callback,作為 this 值。否則,在非嚴(yán)格模式下將會(huì)是全局對(duì)象,嚴(yán)格模式下是 undefined。

some() 被調(diào)用時(shí)不會(huì)改變數(shù)組。

some() 遍歷的元素的范圍在第一次調(diào)用 callback. 時(shí)就已經(jīng)確定了。在調(diào)用 some() 后被添加到數(shù)組中的值不會(huì)被 callback 訪問(wèn)到。如果數(shù)組中存在且還未被訪問(wèn)到的元素被 callback 改變了,則其傳遞給 callback 的值是 some() 訪問(wèn)到它那一刻的值。

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

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

sort() 方法用原地算法對(duì)數(shù)組的元素進(jìn)行排序,并返回?cái)?shù)組。排序算法現(xiàn)在是穩(wěn)定的。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。

Array.splice()

splice()方法通過(guò)刪除現(xiàn)有元素和/或添加新元素來(lái)修改數(shù)組,并以數(shù)組返回原數(shù)組中被修改的內(nèi)容。

var myFish = ["angel", "clown", "mandarin", "surgeon"]; 
//從第 2 位開(kāi)始刪除 0 個(gè)元素,插入 "drum" 
var removed = myFish.splice(2, 0, "drum"); 
//運(yùn)算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"] 
//被刪除元素?cái)?shù)組:[],沒(méi)有元素被刪除
Array.toLocaleString()

toLocaleString() 返回一個(gè)字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串,這些字符串將使用一個(gè)特定語(yǔ)言環(huán)境的字符串(例如一個(gè)逗號(hào) ",")隔開(kāi)。

var prices = ["¥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "¥7,¥500,¥8,123,¥12"
Array.toString() Array.unshift()

unshift() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭,并返回該數(shù)組的新長(zhǎng)度。

Array.values()

values() 方法返回一個(gè)新的 Array Iterator 對(duì)象,該對(duì)象包含數(shù)組每個(gè)索引的值

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/100195.html

相關(guān)文章

  • 一年內(nèi)經(jīng)驗(yàn)前端面試題記錄

    摘要:對(duì)于,其默認(rèn)大小一般是本地存儲(chǔ)和都保存在瀏覽器端,且都是同源的。把變量放在閉包中和放在全局作用域,對(duì)內(nèi)存的影響是一致的,這里并不能說(shuō)成是內(nèi)存泄露。將新的樹(shù)和之前的虛擬樹(shù)進(jìn)行相比較,根據(jù)結(jié)果對(duì)進(jìn)行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會(huì)放在html哪個(gè)位置 https://zhuanlan.zhihu.com/p/... 對(duì)于必須要在DOM加載...

    qianfeng 評(píng)論0 收藏0
  • 一年內(nèi)經(jīng)驗(yàn)前端面試題記錄

    摘要:對(duì)于,其默認(rèn)大小一般是本地存儲(chǔ)和都保存在瀏覽器端,且都是同源的。把變量放在閉包中和放在全局作用域,對(duì)內(nèi)存的影響是一致的,這里并不能說(shuō)成是內(nèi)存泄露。將新的樹(shù)和之前的虛擬樹(shù)進(jìn)行相比較,根據(jù)結(jié)果對(duì)進(jìn)行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會(huì)放在html哪個(gè)位置 https://zhuanlan.zhihu.com/p/... 對(duì)于必須要在DOM加載...

    kelvinlee 評(píng)論0 收藏0
  • 正則表達(dá)式詳解及實(shí)戰(zhàn)

    摘要:如果你還沒(méi)正式開(kāi)始正則表達(dá)式,請(qǐng)快速瀏覽跳過(guò)本章節(jié)。就是一個(gè)等同于但更簡(jiǎn)略的正則表達(dá)式。如果想查找全部,就要加標(biāo)識(shí)全局匹配規(guī)則正則表達(dá)式搜索字符串指定的值,從而去匹配字符串。正則表達(dá)式都是用來(lái)操作字符串的。 正則表達(dá)式 Create by jsliang on 2018-11-14 10:41:20 Recently revised in 2018-11-19 08:46:37 ...

    simon_chen 評(píng)論0 收藏0
  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門(mén)

    摘要:個(gè)人前端文章整理從最開(kāi)始萌生寫(xiě)文章的想法,到著手開(kāi)始寫(xiě),再到現(xiàn)在已經(jīng)一年的時(shí)間了,由于工作比較忙,更新緩慢,后面還是會(huì)繼更新,現(xiàn)將已經(jīng)寫(xiě)好的文章整理一個(gè)目錄,方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫(xiě)文章的想法,到著手...

    madthumb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<