ES6新語法(二)

haobowd 發布于2019-08-23 14:12 / 781人閱讀

摘要：昨天向大家介紹了的一部分新語法，今天我將把剩下我所知道的新語法都寫到這里插值表達式之前多行字符串我是寫多行字符串會語法報錯我是正確，并能按格式輸出這個書寫方式很像的三引號，不知道小伙伴們想起來了沒。

昨天向大家介紹了ES6的一部分新語法，今天我將把剩下我所知道的新語法都寫到這里

插值表達式

//之前
var name="jim"
var age=23

var say="name:"+name+"age:"+age

//es6
var say="name:${name}age:${age}"

多行字符串

let str="

      我是jim

"        //寫多行字符串會語法報錯

//es6
let str=`

      我是jim

`    //正確，并能按格式輸出

這個書寫方式很像python的三引號，不知道小伙伴們想起來了沒。

this

//普通函數
document.onclick=function fn(){
    console.log(this)
}    //點擊頁面出現:#document    this指向調用者    

//對象
var obj={
    x:1,
    y:2,
    sum(){
        console.log(this)    //{x: 1, y: 2, sum: ?}
        return this.x+this.y    //不加this會找不到x,y，可見this和上面作用相同
    }
}
console.log(obj.sum())

//箭頭函數
document.onclick=()=>console.log(this)  //Window

為普通函數固定this,如第一個例子
let obj={
    name:"jim"
}
fn=fn.bind(obj)
fn()    //{name: "jim"}    this指向了obj

this的指向對于普通函數指向了調用它的對象，對于箭頭函數指向了所處大環境，對于對象指向其本身

Promise:同步操作解決異步之痛

#對于以前我們一個頁面要處理好幾個ajax請求可能需要按照步驟一步步來操作，而現在，我們有了Promise,看看具體怎么操作吧
let p=new Promise({
    (resolve,reject)=>{
      $.ajax({
        url:request url,
        success(data){
          resolve(data)
        },
        error(err){
          reject(err)
        }
      })
    }
  })
  p.then((data)=>{},(err)=>{})    //then用來最后處理數據

Promise.all([
    $.ajax(),
    $.ajax(),
    $.ajax(),
]).then(data=>{},err=>{})    //批次處理，其data是一個數據數組，有需求可以通過解構然后處理

async/await

async function fn(){
    console.log("1")
    let v=await 2    //后面跟同步操作是不等待的
    console.log(v)
}
fn()    //1
2

async function fn(){
    console.log("1")
    let v=await $.ajax("a.txt")    //$.ajax就是一個Promise
    console.log(v)    //輸出ajax獲取數據
}
fn()

我們可以通過async/await+Promise做異步處理,減少傳統的開發難度。

GPU云服務器云服務器 es6新特性 es6的新特性新語法 let新語法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100259.html

[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數參數默認值在傳統語法中如果想設置函數默認值一般我們采用判斷的形式在新的語法中我們可以在參數聲明的同時賦予默認值參數本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》本篇文章是對之前文章...

hidogs 2019-08-23 14:07 評論0 收藏0
webpack 項目構建：（二）ES6 編譯環境搭建

摘要：本質就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結果一系列轉換生成目標代碼的將目標代碼的轉換成代碼。項目構建三開發環境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構建：（一）基本架構搭建我們搭建了一個最基本的 webpack 項目，現...

marser 2019-08-22 15:08 評論0 收藏0
JavaScript數組去重—ES6的兩種方式

摘要：數組的方法方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。可選，執行函數時的值。刪除所有的鍵值對，沒有返回值。返回一個布爾值，表示某個鍵是否在當前對象之中。說明 JavaScript數組去重這個問題，經常出現在面試題中，以前也寫過一篇數組去重的文章，（JavaScript 數組去重的多種方法原理詳解）但感覺代碼還是有點不夠簡單，今天和大家再說兩種方法，代碼...

FrancisSoung 2019-08-21 17:26 評論0 收藏0
JavaScript數組去重—ES6的兩種方式

摘要：數組的方法方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。可選，執行函數時的值。刪除所有的鍵值對，沒有返回值。返回一個布爾值，表示某個鍵是否在當前對象之中。說明 JavaScript數組去重這個問題，經常出現在面試題中，以前也寫過一篇數組去重的文章，（JavaScript 數組去重的多種方法原理詳解）但感覺代碼還是有點不夠簡單，今天和大家再說兩種方法，代碼...

lijinke666 2019-08-01 17:57 評論0 收藏0