ES6基本語法

Jeffrrey 發布于2019-08-23 14:49 / 948人閱讀

摘要：注意有些數據結構是在現有數據結構的基礎上計算生成的，比如的數組都部署了一下三個方法，調用后都返回遍歷器對象返回一個遍歷器對象，用于遍歷鍵名，鍵值組成的數組。

ES6是什么？

JavaScript的第六版，在ES5的基礎上增加了許多特性：箭頭函數、字符串插值、代理、生成器、結構賦值、塊級作用域等等。

一、let和const

1.作用：聲明變量

ES6中明確規定，如果區塊中存在let和const命令，則這個區塊對這些命令聲明的變量從一開始就形成封閉作用域。只要在聲明之前就使用這些變量，就會報錯（暫時性死區）。

2.let使用注意：

作用域只局限于當前代碼塊

使用let聲明的變量作用域不會被提升

在相同的作用域下不能聲明相同的變量

for循環體現let的父子作用域

3.const使用注意：

const聲明一個只讀的常量

只在當前代碼塊中有效

作用域不會被提升

不能重復聲明

聲明的常量必須賦值

二、解構賦值

1.基本用法

let [name, age, sex] = ["李四", 20, "女"];
console.log(name);  // 李四
console.log(age);  // 20
console.log(sex);  // 女

2.對象的結構賦值

let {
            name,
            age,
            friends,
            pet
        } = {
            name: "張三",
            age: 55,
            friends: ["lulu", "王五"],
            pet: {
                name: "土豆",
                age: 5
            }
        };
        console.log(name);  // 張三
        console.log(age);  // 55 
        console.log(friends);  // ["lulu", "王五"]
        console.log(pet);  // {name: "土豆", age: 5}

let {
            name: str
        } = {
            name: "張三"
        };
        console.log(name);  // 
        console.log(str);  // 張三

3.數組的解構賦值

let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
console.log(arr1, arr2, arr3, arr4, arr5);

// 1 2 3 4 5

let [arr1] = [];
console.log(arr1);

// undefined

let [a, , c] = [1, 2, 3];
console.log(a);   // 1
console.log(c);   // 3

4.基本類型的解構賦值

let [a, b, c, d, e] = "我是中國人";
console.log(a);  // 我 
console.log(b);  // 是
console.log(c);  // 中
console.log(d);  // 國
console.log(e);  // 人

三、數據集合-set

類似于數組，但是成員是唯一的，沒有重復。

1.創建一個集合

let set = new Set(["張三", "李四", "王五", "張三", "李四"]);

console.log(set); //{"張三", "李四", "王五"}
console.log(Array.from(set)); // ["張三", "李四", "王五"]

2.一個屬性

console.log(set.size); //3

3.四個方法

//add
console.log(set.add("劉德華").add("LHH"));
//{"張三", "李四", "王五", "劉德華", "LHH"}
console.log(set);
//{"張三", "李四", "王五", "劉德華", "LHH"}

//delete
console.log(set.delete("張三"));  // true
console.log(set.delete("李四"));  // true
console.log(set);

//has
console.log(set.has("張三"));  // true
console.log(set.has("張三1"));  // false

//clear
console.log(set.clear()); // undefined
console.log(set); // {}

4.keys values

console.log(set.keys());  // SetIterator {"張三", "李四", "王五"}
console.log(set.values());  // SetIterator {"張三", "李四", "王五"}

四、數據集合-map

類似于對象，也是鍵值對集合，但“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵.

1. 創建一個Map

let obj1 = {
                a: 1
            },
            obj2 = {
                b: 2
            };
const map = new Map([
            ["name", "張三"],
            ["age", 18],
            ["sex", "男"],
            [obj1, "今天天氣很好"],
            [obj2, "適合敲代碼"],
            [
                [1, 2], "hhh"
            ]
]);
console.log(map);
console.log(map.size);

2.set和get

map.set("friends", ["趙六", "力氣"]).set(["dog"], "小花");
console.log(map);
console.log(map.get("name"));
console.log(map.get(obj1));

3.delete

map.delete(obj1);
console.log(map.delete("xxxx"));
console.log(map);

4.has

console.log(map.has(obj1));  // true
console.log(map.has(obj2));  //true

5.clear

map.clear();
console.log(map);  // {}

6.keys() values() entries()

console.log(map);
console.log(map.keys());
console.log(map.values());
console.log(map.entries());

7.遍歷

map.forEach(function(value, index) {
      console.log(index + ":" + value);
})

