ES6 - 学习

2017-10-29  本文已影响40人  壹点微尘

应用场景: ES5的对象属性名都是字符串,容易造成属性名称冲突,ES6引入新的原始数据类型Symbol,表示独一无二的值;

对象的属性名可以有两种类型: ①:字符换 ②: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 不相等
使用
    let obj = {};
    obj.name = '张三';
    obj.name = '李四';
    console.log(obj); // {name: "李四"}

    obj[Symbol('name')] = '张三';
    obj[Symbol('name')] = '李四';
    console.log(obj);
Symbol()使用打印结果

ES5 时,要实现面向对象是通过构造函数实现的

    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(); // 调用方法

ES6 是通过class来实现面向对象

    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.创建小球类

    // 小球类
    class Ball{
        /**
         * 构造器
         */
        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.创建移动的小球类,并继承自上面的小球类 (extends)

    class MoveBall extends Ball{
        constructor(x, y, color){
            super(x, y, color); // 调用父类的属性,并把参数传递给父类
            /*****儿子自己的属性*****/
            // 量的变化
            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. 创建MoveBall对象
new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length-1)]);

可以参考叶建华老师的绚丽小球代码

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
}

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() 对象合并 结合Set() 去重 结果
上一篇 下一篇

猜你喜欢

热点阅读