簡(jiǎn)單總結(jié)一下JS的Array對(duì)象

malakashi 發(fā)布于2019-08-21 16:58 / 3212人閱讀

摘要：簡(jiǎn)單總結(jié)一下的對(duì)象屬性數(shù)組指定創(chuàng)建一個(gè)數(shù)組的函數(shù)。方法數(shù)組返回一個(gè)迭代器，它返回?cái)?shù)組的鍵值對(duì)。方法數(shù)組返回滿足回調(diào)函數(shù)中指定的測(cè)試條件的第一個(gè)數(shù)組元素的索引值。該回調(diào)函數(shù)的返回值為累積結(jié)果，并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時(shí)作為參數(shù)提供。

簡(jiǎn)單總結(jié)一下JS的Array對(duì)象 constructor 屬性（數(shù)組）

指定創(chuàng)建一個(gè)數(shù)組的函數(shù)。該屬性可用于判斷某個(gè)對(duì)象是否為數(shù)組與arr instanceof Array效果一致

// array.constructor
const x = new Array();
if (x.constructor === Array) {
    console.log("Object is an Array")
} else {
    console.log("Object is not an Array")
}
// Object is an Array

length 屬性（Array）

獲取或設(shè)置數(shù)組的長(zhǎng)度。此數(shù)值比數(shù)組中所定義的最高位元素大 1

const arr = [0,1,2,3,4]
console.log(arr.length) // 5

prototype 屬性（數(shù)組）

每個(gè)對(duì)象都有prototype屬性，Array也屬于對(duì)象。在數(shù)組的prototype原型對(duì)象上添加的屬性，所有的數(shù)組對(duì)象都能繼承并使用。

Array.prototype.test = "test";
const arr = [];
console.log(arr.test) // "test"

Array.from 函數(shù)（數(shù)組）

從類似數(shù)組的對(duì)象或可迭代的對(duì)象返回一個(gè)數(shù)組。該方法是es6新增的函數(shù)，在以往將類數(shù)組轉(zhuǎn)化成數(shù)組則需要編寫這樣的代碼：Array.slice.call(arrayLike);

// 將dom節(jié)點(diǎn)整理成數(shù)組
const elemArr = Array.from(document.querySelectorAll("*"));

// 將字符串整理成數(shù)組
const charArr = Array.from("abc");
console.log(charArr[0]); // "a"

// 將集合整理成數(shù)組
const setObj = new Set("a","b","c");
const objArr = Array.from(setObj);
console.log(objArr[0]); // "a"

// 還可以傳入回調(diào)函數(shù)對(duì)即將生成的數(shù)組進(jìn)行操作
const arr = Array.from(["1","2","3"], x => x * 10);
// arr[0] == 10;
// arr[1] == 20;
// arr[2] == 30;

Array.isArray 函數(shù)

確定對(duì)象是否為數(shù)組。使用場(chǎng)景與constructor、instance一致。

var ar1 = [];
var result1 = Array.isArray(ar1);
// Output: true

var ar2 = new Array();
var result2 = Array.isArray(ar2);
// Output: true

var ar3 = [1, 2, 3];
var result3 = Array.isArray(ar3);
// Output: true

var result4 = Array.isArray("an array");
// Output: false

Array.of 函數(shù)（數(shù)組）

從傳入的參數(shù)返回一個(gè)數(shù)組。
此函數(shù)類似于調(diào)用 new Array(args)，但當(dāng)傳入一個(gè)參數(shù)時(shí)，Array.of 不包括特殊行為。

const arr1 = Array.of(3);
console.log(arr1); // [3]

const arr2 = new Array(3);
console.log(arr2); // [undefined, undefined, undefined]

concat 方法 (Array)

組合兩個(gè)或兩個(gè)以上的數(shù)組。
concat 方法返回一個(gè) Array 對(duì)象，它包含 array1 和任何其他提供的項(xiàng)的連接。
要添加的項(xiàng) (item1 itemN) 會(huì)按順序（從列表中的第一個(gè)項(xiàng)開始）添加到數(shù)組。如果某一項(xiàng)為數(shù)組，則其內(nèi)容將添加到 array1 的末尾。如果該項(xiàng)不是數(shù)組，則將其作為單個(gè)數(shù)組元素添加到數(shù)組末尾。
源數(shù)組元素按以下規(guī)則復(fù)制到結(jié)果數(shù)組：
如果從連接到新數(shù)組的任何數(shù)組中復(fù)制某個(gè)對(duì)象，則該對(duì)象引用仍然指向相同的對(duì)象。不論新數(shù)組和原始數(shù)組中哪一個(gè)有改變，都將引起對(duì)方的改變。
如果將某個(gè)數(shù)字或字符串值添加到新數(shù)組，則只復(fù)制其值。更改一個(gè)數(shù)組中的值不會(huì)影響另一個(gè)數(shù)組中的值。

