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>


相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
10天前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
37 13
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
182 52
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
66 5
|
2月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
36 5
|
2月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
34 1
|
2月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
55 7