前端知識-ECMAScript 6

一、ECMAScript 6

1、什么是 ECMAScript 6

ECMAScript 6.0(簡稱 ES6)是 JavaScript 語言的下一代標準, 2015 年 6 月正式發(fā)布。它的目標,是使得 JavaScript 語言可以用來編寫復雜的大型應用程序,成為企業(yè)級開發(fā)語言。

2、ECMAScript 和 JavaScript 的關系

一個常見的問題是,ECMAScript 和 JavaScript 到底是什么關系?

要講清楚這個問題,需要回顧歷史。1996 年 11 月,JavaScript 的創(chuàng)造者 Netscape 公司,決定將 JavaScript 提交給標準化組織 ECMA,希望這種語言能夠成為國際標準。次年,ECMA 發(fā)布 262 號標準文件(ECMA-262)的第一版,規(guī)定了瀏覽器腳本語言的標準,并將這種語言稱為 ECMAScript,這個版本就是 1.0 版。

因此,ECMAScript 和 JavaScript 的關系是,前者是后者的規(guī)格,后者是前者的一種實現(xiàn)(另外的 ECMAScript 方言還有 Jscript 和 ActionScript)

二、基本語法

ES6相對之前的版本語法更嚴格,新增了面向對象的很多特性以及一些高級特性。本部分只學習項目開發(fā)中涉及到ES6的最少必要知識,方便項目開發(fā)中對代碼的理解。

1、let聲明變量

特性一:var 沒有局部作用域,let有局部作用域

// var 聲明的變量沒有局部作用域
// let 聲明的變量  有局部作用域
{
    var a = 0
    let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined

特性二:var 可以多次聲明 ,let 只能聲明一次

// var 可以聲明多次
// let 只能聲明一次
var m = 1
var m = 2
let n = 3
let n = 4  // Identifier 'n' has already been declared
console.log(m)  // 2
console.log(n) 

特性三:var 會變量提升 let 不存在變量提升

// var 會變量提升
// let 不存在變量提升
console.log(x)  //undefined
var x = 'apple'

console.log(y)  //ReferenceError: y is not defined
let y = 'banana'

注:

JavaScript 數(shù)據(jù)類型

值類型(基本類型):字符串(String)、數(shù)字(Number)、布爾(Boolean)、對空(Null)、未定義(Undefined)、Symbol。

引用數(shù)據(jù)類型:對象(Object)、數(shù)組(Array)、函數(shù)(Function)。

2、const聲明常量(只讀變量)

特性一:聲明之后不允許改變

// 
const PI = '3.1415926'
PI = 3  // TypeError: Assignment to constant variable.

特性二:一但聲明必須初始化,否則會報錯

const MY_AGE  // SyntaxError: Missing initializer in const declaration

3、解構賦值

快速對數(shù)組和對象中的屬性進行賦值

解構賦值是對賦值運算符的擴展。

他是一種針對數(shù)組或者對象進行模式匹配,然后對其中的變量進行賦值。

在代碼書寫上簡潔且易讀,語義更加清晰明了;也方便了復雜對象中數(shù)據(jù)字段獲取。

1、數(shù)組解構

let arr = [1, 2, 3]

// 傳統(tǒng)
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a, b, c)

// ES6
let [x, y, z] = arr
console.log(x, y, z)

2、對象解構

let user = {name: 'Helen', age: 18}
// 傳統(tǒng)
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } =  user//注意:解構的變量必須和user中的屬性同名
console.log(name, age)

4、模板字符串 (關鍵使用 ``)

