物件
簡單說，所謂物件，就是一種無序的資料集合，由若干個“鍵值對”（key-value）構成。
var obj = {
p: `Hello World`
};
上面程式碼中，大括號就定義了一個物件，它被賦值給變數obj。這個物件內部包含一個鍵值對（又稱為“成員”），p是“鍵名”（成員的名稱），字串Hello World是“鍵值”（成員的值）。鍵名與鍵值之間用冒號分隔。如果物件內部包含多個鍵值對，每個鍵值對之間用逗號分隔。
var o = {
p1: `Hello`,
p2: `World`
};
{key: value} 是 JS 物件字面量寫法
基本使用
var company = {
name: `evenyao`,
age: 27,
sayHello: function(){
console.log(`hello world`)
}
}
console.log(company.name)
console.log(company[`name`])
company.sayHello()
//新增key:value
company.city = `重慶市`
company[`business`] = `前端工程師`
for(var key in company){
console.log(key)
console.log(company[key])
}
詳細介紹
鍵名
物件的所有鍵名都是字串，所以加不加引號都可以。上面的程式碼也可以寫成下面這樣。
var o = {
`p`: `Hello World`
};
如果鍵名是數值，會被自動轉為字串。
var o ={
1: `a`,
3.2: `b`,
1e2: true,
1e-2: true,
.234: true,
0xFF: true
};
o
// Object {
// 1: "a",
// 3.2: "b",
// 100: true,
// 0.01: true,
// 0.234: true,
// 255: true
// }
但是，如果鍵名不符合標識名的條件（比如第一個字元為數字，或者含有空格或運算子），也不是數字，則必須加上引號，否則會報錯。
var o = {
`1p`: "Hello World",
`h w`: "Hello World",
`p+q`: "Hello World"
};
上面物件的三個鍵名，都不符合標識名的條件，所以必須加上引號。
注意，JavaScript的保留字可以不加引號當作鍵名。
var obj = {
for: 1,
class: 2
};
屬性
物件的每一個“鍵名”又稱為“屬性”（property），它的“鍵值”可以是任何資料型別。如果一個屬性的值為函式，通常把這個屬性稱為“方法”，它可以像函式那樣呼叫。
var o = {
p: function (x) {
return 2 * x;
}
};
o.p(1)
// 2
上面的物件就有一個方法p，它就是一個函式。
物件的屬性之間用逗號分隔，最後一個屬性後面可以加逗號（trailing comma），也可以不加。
var o = {
p: 123,
m: function () { ... },
}
上面的程式碼中m屬性後面的那個逗號，有或沒有都不算錯。
屬性可以動態建立，不必在物件宣告時就指定。
var obj = {};
obj.foo = 123;
obj.foo // 123
上面程式碼中，直接對obj物件的foo屬性賦值，結果就在執行時建立了foo屬性。
物件的引用
如果不同的變數名指向同一個物件，那麼它們都是這個物件的引用，也就是說指向同一個記憶體地址。修改其中一個變數，會影響到其他所有變數。
var o1 = {};
var o2 = o1;
o1.a = 1;
o2.a // 1
o2.b = 2;
o1.b // 2
上面程式碼中，o1和o2指向同一個物件，因此為其中任何一個變數新增屬性，另一個變數都可以讀寫該屬性。
此時，如果取消某一個變數對於原物件的引用，不會影響到另一個變數。
var o1 = {};
var o2 = o1;
o1 = 1;
o2 // {}
上面程式碼中，o1和o2指向同一個物件，然後o1的值變為1，這時不會對o2產生影響，o2還是指向原來的那個物件。
但是，這種引用只侷限於物件，對於原始型別的資料則是傳值引用，也就是說，都是值的拷貝。
var x = 1;
var y = x;
x = 2;
y // 1
上面的程式碼中，當x的值發生變化後，y的值並不變，這就表示y和x並不是指向同一個記憶體地址。
表示式還是語句？
物件採用大括號表示，這導致了一個問題：如果行首是一個大括號，它到底是表示式還是語句？
{ foo: 123 }
JavaScript引擎讀到上面這行程式碼，會發現可能有兩種含義。第一種可能是，這是一個表示式，表示一個包含foo屬性的物件；第二種可能是，這是一個語句，表示一個程式碼區塊，裡面有一個標籤foo，指向表示式123。
為了避免這種歧義，JavaScript規定，如果行首是大括號，一律解釋為語句（即程式碼塊）。如果要解釋為表示式（即物件），必須在大括號前加上圓括號。
({ foo: 123})
這種差異在eval語句中反映得最明顯。
eval(`{foo: 123}`) // 123
eval(`({foo: 123})`) // {foo: 123}
上面程式碼中，如果沒有圓括號，eval將其理解為一個程式碼塊；加上圓括號以後，就理解成一個物件。
屬性的操作
讀取屬性
讀取物件的屬性，有兩種方法，一種是使用點運算子，還有一種是使用方括號運算子。
var o = {
p: `Hello World`
};
o.p // "Hello World"
o[`p`] // "Hello World"
上面程式碼分別採用點運算子和方括號運算子，讀取屬性p。
請注意，如果使用方括號運算子，鍵名必須放在引號裡面，否則會被當作變數處理。但是，數字鍵可以不加引號，因為會被當作字串處理。
var o = {
0.7: `Hello World`
};
o[`0.7`] // "Hello World"
o[0.7] // "Hello World"
方括號運算子內部可以使用表示式。
o[`hello` + ` world`]
o[3 + 3]
數值鍵名不能使用點運算子（因為會被當成小數點），只能使用方括號運算子。
obj.0xFF
// SyntaxError: Unexpected token
obj[0xFF]
// true
上面程式碼的第一個表示式，對數值鍵名0xFF使用點運算子，結果報錯。第二個表示式使用方括號運算子，結果就是正確的。
檢查變數是否宣告
如果讀取一個不存在的鍵，會返回undefined，而不是報錯。可以利用這一點，來檢查一個全域性變數是否被宣告。
// 檢查a變數是否被宣告
if (a) {...} // 報錯
if (window.a) {...} // 不報錯
if (window[`a`]) {...} // 不報錯
上面的後二種寫法之所以不報錯，是因為在瀏覽器環境，所有全域性變數都是window物件的屬性。window.a的含義就是讀取window物件的a屬性，如果該屬性不存在，就返回undefined，並不會報錯。
需要注意的是，後二種寫法有漏洞，如果a屬性是一個空字串（或其他對應的布林值為false的情況），則無法起到檢查變數是否宣告的作用。正確的做法是可以採用下面的寫法。
if (`a` in window) {
// 變數 a 宣告過
} else {
// 變數 a 未宣告
}
屬性的賦值
點運算子和方括號運算子，不僅可以用來讀取值，還可以用來賦值。
o.p = `abc`;
o[`p`] = `abc`;
上面程式碼分別使用點運算子和方括號運算子，對屬性p賦值。
JavaScript允許屬性的“後繫結”，也就是說，你可以在任意時刻新增屬性，沒必要在定義物件的時候，就定義好屬性。
var o = { p: 1 };
// 等價於
var o = {};
o.p = 1;
檢視所有屬性
檢視一個物件本身的所有屬性，可以使用Object.keys方法。
var o = {
key1: 1,
key2: 2
};
Object.keys(o);
// [`key1`, `key2`]
delete命令
delete命令用於刪除物件的屬性，刪除成功後返回true。
var o = {p: 1};
Object.keys(o) // ["p"]
delete o.p // true
o.p // undefined
Object.keys(o) // []
上面程式碼中，delete命令刪除o物件的p屬性。刪除後，再讀取p屬性就會返回undefined，而且Object.keys方法的返回值中，o物件也不再包括該屬性。
注意，刪除一個不存在的屬性，delete不報錯，而且返回true。
var o = {};
delete o.p // true
上面程式碼中，o物件並沒有p屬性，但是delete命令照樣返回true。因此，不能根據delete命令的結果，認定某個屬性是存在的，只能保證讀取這個屬性肯定得到undefined。
delete命令不能刪除var命令宣告的變數，只能用來刪除屬性。
var p = 1;
delete p // false
delete window.p // false
上面命令中，p是var命令宣告的變數，delete命令無法刪除它，返回false。因為var宣告的全域性變數都是頂層物件的屬性，而且預設不得刪除。
for…in迴圈
for...in迴圈用來遍歷一個物件的key和value。
var o = {a: 1, b: 2, c: 3};
for (var i in o) {
console.log(i); //遍歷key
console.log(o[i]); //遍歷value
}
// 1
// 2
// 3
JSON
JSON 格式
JSON 格式（JavaScript Object Notation 的縮寫）是一種用於資料交換的文字格式，2001年由 Douglas Crockford 提出，目的是取代繁瑣笨重的 XML 格式。
JSON 對值的型別和格式有嚴格的規定。
- 複合型別的值只能是陣列或物件，不能是函式、正規表示式物件、日期物件。
- 簡單型別的值只有四種：字串、數值（必須以十進位制表示）、布林值和
null（不能使用NaN,Infinity,-Infinity和undefined）。 - 字串必須使用雙引號表示，不能使用單引號。
- 物件的鍵名必須放在雙引號裡面。
- 陣列或物件最後一個成員的後面，不能加逗號。
以下是合格的 JSON 值。
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]
以下是不合格的 JSON 值。
{ name: "張三", `age`: 32 } // 屬性名必須使用雙引號
[32, 64, 128, 0xFFF] // 不能使用十六進位制值
{ "name": "張三", "age": undefined } // 不能使用undefined
{ "name": "張三",
"birthday": new Date(`Fri, 26 Aug 2011 07:13:10 GMT`),
"getName": function() {
return this.name;
}
} // 不能使用函式和日期物件
需要注意的是，空陣列和空物件都是合格的 JSON 值，null本身也是一個合格的 JSON 值。
ES5 新增了JSON物件，用來處理 JSON 格式資料。它有兩個方法：JSON.stringify()和JSON.parse()。
JSON.stringify()
基本用法
JSON.stringify方法用於將一個值轉為字串。該字串符合 JSON 格式，並且可以被JSON.parse方法還原。
JSON.stringify(`abc`) // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false])
// `[1,"false",false]`
JSON.stringify({ name: "張三" })
// `{"name":"張三"}`
上面程式碼將各種型別的值，轉成 JSON 字串。
需要注意的是，對於原始型別的字串，轉換結果會帶雙引號。
JSON.stringify(`foo`) === "foo" // false
JSON.stringify(`foo`) === ""foo"" // true
上面程式碼中，字串foo，被轉成了""foo""。這是因為將來還原的時候，雙引號可以讓 JavaScript 引擎知道，foo是一個字串，而不是一個變數名。
如果原始物件中，有一個成員的值是undefined、函式或 XML 物件，這個成員會被過濾。
var obj = {
a: undefined,
b: function () {}
};
JSON.stringify(obj) // "{}"
上面程式碼中，物件obj的a屬性是undefined，而b屬性是一個函式，結果都被JSON.stringify過濾。
如果陣列的成員是undefined、函式或 XML 物件，則這些值被轉成null。
var arr = [undefined, function () {}];
JSON.stringify(arr) // "[null,null]"
上面程式碼中，陣列arr的成員是undefined和函式，它們都被轉成了null。
正則物件會被轉成空物件。
JSON.stringify(/foo/) // "{}"
JSON.stringify方法會忽略物件的不可遍歷屬性。
JSON.parse()
JSON.parse方法用於將JSON字串轉化成物件。
JSON.parse(`{}`) // {}
JSON.parse(`true`) // true
JSON.parse(`"foo"`) // "foo"
JSON.parse(`[1, 5, "false"]`) // [1, 5, "false"]
JSON.parse(`null`) // null
var o = JSON.parse(`{"name": "張三"}`);
o.name // 張三
如果傳入的字串不是有效的JSON格式，JSON.parse方法將報錯。
JSON.parse("`String`") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL
上面程式碼中，雙引號字串中是一個單引號字串，因為單引號字串不符合JSON格式，所以報錯。
深拷貝的另一種寫法
// 深拷貝函式
function deepCopy(src){
return JSON.parse(JSON.stringify(src));
}
var obj = {
name: `evenyao`,
age: 27,
friends: [`aa`, `bb`, `cc`]
}
//呼叫JSON深拷貝函式
var obj2 = deepCopy(obj)JavaScript 物件和 JSON 的關係
JavaScript 物件的字面量寫法只是長的像 JSON 格式資料，二者屬於不同的範疇，JavaScript 物件中很多型別(函式、正則、Date) JSON 格式的規範並不支援，JavaScript 物件的字面量寫法更寬鬆。
陣列
基本使用
var arr = [3, 4, 5, 6]
console.log(arr.length) //4
console.log(arr[0]) //3
console.log(arr[3]) //6
console.log(arr[4]) //undefined
arr[4] = `hello`
console.log(arr[4]) // `hello`
arr.push(`evenyao`) //再陣列最後新增一個元素
console.log(arr) // [3, 4, 5, 6, `hello`, `evenyao`]
var value = arr.pop() //把陣列最後一位彈出來，返回
console.log(value) //`evenyao`
console.log(arr) //[3, 4, 5, 6, `hello`]
arr.unshift(`root`) //在陣列第一位新增
console.log(arr) //[`root`, 3, 4, 5, 6, `hello`]
var value2 = arr.shift() //把陣列第一位拿出來返回，陣列發生變化
console.log(value2) // `root`
console.log(arr) //[3, 4, 5, 6, `hello`]
var arr2 = arr.splice(1, 2) //從下標為1的元素開始，拿出來2個元素作為一個陣列返回，原陣列發生改變
console.log(arr) // [3, 6, `hello`]
console.log(arr2) // [4, 5]
arr.splice(1, 0, 8,9) //從下標為1的位置（元素6）開始，刪除0個，新增兩個元素(在6前面新增8,9)
console.log(arr) //[3, 8, 9, 6, `hello`]
var arr3 = arr.slice(2,3) //從 arr 下標為2開始，到下標為3結束(不包括3)，做為新陣列，原陣列不變
console.log(arr3) // [9]
console.log(arr) //[3, 8, 9, 6, `hello`]
var str = arr.join(`-`)
console.log(str) // "3-8-9-6-hello"
var arr4 = [3, 5, -1, 18, 9, 27]
arr4.reverse() //倒序，本身發生變化
arr4.sort(function(v1, v2){ //排序，本身發生變化
return v1-v2; //v2-v1
})
建立陣列
在JavaScript多種方式建立陣列
建構函式
在使用建構函式建立陣列時如果傳入一個數字引數，則會建立一個長度為引數的陣列，如果傳入多個，則建立一個陣列，引數作為初始化資料加到陣列中
var a1 = new Array(5);
console.log(a1.length);//5
console.log(a1); //[] ,陣列是空的
var a2 = new Array(5,6);
console.log(a2.length);//2
console.log(a2); //[5,6]
字面量
var b = [1, 2, `hello`];
但是使用字面量方式，無論傳入幾個引數，都會把引數當作初始化內容
var a1 = [5];
console.log(a1.length);//1
console.log(a1); //[5]
var a2 = [5,6];
console.log(a2.length);//2
console.log(a2); //[5,6]
使用帶初始化引數的方式建立陣列的時候，最好最後不要帶多餘的”,”，在不同的瀏覽器下對此處理方式不一樣
var a1 = [1,2,3,]
console.log(a1.length)
console.log(a1)
這段指令碼在現代瀏覽器上執行結果和我們設想一樣，長度是3，但是在低版本IE下確實長度為4的陣列，最後一條資料是undefined
陣列的索引與長度
陣列的值可以通過自然數索引訪問進行讀寫操作，下標也可以是一個得出非負整數的變數或表示式
var a1 = [1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3
陣列也是物件，我們可以使用索引的奧祕在於，陣列會把索引值轉換為對應字串（1=>”1”）作為物件屬性名
console.log(1 in a1);//true，確實是一個屬性
這樣我們可以看出所有的索引都是屬性名，但只有自然數（有最大值）才是索引，一般我們在使用陣列的時候不會出現陣列越界錯誤也正是因為此，陣列的索引可以不是連續的，訪問index不存在的元素的時候返回undefined
var a = new Array(1,2,3);
a[100] = 100;
console.log(a.length); //101
console.log(a[3]); //undefined
console.log(a[99]); //undefined
console.log(a[100]); 100
上面的例子中，雖然直接對a[100]賦值不會影響a[4]或a[99],但陣列的長度卻受到影響，陣列length屬性等於陣列中最大的index+1，我們知道陣列的length屬性同樣是個可寫的屬性，當強制把陣列的length屬性值設定為小於等於最大index值時，陣列會自動刪除indexd大於等於length的資料，在剛才程式碼中追加幾句
a.length = 2
console.log(a);//[1,2]
這時候會發現a[2]和a[100]被自動刪除了，同理，如果把length設定為大於最大index+1的值的時候，陣列也會自動擴張，但是不會為陣列新增新元素，只是在尾部追加空空間
a.length=5;
console.log(a); //[1,2] //後面沒有3個undefined
元素新增/刪除
基本方法
上面例子已經用到向陣列內新增元素方法，直接使用索引就可以（index沒必要連續）
var a=[1,2,3];
a[3]=4;
console.log(a);//[1, 2, 3, 4]
前面提到陣列也是物件，索引只是特殊的屬性，所以我們可以使用刪除物件屬性的方法,使用delete 刪除陣列元素
delete a[2];
console.log(a[2]); //undefined
這樣和直接把a[2]賦值為undefined類似，不會改變陣列長度，也不會改變其他資料的index和value對應關係
棧方法
上面例子中，尤其是其刪除方法，並不是我們希望的表現形式，我們很多時候希望刪除中間一個元素後，後面元素的index都自動減一，陣列length同時減一，就好像在一個堆疊中拿去的一個，陣列已經幫我們做好了這種操作方式，pop和push能夠讓我們使用堆疊那樣先入後出使用陣列
var a = [1, 2, 3];
a.push(4);
console.log(a);//[1, 2, 3, 4]
console.log(a.length);//4
console.log(a.pop());//4
console.log(a); //[1, 2, 3]
console.log(a.length);//3
佇列方法
既然棧方法都實現了，先入先出的佇列怎麼能少，shift方法可以刪除陣列index最小元素，並使後面元素index都減一，length也減一，這樣使用shift/push就可以模擬佇列了，當然與shift方法對應的有一個unshift方法，用於向陣列頭部新增一個元素
var a=[1, 2, 3];
a.unshift(4);
console.log(a);//[4, 1, 2, 3]
console.log(a.length);//4
console.log(a.shift());//4
console.log(a); //[1, 2, 3]
console.log(a.length);//3
終極神器
JavaScript提供了一個splice方法用於一次性解決陣列新增、刪除（這兩種方法一結合就可以達到替換效果），方法有三個引數
1.開始索引
2.刪除元素的位移
3.插入的新元素，當然也可以寫多個
splice方法返回一個由刪除元素組成的新陣列，沒有刪除則返回空陣列
刪除
指定前兩個引數，可以使用splice刪除陣列元素，同樣會帶來索引調整及length調整
var a = [1, 2, 3, 4, 5];
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
console.log(a);//[1,5]
如果陣列索引不是從0開始的，那麼結果會很有意思，有一這樣陣列
var a = new Array();
a[2]=2;
a[3]=3;
a[7]=4;
a[8]=5;
console.log(a.splice(3,4)); //[3]
console.log(a.length); //5
console.log(a); //[2: 2, 3: 4, 4: 5]
上面例子可以看到，splice的第一個引數是絕對索引值，而不是相對於陣列索引，第二個引數並不是刪除元素的個數，而是刪除動作執行多少次，並不是按陣列實際索引移動，而是連續移動。同時調整後面元素索引，前面索引不理會
插入與替換
只要方法第二個引數，也就是刪除動作執行的次數設為0，第三個引數及以後填寫要插入內容就splice就能執行插入操作，而如果第二個引數不為0則變成了先在該位置刪除再插入，也就是替換效果
var a = [1,2,3,4,5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]
常用操作
join(char)
這個方法在C#等語言中也有，作用是把陣列元素（物件呼叫其toString()方法）使用引數作為連線符連線成一字串，不會修改原陣列內容
var a = [1,2,3,4,5];
console.log(a.join(`,`)); //1,2,3,4,5
console.log(a.join(` `)); //1 2 3 4 5
slice(start,end)
不要和splice方法混淆，slice方法用於返回陣列中一個片段或子陣列，如果只寫一個引數返回引數到陣列結束部分，如果引數出現負數，則從陣列尾部計數（-3意思是陣列倒第三個，一般人不會這麼幹，但是在不知道陣列長度，想捨棄後n個的時候有些用，不過陣列長度很好知道。。。。，好糾結的用法），如果start大於end返回空陣列，值得注意的一點是slice不會改變原陣列，而是返回一個新的陣列
var a = [1,2,3,4,5];
console.log(a); //[1, 2, 3, 4, 5]
console.log(a.slice(1,2));//2
console.log(a.slice(1,-1));//[2, 3, 4]
console.log(a.slice(3,2));//[]
console.log(a); //[1, 2, 3, 4, 5]
concat(array)
看起來像是剪下，但這個真不是形聲字，concat方法用於拼接陣列，a.concat(b)返回一個a和b共同組成的新陣列，同樣不會修改任何一個原始陣列，也不會遞迴連線陣列內部陣列
var a = [1,2,3,4,5];
var b = [6,7,8,9];
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a); //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]
reverse()
方法用於將陣列逆序，與之前不同的是它會修改原陣列
var a = [1,2,3,4,5];
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]
sort
sort方法用於對陣列進行排序，當沒有引數的時候會按字母表升序排序，如果含有undefined會被排到最後面，物件元素則會呼叫其toString方法，如果想按照自己定義方式排序，可以傳一個排序方法進去，很典型的策略模式，同樣sort會改變原陣列。
var a=[5,4,3,2,1]
a.sort()
console.log(a) //[1, 2, 3, 4, 5]
但是。。。
var a=[7,8,9,10,11]
a.sort()
console.log(a) //[10, 11, 7, 8, 9]
因為按照字母表排序，7就比10大了，這時候我們需要傳入自定義排序函式
如果想按照數值排序，可
var a = [7,8,9,10,11]
a.sort(function(v1,v2){
return v1-v2
})
console.log(a) //[7, 8, 9, 10, 11]
var users = [
{
name: `aaa`,
age: 21
},
{
name: `baa`,
age: 18
},
{
name: `abc`,
age: 24
}
]
// 按age 從小到大排序
var sortByAge = users.sort(function(v1, v2){
return v1.age > v2.age
})
// 按name從大到小排序
var sortByName = users.sort(function(v1, v2){
return v1.name > v2.name
})