摘要：由于網(wǎng)景公司希望能在靜態(tài)頁面上添加一些動(dòng)態(tài)效果，于是叫這哥們?cè)趦芍苤畠?nèi)設(shè)計(jì)出了語言。所以簡(jiǎn)單說來就是，是一種語言標(biāo)準(zhǔn)，而是網(wǎng)景公司對(duì)標(biāo)準(zhǔn)的一種實(shí)現(xiàn)。

study notes by Tingting

在平時(shí)開發(fā)時(shí)，我們更多的是在寫PHP的邏輯層，但是在寫后臺(tái)時(shí)多多少少會(huì)寫一寫JavaScript的代碼，有時(shí)候我們就會(huì)遇到對(duì)js的字符串、數(shù)組、對(duì)象搞不清咋么去處理的問題，畢竟我們是Phper，對(duì)js的語法和特性并不是那么了解，更多的時(shí)候遇到問題都是去百度，然后解決掉了下一次又遇到又去百度，卻不知道為啥是這樣寫，所以就有了這次分享。

在上個(gè)世紀(jì)的1995年，當(dāng)時(shí)的網(wǎng)景公司正憑借其Navigator瀏覽器成為Web時(shí)代開啟時(shí)最著名的第一代互聯(lián)網(wǎng)公司。

由于網(wǎng)景公司希望能在靜態(tài)HTML頁面上添加一些動(dòng)態(tài)效果，于是叫Brendan Eich這哥們?cè)趦芍苤畠?nèi)設(shè)計(jì)出了JavaScript語言。你沒看錯(cuò)，這哥們只用了10天時(shí)間。

為什么起名叫JavaScript？原因是當(dāng)時(shí)Java語言非常紅火，所以網(wǎng)景公司希望借Java的名氣來推廣，但事實(shí)上JavaScript除了語法上有點(diǎn)像Java，其他部分基本上沒啥關(guān)系。

因?yàn)榫W(wǎng)景開發(fā)了JavaScript，一年后微軟又模仿JavaScript開發(fā)了JScript，為了讓JavaScript成為全球標(biāo)準(zhǔn)，幾個(gè)公司聯(lián)合ECMA（European Computer Manufacturers Association）組織定制了JavaScript語言的標(biāo)準(zhǔn)，被稱為ECMAScript標(biāo)準(zhǔn)。

所以簡(jiǎn)單說來就是，ECMAScript是一種語言標(biāo)準(zhǔn)，而JavaScript是網(wǎng)景公司對(duì)ECMAScript標(biāo)準(zhǔn)的一種實(shí)現(xiàn)。

目前我們所使用的js語法基本上都是對(duì)ECMAScript5.1（ES5）的實(shí)現(xiàn)，而現(xiàn)在在前端圈比較流行的ES6(ECMAScript2015)、ES7(ECMAScript2016)就是JavaScript的下一代標(biāo)準(zhǔn)和下幾代標(biāo)準(zhǔn)了，目前瀏覽器對(duì)ES6的語法并不是完全支持的，前端圈現(xiàn)在更多的是在Webpack這種打包構(gòu)建工具中使用，在發(fā)布生產(chǎn)代碼或者開發(fā)運(yùn)行時(shí)將ES6的語法編譯成瀏覽器兼容的ES5(JavaScript)的語法，如果感興趣看一看看阮一峰的ECMAScript 6 入門，ES6中有很多好玩的語法糖，比如箭頭函數(shù)、模板字符串等等。

JavaScript的語法和PHP語言類似，每個(gè)語句以;結(jié)束，語句塊用{...}。但是，JavaScript并不強(qiáng)制要求在每個(gè)語句的結(jié)尾加;，瀏覽器中負(fù)責(zé)執(zhí)行JavaScript代碼的引擎會(huì)自動(dòng)在每個(gè)語句的結(jié)尾補(bǔ)上;。

現(xiàn)在在前端圈因?yàn)榇罅肯?b>webpack這種構(gòu)建工具的使用，反而更推薦不要去加;，因?yàn)闃?gòu)建工具在編譯壓縮代碼時(shí)會(huì)自動(dòng)給該加的地方加上，所以加不加分號(hào)的問題還是看個(gè)人習(xí)慣，像我們寫PHP的同學(xué)可能更習(xí)慣加分號(hào)。

