• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  ES6 — 对象扩展正文

ES6 — 对象扩展

作者:网页模板
类型:文章教程
点击次数:
发布时间:2018-05-30 13:21
分享到:
转载自CSDN webxiaoma 的一篇关于ES6 对象扩展的文章:

一、对象属性和方法
    1.简写
// 属性简写
var a = "first";
var b = {a};
console.log(b)  // {a:"first"}

//方法简写
var obj = {
  method (){
    retrun "hello world";
  }
}

//等同于
var obj = {
  method: function (){
    retrun "hello world";
  }
} 
    2.属性名表达式
let propName = "value";
let obj = {
  [propName]:true,
  ["one"+"child"]:1323
}
obj[propName]  // true
obj[onechild]  // 1323
    重点内容
        ① 如果属性名表达式不能与简洁表示法同时使用。否则会报错
        ② 属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串,如果有多个属性名对象会产生覆盖。

二、Object.is()方法和 Object.assign() 方法
    1.Object.is() 用于比较两个值是否严格相等。

    在ES5 中严格相等有比较运算符(===),但是全等号有两问题:
        ① -0 === +0 // true
        ② NaN === NaN // false

    而Object.is() 解决了上边两个问题,其他的行为和=== 行为一致。
Object.is({},{}); // false
Object.is(+0,-0); // false
Object.is(NaN,NaN); // true
    2.Object.assign() 方法用于合并对象
        Object.assign() 用于合并对象,有利于我们去封装函数。它的使用方法和jq 的 $.extend() 方法类似
  let objOne = {a:1};
  let objTwo = {b:2};
  let objThree = {b:4,c:5};

  let obj = Object.assign(objOne,objTwo,objThree);
  console.log(obj) // {a:1,b:4,c:5}
    由结果可以看出,合并后的对象,如果出现同名属性,后边的会覆盖前边的。

    重点内容
        ①如果只有一个参数,Object.assign() 会直接返回该参数
Object.assign({a:"new"}) //{a:"new"}
        ②如果该参数不是对象,会将该参数转化为对象,
typeof Object.assign(0) // "object"
        ③undefined 和 null 作为首参数会报错,不为首参时也不会报错
Object.assign(undefined) // 报错 Cannot convert undefined or null to object
Object.assign({},undefined) // 空对象 {}
        ④字符串会以数组形式拷贝到目标对象,而数值和布尔值等不会产生效果
   var one = 'one';
   var num = 10;
   var bool = true;
   var last = Object.assign({},bool,num,one)
   console.log(last) // {0: "o", 1: "n", 2: "e"}
   console.log(last[1]) // n
        ⑤Object.assign 只拷贝源对象的自身属性(不会拷贝继承属性),也不会拷贝不可枚举的属性。
var persion = {};
Object.defineProperties(persion,{
  name:{
    enumerable:true,
    value:"name"
  },
  age:{
    enumerable:false,
    value:"age"
  }
})

Object.assign({a:"a"},persion); // {a: "a", name: "name"}
        ⑥属性为 Symbol 值得属性,也会被其拷贝。

        * 用途 *
            ①为对象添加属性
            ②为对象添加方法
            ③克隆对象
            ④合并多个对象
            ⑤为属性指定默认值

三、属性的遍历
    (1)for…in

        for…in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

    (2)Object.keys(obj)

        Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

    (3)Object.getOwnPropertyNames(obj)

        Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。

    (4)Object.getOwnPropertySymbols(obj)

        Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。

    (5)Reflect.ownKeys(obj)

        Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举。

    遍历排序是这样的:数字属性>字符串属性>Symbol值属性

四、__proto__ 属性 和Object.setPrototypeOf(), Object.getPrototypeOf()
    ES6 为我们提供了__proto__ 属性。不过目前还是建议使用Object.setPrototypeOf(), Object.getPrototypeOf()

    1.Object.setPrototypeOf()

    Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。
 let objFirst = {a:"a"}
 let objLast = {b:"b",c:"c"}
 Object.setPrototypeOf(objFirst,objLast);
 console.log(objFirst.b) // b
 console.log(objFirst.b === objLast.b) // true
上边的代码相当于:
function(objFirst,objLast){
  objFirst.__proto__ = objLast;
  return objFirst;
}
    2.Object.getPrototypeOf()

        该方法用于读取一个对象的原型对象
function newOne(){
}

var newObj = new newOne();
console.log(Object.getPrototypeOf(newObj) === newOne.prototype);

(责任编辑:网页模板)
  • 本文标签:
  • ES6对象
js和jQuery获取滚动条滚动距离
js map()方法