var a, b, c, d;
a = new Array(1,2,3);
b = "dog";
c = new Array(42, "cat");
d = a.concat(b, c);
console.log(d); // 1, 2, 3, "dog", 42, "cat"

entries 方法（數(shù)組）

返回一個(gè)迭代器，它返回?cái)?shù)組的鍵/值對(duì)。

const entries = ["a", "b", "c"].entries();
console.log(entries); // Array Iterator{}
// 在迭代器的原型鏈上包含next方法，調(diào)用next可以得到一個(gè)對(duì)象,這個(gè)對(duì)象包涵value和done屬性，倘若該迭代器調(diào)用next方法value仍然有值則done屬性為false，直到迭代完畢后done屬性返回true
console.log(entries.next().value) // [0, "a"]
console.log(entries.next().value) // [1, "b"]
console.log(entries.next().value) // [2, "c"]

every 方法 (Array)

確定數(shù)組的所有成員是否滿足指定的測(cè)試。

const arr = [1,2,3];
console.log(arr.every(item => item < 3)) // false
console.log(arr.every(item => item < 4)) // true

fill 方法（數(shù)組）

使用指定值填充數(shù)組。

// arr.fill(value, start, end)
// 其中arr為填充的數(shù)組，value為填充的值，start為填充的起始位置（可選，默認(rèn)第一位），end為填充的末尾（可選，默認(rèn)最后一位），左閉右開區(qū)間
[0,0,0].fill(7,1);
// [0,7,7]
[0,0,0].fill(7);
// [7,7,7]

filter 方法 (Array)

返回?cái)?shù)組中的滿足回調(diào)函數(shù)中指定的條件的元素。
filter()接受一系列的值，對(duì)每個(gè)值執(zhí)行一個(gè)函數(shù)或比較，最后返回一個(gè)新數(shù)組。這些值都通過它的測(cè)試。若都不符合，則返回空數(shù)組。

const arr = [1,2,3,4]
const newArr = arr.filter(item => item > 2);
console.log(newArr) // [3,4]

findIndex 方法（數(shù)組）

返回滿足回調(diào)函數(shù)中指定的測(cè)試條件的第一個(gè)數(shù)組元素的索引值。
對(duì)于數(shù)組中的每個(gè)元素，findIndex 方法都會(huì)調(diào)用一次回調(diào)函數(shù)（采用升序索引順序），直到有元素返回 true。只要有一個(gè)元素返回 true，findIndex 立即返回該返回 true 的元素的索引值。如果數(shù)組中沒有任何元素返回 true，則 findIndex 返回 -1。
findIndex 不會(huì)改變數(shù)組對(duì)象。

[1,2,3].findIndex(item => item > 1); // 1
[1,2,3].findIndex(item => item === 3); // 2
[1,2,3].findeIndex(item => item === 4); // -1

forEach 方法 (Array)

為數(shù)組中的每個(gè)元素執(zhí)行指定操作。不返回任何值

const arr = [1,2,3]
arr.forEach( (item, index) => {
    console.log(item) // 1, 2, 3
    console.log(index) // 0, 1, 2
})

indexOf 方法 (Array)

indexOf 方法在數(shù)組中搜索指定的值。該方法返回第一個(gè)匹配項(xiàng)的索引；如果找不到指定的值，則為 -1。
搜索按升序索引順序進(jìn)行。判斷規(guī)則采用全等判斷。

var ar = ["ab", "cd", "ef", "ab", "cd"];
console.log(ar.indexOf("ab")); // 0
console.log(ar.indexOf("ab", 1)); // 3
console.log(ar.indexOf("ab", -2)); // 3
console.log(ar.indexOf("ab", 4)); // -1

join 方法 (Array)