加不加分號(hào)沒有絕對(duì)的約束，當(dāng)然如果你致力于成為一名全棧工程師，比如你在寫Vue組件化時(shí)，就更應(yīng)該去遵守前端規(guī)范的約定，不去加分號(hào)。

var a = 1
var username = "saboran"
var isOk = true

ES6中的let、const和var的對(duì)比（可以詳細(xì)講一下或者在瀏覽器的console里執(zhí)行一下參考代碼）

let和const都是es5，es6新版本的js語言規(guī)范出來的定義，在這以前定義一個(gè)變量只能用var。let和const都是為了彌補(bǔ)var的一些缺陷而新設(shè)計(jì)出來的。
簡(jiǎn)單來說是：let修復(fù)了var的作用域的一些bug，變的更加好用。let是更好的var。var的作用域是函數(shù)作用域，而let是塊級(jí)別（大括號(hào)括起來的內(nèi)容）,const聲明的變量只可以在聲明時(shí)賦值，不可隨意修改，這是最大的特點(diǎn)。

舉例說明let和var的區(qū)別

// 當(dāng)定義的變量在函數(shù)之外時(shí)，二者作用域都是全局，并無區(qū)別
let name = "Tom"
var age = 18

// 當(dāng)定義的變量位于函數(shù)內(nèi)部時(shí)，二者的作用域都是函數(shù)內(nèi)部，也沒有區(qū)別

function makeCake(){
  let shape = "心型"
  var size = 8
}

// 不同點(diǎn)，let的作用域在塊內(nèi)，而var并無約束

// 測(cè)試let的作用域
function testLet(){
    
    for(let i=0; i < 10; i++){
        // todo something
    }
    
    // 此處的console.log的結(jié)果是報(bào)錯(cuò)，報(bào)錯(cuò)內(nèi)容是 i is not defined 
    // 原因就是let 定義的變量的作用域是在塊之間，在這個(gè)例子中l(wèi)et定義的i的作用域僅僅在這個(gè)for循環(huán)中，所以在for循環(huán)外部調(diào)用i會(huì)報(bào)錯(cuò)
    console.log(i) 
}

// 測(cè)試var的作用域
function testVar(){
    
    for(var i=0; i < 10; i++){
        // todo something
    }
    
    // 這里console.log的結(jié)果就為10，因?yàn)関ar定義的變量i作用域是在函數(shù)內(nèi)部,當(dāng)執(zhí)行完for循環(huán)，i自增后便是10.
    // 這也就是var定義變量不好的一點(diǎn)，我們定義i的本意就應(yīng)該是只在for循環(huán)中生效的
    console.log(i)
}

js的注釋和PHP一樣有兩種，一種行注釋使用雙斜線//，另一種是塊注釋使用/****/

// 這是變量a的注釋
var a = 100

/**
 * 這是函數(shù)test的塊注釋
 */
function test(){
    
}

在JavaScript中定義了以下幾種數(shù)據(jù)類型：

Number（數(shù)值型）

布爾值

null

undefined

字符串

數(shù)組

對(duì)象

Number

JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示，以下都是合法的Number類型：

123 // 整數(shù)123
0.456 // 浮點(diǎn)數(shù)0.456
1.2345e3 // 科學(xué)計(jì)數(shù)法表示1.2345x1000，等同于1234.5
-99 // 負(fù)數(shù)
NaN // NaN表示Not a Number，當(dāng)無法計(jì)算結(jié)果時(shí)用NaN表示
Infinity // Infinity表示無限大，當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時(shí)，就表示為Infinity

四則運(yùn)算

1 + 2 // 3
(1 + 2) * 5 / 2 // 7.5
2 / 0 // Infinity
0 / 0 // NaN
10 % 3 // 1  取模（取余）

布爾值

布爾值和布爾代數(shù)的表示完全一致，一個(gè)布爾值只有true、false兩種值，要么是true，要么是false，可以直接用true、false表示布爾值。

