1. 程式人生 > >ES6新增的一些特性

ES6新增的一些特性

mbo you let 構造 結構 繼承 才會 clas 塊級作用域

1、let關鍵字,用來代替 var的關鍵字,特點: 1、變量不允許被重復定義 2、不會進行變量聲明提升 3、保留塊級作用域中i的

2、const定義常量,特點:1、常量值不允許被改變 2、不會進行變量聲明提升

3、箭頭函數

  與普通函數的區別:1、書寫上用=>代替了function

         2、普通函數的this指向window 而ES6箭頭函數裏面的this指向定義時的那個對象 而不是運行時的那個對象

//普通函數
var
test = function(x){ return x+2; } 使用箭頭函數: var test = x=>x+2;

4、字符串模板``

ES6中允許使用反引號 ` 來創建字符串,此種方法創建的字符串裏面可以包含由美元符號加花括號包裹的變量${vraible}。看一下實例就會明白了:

//產生一個隨機數
let num = Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);

5、ES6中字符串和數組新增了那些方法

字符串
1、字符串模板
2、includes
3、startswith
4、endsWith 等
數組
1、Array.of
2、Array.from 等


將偽數組轉為數組: var list = Array.from(document.getElementsByTagName("li"));

6、第七種數據類型Symbol

var s1 = Symbol();
var s2 = Symbol();
var s3 = Symbol("abc"); var s4 = Symbol("abc")
s1不等於s2 s3不等於s4
Symbol函數會生成一個唯一的值 可以理解為Symbol類型跟字符串是接近的 但每次生成唯一的值,也就是每次都不相等,至於它等於多少,並不重要 這對於一些字典變量,比較有用

7、ES6中set集合和Map集合

set:
  set是ES6提供的一種新的數據結構,類似於數組,但是成員的值是唯一的沒有重復的,接受的參數是一個數組方法有:
  add():添加
  delete():刪除
  size:長度
  has():查找
  clear:清除所有
map:
  map類似於對象,也是鍵值對的集合, 但是“鍵”的範圍不限於字符串,各種類型的值(包括對象)都可以當作鍵方法有:
  set():設置
  get():獲取
  
delete():刪除   has():查找   clear():清除所有

8、Promise規範

1、什麽是promise?
  異步操作的同步代碼
2、promise的基本使用
  通過new promise創建一個promise對象,裏面有一個參數,參數是一個回調函數,回調函數中有2個參數,resolve,reject resolve()當
  異步執行成功的時候調用的方法,reject()當異步失敗的時候調用的方法。
  除此之外promise有一個then方法,當成功的時候執行第一個回調函數,當失敗的時候執行第二個回調函數。第二個回調函數也可以通過
  promise對象.catch調用
3、Promise.all():當所有的異步代碼都執行完畢以後才會執行.then中的操作
4、Promise.race():只要有一個promise執行完畢後就會執行.then操作

5、如何實現多個異步同步執行
var p1 = new Promise(function(resolve,reject){
  setTimeout(function(){
     console.log(‘1‘);
     resolve()
  },3000)
})
function p2(){
   return new Promise(function(resolve,reject){
    setTimeout(function(){
      console.log("2");
      resolve();
    },2000)
   })
}
function p3(){
  return new Promise(function(resolve,reject){
    setTimeout(function(){
       console.log("3");
       resolve();
    },1000)
  })
}
function p4(){
  return new Promise(function(resolve,reject){
     setTimeout(function(){
        console.log("4");
        resolve();
      },500)
  })
}
p1.then(function(){
  return p2()
})
.then(function(){
  return p3();
})
.then(function(){
  return p4();
})

9、類的支持

  ES6中添加了對類的支持,引入了class關鍵字。JS本身就是面向對象,ES6中提供的類實際上只是JS原型模式包裝。現在有了class,對象的創建,繼承更直觀,父類方法的調用,實例化,靜態方法和構造函數更加形象化。

以前編寫一個構造函數(類)
function Pad(color){
this.color = color;
}
現在的寫法跟Java更接近了
class Iphone{
constructor(color, size){
this.color = color;
this.size = size;
}
playgame(){
//.............
}
toString(){
return `這臺手機的顏色是${this.color} 屏幕大小是${this.size}`;
}
}
我們定義了一個類,名字叫Iphone
通過類生成一個實例:
var iphone = new Iphone("白色", 5);

其中constructor被稱之為構造方法,在我們new 一個對象的時候,自動被調用
不過本質上,JS依然使用了原型來實現,也就是說,這不過是一個新的寫法而已 跟以前的構造函數沒有區別。
要註意的是,使用了class來定義類,必須先定義再使用

ES6新增的一些特性