ES6部分新增知识点（一）

1、变量/常量声明新语法

let：用于声明一个变量 let str = 'hello world';

const：用于声明一个常量 const PI = 3.14;常量声明时必须赋值

相对于var声明的变量，let声明的变量和const声明的常量有以下特点

a.作用域只局限于当前代码块

b.变量/常量作用域不会被提升

c.在相同的作用域下不能申明相同的变量/常量

2、解构赋值

2.1、数组解构赋值

例2.1.1（一维数组）：

let arr = ['李四', 20, '女'];
let [name, age, sex] = arr;    //变量名对应数组下标，相当于let name = arr[0], age = arr[1], sex = arr[2];
//效果等同于：
let name = '张三', age = 18, sex = '男';

例2.1.2（一维数组）：

let arr = []
let [arr1] = arr;  //空数组，变量arr1找不到对应下标，相当于arr1 = arr[0]
console.log(arr1); //undefined

例2.1.3（一维数组）：

let arr = [1, 2, 3];
let [a, ,c] = arr; //变量a对应arr[0],变量c对应arr[2]
console.log(a);//1
console.log(c);//3

例2.1.4（多维数组）：

let arr = [1, [2, 3, [4, 5]]];
let [arr00, arr01] = arr;//变量名数组结构与原数组结构匹配，相当于let arr00 = arr[0], arr01 = arr[1];
console.log(arr00);  //1
console.log(arr01);    //[2, 3, [4, 5]]
let [arr10, [arr11, arr12, [arr13, arr14]]] = arr;//变量名数组结构与原数组结构匹配，相当于let arr10 = arr[0], arr11 = arr[1][0], arr12 = arr[1][1], arr13 = arr[1][2][0], arr14 = arr[1][2][1];
console.log(arr10, arr11, arr12, arr13, arr14);  //1 2 3 4 5

---

2.2、对象的解构赋值

例2.2.1：

let obj = {name: '张三', age: 55, sex: '男'};
let {name, age, sex} = obj;//变量名对应对象中的属性名，相当于let name = obj['name'], age = obj['age'], sex = obj['sex'];

例2.2.2：

let person = {
    name: '张三', 
    age: 55, 
    friends: ['李四', '王五'], 
    pet: {name: '大黄', age:3}
};
let {name, age, friends, pet} = person;//变量名对应对象中的属性名，相当于let name = person.name, age = person.age, friends = person.friends, pet = person.pet;

例2.2.3：

let person = {name: '张三'};
let {str} = person;  //person对象中没有str属性，默认把person.str赋值给str变量，相当于let str = person.str
console.log(str);  //结果是undefined

例2.2.4：

let person = {name: '张三'};
let {name: str} = person;  //person中依然没有str属性，但可以指定name属性值赋给str变量，相当于let str = person.name
console.log(str);  //结果是张三

2.3、基本类型的解构赋值

let [a, b, c, d, e] = 'hello';
console.log(a);//h
console.log(b);//e
console.log(c);//l
console.log(d);//l
console.log(e);//o

3、新增数据类型：Set

集合类似一种没有重复元素的数组

创建一个集合

let arr = ['张三', '李四', '王五', '张三', '李四']
let set = new Set(arr);
console.log(set);    //Set(3) {"张三", "李四", "王五"}

获取集合元素个数：

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

新增集合元素：使用add方法，返回新增元素后的set对象，故支持链式调用

console.log(set.add('赵六').add('钱七'));  //Set(5) {"张三", "李四", "王五", "赵六", "钱七"}
console.log(set);        //Set(5) {"张三", "李四", "王五", "赵六", "钱七"}

删除集合元素：使用delete方法，返回true或false，因此不支持链式调用

console.log(set.delete('张三'));　　//true
console.log(set.delete('王四'));　　//false
console.log(set);  //Set(4) {"李四", "王五", "赵六", "钱七"}

判断元素存在性：使用has方法，返回true/false

console.log(set.has('李四'));

清空集合元素：使用clear方法，没有返回值

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

获取key/value值：使用 keys()/values()方法，返回一个SetIterator对象，集合的key和value是相同的

console.log(set.keys());    //SetIterator {"王五", "赵六", "钱七"}
console.log(set.values());    //SetIterator {"王五", "赵六", "钱七"}