js的與或非運(yùn)算和PHP語法基本一致

與運(yùn)算

true && true; // 這個(gè)&&語句計(jì)算結(jié)果為true
true && false; // 這個(gè)&&語句計(jì)算結(jié)果為false
false && true && false; // 這個(gè)&&語句計(jì)算結(jié)果為false

或運(yùn)算

false || false; // 這個(gè)||語句計(jì)算結(jié)果為false
true || false; // 這個(gè)||語句計(jì)算結(jié)果為true
false || true || false; // 這個(gè)||語句計(jì)算結(jié)果為true

非運(yùn)算（取反）

! true; // 結(jié)果為false
! false; // 結(jié)果為true
! (2 > 5); // 結(jié)果為true

null和undefined

null表示一個(gè)“空”的值，它和0以及空字符串""不同，0是一個(gè)數(shù)值，""表示長(zhǎng)度為0的字符串，而null表示“空”,即沒有值。

在JavaScript中，還有一個(gè)和null類似的undefined，它表示“未定義”。

JavaScript的設(shè)計(jì)者希望用null表示一個(gè)空的值，而undefined表示值未定義。事實(shí)上，大多數(shù)情況下，我們都應(yīng)該用null。undefined僅僅在判斷函數(shù)參數(shù)是否傳遞的情況下才有用。

比較運(yùn)算符

比較運(yùn)算符常用的無非是大于、小于、大于等于、小于等于，這里要著重說的是等于和全等于，即==和===

在JavaScript中是允許任意數(shù)據(jù)類型進(jìn)行比較的

例如：

flase == 0  // true
flase === 0 // false

要特別注意的是，JavaScript在設(shè)計(jì)時(shí)，有兩種比較運(yùn)算符：

第一種是==比較，它會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型再比較，很多時(shí)候，會(huì)得到非常詭異的結(jié)果；

第二種是===比較，它不會(huì)自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型，如果數(shù)據(jù)類型不一致，返回false，如果一致，再比較。

在JavaScript中推薦任何時(shí)候都是用===,而不去使用==

浮點(diǎn)數(shù)的相等的比較

1 / 3 === (1 - 2 / 3)  // false

可能會(huì)有人有疑問，為什么1/3和1 - 2/3的值不相等，原因是：浮點(diǎn)數(shù)在運(yùn)算過程中會(huì)產(chǎn)生誤差，因?yàn)橛?jì)算機(jī)無法精確表示無限循環(huán)小數(shù)。
所以，要比較兩個(gè)浮點(diǎn)數(shù)是否相等，只能計(jì)算它們之差的絕對(duì)值，看是否小于某個(gè)閾值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001  // true

一個(gè)特例：NAN

NaN這個(gè)特殊的Number與所有其他值都不相等，包括它自己：

NaN === NaN  // false

唯一能判斷NAN的方法是使用isNaN()函數(shù)

isNaN(NaN) // true

字符串是以單引號(hào)""或雙引號(hào)""括起來的任意文本，比如"abc"，"xyz"等等。請(qǐng)注意，""或""本身只是一種表示方式，并不是字符串的一部分。

單引號(hào)和雙引號(hào)的功能在js中和PHP的功能并不一致，在PHP中雙引號(hào)里面可以解析變量，單引號(hào)不可以，但是在js中，單引號(hào)和雙引號(hào)并無任何區(qū)別，都不能解析變量。

所以，現(xiàn)在前端圈更推薦字符串只使用""單引號(hào)。

拼接字符串

和PHP不同的是js的拼接字符串使用的是+

let firstName = "蘇"

let lastName = "秦"

let username = firstName + lastName

console.log(username) // 蘇秦

當(dāng)多個(gè)變量需要連接時(shí)，使用+就比較麻煩了，例如：

var name = "劉德華"
var time = "2017.12.30"
var addr = "上海東方體育中心"

var message = time + "國(guó)際巨星" + name + "將在" + addr + "開個(gè)人演唱會(huì)！"

cosnole.log(message) // 2017.12.30國(guó)際巨星劉德華將在上海東方體育中心開個(gè)人演唱會(huì)！

