ECMAScript6新語法有哪些

這篇“ECMAScript6新語法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“ECMAScript6新語法有哪些”文章吧。

一、前提：

ECMAScript6新語法

ECMAScript版本的新語法，不是所有瀏覽器都兼容，有些瀏覽器兼容局部

二、ECMAScript的新語法

1、變量定義

5版本：var 變量名：變量使用范圍不明確

<script>

  for (var i = 0; i < 10; i++) {

    console.log("in:"+i)

  }

  console.log("out:"+i);

</script>

6版本： let const:聲明變量

let 變量名 用于聲明局部變量 作用范圍：從定義行開始到所在代碼塊結束

<script>

  for (let i = 0; i < 10; i++) {

    console.log("in:"+i)

  }

  console.log("out:"+i);

</script>

const修飾的值不可變（相當于java中的final）

const修飾的對象地址不可以變，但是屬性可以變，可以修改屬性

  const  student={id:1,name:"王恒杰"}

  console.log(student);

  //const修飾的對象地址不可以變，但是屬性可以變，可以修改屬性

  student.id=2;

  console.log(student)

  //增加屬性age

  student.age=18;

  console.log(student)

2、箭頭函數

使用場景：匿名函數作為函數的參數

語法：()=>{}等價于function(){}簡化了function

5版本：函數 function xx(){}

6版本：箭頭函數

 //箭頭函數

  function test(func) {

    func(1);

  }

  //5版本：函數 function xx(){}

  test(function (i) {

      alert(i);

  })

  //6版本：箭頭函數 （）=>{函數體}

  test((i)=>{

    alert(i);

  })

注意：

(1)函數只有一個參數時，（）可以省略不寫，參數是多個或者沒有參數需要加上小括號

(2)函數體中只有一行代碼，{}也可以省略

(3)箭頭函數沒有自己的this,如果在箭頭函數中的this,代表當前vue對象，不代表當前函數

3、模板字符串 &mdash;&mdash;

在定義變量時 變量中包含html標簽可以使用

  //  模板字符串

  let html="<button @click='test1("+'name'+")'>點我</button>"

          +"<button @click='test1("+'name'+")'>點我</button>"

          +"<button @click='test1("+'name'+")'>點我</button>"

          +"<button @click='test1("+'name'+")'>點我</button>"

  console.log(html);

//模板字符串

  let  html1=&mdash;&mdash;<button @click='test1("+name+")'>點我</button>

             <button @click='test1("+name+")'>點我</button>

             <button @click='test1("+name+")'>點我</button>

             <button @click='test1("+name+")'>點我</button>&mdash;&mdash;;

  console.log(html1)

4、創建對象

//  定義對象

  let id=1;

  let name="王恒杰";

  let age=18;

  //5版本封裝對象

  let student={id:id,name:name,age:age};

  console.log(student);

  //6版本封裝對象

  var student2={id,name,age};

  console.log(student2)

以上就是關于“ECMAScript6新語法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。