添加由指定分隔符字符串分隔的數(shù)組的所有元素。
如果數(shù)組的任一元素為 undefined 或 null，則該元素將被視為空字符串。傳入undefined會(huì)被當(dāng)成空字符串處理，傳入null會(huì)當(dāng)成字符串""null"處理

const a = [1,2,3,4];
const b = a.join("-");
console.log(b); // 1-2-3-4
const c = a.join(undefined);
console.log(c); // 1,2,3,4 
const d = a.join(null);
console.log(d); // 1null2null3null4

keys 方法（數(shù)組）

返回一個(gè)迭代器，它能返回?cái)?shù)組的索引值。使用方法與entries類似，只是返回的value值不同

const k = ["a,","b","c","d"].keys();
// k.next().value == 0
// k.next().value == 1
// k.next().value == 2

lastIndexOf 方法 (Array)

lastIndexOf 方法在數(shù)組中搜索指定的值。該方法返回第一個(gè)匹配項(xiàng)的索引；如果找不到指定的值，則為 -1。
搜索按降序索引順序進(jìn)行。判斷規(guī)則采用全等判斷。

var ar = ["ab", "cd", "ef", "ab", "cd"];
console.log(ar.lastIndexOf("ab")); // 3
console.log(ar.lastIndexOf("ab", 1)); // 0
console.log(ar.lastIndexOf("ab", -2)); // 3
console.log(ar.lastIndexOf("ab", 4)); // 3

map 方法 (Array)

對(duì)數(shù)組的每個(gè)元素調(diào)用定義的回調(diào)函數(shù)并返回包含結(jié)果的數(shù)組。
如果你有一個(gè)數(shù)組，且希望對(duì)該數(shù)組每一項(xiàng)執(zhí)行一些操作，最后返回一個(gè)新的數(shù)組，那么就用map()

const arr = [1,2,3,4]
const newArr = arr.map( (item, index) => {
    // 這里的item代表每個(gè)項(xiàng)的值，index代表每個(gè)項(xiàng)的索引
    return item * 2
})
console.log(newArr) // [2,4,6,8]

pop 方法 (Array)

從數(shù)組中移除最后一個(gè)元素并返回該元素。
如果該數(shù)組為空，則返回 undefined。
使用 push 和 pop 方法可模擬一個(gè)使用先進(jìn)先出 (LIFO) 的原則來存儲(chǔ)數(shù)據(jù)的堆棧。

var num;
var arr = new Array();
arr.push(1,2,3);
arr.push(4,5,6);
num = arr.pop();
while(num != undefined) {
    console.log(num);
    num = arr.pop();
}
// 6 5 4 3 2 1

push 方法 (Array)

將新元素追加到一個(gè)數(shù)組中，并返回新的數(shù)組長(zhǎng)度。
可使用 push 和 pop 方法模擬后進(jìn)先出堆棧。
push 方法按元素出現(xiàn)的順序附加元素。如果某個(gè)參數(shù)是數(shù)組，則以單個(gè)元素的形式添加它。使用 concat 方法要合并兩個(gè)或多個(gè)數(shù)組中的元素。

var arr = [1,2];
arr.push(3); // [1,2,3]
arr.push([4,5]); // [1,2,3,[4,5]]

reduce 方法 (Array)

對(duì)數(shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。該回調(diào)函數(shù)的返回值為累積結(jié)果，并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時(shí)作為參數(shù)提供。
最終只返回一個(gè)結(jié)果！

//下面的示例將數(shù)組值連接成字符串，各個(gè)值用“::”分隔開。由于未向 reduce 方法提供初始值，第一次調(diào)用回調(diào)函數(shù)時(shí)會(huì)將“abc”作為 previousValue 參數(shù)并將“def”作為 currentValue 參數(shù)。
function appendCurrent (previousValue, currentValue) {
    return previousValue + "::" + currentValue;
    }

var elements = ["abc", "def", 123, 456];

var result = elements.reduce(appendCurrent);
console.log(result) // abc::def::123::456

function addRounded (previousValue, currentValue) {
    return previousValue + Math.round(currentValue);
    }

var numbers = [10.9, 15.4, 0.5];

var result = numbers.reduce(addRounded, 0);
console.log(result) // 27 -> (0 + 11 + 15 +1)

var result2 = numbers.reduce(addRounded);
console.log(result2) // 26.9 -> (10.9 + 15 + 1)

reduceRight 方法 (Array)

按降序順序?qū)?shù)組中的所有元素調(diào)用指定的回調(diào)函數(shù)。該回調(diào)函數(shù)的返回值為累積結(jié)果，并且此返回值在下一次調(diào)用該回調(diào)函數(shù)時(shí)作為參數(shù)提供。
使用方式與reduce一致，只是以降序方式執(zhí)行。
最終只返回一個(gè)結(jié)果！

