AJAX
異步網(wǎng)絡請求
var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象
request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時后豫，函數(shù)被回調(diào)
if (request.readyState === 4) { // 成功完成
// 判斷響應結(jié)果:
if (request.status === 200) {
// 成功棚放，通過responseText拿到響應的文本:
return success(request.responseText);
} else {
// 失敗轻要，根據(jù)響應碼判斷失敗原因:
return fail(request.status);
}
} else {
// HTTP請求還在繼續(xù)...
}
}
// 發(fā)送請求:
request.open('GET', '/api/categories');
request.send();
alert('請求已發(fā)送主胧，請等待響應...');
Promise
使用了Promise對象之后可以鏈式調(diào)用的方式組織代碼
new Promise(test).then(function (result) {
console.log('成功：' + result);
}).catch(function (reason) {
console.log('失敗：' + reason);
});
Promise.all: 都成功才會返回
Promise.race: 有一個成功就返回
var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("Hello");
}, 3000);
});
var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("World");
}, 1000);
});
Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["Hello", "World"]
});
對象
delete Person.name 刪除對象屬性
'name' in Person 對象是否存在該屬性
in缺陷---屬性是繼承來的時候,仍然返回true
最好使用 hasOwnProperty()
Person.hasOwnProperty('name')
Map
對象缺陷: key必須是字符串
Map就是支持全類型的key(如:number)
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
Set
沒有重復值得Array,重復值會被自動過濾掉
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
s.add(4) //添加(重復添加無效果)
s.delete(3) //刪除
迭代器(iterable)
for...in 遍歷的是對象的屬性名稱(key) Array的key就是index
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
alert(x); // '0', '1', '2', 'name'
}
for...of就是解決這個問題的循環(huán)
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
alert(x); // 'A', 'B', 'C'
}
更好的方式: forEach
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向當前元素的值
// index: 指向當前索引
// array: 指向Array對象本身
alert(element);
});
Set
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert(element);
});
Map
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});
函數(shù)
如果沒有return語句,函數(shù)也會返回結(jié)果,只是結(jié)果為undefined
arguments: 獲取函數(shù)傳入的所有參數(shù)
rest: 抑制參數(shù)(用于獲取定義參數(shù)之外的參數(shù),不過要改寫法)
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 結(jié)果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 結(jié)果:
// a = 1
// b = undefined
// Array []
變量
var變量會提升到函數(shù)頂部聲明(未賦值)
局部作用域
JS變量作用域?qū)嶋H上是函數(shù)內(nèi)部, 那么在for循環(huán)語句塊中是無法定義局部變量的
function foo() {
for (var i=0; i<100; i++) {
//
}
i += 100; // 仍然可以引用變量i
}
let變量: 可以用來聲明塊級作用域的變量
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
i += 1; // SyntaxError
}
const: 定義常量
方法
對象綁定方法
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};
xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年調(diào)用是25,明年調(diào)用就變成26了
this: 指向當前對象
apply call綁定函數(shù)
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};
xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數(shù)為空
另一個與apply()類似的方法是call()镶殷，唯一區(qū)別是：
? apply()把參數(shù)打包成Array再傳入冒嫡；
? call()把參數(shù)按順序傳入涣雕。
比如調(diào)用Math.max(3, 5, 4)，分別用apply()和call()實現(xiàn)如下：
Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5
對普通函數(shù)調(diào)用装处，我們通常把this綁定為null误债。
高級函數(shù)
map(): 定義在Array中,對數(shù)組中每個元素執(zhí)行map中傳入的操作,并返回新數(shù)組
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
reduce(): 定義在Array中,必須接受兩個參數(shù),并把結(jié)果和下一個元素,做累積計算
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
filter(): 定義在Array中,過濾掉元素,返回剩下的元素
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
sort(): 定義在Array中,排序函數(shù)
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
}); // [1, 2, 10, 20]
箭頭函數(shù)
箭頭函數(shù)相當于匿名函數(shù)
// 兩個參數(shù):
(x, y) => x * x + y * y
// 無參數(shù):
() => 3.14
// 可變參數(shù):
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}
如果要返回一個對象
// SyntaxError:
x => { foo: x } //錯誤寫法
// ok:
x => ({ foo: x })
//因為和{...}函數(shù)體的語法沖突
箭頭函數(shù)和匿名函數(shù)的區(qū)別:
匿名函數(shù)會出現(xiàn)this的錯指向
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
箭頭函數(shù)已綁定this,不會出現(xiàn)錯指向
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象
return fn();
}
};
obj.getAge(); // 25
generator(多返回函數(shù)) 使用function*定義
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
閉包: 返回值是函數(shù), 函數(shù)的參數(shù)記錄父函數(shù)的環(huán)境,這樣就把東西帶出來了
面向?qū)ο?/h2>
JS不區(qū)分類和對象的概念,而是通過原型(prototype)實現(xiàn)面向?qū)ο缶幊?/p>
var Student = {
name: 'Robot',
height: 1.2,
run: function () {
console.log(this.name + ' is running...');
}
};
var xiaoming = {
name: '小明'
};
xiaoming.__proto__ = Student;
JS沒有類的概念,多有的都是對象,使用原型實現(xiàn)繼承
原型鏈
arr ----> Array.prototype ----> Object.prototype ----> null
構(gòu)造函數(shù)
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
//這確實是一個普通函數(shù)，但是在JavaScript中妄迁，可以用關鍵字new來調(diào)用這個函數(shù)寝蹈，并返回一個對象：
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
prototype: 可以用來擴展原型的屬性和方法
