ECMAScript新特性-創(chuàng)新互聯(lián)

代碼

創(chuàng)新互聯(lián)長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為長子企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作，長子網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。ECMAScript概述

ECMAScript 是腳本語言的標(biāo)準(zhǔn)化規(guī)范，也就是語言的語法。比如：怎樣定義變量、怎樣定義函數(shù)和邏輯運算等等。

那么ECMAScript 和 JavaScript 是何關(guān)系？
JavaScript 是ECMAScript 的擴展語言，JavaScript實現(xiàn)了ECMAScript。 比如在瀏覽器環(huán)境中 JavaScript 就是 ECMAScript 和 WebAPI的集合
在這里插入圖片描述
ES（ECMAScript）于1997年被提出，2015年后基本保持一個版本的迭代

名稱標(biāo)準(zhǔn)版本發(fā)布時間
ECMAScript2019（ES2019）102019年6月
ECMAScript2018（ES2018）92018年6月
ECMAScript2017（ES2017）82017年6月
ECMAScript2016（ES2016）72016年6月
ECMAScript2015（ES2015）62015年6月
ECMAScript5.1（ES5.1）5.12011年6月
ECMAScript5（ES5）52009年12月
ECMAScript4（ES4）4被放棄
ECMAScript3（ES3）31999年12月
ECMAScript2（ES2）21998年6月
ECMAScript1（ES1）11997年6月

ES2015 是最新ES標(biāo)準(zhǔn)比較典型的版本，主要在于

  • 相比ES5.1變化較大
  • 命名標(biāo)準(zhǔn)發(fā)生變化，按照年份命名

在有些書上或博客上對于ES6有兩種意思，一種是特指（ES2015）,另一種是泛指是指ES2015版本之后的所有版本。

ECMAScript新特性主要有以下內(nèi)容：

  • 解決原有語法上的的一些問題和不足 (var)
  • 對原有語法進行增強 （對象解構(gòu)）
  • 全新的對象、全新的方法、全新的功能（class、promsie）
  • 全新的數(shù)據(jù)類型和 數(shù)據(jù)結(jié)構(gòu)（Symbol）
let 與塊級作用域

作用域：某個成員能夠起作用的范圍。

在ES2015之前，ES只有兩種作用域：

  • 全局作用域
  • 函數(shù)作用域

在ES2015后，又增加了塊級作用域。塊級作用域：使用{} 中間的作用域。

在ES2015前沒塊級作用域作用域的概念，在{} 內(nèi)容使用var 定義的變量，在{}外也可以訪問，這樣對于復(fù)雜代碼是非常不安全的。

if(true) {
    var foo_1 = "foo_1"
}
console.log(foo_1)        // foo_1

在塊作用域內(nèi)使用let 聲明變量，在{} 外部是不可以訪問的：

if(true) {
    let foo_2 = "foo_2"
}
// ReferenceError: foo_2 is not defined
console.log(foo_2)

在for 循環(huán)中會有會有兩層嵌套的塊級作用域，函數(shù)體中的作用域是嵌套在for 循環(huán)內(nèi)部的單獨的作用域

for(let i = 0;i< 3; i++) {
    let i = "foo_3"
    console.log(i)
}

上邊代碼我們可以簡單的理解為下面：

let i = 0;
if(i< 3) {
    let i = "foo_3" 
    console.log(i)
}
i++
if(i< 3) {
    let i = "foo_3" 
    console.log(i)
}
i++

if(i< 3) {
    let i = "foo_3" 
    console.log(i)
}
i++

let 聲明的變量不會變量提升，所以在使用之前必須先聲明

console.log(foo_4)
var foo_4 = "foo_4"

console.log(foo_5)
let foo_5 = "foo_5"

為啥ES2015不把var 廢掉？
因為考慮到兼容，原來很多項目還在使用var

const

用于生成只讀屬性。 聲明之時，就要賦值；聲明之后，不可修改內(nèi)存指向