reverse 方法

反轉(zhuǎn) Array 中的元素。該操作會(huì)改變?cè)瓉淼臄?shù)組！
reverse 方法將一個(gè) Array 對(duì)象中的元素按所在位置進(jìn)行反轉(zhuǎn)。在執(zhí)行過程中，此方法并不創(chuàng)建新 Array 對(duì)象。
如果數(shù)組是不連續(xù)的，則 reverse 方法將在數(shù)組中創(chuàng)建元素，這些元素將填充數(shù)組中的間隙。所創(chuàng)建的這些元素的值具有值 undefined。

var arr = [1,2,3];
arr.reverse();
console.log(arr); // [3,2,1]

shift 方法 (Array)

從數(shù)組中移除第一個(gè)元素并將返回該元素。
使用方式與pop一致，只是刪除的是第一個(gè)，而pop是最后一個(gè)。

var arr = [1,2,3];
var a = arr.shift();
console.log(a); // 1
console.log(arr) // [2,3]

slice 方法 (Array)

返回一個(gè)數(shù)組中的一部分。該操作不會(huì)影響原數(shù)組！

slice 方法返回一個(gè) Array 對(duì)象，其中包含了 arrayObj 的指定部分。

// arrayObj.slice(start, [end])
// arrayObj為操作的數(shù)組,start為指定部分起始位置(可選，默認(rèn)第一個(gè),支持負(fù)數(shù)),end為制定部分的末尾(可選，默認(rèn)最后一個(gè),支持負(fù)數(shù)形式)

var arr = [1,2,3,4];
var a1 = arr.slice(1,1);
console.log(a1) // []
var a2 = arr.slice();
console.log(a2) // [1,2,3,4]
var a3 = arr.slice(-1);
console.log(a3) // 4
var a4 = arr.slice(-3,-1);
console.log(a4) // [2,3]

some 方法 (Array)

確定指定的回調(diào)函數(shù)是否為數(shù)組中的任何元素均返回 true。
使用方式與every一致，區(qū)別在于every要求每一項(xiàng)都符合要求，而some只需要其中一項(xiàng)符合要求即可。

var arr = [1,2,3,4];
arr.some(item => item > 4); // false
arr.some(item => item > 3); // true

sort 方法 (Array)

arrayobj.sort(sortFunction)

sort 方法就地對(duì) Array 對(duì)象進(jìn)行排序；在執(zhí)行過程中不會(huì)創(chuàng)建新 Array 對(duì)象。該操作會(huì)改變?cè)瓟?shù)組!

如果在 sortFunction 參數(shù)中提供一個(gè)函數(shù)，則該函數(shù)必須返回下列值之一：
如果所傳遞的第一個(gè)參數(shù)小于第二個(gè)參數(shù)，則返回負(fù)值。

如果兩個(gè)參數(shù)相等，則返回零。
如果第一個(gè)參數(shù)大于第二個(gè)參數(shù)，則返回正值。

var a = new Array(4, 11, 2, 10, 3, 1);
var b = a.sort();
console.log(b) // [1, 10, 11, 2, 3, 4]
console.log(b === a) // true
a.sort((a,b) => a - b) // 升序排列
a.sort((a,b) => b - a) // 降序排列

// 自定義排列函數(shù),此處僅僅依照大小來排序,可以自定義規(guī)則排序大小
function CompareForSort(first, second)
{
    if (first == second)
        return 0;
    if (first < second)
        return -1;
    else
        return 1; 
}
a.sort(CompareForSort)

splice 方法 (Array)

從一個(gè)數(shù)組中移除元素，如有必要，在所移除元素的位置上插入新元素，并返回所移除的元素。
該方法會(huì)改變?cè)瓟?shù)組！

