CLASS 類的概念
ES5中聲明類 用構造函數模擬
//定義一個叫Animal 的類
let Animal = function(type){
//聲明了屬性type
this.type = type
}
//聲明了方法walk
Animal.prototype.walk = function(){
console.log('i am walk') }
//實例化類dog 和 monkey
let dog = new Animal('dog');
let monkey = new Animal('monkey');
//繼承原型鏈上的walk方法
dog.walk();
monkey.walk();
//若只知道實例的時候想要找到原型鏈可以通過constructor
dog.constructor.prototype.eat=function(){
console.log("我是通過實例的constructor找到的構造函數 添加的eat方法")
}
dog.eat();
monkey.eat();
ES6中的類的聲明專業化 用class 即ES5聲明類的語法糖 其本質是一樣的
class Animal{
constructor(type){
this.type = type
}
//屬性值寫在constructor中 方法寫在constructor之外
walk(){
console.log('我是通過class創建的方法')
}
}
//實例化
let dog = new Animal('dog')
let monkey = new Animal('monkey')
dog.walk();
monkey.walk();
console.log(typeof Animal) //值為function
Setters & Getters
對于類中的屬性，可以直接在constructor 中通過this直接定義，還可以直接在類的頂層來定義
class Animal{
constructor(type,age){
this.type = type
this._age = age
}
get age(){
return this._age
}
//用get定義的屬性只能讀取不能修改
set age(val){
if(val>7){
this._age = val
}
}
//用set定義的屬性可以有條件的修改
}
let dog = new Animal('dog',5) ;
console.log(dog._age);
console.log(dog.age);
dog.age = 4; //改變不了age 的值 除非滿足set中的條件
dog.age = 8;
console.log(dog.age);//由于滿足set中的條件所以 打印的值為8
class 的 Static Methods
重點需要區別類的靜態方法 和實例對象的方法
ES5中的靜態方法的定義
let Animal = function(type){
this.type = type
this.walk = function(){
console.log("我是實例對象的walk方法")
}
}
Animal.eat=function(){
console.log("我是類的靜態方法中的eat方法")
}
let dog = new Animal('dog');
dog.walk();
//dog.eat(); //實例對象上沒有eat方法 也就是說在類上定義的靜態方法在實例對象上取不到
Animal.eat(); //類上的靜態方法的調用
ES6中靜態方法的定義
class Animal {
constructor(type){
this.type = type ;
this.walk = function(){
console.log("我是實例對象上的walk方法")
}
}
static eat () {
console.log("我是類上的靜態方法")
}
//ES6中定義靜態方法方式
}
let dog = new Animal('dog')
dog.walk();
//dog.eat(); //實例對象上沒有eat方法 也就是說在類上定義的靜態方法在實例對象上取不到
Animal.eat(); //類上的靜態方法的調用
類的繼承
ES5中類的繼承方式
let Animal = function(type){
this.type = type
}
//定義方法
Animal.prototype.walk = function(){ console.log('我是父類原型鏈上的方法')};
//定義靜態方法
Animal.eat = function(){ cnonsole.log('我是父類的靜態方法')}
//定義子類
let Dog = function(name){
Animal.call(this,'dog')
this.name = name
}
Dog.prototype = Animal.prototype
Dog.prototype.run = function(){console.log("我是子類的run方法")}
let hsq = new Dog("hsq")
console.log(hsq.run());
console.log(hsq.walk());
console.log(hsq.eat()); //靜態方法拿不到
ES6中類繼承的方式
class Animal{
constructor(type) {
this.type = type
}
walk(){ console.log('我是父類中的walk方法')}
}
class Dog extends Animal {
//若子類中沒有自己的屬性可以省略super()
constructor(type,name){
super(type)
//super中接受的是父類中的參數
this.name = name
}
run(){console.log('我是子類中的run方法')}
}
let hsq = new Dog('dog','hsq');
hsq.walk();
hsq.run();
console.log(hsq.type)
console.log(hsq.name)
函數
ES5中處理參數的默認值
function test(x,y,z) {
if(y === undefined) {
y = 10
}
if(z === undefined) {
z = 20
}
return x + y + z
}
test(1) ;
ES6中處理參數的默認值
函數參數是從左至右解析,如果沒有默認值會被解析成undefined
function test(x,y=10,z=20){
return x + y + z
}
test(1);
---------------
//讓某個值使用默認值的情況
test(1,undefined,30); //把要使用默認值的參數設置為undefined
判斷函數有幾個參數
ES5中可以用arguments
function test(a,b=1,c){
console.log(arguments.length)
}
test(1,2,3) //輸出3
ES6中不支持arguments 可以用函數的length屬性
function test(a,b=1,c){
console.log(test.length)
}
test(1,2,3) //輸出1 用length只能查詢有默認值參數之前的參數個數
拓展運算符 Rest Parameter
不確定參數個數求和運算 ES5中
function sum(){
let num = 0;
Array.prototype.forEach.call(arguments,function(item){
num += item*1
})
return num
}
sum(1,2,3)
不確定參數個數求和運算 ES6中
...nums就是一個數組可以直接調用數組的api
function sum(...nums){
let num = 0;
nums.forEach(function(item){
num += item*1
})
return num
}
sum(1,2,3)
...nums還可以和其他參數一起用
function sum(base,...nums){
let num = 0;
nums.forEach(function(item){
num += item*1
})
return base*2 + num
}
sum(1,2,3)
知道一個確定數組 里面的每一項是函數參數的對應的實參可以用...傳遞
//ES5做法
let data = [1,2,3]
function test (a,b,c){
return a+b + c
}
箭頭函數
不帶參數的箭頭函數
let hello = ()=>{
console.log('say hello')
}
hello(); //輸出say hello
帶參數的箭頭函數
let hello = name => { console.log('say hello',name)}
hello('kobe'); //輸出say hello kobe
//只有一個參數可以省略括號
如果返回值是表達式 可以省略return 和 {}
let pow = x => x*x
如果返回值是字面量對象就需要寫用小括號括起來
let person = (name) => ({age:20,addr:'shanghai City'})
箭頭函數中的this
在ES5中關于函數中的this 只要的誰調用了該方法那么this就指向誰
let test = {
name:"test",
say:function(){
console.log(this.name)
}
}
console.log(test.say()) //test
箭頭函數中對this的處理是定義的，this的指向也就是test外層所指向的window 而window沒有掛在name所以結果是undefined
let test = {
name:'test',
say:() =>{
console.log(this.name,this)
}
}
test.say() //undefined 和 window
Object
在ES6周期的Object的屬性必須是key-value的形式
ES5的寫法
let x = 1,y = 2;
let obj = { x:x , y:y}
ES6的寫法 鍵名和鍵值定一定變量名一樣的時候可以簡寫
let x = 1,y = 2;
obj = {x,y}
ES6可以使用計算屬性
let x = 1,y = 2,z = 3;
let obj = { x,
y,
[y+z]:6}
ES6方法的簡寫
let x = 1,y = 2,z = 3;
let obj = { x,
y,
hello(){ console.log("hello")},
*run(){ console.log("run")} //前面加星號表示異步函數}
obj.hello(); //打印hello
obj.run(); //run 是異步函數 （generator）
Set
在js里通常使用Array或者Object來存儲數據。但是在頻繁的操作數據的過程中查找或者統計并需要手動來實現,
并不能簡單的直接使用。比如如何保證Array是去重的，如何統計Object的數據總數等。
在ES6為了解決上述痛點,新增加了數據結構Set和Map。它們分別對應傳統數據結構的“集合”和“字典”。
生成一個Set實例
let s = new Set()
console.log(s)
在實例化的同時傳入默認的數據
let s = new Set([1,2,3,4])
console.log(s)
初始化參數 參數必須是可遍歷的，可以是數組或者自定義遍歷的數據結構
添加數據
let s = new Set()
s.add('hello');
s.add('goodbye');
//或者s.add('hello').add('goodbye')
Set數據結構不允許數據重復,所以添加重復的數據是無效的
刪除數據
刪除數據分兩種，一種的刪除指定的數據，一種是刪除全部的數據
//刪除指定數據
let s = new Set()
s.add('hello');
s.add('goodbye');
s.delete('hello') // 返回true
//刪除全部數據
s.clear()
統計數據
Set可以快速的進行統計數據，如數據是否存在，數據的總數
let s = new Set()
s.add('hello');
s.add('goodbye');
//判斷數據是否存在
s.has('hello') //true
//計算數據項總數
s.size //2
查詢數據
keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回調函數遍歷每個成員
for...of.:可以直接遍歷每個成員
let s = new Set()
s.add('hello');
s.add('goodbye');
s.add(NaN)
s.add(NaN) //雖然每個NaN都不一樣但是不會重復添加
s.add(undefined)
s.add(undefined) //undefined 也不會被重復添加
console.log(s)
console.log(s.keys()); //SetIterator {"hello", "goodbye"}
console.log(s.values()); //SetIterator {"hello", "goodbye"}
console.log(s.entries()); //SetIterator {"hello" => "hello", "goodbye" => "goodbye"}
s.forEach(item=>{ console.log(item)}) //hello//goodbye
for (item of s ) {
console.log(item) //hello//goodbye
}
Map
Map是用來實現字典功能(Object鍵值對)。
let map = new Map([iterable])
iterable 可以是一個數組或者其他iterable對象其元素為鍵值對(兩個元素的數組，例如[[1,'one'],[2,'two']]) 每個鍵值對都會添加到新的Map。null會被當作undefined
添加數據
let keyObj = {}
let keyFunc = function(){}
let ketString = 'a string'
//添加鍵 鍵的值可以是對象 函數 等 ES5種的object是做不到的
map.set(keyString,'和鍵'a string'關聯的值')
map.set(keyObj,'和鍵keyObj關聯的值')
map.set(keyFunc,'和鍵keyFunc關聯的值')
刪除數據
// 刪除指定的數據
map.delete(keyObj)
// 刪除所有數據
map.clear()
統計數據
//統計所有key-value 的總數
console.log(map.size)
//判斷是否有key-value
console.log(map.has(keyObj)) //true
查詢數據
get()方法返回某個Map對象種的一個只定元素
keys()返回一個新的Iterator對象。它包含按順序插入Map對象中每個元素的key值
values()方法返回一個新的Iterator對象。它包含按順序插入Map對象中每個元素的value值
entries()方法返回一個新的包含[key,value]鍵值對的Iterator 。返回的迭代器的迭代順序與Map對象插入順序相同
forEach()方法將回以插入順序對Map對象中的每一個鍵值對執行一次參數中提供的回調函數
for...of 可以直接遍歷每個成員
console.log(map.get(keyObj))// 和鍵KeyObj關聯的值
console.log(map.keys()) //Iterator
console.log(map.values())//Iterator
console.log(map.entries())//Iterator
map.forEach(value,key, map) => {
console.log(value,key,map)
}
for( [key,value] of map ){
console.log(key,value)
}
Object和Map的區別
鍵的類型
一個Object只能是一個字符串或者Symbols 但一個Map的鍵可以是任意值，包括函數、對象、基本類型、
鍵的順序
Map中的鍵值是有序的，而添加到對象中的鍵則不是。因此，當對它進行遍歷的時候，Map
對象是按插入的順序放回鍵值。
鍵值對的統計
你可以通過size屬性直接獲取以惡Map鍵值對個數，而Object的鍵值對個數只能手動計算
鍵值對的遍歷
Map可直接進行迭代，而Object的跌代需要先獲取它的鍵數組然后再進行迭代
性能
Map在涉及頻繁增刪鍵值對的場景下會由些性能優勢
Object.assign() 只是淺拷貝 (深拷貝淺拷貝的區別)
Object.assign()方法將用于所有可枚舉屬性的值從一個或多個源對象復制到目標對象，它將返回目標對象
const target = {a:1,b:2}
const source = {b:4,c:5}
const source1 = {d:5,e:6}
const returnTarget = Object.assign(target,source,source1)
console.log(target)
console.log(returnTarget)
基本語法
Object.assign(target,...soures)
字符串模板語法
在ES5中的場景
1、字符串很長需要換行
字符串很長包括幾種情形一個是開發時輸入的文本內容，一個是接口數據返回的文本內容。如果對換行符處理不當，就會帶來異常
2、字符串中有變量或者表達式
如果字符串不是靜態內容，往往是需要加載變量或者表達式，這個也是常見的需求。之前的做法是字符串拼接‘
let a =20
let b =10
let c = 'js'
let str = 'my age is ' +(a+b) + ' and i love ' + c
console.log(str)
3、字符串中有邏輯運算
let retaiPrice = 20
let wholesalePrice = 16
let type = 'retail'
let showTxt = ''
if(type === 'retail'){
showTxt = '購買的單價是' + retaiPrice
}else{ showTxt = '您此次的批發價是：' +wholesalePrice}
在ES6中的反引號
`string text`
`string text line 1
string text line 2`
` string text ${expression} string text`
在反引號中可以插入變量或者表達式，只需要用${}包起來就好
ES5中對于換行的字符串的處理
console.log('string text line 1\n' + `string text line 2`);
//利用\n起到換行作用
ES6中對于換行的字符串的處理
console.log(`string text line 1
string text line 2`)
Tag Literals
用于處理復雜邏輯的字符串
function Price(strings,type){
//函數可以接受多個參數第一個參數是字符串模板中片段的數組用索引取值
//函數第二個參數開始是字符串模板中的傳遞的參數,可以傳多個變量
let s1 = strings[0]
let retaiPrice = 20
let wholesalePrice = 16
let txt = ''
if(type === 'retail'){
txt = `購買的單價是:${retaiPrice}`
//這里用了反引號傳遞參數 變量可以直接放在${}中
}else{
txt = `購買的單價是:${wholesalePrice}`
}
return `${s1}${txt}`
//返回處理后的字符串
}
let showTxt = Price`您此次的${`retail`}`
//這里的Price是函數是操作的字符串模板 傳遞參數等傳遞參數的時候里面要加反引號
console.log(showTxt)
結構賦值
在ES5中給將數組中的值放到以些變量里
let arr =['baby','child']
let data1 = arr[0]
let data2 = arr[1]
console.log(`${data1}:${data2}`)
在ES6中的結構賦值
let arr =['baby','child']
let [data1,data2] = arr
console.log(`${data1}:${data2}`)
結構賦值重點是在賦值，賦值的元素是要拷貝出來賦值給變量，賦值的元素本身是不會被更改的
結構賦值最多的就是Object 和Array
數組的解構
1、可以跳過賦值的元素
如果想忽略數組的某個元素對變量進行賦值，可以使用逗號來處理。
let [data1,,data3] = ['child1','child2','child3','child4','child5']
//為了代碼可讀性可在逗號前面加空格
console.log(`${data1}:${data3}`)
2、賦值的元素可以是任意可遍歷的對象
賦值的元素不僅是數組，它可以是任意可遍歷的對象
let [data1,data2,data3] ="abc"
console.log(data1+data2+data3)
let[data1,data2,data3] = new Set([1,2,3])
console.log(data1+data2+data3)
3、左邊的變量
被賦值的變量還可以是對象的屬性，不局限于單純的變量
let user = {};
[user.name,user.name2] ="kobe curry".split(' ')
console.log(user.name)
4、循環體
結構賦值在循環體中的應用，可以配合entries使用
let user = { name: 'kobe',age: 40 };
for (let [item,key] of Object.entries(user)) {
//在遍歷對象的時候將配合Object.entries將user對象變成可遍歷的 并用結構賦值取除對應的鍵值
console.log(`${key}:${item}`)
}
map對象
let user = new Map()
user.set('name','kobe')
user.set('age','30')
for(let [key,value] of user.entries()){
//entries()是將對象返回成一個有鍵和值的迭代器
console.log(`${key}:${value}`)
}
rest 參數
let [name1,name2,...rest] = [1,2,3,4,5,6,7,8,9]
console.log(name1)
console.log(name2)
//rest是將剩下為賦值給變量的值組合成一個數組 不過需要確保rest參數是放在被賦值變量的最后一個位置上
console.log(rest[0])
console.log(rest)
默認值
如果數組的內容少于變量的個數，并不會報錯，沒有分配到內容的變量會是undefined
let [data1,data2] = []
console.log(data1) //undefined
console.log(data2) //undefined
也可以給變量賦予默認值，防止undefined的情況出現
let [name="kobe",age = 40] = ["curry"]
//賦予默認值
console.log(name)
console.log(age)
對象的解構
let obj = {name:'kobe',age:40}
let {name:name1 ,age:age1} = obj
//對象的結構賦值將 變量名寫在鍵值中 鍵帽寫賦值對象的鍵帽
console.log(name1) //kobe
console.log(age1) //40
----------------------------
let obj = {name:'kobe',age:40}
let {name , age} = obj
//若變量名和賦值對的鍵帽名一樣的話 可以簡寫
console.log(name)
console.log(age)
也可以指定默認值
let obj = {age:40}
let {name:name1="curry" ,age:age1} = obj
//可以定義默認值
console.log(name1) //kobe
console.log(age1) //40
----------------------------
let obj = {age:40}
let {name="curry" , age} = obj
//可以定義默認值
console.log(name)
console.log(age)
rest運算符
對于一個對象 只需要取到它的某個值 剩下的需要保存在一個變量中
可以用拓展運算符即將剩余的鍵值對放在一個對象中
let obj = { name:'kobe',age:40,width:100}
let {name,...rest} = obj
console.log(name) // kobe
console.log(rest) // {age: 40, width: 100}
嵌套對象的解構
let obj = {
size:{
width:100,
heigh:200
},
items:["cake","Donut"],
extra:true
}
let { size:{width,heigh},items:[items1,items2],extra} = obj
//復雜的結構賦值
console.log(`${width}、${heigh}、${items1}、${items2}、${extra}`)
ES5中的回調地獄(ES6Promise)
JS 中的異步操作的寫法，比如加載一個腳本資源，可以將這個操作封裝在一個函數中
function loadScript(src) {
let script = document.createElement('script')
script.src = src
document.head.append(script)
}
//這里的異步操作是加載一個新的腳本。
//loadScript('./script.js')
函數是異步調用的因此操作不是此刻(加載腳本) 完成的，而是放在最后執行
假設加載的腳本中定義了新的函數 想要在腳本加載結束之后調用會發現無法調用
loadScript('./script.js')
//調用script.js中腳本的函數 假設名字是test
test() //會報錯 說函數不存在
//由于加載是異步的test()在它被加載進來之前就已經定義了
要在腳本引入之后執行test 只能利用回調函數
function loadScript(src,callback) {
let script = document.createElement('script')
script.src = src
script.onload = ()=>{
callback()
}
document.head.append(script)
}
//這里的異步操作是加載一個新的腳本。
loadScript('./script.js',test())
但是如果異步加載完之后的操作還是要異步加載的話就會造成回調地獄
function loadScript(src,callback) {
let script = document.createElement('script')
script.src = src
script.onload = ()=>{
callback()
}
document.head.append(script)
}
//這里的異步操作是加載一個新的腳本。
loadScript('./script.js',loadScript('./script1.js'))
//若一直嵌套 復雜程度可想而知 若某一環發生錯誤就更不好操作
所以ES6引出了Promise
function loadScript(src){
return new Promise((resolve,reject)=>{
let script = document.createElement('script')
script.src = src
script.onload = ()=>{ resolve()}
script.onerror = (err)=>{ reject(err)}
document.head.append(script)
})
}
loadScript('./1.js')
.then(()=>{
loadScript('./2.js')
test1() //假設test()是./1.js中定義的函數
},(err)=>{console.log(err)})
.then(()=>{
loadScript('./3.js')
test2() //假設test()是./2.js中定義的函數
})
用定時器模擬一個異步操作展示Promise的效果
function test(type,timeout){
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(type)
}, timeout);
})
}
test(1,1000).then((type)=>{
console.log(type)
return test(2,2000)
}).then((type)=>{
console.log(type)
return test(3,3000)
}).then((type)=>{
console.log(type)
console.log('不調了 不調了 下班')
})
//會依次輸出1，2，3 ,不調了 不調了 下班
用promise 實現一個AJAX
function getURL(URL){
return new Promise((resolve,reject)=>{
let req = new XMLHttpRequest()
req.open('GET',URL,true)
req.onload = function(){
if(req.status === 200){
resovle(req.responseText)
}else{
reject(new Error(req.statusText))
}
}
req.onerror = ()=>{
reject(new Error(req.statusText))
}
req.send()
})
}
let URL = 'http://httpbin.org/get'
getURL(URL).then((data)=>{
console.log(data)
},(err)=>{
console.log(err)
})
Promise.prototype.then()的用法
let promise = new Promise((resolve,reject)=>{
resolve('傳遞給then的值')
reject('傳遞給error的值')
})
promise.then((value)=>{
console.log(value)
},(error) =>{ cnonsole.log(error)})
Promise.resolve()
一般情況下我們都會使用new Promise()來創建Promise對象，但是除此之外也可用其他方法。
靜態方法Promise.resolve(value) 可以認為是new Promise() 方法的快捷方式
比如Promise.resolve(42) 可以認為是以下代碼的語法糖
new Promise(function(resolve){
resolve(42)
})
在這段代碼中的resolve(42) 會讓這個Promise對象立即進入確定(即resolved)狀態，并將42傳遞給
后面的then里所指定的onFullied函數。
方法Promise.resovle(value)的返回值也是一個Promise對象，所以可以直接調用then
Promise.resolve(42).then(function(value){
console.log(value)
})
Promise.reject()
Promise.reject(error)是和Promise.resolve(value)類似的靜態方法，是new Promise() 方法的快捷方式
Promise.reject(new Error('出錯了')) 是以下代碼的語法糖
new Promise(function(){resolve,reject}{
reject(new Error('出錯了'))
})
代碼的功能是調用該Promise對象通過指定then指定的onRejected函數，并將錯誤(Error)對象
傳遞給這個onRejected函數
Promise.reject(new Error('BOOM'))
Promise.prototype.catch()
function test(){
return new Promise((resolve,reject)=>{
reject(new Error('es'))
})
}
test().catch((e) =>{
console.log(e.message)
})
Promise.all()
Promise.all()
示例
let p1 = Promise.resolve(1)
let p2 = Promise.resolve(2)
let p3 = Promise.resolve(3)
Promise.all([p1,p2,p3]).then((res)=>{
console.log(res) //[1,2,3]
})
// p1 p2 p3 分別是三個異步請求
//當三個Promise的狀態都是resolve的時候 該方法才會返回對應的值
// 將三個異步請求到的數據放到一個res中 是一個數組 可以分別取出處理
--------------------------------
let p1 = Promise.resolve(1)
let p2 = Promise.resolve(2)
let p3 = Promise.reject(new Error('錯誤消息'))
Promise.all([p1,p2,p3]).then((res)=>{
console.log(res) //[1,2,3]
}).catch((err)=>{console.log(err)})
//當三個Promise的狀態都是resolve的時候 有一個請求不成功就處理不了 該方法才會返回對應的值
Promise.race()
let p1 = Promise.resolve(1)
let p2 = Promise.resolve(2)
let p3 = Promise.resolve(3)
Promise.race([p1,p2,p3]).then((res)=>{
console.log(res)
})
//三個異步請求 哪個快用哪個 場景就是相同的資源放在不同的服務器上
