關于JavaScript數(shù)組的一切

?? JS里的"數(shù)組"不是數(shù)組诸尽,而是對象

js里的數(shù)組和其他語言中的數(shù)組是不同的骤肛,實際它并不是數(shù)組,而是一種array-like 特性的對象加酵。

它只是把索引轉(zhuǎn)化成字符串速种,用作其屬性(鍵)姜盈。

例如:

var arr = ['a','b','c']
// 實際上 等價于
var obj = {
    '0': 'a',
    '1': 'b',
    '2': 'c'
}

這也正是為什么 typeof arr = object 的原因。

image.png

js 里的 數(shù)組 操作起來和其他語言中的數(shù)組 操作相似配阵,比如Java馏颂。

但是同時js里的數(shù)組還能做到像Java這樣強類型語言里的數(shù)組 做不到的地方。

// js 單個數(shù)組中的元素可以有多種數(shù)據(jù)類型
var arr = [1,'2',false,[1]];  // 數(shù)據(jù)類型同時包括數(shù)字棋傍,字符串救拉,布爾值,數(shù)組

而Java 里的單個數(shù)組里的元素只能是同一種數(shù)據(jù)類型瘫拣,例如如果聲明了int 數(shù)組亿絮,那么里面的元素就全是int類型的數(shù)據(jù)

毫無疑問,JS里的“數(shù)組”操作起來更加方便麸拄,但是這是犧牲性能換來的派昧。

真正的數(shù)組是一段線性分配的內(nèi)存,所以它操作起來速度更加快拢切。

?? 聲明數(shù)組的方法

// 1. 直接創(chuàng)建
var arr = [];           //[] 空數(shù)組
// 2. new
var arr = new Array();  //[] 空數(shù)組
var arr = new Array(1,2,3); //[1,2,3]

對于數(shù)據(jù)中沒有初始化的元素蒂萎,它的值是undefined;

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

?? 數(shù)組中的length屬性

Js“數(shù)組”中l(wèi)ength是一個奇怪的屬性

它的結(jié)果并不完全可信。一般數(shù)據(jù)里的length指的是數(shù)組中有值元素的個數(shù)

而js里的length并不是淮椰。

var arr = [];     //[]
console.log(arr.length); // 0
arr[5] = 1000;
console.log(arr.length); // 1? 6?

答案是6五慈,但數(shù)組 arr 實際有值的就一個。
js里的length 指的是 這個數(shù)組的最大整數(shù)屬性名加上1主穗,它不一定等于數(shù)組里屬性的個數(shù)泻拦。

此外,js里的length忽媒,你還可以隨意的把它變大變小争拐,(簡稱隨地大小變)

image.png
var arr = [1,2,3];
arr.length = 1;
console.log(arr); // 猜一下arr現(xiàn)在等于什么

對,你沒有猜錯猾浦,arr 此時只剩下一個元素了陆错,[1]

通過將length變小灯抛,可以去掉所有屬性名大于等于length的值

通過這一點金赦,我們可以更加方便的刪除元素。

arr.length = 0; //清空數(shù)組
arr.length = arr.length-1; //去除掉末尾元素

?? 如何判定一個對象是數(shù)組

通過前面的講解对嚼,我們已經(jīng)知道了Js里的數(shù)組實際是一個對象夹抗,

通過 typeof 來判斷也是對象

image.png

那我們怎么判定一個數(shù)組是我們想要的js數(shù)組呢。

function isArray(obj){
    return Object.prototype.toString.apply(obj) === '[object Array]';
    //這個可以直接拿去用纵竖,可確保是正確的
}

?? 數(shù)組的枚舉

let arr = [1,2,3];
            
// 1. 普通for循環(huán)
for (let i = 0 ; i<arr.length ; i++){
    console.log(arr[i]);
}

// 2. for in 循環(huán) (獲取到的是索引)
for (let index in arr){
    console.log(arr[index]);
}

// 3. ES6新增 增強for循環(huán) (獲取到的是元素的值)
for(let item of arr){ 
    console.log(item);
}

// 4. forEach 循環(huán)
arr.forEach(function(item,index){
    console.log(index,item);
})

?? 數(shù)組的方法

任何語言對于數(shù)據(jù)的操作少不了增刪改查漠烧,我們就先從這四個角度去看杏愤。

根據(jù)屬性名去訪問就好了 arr[index]

//arr.shift() 刪除第一個元素并返回
let arr = [1,2,3];
let element = arr.shift(); //element 是 1
console.log(element);

//arr.pop() 刪除最后一個元素并返回
arr = [1,2,3];
element = arr.pop(); //element 是 3
console.log(element);

