es6常用的使用

wuyangnju 發(fā)布于2019-08-22 16:42 / 442人閱讀

摘要：使用定義常量應(yīng)該注意，的作用域與命令相同只在聲明所在的塊級(jí)作用域內(nèi)有效。，命令聲明的常量也是不提升，同樣存在暫時(shí)性死區(qū)，只能在聲明的位置后面使用。使用的時(shí)候，也是直接對(duì)類使用命令，跟構(gòu)造函數(shù)的用法完全一致。執(zhí)行父級(jí)的構(gòu)造函數(shù)。

一，let塊級(jí)作用域

由于js的歷史原因。javascript里的es6規(guī)范之前，只要函數(shù)作用域。當(dāng)寫一些大型的項(xiàng)目代碼中，很容易產(chǎn)生全局變量，例如：

點(diǎn)擊每個(gè)按鈕，都結(jié)果都是4；

0,1,2,3
當(dāng)使用let定義變量的時(shí)候。點(diǎn)擊每個(gè)按鈕，都結(jié)果顯示的都是對(duì)應(yīng)的i值。

現(xiàn)在我們可以使用let 定義塊級(jí)變量。只在代碼塊{}內(nèi)生效；
如：

彈1

報(bào)錯(cuò)

使用塊級(jí)應(yīng)該注意：
1.塊級(jí)作用域

for(var i = 0; i < 10; i++){}
console.log(i); //10

for(let j = 0; j < 10; j++){}
console.log(j); //"ReferenceError: j is not defined

2.不存在變量提升
會(huì)報(bào)錯(cuò)，ReferenceError

console.log(a); // 輸出undefined
console.log(b); // 報(bào)錯(cuò)ReferenceError
console.log(c); // 報(bào)錯(cuò)ReferenceError
var a = 2;
let b = 2;

3.暫時(shí)性死區(qū)(TDZ)
只要進(jìn)入當(dāng)前塊級(jí)作用域，所使用的變量已經(jīng)存在了，但在聲明之前都屬于死區(qū)，不可進(jìn)行操作。

typeof x; // ReferenceError
typeof y  // undefined
let x;

4.不允許重復(fù)聲明

let x = 1;
let x; // "SyntaxError: Identifier "x" has already been declared

var y = 2;
var y = 3; // y = 3

5.聲明的全局變量不再是window的屬性

"use strict";
var a = 1;
console.log(window.a) // 1
let b = 1;
console.log(window.b) // undefined

二，const定義常量

const聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能改變

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代碼表明改變常量的值會(huì)報(bào)錯(cuò)。

const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

const foo;
// SyntaxError: Missing initializer in const declaration

使用const定義常量應(yīng)該注意：

1，const的作用域與let命令相同：只在聲明所在的塊級(jí)作用域內(nèi)有效。
2，const命令聲明的常量也是不提升，同樣存在暫時(shí)性死區(qū)，只能在聲明的位置后面使用。
3，const聲明的常量，也與let一樣不可重復(fù)聲明。

const本質(zhì)：
const實(shí)際上保證的并不是變量值不得改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址不得改變。對(duì)于簡(jiǎn)單類型的數(shù)據(jù)（數(shù)值，字符串，布爾值），值就是指向的那個(gè)內(nèi)存地址，因此等同于常量。但是對(duì)于復(fù)合類型的數(shù)據(jù)（注意是對(duì)象和數(shù)組），變量指向的是內(nèi)存地址，保存的只是一個(gè)指針，const只能保證這個(gè)指針是固定的，至于他指向的數(shù)據(jù)機(jī)構(gòu)是不是可變的，就不能控制了，因此，將一個(gè)對(duì)象聲明為常量是非常小心的。

const foo = {};

// 為 foo 添加一個(gè)屬性，可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個(gè)對(duì)象，就會(huì)報(bào)錯(cuò)
foo = {}; // TypeError: "foo" is read-only

上面代碼中，常量foo儲(chǔ)存的是一個(gè)地址，這個(gè)地址指向一個(gè)對(duì)象。不可變的只是這個(gè)地址，即不能把foo指向另一個(gè)地址，但對(duì)象本身是可變的，所以依然可以為其添加新屬性。

下面是另一個(gè)例子。

const a = [];
a.push("Hello"); // 可執(zhí)行
a.length = 0;    // 可執(zhí)行
a = ["Dave"];    // 報(bào)錯(cuò)
上面代碼中，常量a是一個(gè)數(shù)組，這個(gè)數(shù)組本身是可寫的，但是如果將另一個(gè)數(shù)組賦值給a，就會(huì)報(bào)錯(cuò)。

