ES6对象的拓展

ES6的简易写法:对比ES5的写法更加的简洁明了

    let name = ‘小明‘ , age = 15;
    let es5 = {
        name : name,
        age : age,
    }--------------------------------------
    let es6 = {
        name,
        age
    }两个的结果都是:{name: "小明", age: 15}
    let es5_method = {
        hello : function(){
            console.log(‘hello‘)
        }
    }
    let es6_method = {
        hello(){
            console.log(‘hello‘)
        }
    }

ES6对象新增的方法:

    //Object.is()方法作用类似于 ===
    console.log(Object.is(‘你好‘,‘你好‘),‘你好‘===‘你好‘) // true  true
    console.log(Object.is([1,2,3],[1,2,3]),[1,2,3]===[1,2,3])// false false
    let a = { name1 : ‘小明‘},b = { name2 : ‘小强‘},c = { name2 : ‘小刚‘};
    //Object.assign()方法将参数第一个对象作为母板其余参数合并到第一个参数中 若键名重复则以最后一个值替换前面的值
    console.log(Object.assign(a,b,c)) // {name1: "小明", name2: "小刚"}
    let test = {
        name : ‘小强‘,
        age : 25,
        hobby : ‘打篮球‘
    }
    for(let [key,value] of Object.entries(test)){
        console.log([key,value])
        //(2) ["name", "小强"]   (2) ["age", 25]    (2) ["hobby", "打篮球"]
    }

解构赋值:

const obj = {
    first : ‘第一个‘,
    second : ‘第二个‘
}
const {first,second} = obj;
//结果: first => ‘第一个‘ second => ‘第二个‘
const player = {
        nickname: ‘感情的戏∫我没演技?‘,
        master: ‘东海龙王‘,
        skill: [{
            skillName: ‘龙吟‘,
            mp: ‘100‘,
            time: 6000
        },{
            skillName: ‘龙卷雨击‘,
            mp: ‘400‘,
            time: 3000
        },{
            skillName: ‘龙腾‘,
            mp: ‘900‘,
            time: 60000
        }]
    };
    //获取player的属性值
    const { nickname } = player;
    const { master } = player;
    //skill1 => skill中的第一项josn 以此类推
    //const {skill : [skill1,skill2,skill3]} = player;

    // skillName 表示第二项的 skillName
    //因为重名了 所以第三项 skillName 用 sklName 替代
    // const { skill: [ skill1, { skillName },{ skillName: sklName } ] } = player;

扩展运算符:

const obj = {
    first : "第一项",
    second : "第二项",
    third : "第三项",
};
//将除 third 项的其他所有项组合成对象的形式赋值给other
const {third,...other} = obj;
const obj1 = {
    one : 1,
    two : 2
};
//将obj1合并到obj2中
const obj2 = {
    three : 3,
    four : 4,
    ...obj1
};

 默认值:

let girlfriend = {
    name: ‘小红‘,
    age: undefined,
};
//当属性值为undefined或者为定义属性时可以直接给属性赋值

let { name, age = 24, hobby = [‘学习‘] } = girlfriend;

获取多个函数返回值:

function p(){
        return [
            {
                name : "小明",
                age : 15
            },
            {
                name : "小红",
                age : 20
            }
        ]
    }
    const [{name : name1},{name : name2}] = p()
    //结果: name1 => 小明 name2=> 小红

原文地址:https://www.cnblogs.com/rickyctbur/p/11553169.html

时间: 2024-10-01 04:57:59

ES6对象的拓展的相关文章

ES6对象扩展

前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象交互的方法.本章将详细介绍ES6对象扩展 对象类别 在浏览器这样的执行环境中,对象没有统一的标准,在标准中又使用不同的术语描述对象,ES6规范清晰定义了每一个类别的对象,对象的类别如下 1.普通(Ordinary)对象 具有JS对象所有的默认内部行为 2.特异(Exotic)对象 具有某些与默认行为

javascript事件之:jQuery事件中实例对象和拓展对象之间的通信

我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的. 先来看便捷方法: 1 //调用的还是实例对象下的on()和trigger() 2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + 3 "mousedown mouseup mousemove mouseover mouseout mouseenter

ES6对象的扩展

1.属性简写表示      2.方法简写表示     属性与方法简写: 3.属性名表达式 ES6允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内. 4.Object.is()比较两个值是否严格相等

es6 对象的扩展

一.现在还有很多浏览器不能直接使用es6语法.特别是手机端的一些低版本的浏览器.都需要用bale转换一下. 但是目前流行的框架中(vue,react,angular).都有自己的脚手架,都能用webpack转换下.或者直接自己配置webpack , fis3,nowa 等转换. 照样不是美滋滋. 二.属性的简洁写法 //1.属性简洁表示语法 var foo = 'bar'; var obj = {foo}; console.log(obj); //创建对象的函数 function createO

ES6 对象扩展

1.属性和方法的简写: var foo = 'bar'; var baz = {foo}; console.log(baz); //{foo:'bar'} ES6允许对象中只写属性名.不写属性值,属性值等于属性名表示的变量. function f(x,y){ return {x,y}; } console.log(f(1,2)); //{ x: 1, y: 2 } 方法的简写: var ms = {}; function getItem(){ } function setItem(){ } fu

es6对象 symbol标记

对象赋值 let name="jspang"; let skill= 'web'; var obj= {name,skill}; 对象Key值构建 let key='skill'; var obj={ [key]:'web' } Object.is(  ) 对象比较 var obj1 = {name:'jspang'}; var obj2 = {name:'jspang'}; console.log(obj1.name === obj2.name);//true console.log

ES6函数的拓展

1.函数参数的默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的缺点在于

ES6对象构建及其方法和比较

let name='jin'; let skill='web'; //ES6允许我们用变量的形式赋值 let obj={name,skill}; console.log(obj); //key值的构建 let key="skill"; var obj1={ [key]:'web' } console.log(obj1); //es5就有的自定义对象方法 let obj2={ add:function(a,b){ return a+b; } } console.log(obj2.add(

ES6 函数的拓展(四)

一.参数带默认值函数1.在函数形参可以赋予函数默认值[即实参严格匹配undefined时,在函数内部使用形参时调用它的默认值]2.函数name属性 [返回函数名称,无名的函数返回空字符串]3.函数length属性  [从左往右开始计算函数形参直到碰到带有默认值形参结束的形参个数的计算]eg: //普通函数传参 function test(a,b=2,c,d=3){ console.log(a,b,c,d); } test(3,4,5); //输出abcd分别为:3,4,5,3 console.l