zoukankan      html  css  js  c++  java
  • ES6 对象定义简写及常用的扩展方法

    1、ES6 对象定义简写

    es6提供了对象定义里的属性,方法简写方式:
    假如属性和变量名一样,可以省略,包括定义对象方法function也可以省略
    <script type="text/javascript">
        let name = 'jack';
        let sex = 'man';
        //传统方式
        let obj1 = {
            name:name,
            sex:sex,
            getName:function(){
                return this.name;
            }
        }
        //简写
        //假如属性和变量名一样,可以省略,包括定义对象方法function也可以省略
        let obj2={
            name,
            sex,
            getName(){
                return this.name;
            }
        }
    
        console.log(obj1,obj1.getName());
        console.log(obj2,obj2.getName());
    </script>

    2、ES6 对象常用的扩展方法 

    <script type="text/javascript">
        // 对象方法
        /*
             Object.assign(target, source_1, ···)
             用于将源对象的所有可枚举属性复制到目标对象中。
             返回值是target对象
             如果目标对象和源对象有同名属性,或者多个源对象有同名属性,则后面的属性会覆盖前面的属性。
        */
    
        let target = {a: 1};
        let object2 = {b: 2};
        let object3 = {c: 3};
        let returnObj=Object.assign(target,object2,object3);
    
        console.log(target) //  {a: 1, b: 2, c: 3}
        console.log(returnObj) // {a: 1, b: 2, c: 3}
    
    
    
        // 注意点:assign 的属性拷贝是浅拷贝: just copy的是引用
        let sourceObj = { a: { b: 1}};
        let targetObj = {c: 3};
    
        Object.assign(targetObj, sourceObj);
        targetObj.a.b = 2;
        console.log(sourceObj.a.b);  // 2
    
    
    
        /*
            Object.is(value1, value2)
            用来比较两个值是否严格相等,与(===)基本类似。
         */
    
        console.log(Object.is("q","q"));      // true
        console.log(Object.is(1,1));          // true
        console.log(Object.is("1",1));          // false
        console.log("1"==1);  // true
        console.log("1"===1);  // false 类型也要判断
        console.log(Object.is([1],[1]));      // false
        console.log(Object.is({q:1},{q:1}));  // false
    </script>
    
    
  • 相关阅读:
    微信小程序购物商城系统开发系列-工具篇
    如何用js获取浏览器URL中查询字符串的参数
    Vue.js——vue-resource全攻略
    多个 ng-app 中 Controllers & Services 之间的通信
    前端分页功能的实现以及原理
    纯css实现轮播图
    最好的Angular2表格控件
    2017年要学习的三个CSS新特性
    Kafka数据安全性、运行原理、存储
    Hbase与hive集成与对比
  • 原文地址:https://www.cnblogs.com/jnba/p/12196494.html
Copyright © 2011-2022 走看看