####ES6
let? ? ?const? ? ?var? ? ?三者的區(qū)別
### 1.? ? let? const? ? 不能重復(fù)聲明變量
let? ? ? a =? ?12? ;? ? ? ??let? ? ? a =? ?10 ;? ? ? ? ?console.log( a )? ?報(bào)錯(cuò)
var? ? ?a? =? 10? ;? ? ? ? var? ? ?a? =? 6? ;? ? ? ? ? console.log( a )--->a=6;? 后者把前者覆蓋了
const? ? a? =? 10? ;? ? ? const? ? ?a? =? 4? ;? ? ?console.log ( a )? 報(bào)錯(cuò)
#### 2.let? const? ?塊級(jí)作用域
if( true ) {? let? a? =? 10 ;? ?console.log( a ) --->10成立}? ? console.log( a )--->不成立? 報(bào)錯(cuò)
if( true )? { const? ?a? =? 10 ;? console.log ( a ) --->10 成立}? ?console.log( a ) --->不成立? 報(bào)錯(cuò)
if (true ) { var a? =? 8 ;? console.log( a ) --->8} console.log( a )--->8? 成立
### 3.let? ?const? ?不支持變量提升
? console.log (? a )? ? ? let? ?a? = 10 ;? a--->報(bào)錯(cuò)
console.log ( b )? ?const? ?b = 12 ;? b--->報(bào)錯(cuò)
console.log? ( c )? ? var? ?c =? 13? ; c---->undefined
### 4. const 不能先聲明,后變量
let? ? a? ?;? ? ? a? =? ?10? ?;? ? ? ? console.log (? a? ?)? ----->10 成立
const? ? ?b? ?;? ? ? b? ?=? ?12? ?;? ?console.log ( b ) ---->報(bào)錯(cuò)? ?只能邊聲明 硬爆,邊變量
var? ?c? ;? ? c? =? 13? ;? ?console.log ( c ) --->13成立
###數(shù)組的解構(gòu)?
如 :1. 數(shù)組
var? arr=[ " css "," js "," jq "," node.js "," react "] ;
? ? ? ?var? [ a , b , c , d , e ] = arr ;
console.log( a ) ;//--->css ,? ? ? ? console.log( b ) ;//--->js?--------》數(shù)組的解構(gòu)是根據(jù)數(shù)組的順序進(jìn)行解構(gòu)
?2. 多維數(shù)組
?var? arr = [ "? aa" ,? " bb "? ,? " cc "? ,[? "? dd? ''? ,? ?''? ee? ''? , [? ''? ff? ''? ,? ''? gg? ''? ]? ?]? ? ];
var? ?[ a? ,? b? ,? c? ,? [d? ,? e? ,? [? f? ,? g? ]? ]? ?]? =? arr? ;
console.log( a ) ; //--->aa? ? ? console.log( d? ) ; //--->dd? ;? ? ?console.log( f ) ; //---->ff
###對(duì)象的解構(gòu)
var? ?obj = { id : 123 , tt : " 對(duì)象的解構(gòu)? "? ,? data : "? 是根據(jù)屬性名來解構(gòu)的? "? }? ?哗脖;
var? ?{ id? ,? tt? , data? }? =? obj ;
console.log( id ) ; //---->123? 依次類推
###模板自符串
var? ?str? =? ` hello? world? `? ;? ? ?console.log ( str )? ;? //--->反引號(hào)
var? ?c = " 1904A "? ,? k? = " react " ;? ?var? ?con =? "hello 歡迎來到 "+ c +" 班? , 我們正在學(xué)? " + k ;? ?console.log ( con ) ;? //--->hello 歡迎來到1904A班 鼎兽, 我們正在學(xué) react ;
?var? con1 =` hello 歡迎來到? ${ c } 班 熊咽, 我們正在學(xué) ${ k }? `;? console.log ( con1 ) ; //---->跟上面輸出的結(jié)果是一樣的的砰苍;
用反引號(hào)時(shí)? `? ?`? 潦匈, es6添加的寫法? ?${ 內(nèi)容 } ;?
### 數(shù)組新增的方法
### 1. find( ) ---->查找符合條件的方法赚导,找到滿足條件的第一條后茬缩,停止查找 ,后面的條件不再去查找
var? obj = [ {? id :? 1 , title : " 張三 " , age : 19 }? ,??{? id :? 2 , title : " 李四 " , age : 25 }? ,??{? id :? 3 , title : " 王麻子 " , age : 26 }? ]? ;
var? arr = obj . find ( function ( value , index , array )? {? return? value . age >25? ?}? )? ; -------》value? :是當(dāng)前的元素的每一項(xiàng)? ? ? index : 是當(dāng)前每一項(xiàng)元素的索引值吼旧,也就是下標(biāo)? ? ? array? :? 是當(dāng)前數(shù)組的本身? ?他們也可以簡(jiǎn)寫 v? ,? ?i? ? ,? ?a? ?
console.log ( arr ) ; //--->輸出結(jié)果{ id : 3 , title : " 王麻子 " , age : 26 }
### 2. findIndex () --->跟find() 方法差不多的效果凰锡,只不過他輸出的結(jié)果是當(dāng)前元素的下標(biāo)
引用find() 方法中的例子 var obj? ;
?var? arr1 = obj . findIndex ( function ( v? ,? i? ?,? ?a? )? ?{? return? ?age? >25? ?}? )? ?;??
console.log ( arr1 ) ;? //---->輸出的結(jié)果是 2??
### 3. includes() --->表示當(dāng)前數(shù)組中是否含有該元素, 有的話返回true 圈暗, 否的話 返回 false 掂为;
var? ?arr2 = [ "aa " , " bb " , " cc " , " dd " ] ;?
var? ? acc = arr2 . includes ( " aa " ) ;??
console.logg( acc ) ; //---> 輸入結(jié)果,有的話輸出true员串, 沒有的話輸出 false? 勇哗;? ?
### 4. forEach( ) 數(shù)組遍歷
引用find()方法中的例子 var obj? ;
var? arr3 = obj . forEach ( function ( v , i , a ) { console.log( v )? } ) ; //--->輸出每一項(xiàng)的元素??
### 5. filter ( ) 過濾數(shù)組 , 返回值的是滿足條件的新的數(shù)組?
引用find()方法中的例子??
var arr4 = obj . filter ( function ( v , i , a ) { return? v . age > 20 }? ) ;?
?console.log ( arr4 ) ; // --->輸出結(jié)果是 age為大于20的25,26 一個(gè)新的數(shù)組 昵济;
### 6. map( )? 把原數(shù)組的數(shù)據(jù)修改后智绸,返回一個(gè)新的數(shù)組
引用find ( ) 方法中的例子?
var? arr5 = obj . map (? function (? v ,? i? ,? a? ) { var p = v . age + 10 ;? v . age = p ;? return? v? ; }? ?) ;
console.log( arr5 ) ; //--->輸出的結(jié)果為obj中的所有的age都加了個(gè)10 ;
### 7. every ( ) 必須滿足所有的條件访忿,才能執(zhí)行,返回true 斯稳,? 要是有一個(gè)條件不滿足海铆,就返回一個(gè)false??
引用find()方法中的例子
var? ?arr6 = obj .every (? function(? v? ,? ?i? ?,? a? ) {? return? ?v . age? > 20? }? )? ?;
console.log ( arr6 ) ;? //----> 輸出結(jié)果為false ,? 第一個(gè)條件沒有滿足
### 8. some( ) 只要滿足一個(gè)條件挣惰,就會(huì)返回一個(gè)true 卧斟, 只有所有的條件都不滿足,才會(huì)返回一個(gè)false??
引用find( )方法中的例子
var arr7 = obj . some (? function ( v , i , a ){ return? v . age > 25? }? ) ;??
console.log( arr7 ) ;? //---->輸出結(jié)果為true??
### 9. 淺復(fù)制 ---->原來的數(shù)據(jù)會(huì)隨著修改的數(shù)據(jù)一起改變
var? arr8? =? [ " a " , " b " , " c " ] ;? ? var? a = [ . . .? arr8 ] ;? console.log ( a ) ; //---> a = [ " a " , " b " , "? c " ]? ? ?
let? ?aa = arr8 ;? ?aa[ 0 ] = 100 ;? console.log ( aa ) ;//---> aa = [ " 100 " , " b " , " c " ]??
### 10. 深度復(fù)制 ---->原來的數(shù)據(jù)不會(huì)隨著修改后的數(shù)據(jù)一起改變
引用 淺復(fù)制 中的 arr8?
var? cc = JSON .parse ( JSON . stringity ( arr8 ) ) ;??
console.log ( cc ) ; //---->cc = [ " a " , " b " , " c " ]??
### 函數(shù)的擴(kuò)展
### 1. 參數(shù)的默認(rèn)值?
function? add ( a ) {? return? a } ;? ?var ad = add ( ) ; console.log( ad ) ; //--->? 當(dāng)不給函數(shù)里面?zhèn)鬟f實(shí)參的時(shí)候憎茂, 調(diào)用函數(shù)顯示 undefined? ??
function? add ( a = 10 ) { return? a } ; var? ad = add ( a ) ; console.log ( ad ) ; //--->當(dāng)不給函數(shù)里面?zhèn)鬟f實(shí)參的時(shí)候珍语, 調(diào)用函數(shù)顯示10? ? ? ? ? ?
function? add ( a = 10 ) { return? a } ; var ad = add ( 2 ) ; console.log ( ad ) ; //---> 2? ?當(dāng)給函數(shù)傳入實(shí)參的時(shí)候顯示實(shí)參,如果沒有傳入實(shí)參竖幔,就顯示形參的默認(rèn)值??
### 2. 多余的參數(shù)
function add ( a , b ) {
? ? ? console.log ( a )? ;? //--->2
? ? ? console.log ( b )? ; //--->4?
? ? ? console.log ( c )? ;? //--->6
? ? ? ?} ;? ?
? ?add ( 2 , 4 , 6 , 8 ) ;//--->多出來了一個(gè)實(shí)參8
function add1 ( a , b , ...c ) {
? ? ? ? ? ?console.log( a ) ; //--->1?
? ? ? ? ? ?console.log( b ) ; //--->2?
? ? ? ? ? ?console.log ( c ) ;//--->[ 3 , 4 , 5 , 6 ] 以數(shù)組形式儲(chǔ)存
? ? }
add1 ( 1 , 2 , 3 , 4 , 5 , 6 ) ;?
### 箭頭函數(shù)?
?箭頭函數(shù)的寫法?
?###當(dāng)沒有參數(shù)時(shí)? ?
? (? )? = > {? ?}? ?< ========= >function ( ) {? ?}? ??
###當(dāng)有一個(gè)參數(shù)板乙,并且有一個(gè)返回值時(shí)? ?
var? ff =? a? = > a? < ======== >? var? ff? =? function ( a ) { return? a? }? ? ?
###當(dāng)有多個(gè)參數(shù)的時(shí)候? ?
var? ff? = ( a , b ) = > { return? a + b ; } ==> console.log ( ff ( 1 , 2 ) ) ; < ====== > var? ff? =? function ( a , b ) { return a + b } ;? ??
?###特點(diǎn) :1. 在箭頭函數(shù)中沒有arguments 對(duì)象?
? ? ?2. 不可以在構(gòu)造函數(shù)中使用?
? ? ?3. this的指向問題 ,箭頭函數(shù)指向定義時(shí)的對(duì)象 ,而function函數(shù)指向調(diào)用使用它的對(duì)象?
如:1.? ? var obj = {
? ? ? ? ? ? ? ? ? ? ? ? ? title : " 李四 " ,
? ? ? ? ? ? ? ? ? ? ? ? ? data : " hello " ,?
? ? ? ? ? ? ? ? ? ? ? ? ?fn : function () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log ( this .title ) ;//---->李四?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log ( this ) ; //--->指向當(dāng)前的函數(shù)obj??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ?}??
? ?obj . fn ( ) ; //---->李四??
? ? ?2.? ? ?var? obj1 = { title : " hello world " }? ;? ??
? ? ? ? ? ? ?var? obj2 = {
? ? ? ? ? ? ? ? ? ? ?title : " 你好 " ,
? ? ? ? ? ? ? ? ? ? ?fn : function ( a , b ) {? ?//-------->可以直接寫成是箭頭函數(shù)募逞,就可以直接改變this的指向了? ? ?( ) = > {? }? ?
? ? ? ? ? ? ? ? ? ? ? ? ? console.log( this .title );?
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log ( a )? ;?
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log ( b )? ;?
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?}
? ? ? ? ? ? obj2 . fn ( ) ; //---->你好? ? ? ? this的指向是當(dāng)前使用它的對(duì)象obj2?
? ? ? ? ? ? obj2 . fn . call ( obj1 , 1 , 2? ) ; //--->hello world? a : 1? ? b : 2? ? ? ? this的指向是obj1?
? ? ? ? ? ? obj2 .fn . apply ( obj1 , [ 1 , 2 ] ) ; //--->hello world? ?a : 1? ? b : 2? ? ? ?this的指向是obj1?
? ? ? ? ? ? obj2 . fn = obj2 . fn .bind ( obj1 ) ;?
? ? ? ? ? ? obj2 . fn ( ) ;? //--->hello world? this的指向是obj1?
### 改變this的指向有 箭頭函數(shù) 蛋铆、call 、 apply放接、bind? ?
?call和apply的區(qū)別 :
call 后面的參數(shù)隨便寫 刺啦,apply 后面是數(shù)組?
###注:定時(shí)器里的函數(shù)this的指向是window? ?
###對(duì)象的擴(kuò)展
### 1. 屬性的簡(jiǎn)潔表示法??
var? id = 123 ,? title = " hello world " ;
var? obj = { id , title }? ;??
console.log ( obj ) ; //---->obj = { id : 123 , title : "hello world " }? ?
### 2. 方法名也可以簡(jiǎn)寫??
? var? obj = {?
? ? ? ? ? ? ? ? ? ? ? id : 123? ,?
? ? ? ? ? ? ? ? ? ? ? id1 : 456 ,??
? ? ? ? ? ? ? ? ? ? ? title : " hello? world "? ,?
? ? ? ? ? ? ? ? ? ? ? [ " title " + 1 ] : "? 這是多種寫法 " ,??
? ? ? ? ? ? ? ? ? ? ? code ( ) {? ? ? ? // ======= > code : function ( ) {? ?}??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log ( this .id ) ;
? ? ? ? ? ? ? ? ? ? ? ? ? ?}?
? ? ? ? ? ?}? ?
? ? obj? . code (? )? ;? //----> 123?
? ? ?console.log ( obj [ " id " + 1 ] ) ; //---> 456?
? ? ?console .log ( obj . title1 ) ; //---->輸出結(jié)果 這是多種寫法?
? ? ?var t = " title1" ; //--->將obj.title1 賦值給了 t?
? ? console.log ( obj [ t ]? ) ; //---> 輸出結(jié)果 這是多種寫法??
###對(duì)象的新方法 Object . assign ( ) 用于將源對(duì)象的所有屬性復(fù)制到目標(biāo)對(duì)象中?
var a = Object . assign ( { } , { id : 1 , title : " one " } , { id : 2? , title : " two " , data : " hello " } )? ;
//--------------------第一個(gè)空對(duì)象是 :目標(biāo)對(duì)象? ?第二個(gè)和第三個(gè)是 :源對(duì)象? ?
?//------------------ 源對(duì)象先進(jìn)行合并 , 相同的屬性后者覆蓋前者 纠脾,不同的屬性添加 玛瘸,最后在跟目標(biāo)對(duì)象合并(復(fù)制)
console.log ( a ) ; // --->{ id : 2 , title : " two " , data : " hello " }??
### Es6新增的數(shù)據(jù)結(jié)構(gòu)? map? set?
### set 對(duì)象允許你有儲(chǔ)存任何類型的唯一值,無論是原始值或是對(duì)象引用??
如 : var? arr = [ " aa " , " bb " , " cc " ] ;??
? ? ? ? ?var? myset = new? Set ( arr ) ;? //---->將數(shù)組轉(zhuǎn)換為set形式的對(duì)象
? ? ? ? ?myset .add ( " dd " ) ;??
? ? ? ? ?var? str? = [ ... myset ] ;? //--->將對(duì)象形式的set在轉(zhuǎn)換為數(shù)組
? ? ? ? console.log ( str ) ; //--->[ " aa " , " bb " , " cc " , " dd " ]? ? ?
?還有 delete ( ) 刪除? ? ?clear( ) 清空? ? has ( ) 有true苟蹈,否false? ? ? size 是他的長(zhǎng)度
### map 對(duì)象跟set的方法都差不多??
get ( )? ? ?set ( )? ?clear ( )? ?delete ( )? ? size? ? ?has ( )? ??
var obj = { id : 1 , title : " hello " } //======>有鍵值對(duì)? ? id? , title? 是鍵(key) ;? ? ?1? 糊渊, hello? 是指(value)
### promise 對(duì)象
promise對(duì)象:是異步變成的一種解決方案??
特點(diǎn):? 1. 一旦改變 , 不會(huì)再變 汉操;
? ? ? ? ? ? ?2. 不會(huì)受到外部因素影響 再来;
缺點(diǎn) : 1. 一旦創(chuàng)建 ,立即執(zhí)行 磷瘤, 不可以取消 芒篷;
? ? ? ? ? ? ?2. 不給加回調(diào)函數(shù) , 內(nèi)部執(zhí)行結(jié)果 采缚,不會(huì)返回到外部 针炉;
? ? ? ? ? ? ?3. 如果執(zhí)行回調(diào)函數(shù) , 那么promise 已經(jīng)完成 扳抽, 對(duì)上下文不太友好 篡帕;?
promise的常用方法:1. then( )調(diào)用resolve方法時(shí) , 獲取成功之后的數(shù)據(jù) 贸呢;?
2. catch( )調(diào)用reject方法時(shí) 镰烧, 獲取勢(shì)失敗后的數(shù)據(jù) ;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3. all( )調(diào)用幾個(gè)promise回調(diào)成功之后的統(tǒng)一處理 楞陷;?