模板字符串相當于加強版的字符串,用反引號 `,除了作為普通字符串,還可以用來定義多行字符串,還可以在字符串中加入變量和表達式。

// 字符串插入變量和表達式。變量名寫在 ${} 中,${} 中可以放入 JavaScript 表達式。
let name = 'Mike'
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.

//原樣輸出
let fun = `function(){
  console.log('hello')
}`
console.log(fun)

5、聲明對象簡寫

let age = 12
let name = 'Amy'

// 傳統(tǒng)
let person1 = {
    age: age, 
    name: name
}
console.log(person1)

// ES6
let person2 = {
    age, 
    name
}
console.log(person2) //{age: 12, name: 'Amy'}

6.定義方法簡寫

直接聲明方法名就可以不需要function了。

// 傳統(tǒng)
let person1 = {
    sayHi:function(){
        console.log('Hi')
    }
}
person1.sayHi();//'Hi'


// ES6
let person2 = {
    sayHi(){
        console.log('Hi')
    }
}
person2.sayHi()  //'Hi'

7、對象拓展運算符 (蠻重要的)

拓展運算符(...)用于取出參數(shù)對象所有可遍歷屬性然后拷貝到當前對象。

let person = {name: 'Amy', age: 15}
// let someone = person //引用賦值
let someone = { ...person } //對拷拷貝
someone.name = 'Helen' 
console.log(person)  //{name: 'Amy', age: 15}
console.log(someone)  //{name: 'Helen', age: 15}

8、函數(shù)的默認參數(shù)

函數(shù)在JavaScript中也是一種數(shù)據(jù)類型,JavaScript中沒有方法的重載

只有在未傳遞參數(shù),或者參數(shù)為 undefined 時,才會使用默認參數(shù)

function showInfo(name, age = 17) {
    console.log(name + "," + age)
}

// 只有在未傳遞參數(shù),或者參數(shù)為 undefined 時,才會使用默認參數(shù)
// null 值被認為是有效的值傳遞。
showInfo("Amy", 18)  // Amy,18
showInfo("Amy")     // Amy,17
showInfo("Amy", undefined) // Amy,17
showInfo("Amy", null)  // Amy, null

9、箭頭函數(shù)

箭頭函數(shù)提供了一種更加簡潔的函數(shù)書寫方式?;菊Z法是:

參數(shù) => 函數(shù)體
箭頭函數(shù)多用于匿名函數(shù)的定義

let arr = ["10", "5", "40", "25", "1000"]
arr.sort()
console.log(arr)

//上面的代碼沒有按照數(shù)值的大小對數(shù)字進行排序,
//要實現(xiàn)這一點,就必須使用一個排序函數(shù)
//若 a 小于 b,在排序后的數(shù)組中 a 應該出現(xiàn)在 b 之前,則返回一個小于 0 的值。
//若 a 等于 b,則返回 0。
//若 a 大于 b,則返回一個大于 0 的值。
arr.sort(function(a,b){
    return a - b
})
console.log(arr)

使用箭頭函數(shù)

//使用箭頭函數(shù)
arr2 = arr.sort((a,b) => {
    return a - b
})
// 當只有一行語句,并且需要返回結果時,可以省略 {} , 結果會自動返回。
//當只有一個參數(shù)時,可以不使用圓括號
arr2 = arr.sort((a,b) => a - b)
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • ECMAScript發(fā)展歷史 (1)ECMA-262 第1版:去除了對針對瀏覽器的特性,支持Unicode標準(多...
    congnie116閱讀 1,963評論 0 2
  • JavaScript基礎 概念 JavaScript是一門客戶端腳本語言 運行在客戶端瀏覽器中的,每一個瀏覽器都有...
    So_ProbuING閱讀 418評論 0 0
  • 本文轉發(fā)自github, 原文地址 <a name='js'>JavaScript</a> 介紹js的基本數(shù)據(jù)類型...
    XDUZ閱讀 1,153評論 1 11
  • 久違的晴天,家長會。 家長大會開好到教室時,離放學已經(jīng)沒多少時間了。班主任說已經(jīng)安排了三個家長分享經(jīng)驗。 放學鈴聲...
    飄雪兒5閱讀 7,788評論 16 22
  • 創(chuàng)業(yè)是很多人的夢想,多少人為了理想和不甘選擇了創(chuàng)業(yè)來實現(xiàn)自我價值,我就是其中一個。 創(chuàng)業(yè)后,我由女人變成了超人,什...
    亦寶寶閱讀 1,982評論 4 1

友情鏈接更多精彩內(nèi)容