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

更新時間：2022年10月17日 10:41:41 作者：愛思考的豬

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

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ù)組是一種特殊的對象,數(shù)組的key是正整數(shù)字符串,我們一般使用數(shù)字鍵操作數(shù)組,會自動轉(zhuǎn)換成字符串

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

3.數(shù)組的length

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

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關鍵用來判斷數(shù)組中存在某個鍵,可應用于數(shù)組和對象

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

5. for…in

for…in用來遍歷數(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ù)組的空位

即兩個逗號之間沒有任何值會產(chǎn)生空值(empty)
使用delete會產(chǎn)生empty
數(shù)組的lengt包含empty

var arr = [1,5,,8];
console.log(arr); //[1, 5, empty, 8]
//使用delete也會產(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);
    }; //無輸出,沒有進行遍歷
    arr1.forEach((v) => {
      console.log(v)
    }); //無輸出,沒有進行遍歷
    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添加了一個數(shù)字鍵,但length沒有改變,這就說明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
使用拓展運算符

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

總結(jié)

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

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

您可能感興趣的文章:

JS獲取當前時間的兩種方法小結(jié)
這篇文章主要給大家介紹了關于JS獲取當前時間的兩種方法,在web開發(fā)中,通過js獲取時間非常的常用,我這里做個總結(jié),需要的朋友可以參考下
2023-09-09
JavaScript實現(xiàn)淘寶商品圖切換效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)淘寶商品圖切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
JS偽繼承prototype實現(xiàn)方法示例
這篇文章主要介紹了JS偽繼承prototype實現(xiàn)方法,結(jié)合實例形式對比分析了基于prototype實現(xiàn)模擬繼承的相關操作技巧,需要的朋友可以參考下
2018-06-06
uniapp 微信默認地圖選點功能實現(xiàn)
這篇文章主要介紹了uniapp 微信默認地圖選點功能實現(xiàn),本文通過實例代碼效果圖展示給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-07-07
簡單實現(xiàn)JS上傳圖片預覽功能
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)JS上傳圖片預覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
es6中Promise 對象基本功能與用法實例分析
這篇文章主要介紹了es6中Promise 對象基本功能與用法,結(jié)合實例形式分析了es6中Promise對象的基本功能、用法及操作注意事項,需要的朋友可以參考下
2020-02-02
layui2.0使用table+laypage實現(xiàn)真分頁
這篇文章主要為大家詳細介紹了layui2.0使用table+laypage實現(xiàn)真分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
用JS實現(xiàn)簡單的屏幕錄像機功能
這篇文章主要給大家介紹了如何用JS實現(xiàn)簡單的屏幕錄像機,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
JavaScript執(zhí)行環(huán)境及作用域鏈實例分析
這篇文章主要介紹了JavaScript執(zhí)行環(huán)境及作用域鏈,結(jié)合實例形式分析了JavaScript執(zhí)行環(huán)境及作用域鏈的相關概念、功能與使用技巧,需要的朋友可以參考下
2018-08-08
各瀏覽器對click方法的支持差異小結(jié)
click方法可以用來模擬用戶點擊。有的瀏覽器中所有元素都具有click方法，有的瀏覽器則沒有。
2011-07-07