8.注意事項

map.set({}, "呵呵呵呵呵");
map.set({}, "哈哈哈哈");

console.log(map);
console.log({} === {});

五、Symbol

1.定義

let str1 = Symbol();
let str2 = Symbol();

console.log(str1 === str2); // false
console.log(typeof str1);  // symbol
console.log(typeof str2);  // symbol

2.描述

let str3 = Symbol("name");
let str4 = Symbol("name");
console.log(str3);  // Symbol(name)
console.log(str4);  // Symbol(name)
console.log(str3 === str4); // false

3. 對象的屬性名

const obj = {};
obj.name = "張三";
obj.name = "李四";
obj[Symbol("name")] = "張三";
obj[Symbol("name")] = "李四";
let a = Symbol("aa");
let b = Symbol("bb");

obj[a] = "王五"
obj[b] = "kk"

console.log(obj);
console.log(Object.getOwnPropertySymbols(obj));   // 獲取指定對象的所有Symbol屬性名
console.log(Reflect.ownKeys(obj));  // 返回所有類型的鍵名，包括常規鍵名和Symbol鍵名

注意，Symbol函數前不能使用new命令，因為Symbol是一個原始類型的值，不是對象，所以也不能添加屬性。

4.Symbol.for() 和 Symbol.keyfor()

var s1 = Symbol.for("foo");
var s2 = Symbol.for("foo");

s1===s2;   // true

上面代碼中，s1和s2都是Symbol的值，但它們都是同樣參數的Symbol.for方法生成的，所有實際上是同一個值。

Symbol.for()與Symbol()這兩種寫法都會生成新的Symbol。它們的區別是，前者會被登記在全局環境中供搜索，而后者不會。Symbol.for()不會再每次調用時都返回一個新的Symbol類型的值，而是會先檢查給定的key是否已經存在，如果不存在才會新建一個值，比如，如果調用Symbol.for("cat")30次，每次都會返回同一個Symbol值，但是調用Symbol("cat")30次則會返回30個不同的Symbol值。

Symbol.keyFor()方法返回一個已登記的Symbol類型值得key

var s1 = Symbol.for("foo");
Symbol.keyFor(s1);  // "foo"

var s2 = Symbol("foo");
Symbol.keyFor(s2);  // undefined

注：Symbol.for為Symbol值登記的名字是全局環境的，可以在不同的iframe或service worker 中取到同一個值。

iframe = document.createElement("iframe");
iframe.src = String(window.location);
document.body.appendchild(iframe);

iframe.contentWindow.Symbol.for("foo") === Symbol.for("foo");  // true

六、class的基本運用

1.構造函數

function Person(name, age) {
     this.name = name;
     this.age = age;
 }

Person.prototype = {
     constructor: Person,
      print(){
            console.log("我叫" + this.name + ",今年" + this.age + "歲");
       }
 };
//或
//Person.prototype.print = function() {
  //    console.log("我叫" + this.name + ",今年" + this.age + "歲");
//}
let person = new Person("張三", 19);
console.log(person);
person.print();

2. 通過class面向對象

class Person {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }

      print() {
          console.log("我叫" + this.name + ",今年" + this.age + "歲");
      }
 }

let person = new Person("張三", 19);
console.log(person);
person.print();

3.class實現繼承

class Animal {
    //構造函數
    constructor(props) {
      this.name = props.name || "未知";
    }

    eat() {
      alert(this.name + "在吃東西...");
    }
  }

  //class繼承
  class Bird extends Animal {
    //構造函數
    constructor(props) {
      //調用實現父類的構造函數
      super(props);
      this.type = props.type || "未知";
    }

    fly() {
      alert(this.name + "在飛...");
    }
  }
  var myBird = new Bird({
    name: "鸚鵡"
  })
  myBird.eat()  // 鸚鵡在吃東西...
  myBird.fly()  // 鸚鵡在飛...

七、內置對象擴展

1. 模板字符串

let str = "適合敲代碼!";
let className = "test";
let html = `
                        
                        
                             今天的天氣很好!
                             ${str}
                        
                     `;
console.log(html);

2. 數組的擴展

Array.from

// 在body中寫了幾個li節點
let allLis = document.querySelectorAll("li");
console.log(allLis);   // NodeList(6) [li, li, li, li, li, li]
console.log(Array.isArray(allLis));  // false

console.log(Array.from(allLis));  // [li, li, li, li, li, li]
console.log(Array.isArray(Array.from(allLis)));  // true