模板字符串(ES6的語法糖)

為了解決多個(gè)字符串變量拼接麻煩的問題，ES6新增了一種模板字符串，是用反引號(hào)`，將變量使用${}`包裹，上面的例子使用末班字符串就可以這樣寫：

var name = "劉德華"
var time = "2017.12.30"
var addr = "上海東方體育中心"

var message = `${time}國(guó)際巨星${name}將在${addr}開個(gè)人演唱會(huì)`

cosnole.log(message) // 2017.12.30國(guó)際巨星劉德華將在上海東方體育中心開個(gè)人演唱會(huì)！

在ES6中反引號(hào)還有一個(gè)好用的點(diǎn)，是多行字符串

正常我們想拼接多行字符串，往往是在后面加上 ,在ES6中我們可以直接在反引號(hào)里面換行，例如：

var str = `這是
一個(gè)
多行
字符串`

console.log(str)

操作字符串(js內(nèi)置的一些字符串的操作函數(shù)和屬性)

獲取字符串長(zhǎng)度(length)

length // 這個(gè)是屬性，其他的是方法

var str = "sfjhhgsd"

str.length // 獲取字符串長(zhǎng)度  8

獲取某個(gè)位置的字符串，使用字符串的索引

字符串的的索引是從0開始

var str = "hello world"

str[0]  // h
str[4]  // o
str[6]  // w

需要特別注意的是，字符串是不可變的，如果對(duì)字符串的某個(gè)索引賦值，不會(huì)有任何錯(cuò)誤，但是，也沒有任何效果：

var s = "Test";
s[0] = "X";
console.log(s); // s仍然為"Test"

字符串大小寫轉(zhuǎn)換

toUpperCase() 把一個(gè)字符串全部轉(zhuǎn)換成大寫,生成的是一個(gè)新字符串，原字符串并不會(huì)被修改

var str = "shdkhjfkj"

str.toUpperCase() // SHDKHJFKJ

console.log(str) // shdkhjfkj

toLowerCase() 把一個(gè)字符串全部轉(zhuǎn)換為小寫,同樣的也是不會(huì)去修改元字符串，會(huì)生成一個(gè)新的字符串

var str = "SDGSGDHD"

str.toLowerCase() // sdgsgdhd

搜索某個(gè)字符串出現(xiàn)的位置

indexOf() 會(huì)搜索指定字符串第一次出現(xiàn)的位置,當(dāng)要搜索的字符串不存在該字符串時(shí)會(huì)返回-1

var str = "hsfhshlkjhkg"

str.indexOf("a") // 不存在a,返回 -1 

str.indexOf("s") // 第一次出現(xiàn)的索引位置是 1 ，第一個(gè)字符串索引為0

截取指定區(qū)間的字符串

substring() 返回指定索引區(qū)間的子串，不會(huì)修改原字符串

var str = "hello world"

str.substring(1,4) // 從索引1開始到4（不包括4），返回 "ell"

str.substring(7) // 從索引7開始到結(jié)束，返回"world"

將指定符號(hào)分隔的字符串轉(zhuǎn)成數(shù)組，類似PHP中的explode()

split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組

var str = "saboran,18,shanhai,phper"

str.split(",") // 將使用英文逗號(hào)分隔的字符串轉(zhuǎn)成數(shù)組 ["saboran", "18", "shanhai", "phper"]

簡(jiǎn)介

JavaScript的Array可以包含任意數(shù)據(jù)類型，并通過索引來訪問每個(gè)元素。

一個(gè)重要的的點(diǎn)是：js里的數(shù)組只有索引數(shù)組，并沒有PHP語言里的關(guān)聯(lián)數(shù)組，就是說js的數(shù)組的鍵值的鍵只能是數(shù)字，不能是字符串。

操作數(shù)組

length

要取得Array的長(zhǎng)度，直接訪問length屬性

var arr = [1,2,"tt",null,true]

arr.length // 5

注意1：直接給Array的length賦一個(gè)新的值會(huì)導(dǎo)致Array大小的變化

var arr = [1,2,3]
arr.length // 3

