es6常用功能

前言：學習es6 的語法，記錄一些學習心得和總結

建構函式

在兩段**下分別列印下列**

console.
log(
typeof mathhandle)
// function
console.
log(mathhandle.prototype.constructor === mathhandle)
// true
console.
log(m.__proto__ === mathhandle.prototype)
// true

會發現兩段**列印結果相同，說明兩種寫法不同，但原理是相同的

繼承

js 語法

列印結果為：

es6 語法

執行結果

總結

通過對比，

class在語法上更加貼合物件導向的寫法

class實現繼承更加易讀、方便理解

它們的本質相同，都使用了 prototype

callback 語法

function
loadimg
(src, callback, fail)
;        img.
onerror
=function()
;        img.src = src;
}var src =
"";loadimg
(        src,
function
(img)
,function()
);

promise

function
loadimg
(src)
;    img.
onerror
=function()
;    img.src = src;})
return promise
}var src =
""var result =
loadimg
(src)
result.
then
(function
(img)
,function()
)result.
then
(function
(img)
,function()
)

//js
var i =
100i =
200var j =
100j =
200//es6
let i =
100i =
200// 正確 let 定義的變數
const j =
100j =
200// 報錯  const 定義的是常量，定以後不可改變

//js
var name =
'zhangsan'
, age =
20, html =
''html +='';
html +=
''+ name +''
;html +=
''+ age +''
;html +=''
;//es6
const name =
'zhangsan'
, age =
20const html =`$
$`;//注意： 這裡必須是``，中才能識別${} 
console.
log(html)

// js
var obj =
var a = obj.a
var b = obj.b
console.
log(a)
console.
log(b)
var arr =
['***'
,'yyy'
,'zzz'
]var x = arr[0]
console.
log(x)
//es6
const obj =
const
= obj
console.
log(a)
console.
log(c)
const arr =
['***'
,'yyy'
,'zzz'
]const
[x, y, z]
= arr
console.
log(x)

// js 
var obj =
for(
var item in obj)
console.
log(item)
// c
// es6
const obj =
for(
let item in obj)
console.
log(item)
// undefined

//js 
function
fn(a, b)
}// es6
function
fn(a, b =0)

// js 
var arr =[1
,2,3
]arr.
map(
function
(item)
)// es6
const arr =[1
,2,3
]arr.
map(item => item +1)
;arr.
map(
(item, index)
=>
)

注意：箭頭函式是普通js函式的乙個補充，並不能取代所有普通js, 它最大意思在於將 this 指向函式體之外最近一層的 this 而不是像普通js 一樣指向 window 物件

functionfn(
)var arr =[1
,2,3
]// 普通 js 
arr.
map(
function
(item)
)// 箭頭函式
arr.
map(item =>
return item +1}
)}fn.call
()

es6常用功能

在es6之前，我們都是用var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部不在函式內即在全域性作用域的最頂部這就是函式變數提公升例如 function aa else 實際上是 function aa else 此處訪問 test 值為 undefined 而let和const都...

ES6的常用功能

class函式 promise let const let定義可以被重新賦值，const定義的常量則不行多行字串模板變數拼接更加簡單 var name zhangsan age 20,html html html name html age html const name zhangsan a...

ES6之Class的常用功能解讀

class寫法更加清晰，可以將它看做語法糖。能夠讓物件原型的寫法更像物件導向的語法。let z parent newparent zhang console.log z parent zhangwen class之間可以通過extends關鍵字實現繼承疑問子類如何覆蓋父類的值呢？繼承時如何修...

es6常用功能

es6常用功能

ES6的常用功能

ES6之Class的常用功能解讀

相關推薦