ES6 - 學(xué)習(xí)

  • let ,const, var
    var :沒有作用域一說,且存在作用域提升的問題
    let const: 只能在當前作用域下,且不能被重復(fù)聲明. let的變量可以被修改,const的變量不能被修改,

    新的ES6標準中l(wèi)et完全可以替代var

    const使用注意:

    1.錯誤的書寫方式:const修飾的變量是不能被修改的
    const name;
    name = 'zhangsan';
    console.log(name);
    
    2.正確的書寫方式
    const name = 'zhangsan';;
    console.log(name);
    
    3.數(shù)組或者字典:可以修改內(nèi)部的值
    const obj = {name:'zhangsan'}; // obj: {name:'zhangsan'}
    obj.name = 'lisi';
    console.log(obj);  // {name: "lisi"}
    
  • 結(jié)構(gòu)賦值
    • 基本使用
      let [name, age, sex] = ['張三', 20, '男'];
      console.log(name);   //張三
      console.log(age);    //20
      console.log(sex);    // 男
      name = '李四';
      console.log(name);   //李四
      
    • 對象的結(jié)構(gòu)賦值
      let {name, age, sex} = {name: '張三', age: 20, sex: '男'};
      console.log(name);   // 張三
      console.log(age);    // 20
      console.log(sex);    // 男
      
    • 數(shù)組的結(jié)構(gòu)賦值:只要結(jié)構(gòu)匹配上即可
      簡單數(shù)組
      let [name, age, sex] = ['張三', 20, '男'];
      console.log(name, age, sex);  // 張三 20 男
      復(fù)雜數(shù)組
      let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
      console.log(arr1, arr2, arr3, arr4, arr5); // 1  2  3  4  5
      空數(shù)組
      let [arr] = [];
      console.log(arr);  // undefined
      特殊情況
      let [a, , , c] = [1, 2, 3];
      console.log(a);  //  1
      console.log(c);  //  undefined
      
    • 基本類型的結(jié)構(gòu)賦值
      字符串本身帶有結(jié)構(gòu)器
      let [a, b, c, d, e] = '我是中國人';
      console.log(a);  //  我
      console.log(b);  //  是
      console.log(c);  //  中
      console.log(d);  //  國
      console.log(e);  //  人
      
      Number類型不帶有結(jié)構(gòu)器,則會報錯,Uncaught TypeError: 12306 is not iterable
      let [a, b, c, d, e] = 12306;
      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);
      console.log(e);
      
  • 數(shù)據(jù)集合 (Set)
    特點:

    ①.類似于數(shù)組,但沒有重復(fù)的元素(唯一的);
    ②.開發(fā)中用于去除重復(fù)數(shù)據(jù);
    ③.key和value都是相等的

    1. 創(chuàng)建一個集合
    let set = new Set(['張三', '李四', '王五', '張三', '李四']);
    console.log(set); // {"張三", "李四", "王五"}
    
    2. 一個屬性 (size)

    集合長度 : set.size
    比如上面的集合:console.log(set.size); 長度是3

    3. 四個方法
    • add
    set.add('劉德華');
    console.log(set);  // {"張三", "李四", "王五", "劉德華"}
    
    并支持鏈式調(diào)用
    set.add('劉德華').add('周星星');
    console.log(set); // {"張三", "李四", "王五", "劉德華", "周星星"}
    
    • delete
    console.log(set.delete('張三')); // 如果返回true,則刪除成功; false,則刪除失敗
    console.log(set);  // {"李四", "王五"}
    
    • has
    console.log(set.has('張三')); // true
    console.log(set.has('張三2')); // false
    
    • clear
    set.clear();  // 他是沒有返回值的,undefined
    console.log(set); // Set(0) {}
    
    • keys() 和 values()
    console.log(set.keys()); // SetIterator {"張三", "李四", "王五"}
    console.log(set.values()); // SetIterator {"張三", "李四", "王五"}
    
  • 數(shù)據(jù)集合 (Map)

    特點:
    ① - 類似于對象,本質(zhì)上是鍵值對集合;
    ② - "鍵"不局限于字符串,各種類型的值(包括對象,數(shù)組)都可以當做鍵;
    ③ - 對象"字符串 - 值",Map"值 - 值",是一種更加完善的Hash結(jié)構(gòu)實現(xiàn);

    1. 創(chuàng)建一個Map
    • key值為字符串
      const map = new Map([
         ['name','張三'],
         ['age', 18],
         ['sex','男']
      ]);
      console.log(map); // Map(3) {"name" => "張三", "age" => 18, "sex" => "男"}
      
    • key值也可以是對象或數(shù)組
      let obj1 = {a: 1}, obj2 = {b: 2};
      const map = new Map([
          ['name', '張三'],
          ['age', 18],
          ['sex', '男'],
          [obj1, '今天天氣不錯'],
          [obj2, '適合敲代碼'],
          [[1, 2], '哈哈哈']
      ]);
      console.log(map); // Map(6) {"name" => "張三", "age" => 18, "sex" => "男", {…} => "今天天氣不錯", {…} => "適合敲代碼", …}
      
      key值也可以是對象或數(shù)組 -- 打印結(jié)果
    • 去重 , 當key值是字符串時可以去重,若果是對象或者數(shù)組時,不可以去重!
       let obj1 = {a: 1}, obj2 = {b: 2};
       const map = new Map([
         ['name', '張三'],
         ['age', 18],
         ['sex', '男'],
         [obj1, '今天天氣不錯'],
         [obj2, '適合敲代碼'],
         [obj2, '適合敲代碼222'],
         [[1, 2], '哈哈哈'],
         [[1, 2], '哈哈哈333333'],
         ['name', '李四'],
         ['age', 22],
         ['sex', '女']
       ]);
       console.log(map);
      
      key值是字符串,去重
    • map的方法


      map的方法
      • set 和 get
        set, 第一個參數(shù)是key,第二個參數(shù)是value
        map.set('friend', ['趙六', '李七']).set(['dog'], '小花');
        
        get 通過key值去get
        console.log(map.get('name'));  // 張三
        console.log(map.get(obj1));  // 今天天氣不錯
        
      • delete 通過key刪除
        map.delete('name');
        
      • has 是否有某個值,通過key查詢
        console.log(map.has('name')); // 存在為true, 不存在為false
        
      • clear 清空
         map.clear(); // 清空
         console.log(map); // Map(0) {}
        
      • keys() , values() , entries()
        map.keys();  // 獲取所有的key
        map.values(); // 獲取所有的值
        map.entries(); // 獲取 key-value
        
      • forEach 遍歷
        map.forEach(function (value, index) {
            console.log(index + ':' + value);
        })
        
      forEach 遍歷結(jié)果
      • map注意事項,添加多個空對象
        map.set({}, '哈哈哈哈哈');
        map.set({}, '呵呵呵呵呵');
        console.log(map);
        console.log({} === {}); // false
        
    map注意事項,添加多個空對象
  • Symbol