arr.length = 6 // 將數(shù)組長(zhǎng)度設(shè)置為6
arr // arr變?yōu)?[1, 2, 3, empty × 3]

arr.length = 2 // 將數(shù)組長(zhǎng)度設(shè)置為2
arr // arr變?yōu)閇1,2]

Array可以通過索引把對(duì)應(yīng)的元素修改為新的值，因此，對(duì)Array的索引進(jìn)行賦值會(huì)直接修改這個(gè)Array

var arr = ["A", "B", "C"]
arr[1] = 99
arr // arr現(xiàn)在變?yōu)閇"A", 99, "C"]

注意2：如果通過索引賦值時(shí)，索引超過了范圍，同樣會(huì)引起Array大小的變化

var arr = [1, 2, 3];
arr[5] = "x";
arr; // arr變?yōu)閇1, 2, 3, undefined, undefined, "x"]

大多數(shù)其他編程語言不允許直接改變數(shù)組的大小，越界訪問索引會(huì)報(bào)錯(cuò)。然而，JavaScript的Array卻不會(huì)有任何錯(cuò)誤。在編寫代碼時(shí)，不建議直接修改Array的大小，訪問索引時(shí)要確保索引不會(huì)越界。

indexOf()

與String類似，Array也可以通過indexOf()來搜索一個(gè)指定的元素的位置

var arr = [10, 20, "30", "xyz"];
arr.indexOf(10); // 元素10的索引為0
arr.indexOf(20); // 元素20的索引為1
arr.indexOf(30); // 元素30沒有找到，返回-1
arr.indexOf("30"); // 元素"30"的索引為2

slice()

slice()就是對(duì)應(yīng)String的substring()版本，它截取Array的部分元素，然后返回一個(gè)新的Array,slice()的起止參數(shù)包括開始索引，不包括結(jié)束索引

var arr = ["A", "B", "C", "D", "E", "F", "G"];
arr.slice(0, 3); // 從索引0開始，到索引3結(jié)束，但不包括索引3: ["A", "B", "C"]
arr.slice(3); // 從索引3開始到結(jié)束: ["D", "E", "F", "G"]

如果不給slice()傳遞任何參數(shù)，它就會(huì)從頭到尾截取所有元素。利用這一點(diǎn)，我們可以很容易地復(fù)制一個(gè)Array

var arr = ["A", "B", "C", "D", "E", "F", "G"];
var aCopy = arr.slice();
aCopy; // ["A", "B", "C", "D", "E", "F", "G"]
aCopy === arr; // false

push()和pop()

push()向Array的末尾添加若干元素，pop()則把Array的最后一個(gè)元素刪除掉

var arr = [1, 2];
arr.push("A", "B"); // 返回Array新的長(zhǎng)度: 4
arr; // [1, 2, "A", "B"]
arr.pop(); // pop()返回"B"
arr; // [1, 2, "A"]
arr.pop(); arr.pop(); arr.pop(); // 連續(xù)pop 3次
arr; // []
arr.pop(); // 空數(shù)組繼續(xù)pop不會(huì)報(bào)錯(cuò)，而是返回undefined
arr; // []

unshift()和shift()

如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個(gè)元素刪掉

var arr = [1, 2];
arr.unshift("A", "B"); // 返回Array新的長(zhǎng)度: 4
arr; // ["A", "B", 1, 2]
arr.shift(); // "A"
arr; // ["B", 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續(xù)shift 3次
arr; // []
arr.shift(); // 空數(shù)組繼續(xù)shift不會(huì)報(bào)錯(cuò)，而是返回undefined
arr; // []

sort()

sort()可以對(duì)當(dāng)前Array進(jìn)行排序，它會(huì)直接修改當(dāng)前Array的元素位置，直接調(diào)用時(shí)，按照默認(rèn)順序排序

var arr = ["B", "C", "A"];
arr.sort();
arr; // ["A", "B", "C"]

reverse()

reverse()把整個(gè)Array的元素給掉個(gè)個(gè)，也就是反轉(zhuǎn)

var arr = ["one", "two", "three"];
arr.reverse(); 
arr; // ["three", "two", "one"]