arrayObj.splice(start, deleteCount, item1, item2...)
arrayObj: 必需。一個(gè) Array 對(duì)象
start: 可選。數(shù)組中移除元素操作的起點(diǎn)，從 0 開始。默認(rèn)為 0
deleteCount: 可選。要移除的元素?cái)?shù)。默認(rèn)為arrayObj.length
item1, item2,. . ., itemN: 可選。插入數(shù)組中代替已移除元素的元素。

var arr = new Array("4", "11", "2", "10", "3", "1");
var a = arr.splice(0);
console.log(a) // ["4", "11", "2", "10", "3", "1"]
console.log(arr) // []

var arr = new Array("4", "11", "2", "10", "3", "1");
var b = arr.splice(1, 1, 999);
console.log(b) // 11
console.log(arr) // ["4", 999, "2", "10", "3", "1"]

toString 方法 (Array)

返回?cái)?shù)組的字符串表示形式。
將 Array 的元素轉(zhuǎn)換為字符串。結(jié)果字符串被連接起來，用逗號(hào)分隔。

var arr = [1, 2, 3, 4];
var s = arr.toString();
console.log(s) // 1,2,3,4

unshift 方法 (Array)

在數(shù)組的開頭插入新元素。
unshift 方法將這些元素插入到一個(gè)數(shù)組的開頭，以便它們按其在參數(shù)表中的次序排列。
使用方式與push一致，區(qū)別在于push追加到末尾而unshift從起始位置添加

var ar = new Array();
ar.unshift(10, 11);
ar.unshift(12, 13, 14);
consloe.log(ar) // 12,13,14,10,11

valueOf 方法 (Array)

返回指定對(duì)象的基元值。

var arr = [1,2,3,4]
var s = arr.valueOf()

console.log(arr === s); // true

values 方法（數(shù)組）

返回一個(gè)迭代器，它返回?cái)?shù)組的值。
與keys、entries是一家人，使用方法都一致，區(qū)別就在于value不同

var v = ["a", "b", "c"].values();
// v.next().value == "a"
// v.next().value == "b"
// v.next().value == "c"

云服務(wù)器 GPU云服務(wù)器 js實(shí)現(xiàn)的簡(jiǎn)單特效簡(jiǎn)單js做的特效簡(jiǎn)單的js提示框簡(jiǎn)單的上傳圖片js

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

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

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

登陸后可評(píng)論

0條評(píng)論

malakashi

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

廣電物聯(lián)網(wǎng)大賽正式開啟

閱讀 1734·2021-10-13 09:39
XXMhost：9月優(yōu)惠，全場(chǎng)7折，月付40元起

閱讀 2155·2021-09-07 10:20
偽類選擇器 first-child 誤用

閱讀 2750·2019-08-30 15:56
Vue指令詳解

閱讀 3018·2019-08-30 15:56
前端 CSS : 4# CSS 實(shí)現(xiàn)暖暖的小火堆

閱讀 992·2019-08-30 15:55
由一個(gè)“bug”到鮮為人知的jQuery.cssHooks

閱讀 726·2019-08-30 15:46
css掩人耳目式海浪動(dòng)效

閱讀 3548·2019-08-30 15:44
前端面試知識(shí)點(diǎn)整理（附答案）

閱讀 2618·2019-08-30 11:15

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

簡(jiǎn)單總結(jié)一下JS的Array對(duì)象

相關(guān)文章

js數(shù)組去重方法分析與總結(jié)

JS函數(shù)式編程讀書筆記 - 2

細(xì)說JS數(shù)組

?搞不懂JS中賦值·淺拷貝·深拷貝的請(qǐng)看這里

總結(jié)了一下js中的差集、交集、并集

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

0條評(píng)論

malakashi

男|高級(jí)講師

TA的文章

廣電物聯(lián)網(wǎng)大賽正式開啟

XXMhost：9月優(yōu)惠，全場(chǎng)7折，月付40元起

偽類選擇器 first-child 誤用

Vue指令詳解

前端 CSS : 4# CSS 實(shí)現(xiàn)暖暖的小火堆

由一個(gè)“bug”到鮮為人知的jQuery.cssHooks

css掩人耳目式海浪動(dòng)效

前端面試知識(shí)點(diǎn)整理（附答案）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

簡(jiǎn)單總結(jié)一下JS的Array對(duì)象

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！