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>


相关文章
|
12天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
11天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
11天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
11天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
27 7
|
12天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
12天前
|
JavaScript 前端开发 开发者
|
14天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
31 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4