js中如何訪問對象和數組
一、總結
一句話總結：js訪問對象點和中括號，訪問數組的話就是中括號
對象 . []
數組 []
1、js訪問對象的兩種方式？
. []
可以使用下面兩種方式訪問對象的屬性和方法
1.對象名.屬性名 對象名.方法名()
2.對象名["屬性名"] 對象名["方法名"]()
2、js訪問數組的方式？
[]
用中括號 []
通過指定數組名以及索引號碼，你可以訪問某個特定的元素。
下面是代碼行：
document.write(mycars[0])
下面是輸出：
Saab
3、js訪問對象的兩種方式的區別？
已存在 屬性 方法 結果 一致
不存在 屬性 方法 . 創建 新 [] 不會創建
可以使用下面兩種方式訪問對象的屬性和方法
1.對象名.屬性名 對象名.方法名()
2.對象名["屬性名"] 對象名["方法名"]()
對於已經存在的屬性和方法，用.和用[]得到的結果一致、
對於不存在(未定義)的屬性和方法，用.會創建這個新的屬性或方法，而用[]的方式訪問不會創建新的屬性或方法
"."與"[ ]"使用場景：
"."后面的值無法你修改；"[ ]"里面的值可以隨便變
例如在用for-in遍歷對象時
for(var x in obj){ console.log(x); //輸出obj中的屬性名，方法名 console.log(obj.x);//想要用.的方法輸出對應的屬性和方法 結果是undefined，原因在於JS語言中.方法可以用來聲明，聲明對象屬性的方式就是屬性名.屬性值
//這里實際先聲明了obj的x屬性，並且未初始化該屬性，然后輸出了該屬性值，所以為undefined
}
利用[]方式只能訪問和讀取，不會定義新的屬性
for(var x in obj){ console.log(x); //輸出obj中的屬性名，方法名 console.log(obj[x]);//輸出對應的屬性值和方法，方法未調用所以輸出的是方法的代碼
二、JS中訪問對象的兩種方式區別
參考：JS中訪問對象的兩種方式區別 - 臨別一眼 - 博客園
https://www.cnblogs.com/yucheng6/p/9650814.html
可以使用下面兩種方式訪問對象的屬性和方法
1.對象名.屬性名 對象名.方法名()
2.對象名["屬性名"] 對象名["方法名"]()
1 var obj = { 2 name : "小明", 3 age : 18, 4 say : function(){ 5 console.log("我是"+this.name+"我"+this.age+"歲"); 6 } 7 }; 8 console.log(obj.name); 9 console.log(obj["name"]); 10 obj.say(); 11 obj["say"]();
對於已經存在的屬性和方法，用.和用[]得到的結果一致、
對於不存在(未定義)的屬性和方法，用.會創建這個新的屬性或方法，而用[]的方式訪問不會創建新的屬性或方法
例如在用for-in遍歷對象時
for(var x in obj){ console.log(x); //輸出obj中的屬性名，方法名 console.log(obj.x);//想要用.的方法輸出對應的屬性和方法 結果是undefined，原因在於JS語言中.方法可以用來聲明，聲明對象屬性的方式就是屬性名.屬性值
//這里實際先聲明了obj的x屬性，並且未初始化該屬性，然后輸出了該屬性值，所以為undefined
}
利用[]方式只能訪問和讀取，不會定義新的屬性
for(var x in obj){ console.log(x); //輸出obj中的屬性名，方法名 console.log(obj[x]);//輸出對應的屬性值和方法，方法未調用所以輸出的是方法的代碼 }
三、JS使用[]或.來訪問對象屬性
參考：JS使用[]或.來訪問對象屬性 - whoops_butterfly的博客 - CSDN博客
https://blog.csdn.net/whoops_butterfly/article/details/80075097
屬性是一個變量，用來表示一個對象的特征(height/width/color...)；方法是一個函數，用來表示對象的操作。
在JavaScript中，有兩種方法訪問對象的屬性"."和"[ ]"。
1、使用"." "[ ]"訪問對象屬性
1> "."
oBtn.style.width
2> "[ ]"
oBtn.style['width'] //[ ]里面是字符串
2、訪問對象的方法：
只能用"." eg:
oBtn.函數名()
3."."與"[ ]"使用場景：
"."后面的值無法你修改；"[ ]"里面的值可以隨便變
eg(有如下代碼)：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
/*
第一行文本框內輸入需要改變的屬性(width/height/color)
第二行輸入改變的具體樣式的屬性值(300px/100px/#fff)
點擊確定按鈕
使div的樣式隨着第一二行設置的樣式而改變
*/
window.onload = function(){
var oAttr = document.getElementById('attr');
var oVal = document.getElementById('val');
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
oAttr.value//存的'width'/'height'.....
oVal.value//'200px'/'#000'.....
oDiv.style.width = oVal.value;//.后面的值無法被替換或者修改
/* 可以執行，因為"."后面的width這個是定的，無法改變，只是對width賦值*/
oDiv.style.oAttr.value = oVal.value;
/*
相當於在div中，加了<div style = 'oAttr.value'></div>,但style並沒有oAttr.value,並且oAttr.value會因為value值一直改變，結果會報錯
*/
oDiv.style[oAttr.value] = oVal.value;//[]里的值可以修改(是字符串)
/*JS中"."允許被替換成"[]",這是沒有影響的比如：oBtn['onclick']= function(){}*/
}
}
</script>
<body>
請輸入屬性名稱：<input type="text" id="attr">
請輸入屬性值：<input type="text" id="val">
<input type="button" value="確定" id="btn1">
<div id="div1"></div>
</body>
</html>四、js訪問數組
通過指定數組名以及索引號碼，你可以訪問某個特定的元素。
下面是代碼行：
document.write(mycars[0])
下面是輸出：
Saab
五、js數組操作大全
參考：js數組操作大全 - weixin_35982117的博客 - CSDN博客
https://blog.csdn.net/weixin_35982117/article/details/79694632
shift:刪除原數組第一項，並返回刪除元素的值；如果數組為空則返回undefined
var a = [1,2,3,4,5];
var b = a.shift(); //a:[2,3,4,5] b:1 unshift:將參數添加到原數組開頭，並返回數組的長度
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 pop:刪除原數組最后一項，並返回刪除元素的值；如果數組為空則返回undefined
var a = [1,2,3,4,5];
var b = a.pop(); //a:[1,2,3,4] b:5 push:將參數添加到原數組末尾，並返回數組的長度
var a = [1,2,3,4,5];
var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7 concat:返回一個新數組，是將參數添加到原數組中構成的
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7] splice(start,deleteCount,val1,val2,...):從start位置開始刪除deleteCount項，並從該位置起插入val1,val2,...
var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]
var b = a.splice(0,1); //同shift
a.splice(0,0,-2,-1); var b = a.length; //同unshift
var b = a.splice(a.length-1,1); //同pop
a.splice(a.length,0,6,7); var b = a.length; //同push reverse:將數組反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1] sort(orderfunction):按指定的參數對數組進行排序
var a = [1,2,3,4,5];
var b = a.sort(); //a:[1,2,3,4,5] b:[1,2,3,4,5] slice(start,end):返回從原數組中指定開始下標到結束下標之間的項組成的新數組
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5] join(separator):將數組的元素組起一個字符串，以separator為分隔符，省略的話則用默認用逗號為分隔符
var a = [1,2,3,4,5];
var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5" 由於JavaScript的語言特性，我們可以向通用對象動態添加和刪除屬性。所以Object也可以看成是JS的一種特殊的集合。下面比較一下Array和Object的特性:
//Array:
/*新建:*/var ary = new Array(); 或 var ary = [];
/*增加:*/ary.push(value);
/*刪除:*/delete ary[n];
/*遍歷:*/for ( var i=0 ; i < ary.length ; ++i ) ary[i];
//Object:
/*新建:*/var obj = new Object(); 或 var obj = {};
/*增加:*/obj[key] = value; (key為string)
/*刪除:*/delete obj[key];
/*遍歷:*/for ( var key in obj ) obj[key]; 如果我們要在Array中檢索出一個指定的值，我們需要遍歷整個數組:
var keyword = ;
for ( var i=0 ; i < ary.length ; ++i )
{
if ( ary[i] == keyword )
{
// todo
}
} 而我們在Object中檢索一個指定的key的條目，只需要是要使用:
var key = '';
var value = obj[key];
// todo 對於集合的遍歷效率(從高到低):var value = obj[key]; > for ( ; ; ) > for ( in )。效率最差的就是for( in )了，如果集合過大，盡量不要使用for ( in )遍歷。