應(yīng)用場景: ES5的對象屬性名都是字符串,容易造成屬性名稱沖突,ES6引入新的原始數(shù)據(jù)類型Symbol,表示獨一無二的值;

對象的屬性名可以有兩種類型: ①:字符換 ②:Symbol類型:獨一無二,不會與其他屬性名產(chǎn)生沖突。
定義
    let str1 = Symbol();
    let str2 = Symbol();

    console.log(str1 === str2); / false
    console.log(typeof str1); // symbol
    console.log(typeof str2); // symbol
描述
    let str3 = Symbol('name');
    let str4 = Symbol('name');
    console.log(str3); // Symbol(name)
    console.log(str4); // Symbol(name)
    
    console.log(str3 === str4); // false 不相等
使用
    let obj = {};
    obj.name = '張三';
    obj.name = '李四';
    console.log(obj); // {name: "李四"}

    obj[Symbol('name')] = '張三';
    obj[Symbol('name')] = '李四';
    console.log(obj);
Symbol()使用打印結(jié)果
  • class

ES5 時,要實現(xiàn)面向?qū)ο笫峭ㄟ^構(gòu)造函數(shù)實現(xiàn)的

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

    Person.prototype = {
        constructor: Person,
        print() {
            console.log('我叫' + this.name + ',今年' + this.age + '歲');
        }
    }
    let person = new Person('張三', 12);
    console.log(person);
    person.print(); // 調(diào)用方法