// 和刪除相對應,增加也有從頭部增加和尾部增加

// 插入單個元素
// 1. 從頭部插入 arr.unshift(item...)
let arr = [1,2,3];
arr.unshift(0);
console.log(arr);  //[0,1,2,3]

// 2. 從尾部插入 arr.push(item...)
arr = [1,2,3];
arr.push(4);
console.log(arr);  //[1,2,3,4]

// 插入多個元素
// 顯然如果插入多個元素已脓,我們一個個去push是很麻煩的珊楼,所以提供了一個方法
// arr.concat(item...) concat 這個單詞的含義是合并數(shù)組;
arr1 = [1,2];
arr2 = [3,4];
arr = arr1.concat(arr2);
console.log(arr);   //[1,2,3,4] & arr1 沒有改變 還是[1,2]


// 關于從任意位置插入,在修改里面會講

// 根據(jù)索引修改
arr[index] = value;

// 數(shù)組修改其實要記一個 arr.splice(start,deleteCount,item...)
/**
* 參數(shù) start:開始的索引
*       deleteCount : 刪除元素的個數(shù)
*       item: 要插入的元素值
* 返回值 被刪除的元素數(shù)組
*/

let arr = [1,2,3];
let a = arr.splice(0,1,'test'); //從0開始刪除一個元素度液,并在這個位置插入元素'test'
console.log(arr); //["test",1,2]
console.log(a); // [1]

額外

  • 數(shù)組轉(zhuǎn)字符串
/**
 * arr.join(separator)
 * 數(shù)組轉(zhuǎn)字符串 把數(shù)組的每個元素拿出來厕宗,用separator將他們分隔開來
 * 參數(shù) separator 分隔符
 */
let arr = [1,2,3];
let c = arr.join(','); //1,2,3   將arr數(shù)組中的元素用逗號分割,并轉(zhuǎn)換成字符串
console.log(c);

//其實等價于
let str = "";
for (item of arr){
    str += (item+',');
}
str = str.substr(0,str.length-1); //去除掉最后一個逗號
console.log(str);
  • 數(shù)組復制
/**
 * 有的時候我們想復制數(shù)組中的一段元素堕担,但是我們不想改變原數(shù)組
 * 就用 arr.slice(start,end)
 * 參數(shù) start 開始索引
 *      end 結(jié)束索引
 *      實際獲取的元素是 [start,end) 左閉,右開 R崖!霹购!
 *      基本上所有語言佑惠,(start,end)都是這樣的規(guī)定
 */

let arr = [1,2,3];
let temp = arr.slice(0,2);   
console.log(temp);  //[1,2]
  • 數(shù)組反轉(zhuǎn)
/**
 * 使用arr.reverse()反轉(zhuǎn)數(shù)組
 */
let arr = [1,2,3];
arr.reverse()     // 直接改變原數(shù)組
console.log(arr); // [3,2,1]

本文中,因為js里的數(shù)組實際就是對象齐疙,所以所有數(shù)組的索引都叫做屬性名膜楷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市贞奋,隨后出現(xiàn)的幾起案子把将,更是在濱河造成了極大的恐慌,老刑警劉巖忆矛,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件察蹲,死亡現(xiàn)場離奇詭異,居然都是意外死亡催训,警方通過查閱死者的電腦和手機洽议,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來漫拭,“玉大人亚兄,你說我怎么就攤上這事〔勺ぃ” “怎么了审胚?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長礼旅。 經(jīng)常有香客問我膳叨,道長,這世上最難降的妖魔是什么痘系? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任菲嘴,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘龄坪。我一直安慰自己昭雌,他們只是感情好,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布健田。 她就那樣靜靜地躺著烛卧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪妓局。 梳的紋絲不亂的頭發(fā)上唱星,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音跟磨,去河邊找鬼间聊。 笑死,一個胖子當著我的面吹牛抵拘,可吹牛的內(nèi)容都是我干的哎榴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼僵蛛,長吁一口氣:“原來是場噩夢啊……” “哼尚蝌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起充尉,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤飘言,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后驼侠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姿鸿,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年倒源,在試婚紗的時候發(fā)現(xiàn)自己被綠了苛预。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡笋熬,死狀恐怖热某,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情胳螟,我是刑警寧澤昔馋,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站糖耸,受9級特大地震影響秘遏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蔬捷,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一垄提、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧周拐,春花似錦铡俐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至勾给,卻和暖如春滩报,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背播急。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工脓钾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人桩警。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓可训,卻偏偏與公主長得像,于是被迫代替她去往敵國和親捶枢。 傳聞我的和親對象是個殘疾皇子握截,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354