4、新增数据类型：Map

一般的对象中键值对中的键只能是整数或字符串，但在Map类型数据中，键值对中的键可以是任意数据类型

// 1. 创建一个Map
let obj1 = {a: 1}, obj2 = {b: 2};
const  map = new Map([
     ['name', '张三'],
     [obj1, 'hello'],
     [[1,2], 'hhh']
]);
console.log(map);    //Map(3) {"name" => "张三", {…} => "hello", Array(2) => "hhh"}
console.log(map.size);  //获取Map元素个数：3

//新增键值对
map.set('friends', ['李四', '王五']).set(['dog'], '大黄');
console.log(map);  //Map(5) {"name" => "张三", {…} => "hello", Array(2) => "hhh", "friends" => Array(2), Array(1) => "大黄"}
//根据'键'获取'值'
console.log(map.get('name'));  //张三
console.log(map.get(obj1));    //hello


//根据'键'删除元素
console.log(map.delete(obj1));   //true
console.log(map.delete('xxxx'));//false
console.log(map);        //Map(4) {"name" => "张三", Array(2) => "hhh", "friends" => Array(2), Array(1) => "大黄"}

//判断'键'存在性
console.log(map.has(obj1));   //false
console.log(map.has('name')); //true
//获取键/值/键值对： keys() values() entries()
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
// 遍历
 map.forEach(function (value, index) {
     console.log(index + ':' + value);
 })
//清空Map对象
console.log(map.clear());        //undefined
console.log(map);   //Map(0) {}

 // 注意事项
 map.set({}, '呵呵呵呵呵');
 map.set({}, '哈哈哈哈');

console.log(map);  //Map(2) {{…} => "呵呵呵呵呵", {…} => "哈哈哈哈"}
//原因：空对象不等于空对象
console.log({} === {}); //false

5、新增数据类型：Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。主要用于解决属性名同名的冲突，它是一种基本数据类型

//定义
//不传参
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

/作为对象的属性名，不能使用点运算符
const obj = {};
obj[Symbol('name')] = '张三';
obj[Symbol('name')] = '李四';
console.log(obj);  //{Symbol(name): "张三", Symbol(name): "李四"}

 6、新增语法糖：Class

 普通面向对象对象写法

// 1. 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}
//2.公共属性/方法
Person.prototype = {
    constructor: Person,
    print(){
       console.log('我叫' + this.name + ',今年' + this.age + '岁');
    }
};

使用class写法

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

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

例：绚丽小球-面向对象版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #canvas{
            box-shadow: 0 0 10px #000;
        }
    </style>
</head>
<body>

<canvas id="canvas">当前的浏览器不支持该版本!</canvas>

<script src="js/underScore.min.js"></script>
<script>
    // 1. 获取当前的画布
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 1000;
    canvas.height = 500;
    canvas.style.backgroundColor = '#000';

    // 2.小球类
    class Ball{
        /**
         * 构造器
         */
        constructor(x, y, color){
            this.x = x;
            this.y = y;
            this.color = color;
            this.r = 20;
        }

        /**
         * 绘制小球
         */
        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();
        }
    }

    // 3.会移动的小球类
    class MoveBall extends Ball{
        constructor(x, y, color){
            super(x, y, color);

            // 量的变化
            this.dX = _.random(-4, 4);
            this.dY = _.random(-2, 2);
            this.dR = _.random(1, 2);
        }

        upDate(){
            this.x += this.dX;
            this.y += this.dY;
            this.r -= this.dR/3;
            if(this.r < 0){
                this.r = 0;
            }
        }
    }
    // 4. 实例化小球
    let ballArr = [];
    let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];
    // 5. 监听鼠标的移动
    //canvas.addEventListener('mousemove', function (e) {
    //     ballArr.push( new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length-1)]));
        // console.log(ballArr);
    //});    
    setInterval(function(){
        ballArr.push( new MoveBall(_.random(0, 1000), _.random(0, 500), colorArr[_.random(0, colorArr.length-1)]));
    },50)
    // 6.开启定时器
    setInterval(function () {
        // 清屏
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制
        for(let i=0; i<ballArr.length; i++){
            ballArr[i].render();
            ballArr[i].upDate();
        }
    }, 50);
</script>
</body>
</html>