Array.of

console.log(Array.of(1, 2, 3, 4));  // [1, 2, 3, 4]
console.log(Array.of("張三", "李四", "王五"));  // ["張三", "李四", "王五"]

3. 對象的擴展

key 和 value是一樣的,寫一個就夠了

let name = "張三";
let age = 18;
let person = {
            name,
            age
        };
console.log(person);  // {name: "張三", age: 18}

Object.assign()

let obj1 = {
         name: "張三"
        };
let obj2 = {
         age: 18
        };
 let obj3 = {
         sex: "男"
        };
let obj4 = {
        friends: "李四"
        };
let obj = {};
Object.assign(obj, obj1, obj2, obj3, obj4);
console.log(Object.assign(obj, obj1, obj2, obj3, obj4)); // {name: "張三", age: 18, sex: "男", friends: "李四"}
console.log(obj);  // {name: "張三", age: 18, sex: "男", friends: "李四"}

延展操作符

let str = "今天的天氣很好!";
let strArr = [...str];
console.log(strArr);  // ["今", "天", "的", "天", "氣", "很", "好", "!"]

let student = {
            name: "張三",
            age: 18,
            sex: "男"
        }

< Person {...student}/>

let myArr = [1, 2, 10, "張三", 20, 2, 1];
console.log(new Set(myArr));  // {1, 2, 10, "張三", 20}
console.log([...new Set(myArr)]);  // [1, 2, 10, "張三", 20]

八、函數的擴展

1. 形參設置默認值

function sum(num1 = 20, num2 = 10) {
        console.log(num1 + num2);
}

/* function sum(num1, num2) {
        num1 = num1 || 10;
        num2 = num2 || 10;
        console.log(num1 + num2);
} */

sum(10, 30);  // 40
sum();  // 30

2.參數形式延展操作符

function sum(name, sex, ...nums) {
       let result = 0;
       console.log(name);
       console.log(sex);
       for (let value of nums) {
           result += value;
       }
        return result;
 }

/* function sum() {
            let result = 0;
            for(let value of arguments){
                result += value;
            }
            return result;
} */

console.log(sum("張男", "男", 10, 20, 30, 50));  

// 張男 
// 男 
// 110

3.箭頭函數 () => {}

let sum = (num1, num2)=>{ return num1 + num2;};
console.log(sum(100, 300));  // 400

let nameArr = ["張三", "李四", "王五"];
        nameArr.forEach((value, index) => {
        console.log(index + ":" + value);
});

// 0:張三
// 1:李四
// 2:王五

this的指向不同

function demo() {
      setTimeout(function() {
            console.log(this);
      }, 500);

      setTimeout(() => {
            console.log(this);
      }, 1000);
}

let obj = {
     a: 1
};
demo.call(obj);
// Window 
// {a: 1}

箭頭函數的幾個注意事項：

函數體內的this對象就是定義時所在的對象，而不是使用時所在的對象；

不可以當作構造函數。也就是不可以使用new命令，否則報錯；

不可以使用arguments對象，該對象在函數體內不存在；可以rest參數代替（...參數）；

不可以使用yield命令，因此箭頭函數不能用作Generator函數；

九、Iterator遍歷器和for..of循環

Iterator作用：一是為各種數據結構提供統一的、簡便的訪問接口；二是使得數據結構的成員能夠按某種次序排列；三是ES6創建了一種新的遍歷命令——for...of循環，Iterator接口主要供for...of消費

模擬next方法返回值得例子：

    var it = makeIterator(["a", "b"]);
    console.log(it.next());  // {value: "a", done: false}
    console.log(it.next());  // {value: "b", done: false}
    console.log(it.next());  // {value: undefined, done: true}

    function makeIterator(array) {
        var nextIndex = 0;
        return {
            next: function() {
                return nextIndex < array.length ? {
                    value: array[nextIndex++],
                    done: false
                } : {
                    value: undefined,
                    done: true
                }
            }
        }
    }

具備Iterator接口的數據結構如下：

Array   Map    Set  String  TypedArray  函數的arguments對象   NodeList對象

下面例子是數組的Symbol.iterator屬性:

    let arr = ["a", "b", "c"];
    let iter = arr[Symbol.iterator]();
    console.log(iter.next());  // {value: "a", done: false}
    console.log(iter.next());  // {value: "b", done: false}
    console.log(iter.next());  // {value: "c", done: false}
    console.log(iter.next());  // {value: undefined, done: true}