concat()

concat()方法把當(dāng)前的Array和另一個(gè)Array連接起來，并返回一個(gè)新的Array

var arr = ["A", "B", "C"];
var added = arr.concat([1, 2, 3]);
added; // ["A", "B", "C", 1, 2, 3]
arr; // ["A", "B", "C"]

注意：請(qǐng)注意，concat()方法并沒有修改當(dāng)前Array，而是返回了一個(gè)新的Array

join() // 這個(gè)類似PHP的implode()

join()方法是一個(gè)非常實(shí)用的方法，它把當(dāng)前Array的每個(gè)元素都用指定的字符串連接起來，然后返回連接后的字符串，類似PHP中的implode()

var arr = ["A", "B", "C", 1, 2, 3];
arr.join("-"); // "A-B-C-1-2-3"

splice() // 這個(gè)有點(diǎn)復(fù)雜有點(diǎn)繞，可以不講

splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然后再從該位置添加若干元素

var arr = ["Microsoft", "Apple", "Yahoo", "AOL", "Excite", "Oracle"];
// 從索引2開始刪除3個(gè)元素,然后再添加兩個(gè)元素:
arr.splice(2, 3, "Google", "Facebook"); // 返回刪除的元素 ["Yahoo", "AOL", "Excite"]
arr; // ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]
// 只刪除,不添加:
arr.splice(2, 2); // ["Google", "Facebook"]
arr; // ["Microsoft", "Apple", "Oracle"]
// 只添加,不刪除:
arr.splice(2, 0, "Google", "Facebook"); // 返回[],因?yàn)闆]有刪除任何元素
arr; // ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]

為js數(shù)組添加自己的方法

Array.prototype屬性表示 Array 構(gòu)造函數(shù)的原型，并允許我們向所有Array對(duì)象添加新的屬性和方法。
例如：

/*
 * 如JavaScript數(shù)組本身不提供 first() 方法，
 * 我們可以添加一個(gè)返回?cái)?shù)組的第一個(gè)元素的新方法
 */ 

if(!Array.prototype.first) {
    Array.prototype.first = function() {
        return this[0];
    }
}

在實(shí)際項(xiàng)目中經(jīng)常用到通過數(shù)組的索引刪除數(shù)組的元素就可以給數(shù)組增加一個(gè)方法：

Array.prototype.removeByIndex = function (index) {
  if (index > -1) {
    // 通過splice去除傳入的索引及對(duì)應(yīng)的值
    this.splice(index, 1)
  }
}

// 調(diào)用
var arr = ["red","pink","blue"]

arr.removeByIndex(1)

// 執(zhí)行之后的arr的值就等于["red","blue"]

數(shù)組的遍歷

for循環(huán)

var arr = ["蘋果","橘子","香蕉"]

for (var i = 0; i < arr.length; i++) {
    console.log(i)
    console.log(arr[i])
}

for...in

var arr = ["滿天星","卡羅拉","薰衣草"]

for (index in arr){
    console.log(index)
    console.log(arr[index])
}

forEach

var arr = ["普羅旺斯","阿姆斯特丹","保加利亞"]

arr.forEach(function(item,index){
    console.log(index)
    console.log(item)
})

for...of

var arr = ["淮北","徐州","上海"]

for(var item of arr){
    console.log(item)
}

在JS中的對(duì)象就是一個(gè)以鍵值對(duì)形式存儲(chǔ)屬性的一個(gè)集合，每一個(gè)屬性有一個(gè)特定的名稱，并與名稱相對(duì)應(yīng)的值。其實(shí)這種關(guān)系是有一個(gè)專有名稱的，我們可以稱之為映射，當(dāng)然對(duì)于對(duì)象來說，除了可以通過這種方式來保持自有屬性，還可以通過繼承的方式來獲取繼承屬性。這種方式我們稱作“原型式繼承”。

對(duì)象的創(chuàng)建

通過new 關(guān)鍵字

