新浦京81707con > 注册购买 > es6笔记3^_^object

原标题:es6笔记3^_^object

浏览次数:144 时间:2019-05-06

一、destructuring

  ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构Destructuring。

//es5
if(1){
    let cat = 'ken';
    let dog = 'lili';
    let zoo = {cat: cat, dog: dog};
    console.log(zoo) ; //Object {cat: "ken", dog: "lili"}
}
//用ES6完全可以像下面这么写:
if(1){
    let cat = 'ken';
    let dog = 'lili';
    let zoo = {cat, dog};
    console.log(zoo) ; //Object {cat: "ken", dog: "lili"}
}
//反过来可以这么写:
if(1){
    let dog = {type: 'animal', many: 2};
    let { type, many} = dog;
    console.log(type, many) ;  //animal 2
}

es6笔记3^_^object,es6笔记3object

二、属性名表达式

  用方法、表达式作为对象的属性名;表达式还可以用于定义方法名。
  JavaScript语言定义对象的属性,有两种方法。

    let obj1 = {};
// 方法一
    obj1.foo = true;
// 方法二
    obj1['a' 'bc'] = 123;
    console.log(obj1);

  上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
   如果使用字面量方式定义对象(使用大括号),在ES5中只能使用方法一(标识符)定义属性。

    var obj2 = {
        foo: true,
        abc: 123
    }

  ES6允许字面量定义对象时,用方法(表达式)作为对象的属性名,即把表达式放在方括号内。

    let propKey = 'foo';
    let obj3 = {
        [propKey]: true,
        ['a' 'bc']: 123
    };
    console.log(obj3);
//表达式还可以用于定义方法名。
    let ello='i';
    let obj4 = {
        ['h' ello]() {
            return 'hi nick';
        }
    };
    console.log(obj4.hi()); // hi nick

一、destructuring

  ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构Destructuring。

//es5
if(1){
    let cat = 'ken';
    let dog = 'lili';
    let zoo = {cat: cat, dog: dog};
    console.log(zoo) ; //Object {cat: "ken", dog: "lili"}
}
//用ES6完全可以像下面这么写:
if(1){
    let cat = 'ken';
    let dog = 'lili';
    let zoo = {cat, dog};
    console.log(zoo) ; //Object {cat: "ken", dog: "lili"}
}
//反过来可以这么写:
if(1){
    let dog = {type: 'animal', many: 2};
    let { type, many} = dog;
    console.log(type, many) ;  //animal 2
}

三、Object.is()

  Object.is()用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是 0不等于-0,二是NaN等于自身。

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

二、属性名表明式

  用方法、表达式作为对象的属性名;表达式还可以用于定义方法名。
  JavaScript语言定义对象的属性,有两种方法。

    let obj1 = {};
// 方法一
    obj1.foo = true;
// 方法二
    obj1['a' 'bc'] = 123;
    console.log(obj1);

  上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
   如果使用字面量方式定义对象(使用大括号),在ES5中只能使用方法一(标识符)定义属性。

    var obj2 = {
        foo: true,
        abc: 123
    }

  ES6允许字面量定义对象时,用方法(表达式)作为对象的属性名,即把表达式放在方括号内。

    let propKey = 'foo';
    let obj3 = {
        [propKey]: true,
        ['a' 'bc']: 123
    };
    console.log(obj3);
//表达式还可以用于定义方法名。
    let ello='i';
    let obj4 = {
        ['h' ello]() {
            return 'hi nick';
        }
    };
    console.log(obj4.hi()); // hi nick

四、Object.assign()

  Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。
  它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。只要有一个参数不是对象,就会抛出TypeError错误。

    let target = { a: 1 };
    let source1 = { b: 2 };
    let source2 = { c: 3 };
    Object.assign(target, source1, source2);
    console.log(target); // {a:1, b:2, c:3}