注意：對象（Object）之所以沒有默認部署Iterator接口，是因為對象屬性的遍歷先后順序是不確定的。

for...of循環

一個數據結構只要部署了Symbol.iterator屬性，就被視為具有Iterator接口，就可以用for...of循環它的成員。
注意：有些數據結構是在現有數據結構的基礎上計算生成的，比如ES6的數組、Set、Map都部署了一下三個方法，調用后都返回遍歷器對象

entries()返回一個遍歷器對象，用于遍歷[鍵名，鍵值]組成的數組。對于數組，鍵名就是索引值；對于Set，鍵名與鍵值相同。Map結構的Iterator接口默認就是調用entries方法

keys()返回一個遍歷器對象，用于遍歷所有的鍵名

values()返回一個遍歷器對象，用于遍歷所有的鍵值

云服務器 GPU云服務器 js基本語法 java基本語法 javascript基本語法 java基本語法學習

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

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

ES6-前世今生（0）

摘要：更新了個版本，最新正式版是語言的下一代標準，早已在年月正式發布。基本不支持移動端瀏覽器對的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。 1、ECMAScript是什么？和 JavaScript 有著怎樣的關系？ 1996 年 11 月，Netscape 創造了javascript并將其提交給了標準化組織 ECMA，次年，ECMA 發布 262 號標準文件（ECMA-...

LeviDing 2019-08-26 13:41 評論0 收藏0
es6之解構賦值

摘要：的語法已經出了很長的時間了，在使用上也可以通過這類的編譯工具轉譯為瀏覽器可以識別的的語法，但是依舊有很多開發在寫代碼的時候，依舊沒有用的語法，而是習慣使用老的語法，這篇文章主要會介紹解構賦值基本用法以及在實際使用場景中相比語法的優勢，讓大家 es6的語法已經出了很長的時間了，在使用上也可以通過babel這類的編譯工具轉譯為瀏覽器可以識別的es5的語法，但是依舊有很多開發在寫代碼的時候，...

yeooo 2019-08-23 13:57 評論0 收藏0
ES6-開發環境搭建（1）

摘要：全局安裝本地安裝轉碼規則安裝完成后，我們可以看一下我們的文件，已經多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉為代碼。古語有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發環境，利用工具，把ES6的語法轉變成ES5的語法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評論0 收藏0
給React初學者的10分鐘ES6教程

摘要：但是在中，可以通過關鍵字來實現類的繼承的使用可以使得繼承意義更加明確并且值得一提的是，如果你使用來定義的組件，那么可以在類的構造器里面，用簡單的的聲明方式來替代方法。原文：The 10 min ES6 course for the beginner React Developer譯者：Jim Xiao 著名的80/20定律可以用來解釋React和ES6的關系。因為ES6增加了超過75...

Awbeci 2019-08-22 18:04 評論0 收藏0
[js高手之路] es6系列教程 - 新的類語法實戰選項卡

摘要：其實的面向對象很多原理和機制還是的，只不過把語法改成類似和老牌后端語言中的面向對象語法一用封裝一個基本的類是不是很向和中的類其實本質還是原型鏈，我們往下看就知道了首先說下語法規則中的就是類名，可以自定義就是構造函數，這個是關鍵字，當實例化對其實es6的面向對象很多原理和機制還是ES5的，只不過把語法改成類似php和java老牌后端語言中的面向對象語法. 一、用es6封裝一個基本的類 ...

yintaolaowanzi 2019-08-21 16:17 評論0 收藏0
webpack 項目構建：（二）ES6 編譯環境搭建

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

marser 2019-08-22 15:08 評論0 收藏0

發表評論

登陸后可評論

0條評論

Jeffrrey

男|高級講師

我要關注我要私信

TA的文章

微服務治理之如何優雅應對突發流量洪峰

閱讀 652·2021-11-24 09:39
阿里云選擇個人還是企業實名好?企業選擇個人認證有什么影響?

閱讀 3012·2021-11-23 10:06
喬治亞理工大學的研究人員創建了無線腦機接口

閱讀 981·2021-10-08 10:05
【Hello CSS】第三章-瀏覽器的視圖與坐標

閱讀 754·2019-08-30 10:49
debug：The key "" is not recognized and i

閱讀 1719·2019-08-29 14:08
初探flex布局

閱讀 1325·2019-08-29 12:48
cookie和localStorage那些事

閱讀 3320·2019-08-26 14:04
nginx解決跨域問題

閱讀 3613·2019-08-26 13:50

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！