ES6 是通過class來實現(xiàn)面向?qū)ο?/p>

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

        // 方法
        print() {
            console.log('我叫' + this.name + ',今年' + this.age + '歲');
        }
    }

    let person = new Person('張三', 12);
    console.log(person);
    person.print();
class的繼承

1.創(chuàng)建小球類

    // 小球類
    class Ball{
        /**
         * 構(gòu)造器
         */
        constructor(x, y, color){
            this.x = x;
            this.y = y;
            this.color = color;
            this.r = 40;
        }

        /**
         * 繪制小球
         */
        render(){
           ctx.save();
           ctx.beginPath();
           ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
           ctx.fillStyle = this.color;
           ctx.fill();
           ctx.restore();
        }
    }

2.創(chuàng)建移動的小球類,并繼承自上面的小球類 (extends)

    class MoveBall extends Ball{
        constructor(x, y, color){
            super(x, y, color); // 調(diào)用父類的屬性,并把參數(shù)傳遞給父類
            /*****兒子自己的屬性*****/
            // 量的變化
            this.dX = _.random(-5, 5);
            this.dY = _.random(-5, 5);
            this.dR = _.random(1, 3);
        }
        // 兒子的方法
        upDate(){
            this.x += this.dX;
            this.y += this.dY;
            this.r -= this.dR;
            if(this.r < 0){
                this.r = 0;
            }
        }
    }
  1. 創(chuàng)建MoveBall對象
new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length-1)]);

可以參考葉建華老師的絢麗小球代碼

  • 隨機數(shù)
    Math.random(-5, 5); // 產(chǎn)生的是-5到5的隨機數(shù)(包含邊界值)
  • 數(shù)組的擴展
    • Array.from 將偽數(shù)組或可迭代對象(包括arguments,Array,Map,Set,String...)轉(zhuǎn)換成數(shù)組。
       // 獲取界面上的所有l(wèi)i標簽
       let allLis = document.querySelectorAll('li');
       console.log(allLis); // 是個偽數(shù)組
       console.log(Array.isArray(allLis)); //打印下看看是不是數(shù)組,結(jié)果為: false
      
       // 轉(zhuǎn)化為真的數(shù)組
       let  newArray = Array.from(allLis);
       console.log(newArray);
       console.log(Array.isArray(newArray)); // 打印結(jié)果為true 是真數(shù)組
      
    • Array.of 零零散散的東西轉(zhuǎn)換成數(shù)組
      let nums = Array.of(1, 2, 3, 4);
      console.log(nums);
      
      let names = Array.of('張三', '李四', '王五');
      console.log(names);
      
  • 對象的擴展

key和value是一樣的,寫一個就夠了
①.最原始寫法

let obj = {
    'name': '張三',
    'age': 18
}

②.外邊傳值

let name = '張三',
    age = 18;

let obj = {
    'name': name,
    'age': age
}

③.ES6簡寫法 key和value是一樣的,寫一個就夠了

let name = '張三',
    age = 18;

let obj = {
    name,
    age
}
  • Object.assign() 對象合并
let obj1 = {name: '張三'};
let obj2 = {age: 18};
let obj3 = {sex: '男'};
let obj4 = {friends: '李四'};

let obj = Object.assign({}, obj1, obj2, obj3, obj4);
console.log(obj);
Object.assign() 對象合并
  • ... 展開運算符 (延展運算符)
    • ①. 把字符串拆分放到數(shù)組
       let str = '今天天氣很好!';
       let strArray = [...str];
       console.log(strArray);
      
      把字符串拆分放到數(shù)組
    • ②.數(shù)據(jù)傳遞,把對象的數(shù)據(jù)展開傳遞
      let student = {
          name: '張三',
          age: 18,
          sex: '男'
      }
      
      // 傳遞數(shù)據(jù)的時候,把student中的數(shù)據(jù)展開傳遞下去
      <Person {...student}>
      
    • ③.結(jié)合Set() 去重
      let myArr = [1, 2, 10, '張三', 20, 2, 1];
      // 使用集合去重
      let set = new Set(myArr);
      // 把集合轉(zhuǎn)成數(shù)組,用展開運算符展開
      let arr = [...set];
      console.log(arr);
      
結(jié)合Set() 去重 結(jié)果
  • 函數(shù)設(shè)置默認值
    • ES5做法
        // 形參設(shè)置默認值
      function sum(num1, num2) {
          num1 = num1 || 10; //默認值10
          num2 = num2 || 10; //默認值10
          console.log(num1 + num2);
      }
    
      sum(10, 20); // 30
      sum(); // 用戶傳空,調(diào)用默認值結(jié)果為 20
    
    • ES6做法:簡單粗暴
      function sum(num1 = 10, num2 = 10) {
          console.log(num1 + num2);
      }
    
      sum(10, 20); // 30
    
      sum(); // 用戶傳空,調(diào)用默認值結(jié)果為 20
    
    • 多種類型參數(shù)傳遞 ...也可用于解構(gòu)賦值, ...nums代表剩下的內(nèi)容,注意:...nums不能放在第一個位置!!!
    function sum(name, sex, ...nums) {
    
         console.log(nums); // 打印發(fā)現(xiàn) nums為一個數(shù)組
         console.log(name); // 張三
         console.log(sex); // 男
         let result = 0;
         for (let value of nums) {
             result += value;
         }
         return result;
    }
    
    console.log(sum('張三', '男', 10, 20, 30, 50)); // 輸出結(jié)果為 110
    

    具體參考:http://www.cnblogs.com/mingjiezhang/p/5903026.html

  • 箭頭函數(shù)
    • 普通函數(shù)
     let resulet = function (num1, num2) {
    
          return num1 + num2;
      }
     console.log(resulet(100, 300)); // 400
    
    • 箭頭函數(shù)
     let resulet = (num1, num2) => {
    
         return num1 + num2;
     }
    
     console.log(resulet(100, 300)); // 400
    
    • 函數(shù)中this的指向問題,箭頭函數(shù)內(nèi)部會自動綁定
      function demo() {
    
          setTimeout(function () {
              console.log(this); // 打印結(jié)果為:Window 指的是窗口
          }, 1000);
    
          // 箭頭函數(shù)內(nèi)部會自動綁定
          setTimeout(() => {
              console.log(this); // 打印結(jié)果為{},指的下面的obj對象
          }, 1000);
    
      }
    
      let obj = {};
      demo.call(obj);
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 箭頭函數(shù)(****lambda****表達式)(agr) => { 函數(shù)體 }注:只有一個參數(shù)可以省略(),函數(shù)體...
    神刀閱讀 355評論 0 0
  • 《ECMAScript6 入門》阮一峰 讀書筆記 let和constlet聲明的變量僅在塊級作用域內(nèi)有效,var聲...
    親愛的孟良閱讀 736評論 1 2
  • 一 背景 JavaScript經(jīng)過二十來年年的發(fā)展,由最初簡單的交互腳本語言,發(fā)展到今天的富客戶端交互,后端服務(wù)器...
    Michael_bdb5閱讀 1,257評論 0 2
  • 強大的for-of循環(huán) ES6不會破壞你已經(jīng)寫好的JS代碼。目前看來,成千上萬的Web網(wǎng)站依賴for-in循環(huán),其...
    Awe閱讀 7,528評論 2 7
  • 城南花已開 2015-3-18 生活是一種選擇,你可以從中選到你所想要得到的,以及你所想要失去的任何東西。 生命是...
    城南花已開__閱讀 307評論 1 1