注意:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

    let target1 = { a: 1, b: 1 };
    let source11 = { b: 2, c: 2 };
    let source21 = { c: 3 };

    Object.assign(target1, source11, source21);
    console.log(target1);  // {a:1, b:2, c:3}
    console.log(Object.assign({'name':'张三'},{'name':'nick','age':26,'sex':'男','sex':{'gander':'handsome'}}));

  Object.assign只拷贝自身属性,不可枚举的属性(enumerable为false)和继承的属性不会被拷贝。

     let  obj1=Object.assign({b: 'c'},
                Object.defineProperty({}, 'invisible', {
                    enumerable: false,
                    value: 'hello'
                })
        );
        console.log(obj1);// { b: 'c' }

    let obj2 =Object.assign({b: 'c'},
            Object.defineProperty({}, 'invisible', {
                enumerable: true,
                value: 'hello'
            })
    );
    console.log(obj2);// {b: "c", invisible: "hello"}

  属性名为Symbol值的属性,也会被Object.assign拷贝。

    let obj3=Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
    console.log(obj3);// { a: 'b', Symbol(c): 'd' }

注意:Object.assign可以用来处理数组,但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5]);// [4, 5, 3]

  当中,四蒙面一,伍覆盖贰,因为它们在数组的一样职位,所以就对应地方覆盖了。  

  Object.assign还有很多用处,下边就看一下吗:   

三、Object.is()

  Object.is()用来比较两个值是否严格相等。它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是 0不等于-0,二是NaN等于自身。

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

  为对象增多属性

    class Point {
        constructor(x, y) {
            Object.assign(this, {x, y});
        }
    }

  那样就给Point类的对象实例增多了x、y属性。

四、Object.assign()

  Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。
  它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。只要有一个参数不是对象,就会抛出TypeError错误。

    let target = { a: 1 };
    let source1 = { b: 2 };
    let source2 = { c: 3 };
    Object.assign(target, source1, source2);
    console.log(target); // {a:1, b:2, c:3}

注意:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

    let target1 = { a: 1, b: 1 };
    let source11 = { b: 2, c: 2 };
    let source21 = { c: 3 };

    Object.assign(target1, source11, source21);
    console.log(target1);  // {a:1, b:2, c:3}
    console.log(Object.assign({'name':'张三'},{'name':'nick','age':26,'sex':'男','sex':{'gander':'handsome'}}));

  Object.assign只拷贝自身属性,不可枚举的属性(enumerable为false)和继承的属性不会被拷贝。

     let  obj1=Object.assign({b: 'c'},
                Object.defineProperty({}, 'invisible', {
                    enumerable: false,
                    value: 'hello'
                })
        );
        console.log(obj1);// { b: 'c' }

    let obj2 =Object.assign({b: 'c'},
            Object.defineProperty({}, 'invisible', {
                enumerable: true,
                value: 'hello'
            })
    );
    console.log(obj2);// {b: "c", invisible: "hello"}

  属性名为Symbol值的属性,也会被Object.assign拷贝。

    let obj3=Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
    console.log(obj3);// { a: 'b', Symbol(c): 'd' }

注意:Object.assign可以用来处理数组,但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5]);// [4, 5, 3]

  在那之中,四覆盖1,伍覆盖贰,因为它们在数组的1致任务,所以就对应地方覆盖了。  

  Object.assign还有众多用处,上边就看一下呢:   

  为目的加多方法

    let SomeClass={test:'nick'};
    SomeClass.prototype={};
    Object.assign(SomeClass.prototype, {
        someMethod:function(arg1, arg2) {

        },
        anotherMethod:function () {

        }
    });
    console.log(SomeClass);

  等同于下面的写法

    let SomeClass2={test:'nick2'};
    SomeClass2.prototype={};
    SomeClass2.prototype.someMethod = function (arg1, arg2) {

    };
    SomeClass2.prototype.anotherMethod = function () {

    };
    console.log(SomeClass2);

  上面代码应用了对象属性的精简表示法,直接将八个函数放在大括号中,再利用assign方法加多到SomeClass.prototype之中。

  为对象加多属性

    class Point {
        constructor(x, y) {
            Object.assign(this, {x, y});
        }
    }

  这样就给Point类的对象实例加多了x、y属性。

本文由新浦京81707con发布于注册购买,转载请注明出处:es6笔记3^_^object

关键词: 新浦京81707con

上一篇:python字符串函数,python字符串常用内建函数总结

下一篇:没有了