ECMAScript 6(簡稱ES6)是於2015年6月正式發佈的JavaScript語言的標準
- let關鍵字
- 變量的解構賦值
- 對象的簡寫屬性
- 箭頭函數
- 三點運算符
- Promise對象
- Symbol
- ierator
- Generator
- 類的使用
- async
- 深度克隆
let關鍵字
let與var類似,用於聲明一個變量
特點:在塊級作用作用域內有效
不能重複聲明,不存在變量提升,不會預處理
變量的解構賦值
// 對選哪個的解構賦值
let obj = {username:"kobe",age:"41"}
let{age} = obj
console.log(age)
// 數組
let arr = [1,2,3,"abc"]
let[a,b] = arr
console.log(a,b)
function foo(username,age){
console.log(username,age)
}
foo(obj)
對象的簡寫屬性
let username = "kobe"
let age = 41
let obj = {
username,
age,
getName(){
return this.username
}
}
箭頭函數
特點:
1.簡潔
2.沒有自己的this,箭頭函數的this不是調用的時候決定的,而是在定義的時候處在的對象就是它的this
3.擴展理解:箭頭函數的this看外層是否有函數
有,外層函數的this就是內部箭頭函數的this
沒有,this是window
let fun = () => console.log("我是鉤子函數")
fun()
// 形參的情況
// 1.沒有形參的時候
let fun1 = () => console.log("我是鉤子函數")
fun1()
// 2.只有一個形參的時候()可以省略
let fun2 = a => console.log(a)
fun2("aaaaaa")
// 3.兩個及兩個以上的形參的時候()不能省略
let fun3 = (x,y) => console.log(x,y)
fun3(1,1)
// 函數體的情況
// 1.函數體只有一條語句或者是表達式的時候{}可以省略----會自動返回語句執行的結果或者表達式的結果
let fun4 = (x, y) => x + y
console.log(fun4(1,2))
let fun5 = (x,y) => {
return x + y
}
console.log(fun5(5,5))
let btn1 = document.getElementById("btn1")
let btn2 = document.getElementById("btn2")
btn1.onclick = function(){
console.log(this)
}
let obj = {
name : "箭頭函數",
getName(){
btn2.onclick = () => {
console.log(this)
}
}
}
obj.getName()
三點運算符
let arr = [1,7]
let arr1 = [2,3,4,5,6]
arr = [1,...arr1,7]
console.log(arr)
Promise對象
Promise對象:代表了未來某個將要發生的事情(異步操作)
Promise對象,可以將異步操作已同步的流程表達出來,避免層層嵌套的回調函數(回調地獄)
let promise = new Promise((resolve,reject) =>{
// 初始化promise狀態:pending : 初始化
console.log("1")
// 執行異步操作,通常是ajax請求,開啓定時器
setTimeout(() => {
console.log("3")
// 根據異步任務的返回結果去修改promise的狀態
// 異步任務執行成功
resolve("略略略") //修改promise的狀態 爲fullfilled 成功的狀態
// reject("哈哈哈") //修改promise的狀態 爲rejected 失敗的狀態
},2000)
})
console.log("2")
promise
.then((data) => {//成功的回調
console.log(data,"成功了")
}, (error) => {//失敗的回調
console.log(error, "失敗了")
})
Symbol
// 創建symbol屬性
let symbol = Symbol()
console.log(symbol)
let obj = {usename:"kobe",age:41}
obj[symbol] = "hi"
console.log(obj)
for(let i in obj){
console.log(obj[i])
}
ierator
遍歷器(Iterator)是一種接口,爲各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)
// 準備一個數據
let arr = [1,4,3,"aaa"]
let iteratorObj = myIterator(arr)
console.log(iteratorObj.next())
// 將iterator接口部署到指定的數據類型上,可以用for of去遍歷
for(let i of arr){
console.log(i)
}
Generator
Generator函數是一個狀態機,
用來生成遍歷器對象
可暫停函數(惰性求值),yield可暫停,next方法可啓動,每次返回的是yield後的表達式結果
特點:
function 與函數名之間有一個星號
內部用yield表達式來定義不同狀態
async
async函數不需要像Generator去調用next方法,遇到await等待,當籤的異步操作完成就往下執行
返回的總是Promise對象,可以用then方法進行下一步操作
async function foo(){
return new Promise(resolve => {
setTimeout(resolve,2000)
})
}
async function test(){
console.log("開始執行",new Date().toTimeString())
await foo()
console.log("執行完畢",new Date().toTimeString())
}
test()
async function asyncPrint(){
let result = await Promise.resolve("promise")
console.log(result)
}
asyncPrint()
類的使用
// 父類
class Person{
constructor(name,age){
this.name = name
this.age = age
}
// 類的一般方法
showName(){
console.log(this.name)
}
}
let person = new Person("kobe",41)
console.log(person)
person.showName()
//子類
class StartPerson extends Person{
constructor(name,age,salary){
super(name,age) //調用父類的構造方法
this.salary = salary
}
// 父類方法重寫
showName(){
console.log(this.name,this.age,this.salary)
}
}
let startPerson = new StartPerson("kd",30,101110)
console.log(startPerson)
startPerson.showName()
深度克隆
拷貝數據
基本數據類型:
拷貝後會生成一份新的數據,修改拷貝後的數據不會影響原數據
對象/數組
拷貝後不會生成一份新的數據,而是拷貝引用,修改拷貝後的數據會影響原數據
拷貝數據的方法
1,直接賦值給一個變量
2.Object.assign() //淺拷貝
3.Array.prototype.concat() //淺拷貝
4.Array.prototype.slice() //淺拷貝
5.JSON.parse(JSON.stringify()) //深拷貝 。拷貝的數據裏不能有函數
淺拷貝(對象/數組)
特點:拷貝的引用,修改拷貝的數據會影響原數據
深拷貝(深度克隆)
特點:拷貝生成新的數據,修改拷貝的數據不會影響原數據