ES6基本语法

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 = `<html>
                        <head></head>
                        <body>
                             <p>今天的天气很好!</p>
                             <div class="${className}">${str}</div>
                        </body>
                     </html>`;
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}

箭头函数的几个注意事项：

1. 函数体内的 this 对象就是定义时所在的对象，而不是使用时所在的对象；
2. 不可以当作构造函数。也就是不可以使用 new 命令，否则报错；
3. 不可以使用 arguments 对象，该对象在函数体内不存在；可以 rest 参数代替（...参数）；
4. 不可以使用 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() 返回一个遍历器对象，用于遍历所有的键值