ES6 聲明變量的六種方法
ES5 只有兩種聲明變量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章節(jié)還會(huì)提到，另外兩種聲明變量的方法：import命令和class命令。所以，ES6 一共有 6 種聲明變量的方法。

三，函數(shù)參數(shù)擴(kuò)展

rest 參數(shù)
ES6 引入 rest 參數(shù)（形式為...變量名），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了。rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

注意在es6中rest參數(shù)只可以是形參的最后一位參數(shù)。不然會(huì)報(bào)錯(cuò)

四，箭頭函數(shù)：

之前我們定義一個(gè)函數(shù)是這樣的：

let add=function () {
    alert(123)
}
add()

現(xiàn)在我們可以改成箭頭函數(shù)

let ale=()=>{alert(234)}
ale()
改成箭頭函數(shù)無非就是把代碼簡(jiǎn)寫了，應(yīng)該注意一下三點(diǎn)：
1，把普通函數(shù)的function換成=>.
2，如果只有一個(gè)參數(shù)，那么（）可省略不寫。
2，如果只有一個(gè)return 那么{}可省略不寫。
例如：

四，變量的解構(gòu)賦值

1，數(shù)組的解構(gòu)賦值
基本用法
ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。
以前，為變量賦值，只能直接指定值。

let a=1
let b=2
let c=3

ES6 允許寫成下面這樣。

let [a, b, c] = [1, 2, 3];

上面代碼表示，可以從數(shù)組中提取值，按照對(duì)應(yīng)位置，對(duì)變量賦值。

本質(zhì)上，這種寫法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。下面是一些使用嵌套數(shù)組進(jìn)行解構(gòu)的例子

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ["a"];
x // "a"
y // undefined
z // []

如果解構(gòu)不成功，變量的值就等于undefined。以下兩種情況都屬于解構(gòu)不成功，foo的值都會(huì)等于undefined。

let [foo] = [];
let [bar, foo] = [1];

五，數(shù)組

es6中數(shù)組有常用的四個(gè)方法依次是：
map ----映射一個(gè)對(duì)一個(gè)
reduce -----匯總一堆出來一個(gè)
filter -----過濾器
forEach -----循環(huán)（迭代）
1.map用法

也可改成箭頭函數(shù)

循環(huán)數(shù)組，每次都乘2倍，并返回新數(shù)組

2.reduce

let arr=[2,14,31,1,4,3]
arr.reduce(function(a,b,c){
    alert(a+","+b+","+c)
})

先看彈什么結(jié)果，依次是

先看結(jié)果。明顯 c參數(shù)是下標(biāo)index，但是有不是0開始。

    b是當(dāng)前的數(shù)。
    其實(shí)a就是最終結(jié)果，把上一次算好的數(shù)當(dāng)成了這次的中間結(jié)果。
    
    
    
    
let arr=[2,14,31,1,4,3]
let result=arr.reduce(function(tmp,item,index){
    return tmp+item
})
alert(result)

這就是求和的方式

reduce 流程圖

求平均數(shù)

let arr=[2,14,31,1,4,3]
let result=arr.reduce(function(tmp,item,index){
    if(index !=arr.length-1){
//不是最后一項(xiàng)
        return tmp+item
    }else{
        //最后一項(xiàng)
        return (tmp+item)/arr.length
    }
})
alert(result)

3.filter 過濾器留下符合條件的一部分；
通過filter里面的function里返回的true和false判斷留或者不留。

let arr=[2,14,31,1,4,3]

 let arr2=arr.filter(()=>{
 return true
 })
alert(arr2)
//[2,14,31,1,4,3]

因?yàn)榉祷氐膖rue所以都留下了

let arr=[2,14,31,1,4,3]

 let arr2=arr.filter(()=>{
 return false
 })
alert(arr2)
// [ ]

因?yàn)榉祷氐膄alse所以都不留下

下面的取可以被3整除的數(shù)

let arr=[2,14,33,1,4,3,66]

let arr2=arr.filter((item)=>{
 if(item%3==0){
     return true
 }else{
     return false
 }
})
alert(arr2)
//33,3,66

由于item%3==0本身就是布爾值，所以直接可以return這個(gè)，即就可以返回符合條件的數(shù)。

所以可以寫成，

let arr=[2,14,33,1,4,3,66]

let arr2=arr.filter((item)=>{
 return item%3==0
})
alert(arr2)
//33,3,66

還可以簡(jiǎn)寫成箭頭函數(shù)

let arr=[2,14,33,1,4,3,66]

let arr2=arr.filter(item=>item%3==0)
alert(arr2)
//33,3,66

