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 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
2天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
2天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
3天前
|
JSON 前端开发 JavaScript
|
1天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
11 3
|
2天前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数:`item`(数组项的值)、`index`(项的位置,可选)和`array`(数组本身,可选)。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
JS中常用的数组迭代方法(filter,forEach,map,every,some,find,findIndex)
|
4天前
|
前端开发 JavaScript 开发者
翻天覆地!ES6+新特性大爆发,揭秘JavaScript代码的惊人蜕变!
【8月更文挑战第27天】自ES6标准发布以来,JavaScript新增的特性极大地提升了编程效率并简化了代码。本文重点介绍了五大特性:函数默认参数简化、模板字符串的强大功能、解构赋值的便捷性、箭头函数的简洁之美。这些特性不仅使代码更加简洁、易读,还解决了传统写法中的诸多问题。通过学习和应用这些新特性,开发者可以编写出更高效、更优雅的代码,以应对日益复杂的编程挑战。
16 2
|
6天前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
65 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
59 4