JavaScript ES6语法学习笔记 03、ES6新增方法(二)

简介: JavaScript ES6语法学习笔记 03、ES6新增方法(二)

三、Object对象方法(构造器方法)


3.1、Object.assign():合并对象


介绍与示例


Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。


类似于展开式,将多个对象展开合并到一个对象中。如{...对象1,...对象2}。

语法:Object.assign(target, ...sources)


参数:

参数1:目标对象。

参数2:源对象。

返回值:目标对象。

注意点:若是将基本类型作为源对象,实际不会传入值进入到对象。


<script>
    //基本数据类型无法合并到对象中,包括包装类都不行
    console.log(Object.assign({}, undefined));
    console.log(Object.assign({}, null));
    console.log(Object.assign({}, 1));
    console.log(Object.assign({}, true));
    //字符串是可以的!
    console.log(Object.assign({}, 'str'));
</script>



示例:


<script>
    const person = {
        name: '人',
        description: "i am person!"
    };
    const thing = {
        name: '物体',
        fun: '有用的工具!'
    };
    //情况1:将person作为目标对象。实际上就会将thing中的属性传入到person对象中去,返回的是person对象。
    // const obj = Object.assign(person, thing);
    // console.log(obj);
    // console.log(obj === person);//测试返回对象的引用值与作为目标对象person的引用值是否相等
    // console.log(person);
    //情况2:将{}作为目标对象,此时就会返回一个新的对象
    const obj1 = Object.assign({}, person, thing);
    console.log(obj1);
    console.log(obj1 === person);
    console.log(person);
</script>




实际应用


需求:合并默认参数与用户参数,实现将用户参数与默认参数相同的部分替换掉。


分析:编写一个函数,设置一个参数值即为对应的对象,函数中设置对应的默认对象包含指定的参数,之后就可以使用Object对象的assign()方法来进行合并!


<script>
    //合并默认参数与用户参数
    const logUser = (userOptions) => {
        //默认的一些参数
        const DEFAULTS = {
            username: 'tourist',
            password: '123456',
            hobby: 'none'
        };
        //此时需要将用户参数与默认参数合并,并且用户参数能够合并一些默认参数
        console.log(Object.assign({}, DEFAULTS, userOptions));
    }
    //测试
    //情况1:传入空,使用默认参数
    logUser();
    //情况2:传入对象包含用户名与密码   
    logUser({ username: 'liner', password: '987654' });
</script>





3.2、Object对象的keys()、values()以及entries():用来遍历对象的键、值以及键值对


介绍


Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。


Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。


Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。


其中values与entries是在ES6新增的。

注意:这三个方法与之前数组的keys()、values()、entries得到的不同,数组的这三个方法是原型对象中的方法得到的都是迭代器;而这里的方法都是Object构造函数的方法其返回值得到的是数组。


示例:


<script>
    const obj = {
        name: 'changlu',
        sex: '男'
    };
    //查看keys()、values()以及entries()得到的值
    console.log(Object.keys(obj));
    console.log(Object.values(obj));
    console.log(Object.entries(obj));
</script>



实际应用


既然能够通过Object构造函数的三个方法拿到指定键、值以及键值对的数组,那么不就可以搭配使用for...of来进行遍历了,我们赶紧来进行测试:


<script>
    const obj = {
        name: 'changlu',
        sex: '男'
    };
    //遍历obj对象的所有键(key)
    console.log("遍历键:");
    for (const key of Object.keys(obj)) {
        console.log(key);
    }
    //遍历obj对象的所有值(val)
    console.log("遍历值:");
    for (const val of Object.values(obj)) {
        console.log(val);
    }
    //遍历obj对象的所有键值对(key与val)
    console.log("遍历键,值:");
    for (const [key, val] of Object.entries(obj)) {
        console.log(key, val);
    }
</script>





3.3、Object.defineProperty()


官方文档


功能:能够在指定对象上定义新属性。


示例:我们在window对象上挂载tt对象,接着来进行尝试调用


<script>
      Object.defineProperties(window,{
        //属性名
        tt: {
          get(){
            return {
              say(){
                alert("ok");
              }
            }
          }
        }
      })
      //此时就可以全局调用了
      window.tt.say();
  </script>


相关文章
|
6天前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
8 0
|
7天前
|
监控 JavaScript 前端开发
js延迟加载的方法?
js延迟加载的方法?
|
13天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
21 1
|
26天前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
11 1
|
4天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
7天前
|
JavaScript 前端开发
理解Vue.js 3的Reactive方法
理解Vue.js 3的Reactive方法
7 1
|
10天前
|
存储 JavaScript 前端开发
【JavaEE初阶】 JavaScript基础语法——贰
【JavaEE初阶】 JavaScript基础语法——贰
|
10天前
|
JavaScript 前端开发 Java
【JavaEE初阶】 JavaScript基础语法——壹
【JavaEE初阶】 JavaScript基础语法——壹
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 数据安全/隐私保护

相关产品

  • 云迁移中心