快捷導(dǎo)航

JavaScript數(shù)組操作總結(jié)

更新時(shí)間：2022年10月17日 10:41:41 作者：愛(ài)思考的豬

JavaScript中的Array對(duì)象與其他編程語(yǔ)言中的數(shù)組一樣，是一組數(shù)據(jù)的集合。在JavaScript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的，并具有用于執(zhí)行數(shù)組常見(jiàn)操作的方法，本文整理了一些常用的，需要的可以參考一下

1.定義

數(shù)組是按次序依次排列的一組值

任何數(shù)據(jù)類型都可以放入數(shù)組
數(shù)組可以嵌套形成多維數(shù)組

const arr = [0,'1',{},function(){}];
//二維數(shù)組
const arr1 = [1,2,[3,4,5],6];

2.數(shù)組的本質(zhì)

數(shù)組是一種特殊的對(duì)象,數(shù)組的key是正整數(shù)字符串,我們一般使用數(shù)字鍵操作數(shù)組,會(huì)自動(dòng)轉(zhuǎn)換成字符串

const arr = [];
arr['1'] = 1;
//1被自動(dòng)轉(zhuǎn)換成'1'
console.log(arr[1],arr['1']); //1
typeof arr; //obejct

3.數(shù)組的length

數(shù)組的length計(jì)算的是數(shù)組中正整數(shù)的個(gè)數(shù),但你依然可以將數(shù)據(jù)的key設(shè)置為其它類型的值,不過(guò)這不會(huì)增加length的長(zhǎng)度

const arr = [];
arr[2.1] = 2.1;
arr['a'] = 'a';
console.log(arr); //[2.1: 2.1, a: 'a']
console.log(arr.length); //0

length是可寫的

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

4. in

in關(guān)鍵用來(lái)判斷數(shù)組中存在某個(gè)鍵,可應(yīng)用于數(shù)組和對(duì)象

const arr = ['a','b'];
1 in arr; // true
2 in arr; //fasle

5. for…in

for…in用來(lái)遍歷數(shù)組和對(duì)象
遍歷數(shù)組的時(shí)候不僅能遍歷整數(shù)的key,還能遍歷所有非整數(shù)的key
Object.keys()也能獲取到數(shù)組的非整數(shù)的key

const arr = [1,2];
arr['a'] = 3;
arr[4.5] = 4;
for(key in arr){
 console.log(key);
};
// 0
// 1
// a
/  4.5
Object.keys(arr); // ['0', '1', 'a', '4.5']

6.數(shù)組的空位

即兩個(gè)逗號(hào)之間沒(méi)有任何值會(huì)產(chǎn)生空值(empty)
使用delete會(huì)產(chǎn)生empty
數(shù)組的lengt包含empty

var arr = [1,5,,8];
console.log(arr); //[1, 5, empty, 8]
//使用delete也會(huì)產(chǎn)生空值
delete arr [0];
console.log(arr); //[empty, 5, empty, 8]
console.log(arr.length); //4

空值和undefined有所區(qū)別,undefined參與for…in和forEach的遍歷,empty不參與遍歷
Object.keys能獲取到undefined的key獲取不到empty的key
使用length能遍歷出empty

    const arr1 = new Array(10); //[empty × 10]
    for (key in arr1) {
      console.log(arr1);
    }; //無(wú)輸出,沒(méi)有進(jìn)行遍歷
    arr1.forEach((v) => {
      console.log(v)
    }); //無(wú)輸出,沒(méi)有進(jìn)行遍歷
    console.log(Object.keys(arr1)); //[]
    const arr2 = [undefined, undefined, undefined]; //[empty × 10]
    for (key in arr2) {
      console.log(key);
    };
    //0
    //1
    //2
    arr2.forEach((value, index) => {
      console.log(value, index)
    });
    // undefined,0
    // undefined,1
    // undefinef,2
    console.log(Object.keys(arr2)); //[3]
    // 使用for循環(huán)遍歷empty
    for(let i = 0;i<arr1.length;i++){
       console.log(arr1[1])
    };
    //undefined × 10

7.類數(shù)組(偽數(shù)組)

類數(shù)組的定義:鍵名都是正整數(shù)或零,擁有l(wèi)ength屬性

const arrayLike = { 
  0:'a', 
  1:'b', 
  2:'c', 
  length:3 
  };
arrayLike[3] = 'd';
console.log(arrayLike[0]); //a
console.log(arrayLike.length); //3

上面的代碼為arrayLike添加了一個(gè)數(shù)字鍵,但length沒(méi)有改變,這就說(shuō)明arrayLike不是數(shù)組

典型的類數(shù)組有函數(shù)的arguments、大多數(shù)的元素DOM集合、字符串

function foo(){
  console.log(arguments);
};
foo('tom','jack');
// {0:'tom', 1:'jack', length:2, callee:...}
console.log(document.getElementsByClassName('a'));
//{"0": ...,"1": ...,"2":..., "length":3}
const str = 'apple';
console.log(str.length); //5
consoel.log(str[2]); //p

將偽數(shù)組轉(zhuǎn)為數(shù)組

使用Array.prototype.slice
使用拓展運(yùn)算符

function foo(){
  const arr = Array.prototype.slice.call(arguments);
}
function foo(){
  const arr = [...arguments]
}
function foo(...args){
}

總結(jié)

數(shù)組的empty和undefined有所區(qū)別,empty不會(huì)被for…in和forEache以及Object.keys運(yùn)算,但計(jì)算length的時(shí)候會(huì)包含empty,因此使用length循環(huán)帶有empty的數(shù)組時(shí)要格外小心
類數(shù)組也叫偽數(shù)組,是指對(duì)象的屬性為正整數(shù)或者零而且具有l(wèi)ength屬性的對(duì)象
使用Array.prototype.slice.call()或者拓展運(yùn)算符將類數(shù)組轉(zhuǎn)換為數(shù)組,類數(shù)組可以使用call函數(shù)借用數(shù)組的方法

到此這篇關(guān)于JavaScript數(shù)組操作總結(jié)的文章就介紹到這了,更多相關(guān)JS數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: