ES6的学习之路(基础知识总结)

1. 变量声明

• 1).let
  • 1)使用let定义的变量不会进行"变量提升"

  console.log(a);//Uncaught ReferenceError: a is not defined
  let a = 1;

  • 2)同一个作用域中,不能使用let重复声明同名的变量

  let b = 2;
          let b = 3;
          // Uncaught SyntaxError: Identifier 'b' has already been declared

  • 3)使用VAR在全局作用域中定义的变量相当于给WINDOW增加了一个私有属性,但是使用LET定义的变量和WINDOW没有任何的关系
• 2).const
  • const定义的常量具有和let一样的特性
  • const定义的是一个恒定的值,是个常量,存储的值是不能更改的,必须"声明+定义"
  • 不能同时使用const和let声明同一个的变量

2.作用域的变化:

• ES5中的作用域:
  • 全局作用域
  • 函数执行形成的私有作用域
• ES6中的作用域新增了
  • 块级作用域:基本上凡是被"{}"包起来的都是块级作用域,和之前的私有作用域一样,保护里面的私有变量不受外界的干扰,作用域链的机制和之前相同

  let a = 1;
      if(1){  //这是块级作用域
          let b = 2;
          console.log(a);//1
          console.log(b);//2
      }
      console.log(a);//1
      console.log(b);//Uncaught ReferenceError: b is not defined
  for循环,每次循环都会形成一个块级作用域,而i是每一个私有作用域中的私有变量
      for (let i = 0; i < 5; i++) {
          setTimeout(function(){
              console.log(i);
          },0);
      }//依次输出0,1,2,3,4
  对应在ES5中:做了以下工作
      var _loop = function _loop(i) {
          setTimeout(function () {
              console.log(i);
          }, 0);
      };
      for (var i = 0; i < 5; i++) {
          _loop(i);
      }

3.变量的解构赋值

基本概念：

• 本质上就是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋予对应的值。

• 结构赋值主要分为：
  1. 数组的解构赋值
  2. 对象的结构赋值
  3. 基本类型的解构赋值

数组解构:

const ary = ['鼠', '牛', '虎'];
    let [a]=ary;   =>var a = ary[0];
    let [,b]=ary;   =>var b = ary[1];
    let [c,d,e,f]=ary; =>var a = ary[0],b = ary[1],c = ary[2],d = ary[3]

    const ary = ['鼠', ['牛', '虎']];
    let [a,[b,c]]=ary;  //与上面一致 ,对应变量匹配对应位置的值

对象解构:

let {a, b} = {b: 'bbb', a: 'aaa'};  => var a = 'aaa',b = 'bbb';
    let {a: b} = {a: 1};                => var b = 1;

基本类型的解构赋值:

let [a, b, c, d] = '1234';   => var a = 1,b = 2, c = 3, d = 4
    let {length: len} = 'qwqb';  => var len = 4;

4.拓展运算符

const arr = [1, 2, 3, 4];
    let [a,...key]=arr;     =>var a = 1,key = [2,3,4];

    const fn = (parm1, ...keys)=> {
        console.log(keys);      =>输出 keys = [ 2, 3, 4, 5, 6];
    };
    fn(1, 2, 3, 4, 5, 6);

在使用拓展运算符的很时候,...keys只能放在最后,如数组解构,函数参数解构的时候

5.箭头函数

注意:箭头函数中的this继承父级的this

rest 参数形式为（“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
箭头函数体内没有自己的this对象，所以在使用的时候，其内部的this就是定义时所在环境的对象，而不是使用时所在环境的对象。
不能给箭头函数使用 call apply bind 去改变其内部的this指向
箭头函数体内没有arguments对象，如果要用，可以用Rest参数代替。
不可以当作构造函数，不可以使用new命令，否则会抛出一个错误。

const fn1=()=>{};    => var fn1 = function(){};
    const fn2=a=>a;      => var fn2 = function(a){return a};
    const fn3=(a,b)=>a+b;=> var fn3 = function(a,b){return a+b;};
    const fn4=(a,b)=>{       //这种是需要做特殊处理或者多条处理逻辑使用
        return a*100+b*100;
    }

const fn5 = (a = 10,b = 20)=>a+b;  初始化参数
    var fn5 = function(a,b){
        if(typeof a === 'undefined'){
            a = 10;
        }
        if(typeof b === 'undefined'){
            b = 20;
        }
        return a+b;
    }

6.新增的数据结构Set和Map

数据结构 Set数据结构集合的基本概念：集合是由一组无序且唯一（即不能重复）的项组成的。这个数据结构使用了与有限集合相同的数学概念，应用在计算机的数据结构中。

特点：key 和 value 相同，没有重复的 value。

ES6 提供了数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

1. 如何创建一个 Set const s = new Set([1,2,3]);
2. Set 类的属性 console.log(s.size); =>3
3. Set 类的方法
   • a) set.add(value) 添加一个数据，返回Set结构本身。
   • b) set.delete(value) 删除指定数据，返回一个布尔值，表示删除是否成功。
   • c) set.has(value) 判断该值是否为Set的成员，反回一个布尔值。
   • d) set.clear() 清除所有数据，没有返回值。
   • e) keys() 返回键名的遍历器
   • f) values() 返回键值的遍历器
   • g) entries() 返回键值对的遍历器
   • h) forEach() 使用回调函数遍历每个成员

数据结构 Map 字典：是用来存储不重复key的Hash结构。不同于集合(Set)的是，字典使用的是[键，值]的形式来储存数据的。

JavaScript 的对象（Object:{}）只能用字符串当作键。这给它的使用带来了很大的限制。

为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。。

1. 如何创建一个 Map => const map = new Map([['a', 1],['b', 2]]);
2. Map 类的属性 console.log(map.size);
3. Map 类的方法
   • 1 map.set(key, value) 设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
   • 2 map.get(key) get方法读取key对应的键值，如果找不到 key，返回undefined。
   • 3 map.delete(key) 删除某个键，返回true。如果删除失败，返回false。
   • 4 map.has(key) 方法返回一个布尔值，表示某个键是否在当前Map对象之中。
   • 5 map.clear() 清除所有数据，没有返回值。
   • 6 map.keys() 返回键名的遍历器
   • 7 map.values() 返回键值的遍历器
   • 8 map.entries() 返回键值对的遍历器
   • 9 map.forEach() 使用回调函数遍历每个成员

7.

在ES6中新增了Set和Map两种数据结构，再加上JS之前原有的数组和对象，这样就有了四种数据集合，平时还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象等。这样就需要一种统一的接口机制，来处理所有不同的数据结构。

• 1.Iterator就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作，而且这种遍历操作依次处理该数据结构的所有成员。

  • Iterator遍历器的做用：

    • 为各种数据结构，提供一个统一的、简便的访问接口。
    • 使得数据结构的成员能够按某种次序排列。
    • ES6新增了遍历命令for...of循环，Iterator接口主要供for...of消费。

  • Iterator的遍历过程：

    • 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
    • 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
    • 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
    • 不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

• 2 凡是具有 Symbol.iterator 属性的数据结构都具有 Iterator 接口
• 3 具备iterator接口的数据结构都可以进行如下操作
  • 解构赋值
  • 扩展运算符
• 4 for...of循环

8.类的封装和继承

class 的继承等相关知识

extends、 static、 super

class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        say() {}
        fn() {}
        static eat() {}
    }
    console.dir(Person);//-> 其中name/age是当前类实例的私有属性；say/fn写在了Person.prototype上；eat写在了Person上；

    class ManPerson extends Person {
        constructor(name, age) {
            super(name, age);//->supper就是继承的类,这里相当于Person.prototype.constructor.call(this, name,age) 或者 Person.call(this,name,age);
            this.sex = '男';
        }
        moneyFn() {
            console.log('男人要赚钱养家!');
        }
    }
    console.dir(ManPerson);
    //->ManPerson 继承了 Person

9. 什么是 Symbol ?

Symbol，表示独一无二的值。它是 JS 中的第七种数据类型。

// 基本的数据类型： Null Undefined Number Boolean String Symbol
   // 引用数据类型：Object

   let s1 = Symbol();
   let s2 = Symbol();
   // console.log(typeof s1); // 'symbol'
   //
   // console.log(s1 === s2); // false

Symbol 函数前不能使用 new 否则会报错，原因在于 Symbol 是一个原始类型的值，不是对象。
Symbol 函数接收一个字符串作为参数，表示对Symbol的描述，主要是为了在控制台显示，或者转为字符串的时候，比较容易区分 let s4 = Symbol('leo');
Symbol 数据类型的转换
作为对象的属性名

不能被for...in循环遍，历虽然不能被遍历，但是也不是私有的属性，可以通过Object.getOwnPropertySymbols方法获得一个对象的所有的Symbol属性

10. 字符串扩展

1)模板字符串

2. repeat

// let str1 = 'a';
// let str2 = str1.repeat(3);
// console.log(str2);   => 'aaa'

3. includes() startsWith() endsWith() //开始位置,结束位置或任意位置是否包含某字符串,包含返回true,不包含返回false

11. 对象扩展

1)简洁表示

let a = 1;
const obj = {a};  => obj = {a:a};

2)Object.is() 判断值是否"一样"

// console.log(Object.is(NaN, NaN));  => true
// console.log(Object.is(+0, -0));    => false

3. Object.assign()

// 用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

12. 数组的扩展

1. Array.from([12,34,5]) 将类数组转化成数组
2. Array.of() //创建新数组

Array.of(12,34,56)
[12, 34, 56]

3. find() findIndex() 返回复合条件项的索引
4. fill() 替换

const arr = [1, 2, 3, 4];
arr.fill('abc', 1, 3); => arr = [1, 'abc', 'abc', 4];