當(dāng)我們使用的new創(chuàng)建新的對(duì)象的時(shí)候，js解析器會(huì)分配一塊內(nèi)存空間，用以存放當(dāng)前的對(duì)象的自有屬性。之后解析器會(huì)給這一對(duì)象一個(gè)_proto_屬性指向的原型對(duì)象內(nèi)容。

var obj = new Object()

通過對(duì)象直接量聲明

對(duì)象直接量就是直接通過花括號(hào)包裹的鍵值對(duì)的形式來定義當(dāng)前對(duì)象的。每?jī)蓚€(gè)值之間的通過逗號(hào)來進(jìn)行分割。鍵和值之間通過冒號(hào)來分割。放解析器讀取到當(dāng)前的內(nèi)容的時(shí)候會(huì)自動(dòng)的生成一個(gè)對(duì)象的內(nèi)容并把當(dāng)前的對(duì)象存儲(chǔ)在當(dāng)前上下文中。

var obj = {}

對(duì)象屬性及操作

訪問屬性

訪問屬性是通過.操作符完成的，但這要求屬性名必須是一個(gè)有效的變量名。如果屬性名包含特殊字符，就必須用""括起來.

// 定義小明這個(gè)對(duì)象
var xiaoming = {
    name: "小明",
    birth: 1990,
    "middle-school": "No.1 Middle School", // 因?yàn)閙iddle-school 有中劃線，所以鍵值都需要引號(hào)
    height: 1.70,
    weight: 65,
    score: null
}

// 訪問屬性

xiaoming.name // "小明"

// 因?yàn)閌middle-school`不是有效的變量，在聲明變量時(shí)需要使用`""`包住，訪問屬性時(shí)也不可以使用`.`操作符，必須用`["xxx"]`來訪問


xiaoming["middle-school"] //  No.1 Middle School

所以js對(duì)象屬性的訪問方式有兩種，一種是使用.操作符，一種是使用類似PHP關(guān)聯(lián)數(shù)組的訪問方式,通過鍵名訪問abj.[xxx]

當(dāng)訪問一個(gè)不存在的屬性不會(huì)報(bào)錯(cuò)，而是返回undefined

屬性賦值

由于JavaScript的對(duì)象是動(dòng)態(tài)類型，你可以自由地給一個(gè)對(duì)象添加或刪除屬性

var xiaoming = {}

xiaoming.name = "小明" 
xiaoming.age = 18

刪除屬性

刪除js對(duì)象的屬性使用的是delete，返回布爾值

var xiaoming = {
    name: "小明",
    age: 18
}

delete xiaoming.name // 刪除小明的name屬性

注意：刪除一個(gè)對(duì)象中不存在的屬性的時(shí)候并不會(huì)報(bào)錯(cuò)

window

window對(duì)象不但充當(dāng)全局作用域，而且表示瀏覽器窗口。

window對(duì)象有innerWidth和innerHeight屬性，可以獲取瀏覽器窗口的內(nèi)部寬度和高度。內(nèi)部寬高是指除去菜單欄、工具欄、邊框等占位元素后，用于顯示網(wǎng)頁的凈寬高。

對(duì)應(yīng)的，還有一個(gè)outerWidth和outerHeight屬性，可以獲取瀏覽器窗口的整個(gè)寬高。

navigator

navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本；
navigator.language：瀏覽器設(shè)置的語言；
navigator.platform：操作系統(tǒng)類型；
navigator.userAgent：瀏覽器設(shè)定的User-Agent字符串

screen

screen對(duì)象表示屏幕的信息，常用的屬性有

screen.width：屏幕寬度，以像素為單位；
screen.height：屏幕高度，以像素為單位；
screen.colorDepth：返回顏色位數(shù)，如8、16、24。

location // 比較重要

location對(duì)象表示當(dāng)前頁面的URL信息。例如，一個(gè)完整的URL可以用location.href獲取

location.href

location常用的方法

location.href

當(dāng)不給值時(shí)，location.href獲取的是當(dāng)前url信息，當(dāng)給location.href一個(gè)值，例如：

location.  

將會(huì)跳轉(zhuǎn)到這個(gè)地址的頁面

location.reload()

刷新當(dāng)前頁面

location.assign(path)

加載一個(gè)新頁面,path為頁面地址