const foo_6 = "foo_6"
const foo_7 = {
    name: "hyb",
    age: 18
}

foo_7.name = "hsf";
// TypeError: Assignment to constant variable.
// foo_7 = {}

var、let 、const 使用指南？
不用var; 主用const; 輔用let

數(shù)組解構(gòu)

當(dāng)我們獲取數(shù)組元素時，通常情況下通過下標(biāo)獲取

const arr = [100, 200, 300];
const firstObj = arr[0];
const secondObj = arr[1];

ES2015后我們可以通過數(shù)組解構(gòu)獲取元素。

const [arrFirst, arrSecond] = arr;

我們可以，獲取指定位置的元素，剩余元素、和若獲取元素為空時設(shè)置默認(rèn)值

// 前面位置留空格
const [, arrSecond] = arr;

// 剩余元素
const [arrFirst, arrSecond2, ...rest] = arr;

// 默認(rèn)值
const [arrFirst1,arrSecond3, arrThird, arrFour = 2] = arr;

console.log(arrSecond, rest ,arrFour)
對象解構(gòu)

數(shù)組時根據(jù)索引位置進行解構(gòu)， 對象要根據(jù)key值進行解構(gòu)

const obj1 = {
    name: "hsf"
}

const name = "hyb";
// 如果我們提前已經(jīng)定一個一個name 變量，肯定會沖突，那么起別名 和若解構(gòu)出來為null, 設(shè)置默認(rèn)值
const { name:nameAlias = "foo" , age = 2} = obj1;

console.log(nameAlias, age);
模版字符串

在ES2016之前字符串換行和拼裝字符串時

const name  = "sanfen_hu"
const age = 18

// 換行
console.log(`fwfewfw\nwfee`)

// 拼接
let info1 = "my name is " + name + ",age is " + age + "."
console.log(info1)

ES2016后可以這樣寫

console.log(`fwfewfw
wfee`)

const info2 = `my name is ${name}, age is ${age}`;
console.log(info2)

在差值中我們可以寫一些簡單的邏輯

const value = 50;
const info3 = `average value is ${ 50< 60 ? 60 : value }`;
console.log(info3)

模版字符串標(biāo)簽函數(shù)
給模版字符串添加標(biāo)簽，標(biāo)簽其實就是一個函數(shù)，添加標(biāo)簽后，函數(shù)也會被執(zhí)行，函數(shù)的第一個參數(shù)是分割后非模版變量切割后的數(shù)組，后面參數(shù)就是模版變量

// 會將字符串在插值處砍斷，封裝成數(shù)組
function tagFunction(string, name, age){
    return "fefe";
}

const tagTemplate = tagFunction`my name is ${name},age is ${age}.`
console.log(tagTemplate)
字符串?dāng)U展的幾個函數(shù)
  • includes 判斷一個字符串是否包含另一個字符串
    相比與indexOf ，從語義化角度講includes更好，但是不能獲取到索引下標(biāo)
  • startsWith 檢測字符串是否以指定的子字符串開始
  • endsWith 檢測字符串是否以指定的子字符串結(jié)束
let foo = "sanfeng_hu"

console.log(foo.includes("feng"))
console.log(foo.indexOf("3feng"))

console.log(foo.startsWith("sanfeng"))
console.log(foo.endsWith("hu"))
箭頭函數(shù)

一個參數(shù)時，可以不用(), 函數(shù)體是單行時，可以不使用{},默認(rèn)函數(shù)返回值就是當(dāng)前表達式，當(dāng)多條表達市時，要加{},需手動返回返回值。

參考資料ecma
  • ES新特性圖
  • ecma

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

本文題目：ECMAScript新特性-創(chuàng)新互聯(lián)
文章位置：http://bm7419.com/article6/cecsog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、服務(wù)器托管、商城網(wǎng)站、建站公司、移動網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計