4.forEach 就是普通的循環(huán)，無法就是寫法簡(jiǎn)單一些，

   let arr=[2,14,33,1,4,3,66]

   arr.forEach(item=>{
       alert(item)
   })

它第二個(gè)參數(shù)是可選的，是index

   
   let arr=[2,14,33]

arr.forEach((item,index)=>{
    alert(index+":"+item)
})
//0:2
//1:14
//2:33

六.字符串

(一)：
1.includes()：返回布爾值，表示是否找到了參數(shù)字符串。
2.startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
3.endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。

includes()用法

let s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

startsWith()用法

      let str="git.baidu.com"
      switch(true)
      {
          case str.startsWith("www."):
          console.log("www網(wǎng)址")
              break;
          case str.startsWith("git."):
          console.log("git網(wǎng)址") 
              break;
          default:
         console.log("其他網(wǎng)址")
      }

endsWith()用法

      let str="1.jpg"
      switch(true)
      {
          case str.endsWith("txt"):
          console.log("txt文件")
              break;
          case str.endsWith("jpg"):
          console.log("jpg文件") 
              break;
          default:
         console.log("其他網(wǎng)址")
      }

（二）：模板字符串（返單引號(hào)`）

$("#result").append(
  "There are " + basket.count + " " +
  "items in your basket, " +
  "" + basket.onSale +
  " are on sale!"
);

大括號(hào)內(nèi)部可以放入任意的 JavaScript 表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對(duì)象屬性。

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中還能調(diào)用函數(shù)。

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

七.class

JavaScript 語言中，生成實(shí)例對(duì)象的傳統(tǒng)方法是通過構(gòu)造函數(shù)。下面是一個(gè)例子。

function Point(x, y) {
  this.x = x;
  this.y = y;
  console.log(this,12)
}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
};

var p = new Point(1, 2);
console.log(typeof p.toString())

其不好的地方就是，構(gòu)造函數(shù)和類混為一談了，別的語言（java）中構(gòu)造函數(shù)就是構(gòu)造函數(shù)，類就是類。
而且代碼寫了兩塊，方法通過prototype添加。還有就是這個(gè)是es6之前的方式生成對(duì)象。es6之前的js里中是沒有類的概念的，這些方式都是東拼西湊的。

寫到這里，可以暫時(shí)回顧一下es6之前的創(chuàng)造對(duì)象的時(shí)候 new 關(guān)鍵字都做了什么。

要?jiǎng)?chuàng)建 Person 的新實(shí)例，必須使用 new 操作符。以這種方式調(diào)用構(gòu)造函數(shù)實(shí)際上會(huì)經(jīng)歷以下 4
個(gè)步驟：
(1) 創(chuàng)建一個(gè)新對(duì)象；
(2) 將構(gòu)造函數(shù)的作用域賦給新對(duì)象（因此 this 就指向了這個(gè)新對(duì)象）；
(3) 執(zhí)行構(gòu)造函數(shù)中的代碼（為這個(gè)新對(duì)象添加屬性）；
(4) 返回新對(duì)象。

new 操作符
在有上面的基礎(chǔ)概念的介紹之后，在加上new操作符，我們就能完成傳統(tǒng)面向?qū)ο蟮腸lass + new的方式創(chuàng)建對(duì)象，在JavaScript中，我們將這類方式成為Pseudoclassical。
基于上面的例子，我們執(zhí)行如下代碼

var obj = new Base();

new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單，就干了三件事情。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

第一行，我們創(chuàng)建了一個(gè)空對(duì)象obj
第二行，我們將這個(gè)空對(duì)象的__proto__成員指向了Base函數(shù)對(duì)象prototype成員對(duì)象
第三行，我們將Base函數(shù)對(duì)象的this指針替換成obj，然后再調(diào)用Base函數(shù)，于是我們就給obj對(duì)象賦值了一個(gè)id成員變量，這個(gè)成員變量的值是”base”，關(guān)于call函數(shù)的用法。

如果我們給Base.prototype的對(duì)象添加一些函數(shù)會(huì)有什么效果呢？
例如代碼如下：

Base.prototype.toString = function() {
    return this.id;
}

那么當(dāng)我們使用new創(chuàng)建一個(gè)新對(duì)象的時(shí)候，根據(jù)__proto__的特性，toString這個(gè)方法也可以做新對(duì)象的方法被訪問到。于是我們看到了構(gòu)造子中，我們來設(shè)置‘類’的成員變量（例如：例子中的id），構(gòu)造子對(duì)象prototype中我們來設(shè)置‘類’的公共方法。于是通過函數(shù)對(duì)象和Javascript特有的__proto__與prototype成員及new操作符，模擬出類和類實(shí)例化的效果。

現(xiàn)在的es6中創(chuàng)作對(duì)象的方式就及其簡(jiǎn)單。

class Point {
    constructor (x,y){
        this.x=x;
        this.y=y
    }

    tostring (){
        return "(" + this.x + ", " + this.y + ")";
    }
}
let a=new Point(2,3)
alert(typeof a.tostring()) //string

上面代碼定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而且this關(guān)鍵字則代表實(shí)例對(duì)象，也就是說，es5的構(gòu)造函數(shù)Point，對(duì)應(yīng)es6的point類的構(gòu)造方法。

point類除了構(gòu)造方法，還定義了一個(gè)tostring方法。注意，定義’類‘的方法時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字，直接把函數(shù)定義進(jìn)去級(jí)可以了。類外，方法之間不需要逗號(hào)分隔，加上會(huì)報(bào)錯(cuò)。

ES6 的類，完全可以看作構(gòu)造函數(shù)的另一種寫法。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代碼表明，類的數(shù)據(jù)類型就是函數(shù)，類本身就指向構(gòu)造函數(shù)。
使用的時(shí)候，也是直接對(duì)類使用new命令，跟構(gòu)造函數(shù)的用法完全一致。

class Bar {
  doStuff() {
    console.log("stuff");
  }
}

var b = new Bar();
b.doStuff() // "stuff"

構(gòu)造函數(shù)的prototype屬性，在 ES6 的“類”上面繼續(xù)存在。事實(shí)上，類的所有方法都定義在類的prototype屬性上面。

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

在類的實(shí)例上面調(diào)用方法，其實(shí)就是調(diào)用原型上的方法。

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

上面代碼中，b是B類的實(shí)例，它的constructor方法就是B類原型的constructor方法。

由于類的方法都定義在prototype對(duì)象上面，所以類的新方法可以添加在prototype對(duì)象上面。Object.assign方法可以很方便地一次向類添加多個(gè)方法。

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

prototype對(duì)象的constructor屬性，直接指向“類”的本身，這與 ES5 的行為是一致的。

Point.prototype.constructor === Point // true

另外，類的內(nèi)部所有定義的方法，都是不可枚舉的（non-enumerable）。

七，面相對(duì)象

 //es5中通過構(gòu)造函數(shù)創(chuàng)建對(duì)象
function User (name,password){
    this.name=name;
    this.password=password;
    console.log(this)
}

User.prototype.showname = function(){
    alert(this.name)
}
User.prototype.showpass = function(){
    alert(this.password)
}

var user=new User("lee","123")
user.showname()
user.showpass()

// 之前的面相對(duì)象缺點(diǎn)：
// 1，類和構(gòu)造函數(shù)混為一談了。
// 2.方法添加到類（構(gòu)造函數(shù)）外面。

es6中創(chuàng)建對(duì)象

// es6
    class User { //User是類
        constructor(name,password){ //constructor是構(gòu)造函數(shù)
            this.name=name;
            this.password=password
        }
        //方法寫在類里面，而且必須不能有function，多個(gè)方法之間不能有‘，’
        showname(){
            alert(this.name)
        },
        showpass(){
            alert(this.password)
        }
    }
    var user = new User ("wang","1234")
    user.showname()
    user.showpass()

繼承：
es5中的繼承：

// 繼承es5

        function User (name,password){
            this.name=name;
            this.password=password
        }
        User.prototype.showname=function(){
            alert(this.name)
        }
        User.prototype.showpass=function(){
            alert(this.password)
        }
        function Vipuser(name,password,level){
            User.call(this,name,password)
            this.level=level
        }
        Vipuser.prototype=new User() //先new一下
        Vipuser.prototype.constructor=Vipuser;//在補(bǔ)一下constructor，因?yàn)閏onstructor亂了
        Vipuser.prototype.showlevel=function(){
            alert(this.level)
        }
        var vipuser=new Vipuser("LV","2323",8)
        vipuser.showname()
        vipuser.showpass()
        vipuser.showlevel()

es6中的繼承

    // 繼承es6
    class User{
        constructor(name,password){
            this.name=name;
            this.password=password;
        }
        showname(){
            alert(this.name)
        }
        showpass(){
            alert(this.password)
        }
    }
    class Vipuser extends User {
        constructor(name,password,level){
            super(name,password)//super，超類，父類。執(zhí)行父級(jí)的構(gòu)造函數(shù)。繼承父級(jí)的屬性，相當(dāng)于es5繼承中的User.call(this,name,password)
            this.level=level
        }
        showlevel(){
            alert(this.level)
        }
    }
    var vipuser=new Vipuser("dawang","123",9)
    vipuser.showname()
    vipuser.showpass()
    vipuser.showlevel()