1. ECMAScript理解
1.1 ECMAScript
它是一種由ECMA組織（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）制定和發(fā)布的腳本語(yǔ)言規(guī)范
而我們學(xué)的 JavaScript 是ECMA的實(shí)現(xiàn),但術(shù)語(yǔ)ECMAScript和JavaScript平時(shí)表達(dá)同一個(gè)意思
-
JS包含三個(gè)部分：
ECMAScript（核心）
擴(kuò)展==>瀏覽器端
BOM（瀏覽器對(duì)象模型）
DOM（文檔對(duì)象模型）
- 擴(kuò)展==>服務(wù)器端
Node
1.2 ES的幾個(gè)重要版本
ES5 : 09年發(fā)布
ES6(ES2015) : 15年發(fā)布, 也稱為ECMA2015
ES7(ES2016) : 16年發(fā)布, 也稱為ECMA2016 (變化不大)
2.ES5
2.1 嚴(yán)格模式
- 理解:
除了正常運(yùn)行模式(混雜模式)畔塔，ES5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）郎笆。
顧名思義昌犹，這種模式使得Javascript在更嚴(yán)格的語(yǔ)法條件下運(yùn)行
- 目的/作用
消除Javascript語(yǔ)法的一些不合理糟需、不嚴(yán)謹(jǐn)之處屉佳，減少一些怪異行為
消除代碼運(yùn)行的一些不安全之處来破，為代碼的安全運(yùn)行保駕護(hù)航
為未來(lái)新版本的Javascript做好鋪墊
- 使用
在全局或函數(shù)的第一條語(yǔ)句定義為: use strict;
如果瀏覽器不支持, 只解析為一條簡(jiǎn)單的語(yǔ)句, 沒(méi)有任何副作用
- 語(yǔ)法和行為改變
必須用var聲明變量
禁止自定義的函數(shù)中的this指向window
創(chuàng)建eval作用域
對(duì)象不能有重名的屬性
<script type="text/javascript">
'use strict';
var username = 'kobe';
// window.username = 'kobe';
console.log(username);
function Person(name, age){
this.name = name;
this.age = age;
}
new Person('kobe', 40);
var str = 'NBA';
// eval('alert(str)');
eval('var str = "CBA"; alert(str)');
alert(str);
var obj = {
username: 'kobe',
username: 'wade'
}
</script>
2.2 JSON對(duì)象
JSON.stringify(obj/arr)
js對(duì)象(數(shù)組)轉(zhuǎn)換為json對(duì)象(數(shù)組)
JSON.parse(json)
json對(duì)象(數(shù)組)轉(zhuǎn)換為js對(duì)象(數(shù)組)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON對(duì)象</title>
</head>
<body>
<!--
1. JSON.stringify(obj/arr)
* js對(duì)象(數(shù)組)轉(zhuǎn)換為json對(duì)象(數(shù)組)
2. JSON.parse(json)
* json對(duì)象(數(shù)組)轉(zhuǎn)換為js對(duì)象(數(shù)組)
-->
<script type="text/javascript">
var obj = {username: 'kobe'};
obj = JSON.stringify(obj);
console.log(typeof obj);
obj = JSON.parse(obj);
console.log(typeof obj);
</script>
</body>
</html>
2.3 Object擴(kuò)展
ES5給Object擴(kuò)展了一些靜態(tài)方法, 常用的2個(gè):
- Object.create(prototype, [descriptors])
作用: 以指定對(duì)象為原型創(chuàng)建新的對(duì)象
為新的對(duì)象指定新的屬性, 并對(duì)屬性進(jìn)行描述
value : 指定值
writable : 標(biāo)識(shí)當(dāng)前屬性值是否是可修改的, 默認(rèn)為false
configurable: 標(biāo)識(shí)當(dāng)前屬性是否可以被刪除 默認(rèn)為false
enumerable： 標(biāo)識(shí)當(dāng)前屬性是否能用for in 枚舉 默認(rèn)為false
- Object.defineProperties(object, descriptors)
作用: 為指定對(duì)象定義擴(kuò)展多個(gè)屬性
get ：用來(lái)獲取當(dāng)前屬性值得回調(diào)函數(shù)
set ：修改當(dāng)前屬性值得觸發(fā)的回調(diào)函數(shù)糊探，并且實(shí)參即為修改后的值
存取器屬性：setter,getter一個(gè)用來(lái)存值逝她，一個(gè)用來(lái)取值
<script type="text/javascript">
//1. Object.create(prototype, [descriptors])
var obj = {username: 'jordan', age: 55};
var obj1 = {};
obj1 = Object.create(obj, {
sex: {
value: '男',
writable: true,
configurable: true,
enumerable: true
}
});
// console.log(obj1);
console.log(obj1.sex);
obj1.sex = '女';
console.log(obj1.sex);
// delete obj1.sex;
// console.log(obj1);
for(var i in obj1){
console.log(i);
}
// 2. Object.defineProperties(object, descriptors)
var obj2 = {firstName: 'kobe', lastName: 'bryant'};
Object.defineProperties(obj2, {
fullName: {
get: function(){//獲取擴(kuò)展屬性的值，在獲取擴(kuò)展屬性值的時(shí)候get方法自動(dòng)調(diào)用
console.log('get()');
return this.firstName + " " + this.lastName;
},
set: function(data){//監(jiān)聽擴(kuò)展屬性千贯，當(dāng)擴(kuò)展屬性發(fā)生變化的時(shí)候髓堪，會(huì)自動(dòng)調(diào)用送朱，自動(dòng)調(diào)用后會(huì)將變化的值作為實(shí)參注入到set函數(shù)
console.log('set()', data);
var names = data.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
})
console.log(obj2);
console.log(obj2.fullName);
obj2.fullName = 'tim duncan';
console.log(obj2.fullName);
</script>
<!--
對(duì)象本身的兩個(gè)方法
* get propertyName(){} 用來(lái)得到當(dāng)前屬性值的回調(diào)函數(shù)
* set propertyName(){} 用來(lái)監(jiān)視當(dāng)前屬性值變化的回調(diào)函數(shù)
-->
<script type='text/javascript'>
var obj3 = {
firstName: 'stephen',
lastName: 'curry',
get fullName(){
return this.firstName + " " + this.lastName;
},
set fullName(data){
var names = data.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
};
console.log(obj3);
obj3.fullName = 'kobe bryant';
console.log(obj3.fullName);
</script>
2.4 Array擴(kuò)展
Array.prototype.indexOf(value) : 得到值在數(shù)組中的第一個(gè)下標(biāo)
Array.prototype.lastIndexOf(value) : 得到值在數(shù)組中的最后一個(gè)下標(biāo)
Array.prototype.forEach(function(item, index){}) : 遍歷數(shù)組
Array.prototype.map(function(item, index){}) : 遍歷數(shù)組返回一個(gè)新的數(shù)組，返回加工之后的值
Array.prototype.filter(function(item, index){}) : 遍歷過(guò)濾出一個(gè)新的子數(shù)組干旁， 返回條件為true的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_Array擴(kuò)展</title>
</head>
<body>
<!--
1. Array.prototype.indexOf(value) : 得到值在數(shù)組中的第一個(gè)下標(biāo)
2. Array.prototype.lastIndexOf(value) : 得到值在數(shù)組中的最后一個(gè)下標(biāo)
3. Array.prototype.forEach(function(item, index){}) : 遍歷數(shù)組
4. Array.prototype.map(function(item, index){}) : 遍歷數(shù)組返回一個(gè)新的數(shù)組驶沼，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍歷過(guò)濾出一個(gè)新的子數(shù)組， 返回條件為true的值
-->
<script type="text/javascript">
/*
需求:
1. 輸出第一個(gè)6的下標(biāo)
2. 輸出最后一個(gè)6的下標(biāo)
3. 輸出所有元素的值和下標(biāo)
4. 根據(jù)arr產(chǎn)生一個(gè)新數(shù)組,要求每個(gè)元素都比原來(lái)大10
5. 根據(jù)arr產(chǎn)生一個(gè)新數(shù)組, 返回的每個(gè)元素要大于4
*/
var arr = [2,4,3,1,2,6,5,4];
console.log(arr.indexOf(4));
console.log(arr.lastIndexOf(4));
arr.forEach(function(item, index){
console.log(item, index);
})
var arr1 = arr.map(function(item, index) {
return item + 10;
});
console.log(arr1);
var arr2 = arr.filter(function(item, index){
return item > 3;
});
console.log(arr, arr2);
</script>
</body>
</html>
2.5 Function擴(kuò)展
Function.prototype.bind(obj) :
作用: 將函數(shù)內(nèi)的this綁定為obj, 并將函數(shù)返回
面試題: 區(qū)別bind()與call()和apply()?
都能指定函數(shù)中的this
call()/apply()是立即調(diào)用函數(shù)
bind()是將函數(shù)返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_Function擴(kuò)展</title>
</head>
<body>
<!--
1. Function.prototype.bind(obj) :
* 作用: 將函數(shù)內(nèi)的this綁定為obj, 并將函數(shù)返回
2. 面試題: 區(qū)別bind()與call()和apply()?
* 都能指定函數(shù)中的this
* call()/apply()是立即調(diào)用函數(shù)
* bind()是將函數(shù)返回
-->
<script type="text/javascript">
var obj = {username: 'kobe'};
/*function foo(){
console.log(this);
}*/
function foo(data){
console.log(this, data);
}
// foo();
// foo.call(obj);
// foo.apply(obj);
//傳入?yún)?shù)的形式
// foo.call(obj, 33);//直接從第二個(gè)參數(shù)開始争群，依次傳入
// foo.apply(obj, [33]);//第二參數(shù)必須是數(shù)組回怜，傳入的參數(shù)放在數(shù)組里
//bind的特點(diǎn)：綁定完this不會(huì)立即調(diào)用當(dāng)前的函數(shù)，而是將函數(shù)返回
/*var bar = foo.bind(obj);
console.log(bar);
bar();*/
//bind傳參的方式同call一樣
foo.bind(obj, 33)();
setTimeout(function(){
console.log(this);
}.bind(obj), 1000);
</script>
</body>
</html>
3. ES6
3.1 let關(guān)鍵字
-
作用:
- 與var類似, 用于聲明一個(gè)變量
-
特點(diǎn)
在塊作用域內(nèi)有效
不能重復(fù)聲明
不會(huì)預(yù)處理, 不存在變量提升
-
應(yīng)用
循環(huán)遍歷加監(jiān)聽
使用let取代var是趨勢(shì)
<script type="text/javascript">
// console.log(username);
let username = 'kobe';
// let username = 'wade';
// console.log(username);
let btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
var btn = btns[i];
/*var無(wú)法獲取正確的索引*/
btn.onclick = function(){
alert(i);
}
/*閉包的方式解決
(function(i){
btn.onclick = function(){
alert(i);
}
})(i);*/
}
</script>
3.2 const關(guān)鍵字
-
作用:
- 定義一個(gè)常量
-
特點(diǎn):
不能修改
其它特點(diǎn)同let
-
應(yīng)用
- 保存不用改變的數(shù)據(jù)
<script type="text/javascript">
const KEY = 'NBA';
KEY = 'CBA';
console.log(KEY);
</script>
3.3 變量的解構(gòu)賦值
-
理解:
- 從對(duì)象或數(shù)組中提取數(shù)據(jù), 并賦值給變量(多個(gè))
-
對(duì)象的解構(gòu)賦值
- let {n, a} = {n:'tom', a:12}
-
數(shù)組的解構(gòu)賦值
- let [a,b] = [1, 'hello'];
-
用途
- 給多個(gè)形參賦值
<script type="text/javascript">
let obj = {username: 'kobe', age: 40};
// let username = obj.username;
// let age = obj.age;
// let {username, age} = obj;
// console.log(username, age);
// let {age} = obj;
// console.log(age);
let arr = [1,3,5,'abc',true];
// let [a,b,c,d,e] = arr;
// console.log(a,b,c,d,e);
let [,,a,b] = arr;
console.log(a,b);
/*function foo(obj){
console.log(obj.username, obj.age);
}*/
function foo({username, age}){//{username, age} = obj;
console.log(username, age);
}
foo(obj);
</script>
3.4 模板字符串
-
模板字符串 : 簡(jiǎn)化字符串的拼接
模板字符串必須用 `` 包含
變化的部分使用${xxx}定義
<script type="text/javascript">
let obj = {username: 'kobe', age: 40};
let str = '我的名字叫：' + obj.username + '换薄，我的年齡：' + obj.age;
console.log(str);
str = `我的名字叫：${obj.username}玉雾，我的年齡：${obj.age}`;
console.log(str);
/*
商品列表的url：
https://s.taobao.com/search?q=鍋&refpid=430275_1006&source=tbsy&style=grid&tab=all&pvid=4aed0d3046100602f268a24859e5bb44&clk1=b7e8112df80f92354fd6562fa21256ed&spm=a21bo.2017.201856-sline.10.5af911d9vwLBmw
*/
</script>
3.5 簡(jiǎn)化的對(duì)象寫法
省略同名的屬性值
省略方法的function
例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};
<script type="text/javascript">
let username = 'kobe';
let age = 40;
let obj = {
username,//同名的屬性可以省略不寫
age,
getName(){//可以省略函數(shù)的function
return this.username;
}
};
console.log(obj);
console.log(obj.getName());
</script>
3.6 箭頭函數(shù)
作用: 定義匿名函數(shù)
-
基本語(yǔ)法:
沒(méi)有參數(shù): () => console.log('xxxx')
一個(gè)參數(shù): i => i+2
大于一個(gè)參數(shù): (i,j) => i+j
函數(shù)體不用大括號(hào): 默認(rèn)返回結(jié)果
函數(shù)體如果有多個(gè)語(yǔ)句, 需要用{}包圍，若有需要返回的內(nèi)容轻要，需要手動(dòng)返回
使用場(chǎng)景: 多用來(lái)定義回調(diào)函數(shù)
-
箭頭函數(shù)的特點(diǎn)：
簡(jiǎn)潔
箭頭函數(shù)沒(méi)有自己的this复旬，箭頭函數(shù)的this不是調(diào)用的時(shí)候決定的，而是在定義的時(shí)候所處的對(duì)象就是它的this
擴(kuò)展理解： 箭頭函數(shù)的this看外層的是否有函數(shù)冲泥，如果有驹碍，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this，如果沒(méi)有凡恍，則this是window志秃。
<script type="text/javascript">
/*let fun= function(){
console.log('我是函數(shù)');
}*/
/*
let fun = () => console.log('我是箭頭函數(shù)');
fun();
//形參的情況
//1、沒(méi)有形參的時(shí)候
let fun1 = () => console.log('我是箭頭函數(shù)');
fun1();
//2嚼酝、只有一個(gè)形參的時(shí)候()可以省略
let fun2 = a => console.log(a);
fun2('aaa');
//3浮还、兩個(gè)及兩個(gè)以上的形參的時(shí)候()不能省略
let fun3 = (x, y) => console.log(x, y);
fun3(25, 36);
//函數(shù)體的情況
//1、函數(shù)體只有一條語(yǔ)句或者是表達(dá)式的時(shí)候{}可以省略-->會(huì)自動(dòng)返回語(yǔ)句執(zhí)行的結(jié)果革半，或者是表達(dá)式的結(jié)果
// let fun4 = (x,y) => {return x + y};
let fun4 = (x,y) => x + y;
console.log(fun4(24, 36));
//2碑定、函數(shù)體不止一條語(yǔ)句或者表達(dá)式的情況
let fun5 = (x, y) => {
console.log(x, y);
return x + y;
}
console.log(fun5(35, 49));
*/
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.onclick = function(){
alert(this);
console.log(this);
}
btn2.onclick = () => {
alert(this);
}
let obj = {
name: '箭頭函數(shù)',
getName: () => {
btn2.onclick = () => {
console.log(this);
}
}
}
// 本質(zhì)是 obj.getName = () => {};
obj.getName();
</script>
3.7 擴(kuò)展運(yùn)算符
- rest(可變)參數(shù)
用來(lái)取代arguments 但比 arguments 靈活,只能是最后部分形參參數(shù)
function fun(...values) {
console.log(arguments);
arguments.forEach(function (item, index) {
console.log(item, index);
});
console.log(values);
values.forEach(function (item, index) {
console.log(item, index);
})
}
fun(1,2,3);
- 擴(kuò)展運(yùn)算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);
3.8 形參默認(rèn)值
當(dāng)不傳入?yún)?shù)的時(shí)候默認(rèn)使用形參里的默認(rèn)值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}
3.9 Promise對(duì)象
-
理解:
Promise對(duì)象: 代表了未來(lái)某個(gè)將要發(fā)生的事件(通常是一個(gè)異步操作)
有了promise對(duì)象, 可以將異步操作以同步的流程表達(dá)出來(lái), 避免了層層嵌套的回調(diào)函數(shù)(俗稱'回調(diào)地獄')
ES6的Promise是一個(gè)構(gòu)造函數(shù), 用來(lái)生成promise對(duì)象的實(shí)例
使用promise基本步驟(2步):
// 創(chuàng)建promise對(duì)象
let promise = new Promise((resolve, reject) => {
//初始化promise狀態(tài)為 pending
//執(zhí)行異步操作
if(異步操作成功) {
resolve(value);//修改promise的狀態(tài)為fullfilled
} else {
reject(errMsg);//修改promise的狀態(tài)為rejected
}
})
// 調(diào)用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
-
promise對(duì)象的3個(gè)狀態(tài)
pending: 初始化狀態(tài)
fullfilled: 成功狀態(tài)
rejected: 失敗狀態(tài)
-
應(yīng)用:
使用promise實(shí)現(xiàn)超時(shí)處理
使用promise封裝處理ajax請(qǐng)求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();
