ES6最重要最復(fù)雜的知識(shí)點(diǎn)： 1. 類和繼承 2.promise 3. ES6模塊化(在vue中講)
與深拷貝相關(guān)的知識(shí)點(diǎn)
- Object.assgin()方法: 可以實(shí)現(xiàn)第一層對(duì)象的深拷貝
- 簡(jiǎn)單粗暴的深拷貝
JSON.parse(JSON.stringify(obj))
- 完整的深拷貝： 參考網(wǎng)上資料
常見(jiàn)的數(shù)組方法
下面的方法都有回調(diào)函數(shù)，回調(diào)的兩個(gè)形參分別為項(xiàng)目值和索引
除了forEach, 其它的方法都需要return
- arr.forEach()
- arr.map()
- arr.filter()
- arr.some()
- arr.every()
- arr.reduce()
let: 聲明塊級(jí)作用域
- 不存在聲明提前的問(wèn)題
- 在同一個(gè)塊中，不能重復(fù)聲明
- 通過(guò)let可獲取正確的索引
let arr = []
for (let i = 0; i < 6; i++){
arr[i] = function(){
console.log(i)
}
}
arr[3]()
const: 聲明常量
- const也是塊級(jí)作用域
- 聲明的同時(shí)要賦值
箭頭函數(shù)
arr.forEach(()=>{})
setInterval(()=>{},1000)
let fun = ()=>{}
let fun = x => {}
let fun = (x,y) => {}
let fun = (x,y) => 3
let fun = (x,y) => ({
name: 1,
age: 2
})
箭頭函數(shù)的this指向
箭頭函數(shù)自身沒(méi)有this,它內(nèi)部的this是定義箭頭函數(shù)所在環(huán)境的this
box.onclick = function(){
// console.log(this);
let i = 0
setInterval(()=>{
this.innerHTML = i; //this是box
i++
},1000)
}
對(duì)象字面量的簡(jiǎn)寫(xiě)
let color = 'red',
age = 18;
let obj = {
color,
age,
run(){
console.log('run')
}
}
類和繼承
定義父類
class Animal {
constructor(color){
this.type = 'animal';
this.eye = true;
this.color = color;
}
sound(){
console.log('sound')
}
}
var ani = new Animal('red')
定義子類
class Cat extends Animal{
constructor(nickname,age,color){
super(color);
this.nickname = nickname;
this.age = age;
}
eat(){
console.log('eat')
}
}
var cat = new Cat('小貓咪',5,'white')
cat.sound()
模板字符串
let color = 'red';
let str = `this is ${color}`
解構(gòu)賦值
let obj = {
title: 'aaaa',
price: 300,
discount: 200
}
let {title,price} = obj;
展開(kāi)運(yùn)算符
把數(shù)組中的值打散，一個(gè)一個(gè)羅列
let arr = [34, 56, 78];
function total(Ch, En, Math) {
return Ch + En + Math;
}
let result = total(...arr)
let divList = document.querySelectorAll("div");
//偽數(shù)組可以調(diào)用 forEach,不能調(diào)用其它數(shù)組的遍歷方法
divList.forEach((el)=>{
console.log(el);
})
var arr = [...divList].map((el)=>{
return el.innerHTML
})
console.log(arr);
默認(rèn)參數(shù)
function draw(radius=100){
console.log(radius);
}
draw(30)
// 默認(rèn)(default)參數(shù)必須設(shè)置在最后
function draw(y,x=2,z=20){
console.log(x,y,z);
}
draw(1)
draw(1,3)
剩余參數(shù)
function total(...args){
console.log(args);
console.log(args instanceof Array); //true
}
total(23,45)
Symbol數(shù)據(jù)類型
獲取唯一的不會(huì)重復(fù)的變量礁遵，是ES6新增的基本數(shù)據(jù)類型
// Symbol的應(yīng)用場(chǎng)景
//第三方的庫(kù)中定義了一個(gè)對(duì)象(對(duì)用戶來(lái)講是隱蔽的)
let obj = {
name: '23',
count() {
console.log('count');
}
}
// 對(duì)對(duì)象的功能進(jìn)行擴(kuò)展：希望用一個(gè)一定不會(huì)和對(duì)象已有屬性重復(fù)的屬性名
let count = Symbol();
obj[count] = function(){
console.log('數(shù)量');
}
obj.count() // count
obj[count](); //數(shù)量
Set類型的數(shù)據(jù)
是ES6中新增的集合的數(shù)據(jù)類型乾蛤，用來(lái)存放數(shù)組允趟。但是蔑匣，數(shù)組的元素不允許重復(fù)
數(shù)組去重
var arr = [1,2,3,2,5,1]
var result = [...new Set(arr)]
console.log(result);
Set常用的API
1. add
2. delete
3. has
4. clear
for...of語(yǔ)句
- for: （1）需要明確遍歷次數(shù) (2)不能遍歷對(duì)象恩急，可以遍歷對(duì)象以外的集合 array,偽數(shù)組 （3）可以使用break和continue
- forEach: (1) 可以遍歷對(duì)象以外的集合 （數(shù)組掸掸，Set, NodeList--->dom集合） （2）不能使用break和continue
- for...in (1)遍歷對(duì)象 (2)不能直接訪問(wèn)對(duì)象的屬性值 (3)（3）可以使用break和continue
- 新增的for...of:
(1) 自定義的對(duì)象不能使用for...of,但大部分原生的數(shù)據(jù)集合都可以使用 (數(shù)組氯庆、字符串、Set類型扰付、Map類型堤撵、NodeList)
(2)可以使用break和continue
//作用于數(shù)組
var arr = ['a','c','d']
for(let i of arr){
console.log(i);
}
//作用于元素節(jié)點(diǎn)NodeList
let divList = document.querySelectorAll("div");
for (let el of divList){
console.log(el);
}
Object的API
- Object.assign: 合并對(duì)象
- Object.keys()： 返回對(duì)象所有鍵組成的集合
let obj = {
name: 'Peppa',
age: 4,
sex: '女'
}
// ["name","age","sex"]
console.log(Object.keys(obj));
Map類型的數(shù)據(jù)
類似于對(duì)象，用來(lái)存儲(chǔ)鍵值對(duì)羽莺。
對(duì)象只能使用字符串作為屬性名实昨，而Map可以使用任意類型的數(shù)據(jù)做為屬性名
//第一個(gè)鍵是"a",值是1, 第二個(gè)鍵是b,值是2
var map1 = new Map([["a",1],["b",2]]);
console.log(map1);
Map的API
屬性: size
方法: set , get , has, delete ,clear
for...of 遍歷
var map1 = new Map([["a", 1], ["b", 2]]);
//只遍歷鍵
for (let key of map1.keys()){
console.log(key);
}
// 只遍歷值
for (let val of map1.values()){
console.log(val);
}
// val是數(shù)組，存儲(chǔ)了每一個(gè)的鍵和值
for (let val of map1){
console.log(val[0]);
console.log(val[1]);
}
//同時(shí)返回鍵值對(duì)
for (let [key,value] of map1){
console.log(key);
console.log(value);
}
// 等價(jià)于上面的寫(xiě)法
for (let [key,value] of map1.entries()){
console.log(key);
console.log(value);
}
Promise:
promise用來(lái)解決回調(diào)地獄的問(wèn)題盐固，把異步的代碼用同步的方式來(lái)實(shí)現(xiàn)
Promise 是異步編程的一種解決方案荒给，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。
它由社區(qū)最早提出和實(shí)現(xiàn)刁卜，ES6 將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn)锐墙，統(tǒng)一了用法，原生提供了Promise對(duì)象长酗。一個(gè)Promise的三種狀態(tài)
pending: 初始狀態(tài)溪北，既不是成功，也不是失敗狀態(tài)夺脾。
fulfilled: 意味著操作成功完成之拨。
rejected: 意味著操作失敗。Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)咧叭，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject蚀乔。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供菲茬，不用自己部署吉挣。
Resolve函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved）婉弹，在異步操作成功時(shí)調(diào)用睬魂，并將異步操作的結(jié)果，作為參數(shù)傳遞出去镀赌；
Reject函數(shù)的作用是氯哮，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用商佛，并將異步操作報(bào)出的錯(cuò)誤喉钢，作為參數(shù)傳遞出去姆打。Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)肠虽。
```
// 需求： ajax1執(zhí)行完再執(zhí)行ajax2,ajax2執(zhí)行完再執(zhí)行task
function ajax1() {
setTimeout(function () {
console.log('ajax1');
}, 1000)
}
function ajax2() {
setTimeout(function () {
console.log('ajax2');
}, 2000)
}
function task() {
console.log('task');
}
```
用Promise實(shí)現(xiàn)
var flag1 = true;
var flag2 = false;
function error(err) {
console.log(err);
}
function ajax1() {
return new Promise((resolve, reject) => {
setTimeout(function () {
if (flag1) {
resolve('ajax1的結(jié)果')
} else {
reject('ajax1錯(cuò)誤')
}
}, 1000)
})
}
function ajax2(data) {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('ajax2接收ajax1的參數(shù)', data);
if (flag2){
resolve()
}else{
reject('ajax2錯(cuò)誤')
}
}, 2000)
})
}
function task() {
console.log('task');
}
ajax1()
.then(ajax2)
.then(task)
.catch(error)
Promise.all() Promise.race()
Promise.all() 兩個(gè)異步操作都成功完成后幔戏，再執(zhí)行的邏輯
Promise.race() 最先得到結(jié)果的異步操作執(zhí)行成功，即執(zhí)行下面的邏輯
all()和race()中的參數(shù)必須是promise實(shí)例
Promise.all([ajax1(),ajax2()])
.then(function(data){
console.log('兩個(gè)請(qǐng)求都成功后的數(shù)據(jù)',data);
task(data)
})
.catch(err)
Promise.race([ajax1(), ajax2()])
.then(function (data) {
console.log('請(qǐng)求返回最快的任務(wù)的結(jié)果', data);
task(data)
})
.catch(err)
async和await的用法
- async: 定義一個(gè)異步函數(shù),消除promise中then的鏈?zhǔn)秸{(diào)用 税课，讓代碼更加清晰评抚，優(yōu)雅
- await后面接一個(gè)會(huì)return new promise的函數(shù)并執(zhí)行它
- await只能放在async函數(shù)里
- async函數(shù)通過(guò)try...catch處理失敗時(shí)要執(zhí)行的邏輯
var flag1 = false;
var flag2 = true;
function ajax1() {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('ajax1任務(wù)執(zhí)行完畢');
if (flag1) {
resolve('ajax1的結(jié)果')
} else {
reject('ajax1錯(cuò)誤')
}
}, 1000)
})
}
function ajax2(data) {
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('ajax2', data);
console.log('ajax2任務(wù)執(zhí)行完畢');
if (flag2) {
resolve('ajax2的結(jié)果')
} else {
reject('ajax2錯(cuò)誤')
}
}, 2000)
})
}
function task(data) {
console.log('task任務(wù)執(zhí)行完畢');
console.log('task', data);
}
async function render() {
try {
let result1 = await ajax1()
await ajax2(result1)
task()
}catch(err){
console.log('catch',err);
}
}
render()
Object.defineProperty()
定義對(duì)象的屬性
let obj = {
name: '西游記',
addTime: '739754975945489'
}
//必須使用一個(gè)臨時(shí)變量，來(lái)存儲(chǔ)name屬性的值
let temp = obj.name;
// 攔截器
Object.defineProperty(obj,"name",{
//存取器
get: function(){
console.log('get');
//get中一定要有return,return的結(jié)果即為name屬性的新值
return "《" + temp + "》"
},
set: function(newVal){
console.log('set');
temp = newVal;
}
})
obj.name = "窗邊的小豆豆";
console.log(obj.name);
