万象更新 Html5 - es6 类: object

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - es6 类: object

示例如下:

es6\src\class\object.js

// 定义对象时省略属性名
const name = "webabcd";
const age = 40;
const a = {name, age}; // 定义对象时省略属性名(其属性名默认为变量名称)
const b = {name: name, age: age}; // 这是 es5 写法,等价于上面的
console.log(`${JSON.stringify(a)}, ${JSON.stringify(b)}`);
// {"name":"webabcd","age":40}, {"name":"webabcd","age":40}


// 定义对象的方法时,可以省略 function 关键字或者使用 lambda 表达式
const c = {
    helloOld:function() { // 这是 es5 写法,等价于下面的
        return "hello";
    },
    helloNew() { // 定义对象的方法时,可以省略 function 关键字
        return "hello";
    },
    helloLambda: () => { // 定义对象的方法时,可以使用 lambda 表达式
        return "hello";
    }
}
console.log(`${c.helloOld()}, ${c.helloNew()}, ${c.helloLambda()}`);
// hello, hello, hello


// 对象的 getter 和 setter
const d = {
    _name: "webabcd",
    get name() { // getter 和 setter 的写法
        return this._name;
    },
    set name(val) {
        this._name = val;
    },
}
d.name = "wanglei";
console.log(d.name);
// wanglei


// 使用表达式来定义属性名或方法名
let stringHello = "hello";
const e = {
    [stringHello + "2"]() { // 使用表达式定义方法名
        return "hello";
    }
}
const f = { // 使用表达式定义属性名
    [stringHello + "2"]: "hello"
};
console.log(`${e.hello2()}, ${f.hello2}`);
// hello, hello


// 合并对象(重名的后面会覆盖前面)
let o1 = {k1: "aaa", k2: "bbb"};
let o2 = {k2: "ddd", k4: "eee"};
let g = {...o1, k3: "ccc", ...o2};
console.log(`${JSON.stringify(g)}`);
// {"k1":"aaa","k2":"ddd","k3":"ccc","k4":"eee"}


// 通过 Object.assign(target, source_1, source_2, ...) 合并对象(重名的后面会覆盖前面)
// 为指定的类添加指定的方法,请参看 /es6/class/main.js 中的 Object.assign 部分
let h = {k1: "aaa", k2: "bbb"};
let o3 = {k3: "ccc"};
let o4 = {k2: "ddd", k4: "eee"};
Object.assign(h, o3, o4);
console.log(`${JSON.stringify(h)}`);
// {"k1":"aaa","k2":"ddd","k3":"ccc","k4":"eee"}


// “==” 会自动转换数据类型,而 “===” 则不会
// Object.is(value1, value2) 与 “===” 基本类似,只有 -0 和 +0 之间的比较,以及 NaN 的比较有所不同
console.log(`${1 == "1"}, ${1 === "1"}, ${Object.is({}, {})}, ${-0 === +0}, ${Object.is(-0, +0)}, ${NaN === NaN}, ${Object.is(NaN, NaN)}`);
// true, false, false, true, false, false, true


// 定义对象,设置或获取 key/value
// "xxx" in obj - 判断 obj 里是否有名为 xxx 的 key
let o5 = {k1: "aaa", k2: "bbb"}; // 可写,可枚举
o5.k3 = "ccc"; // 可写,可枚举
o5["k4"] = "ddd"; // 可写,可枚举
// Object.defineProperty()/Object.defineProperties() - 扩展对象的属性
// "xxx" in obj - 判断 obj 里是否有名为 xxx 的属性
Object.defineProperty(o5, "p1", {
    value: "v1",
    writable: true, // 可写(默认值为 false)
    enumerable: true // 可枚举(默认值为 false)
});
Object.defineProperties(o5, {
    'p2': {
        value: "v2",
        writable: true
    },
    'p3': {
        value: "v3",
        writable: true
    }
});
// Object.keys() - 遍历指定对象的 key(只能遍历可枚举的)
let keys = Object.keys(o5);
// Object.values() - 遍历指定对象的 value(只能遍历可枚举的)
let values = Object.values(o5);
// Object.entries() - 遍历指定对象的 key/value(只能遍历可枚举的)
let entries = Object.entries(o5);
// Object.getOwnPropertyNames() - 遍历对象的属性名(无论是否可枚举,均可遍历)
let names = Object.getOwnPropertyNames(o5);
console.log(keys); // ["k1", "k2", "k3", "k4", "p1"]
console.log(values); // ["aaa", "bbb", "ccc", "ddd", "v1"]
console.log(entries); // [["k1", "aaa"], ["k2", "bbb"], ["k3", "ccc"], ["k4", "ddd"], ["p1", "v1"]]
console.log(names); // ["k1", "k2", "k3", "k4", "p1", "p2", "p3"]
console.log(o5.k1, o5["p3"], "k1" in o5, "p9" in o5); // aaa v3 true false


// 说说 call(), apply(), bind() - 均用于调用的时候修改 this 的指向
let o6 = {
    name: "webabcd",
    age: 40,
    hello(p1, p2) {
        console.log(`name:${this.name}, age:${this.age}, p1:${p1}, p2:${p2}`);
    }
};
o6.name = "wanglei";
// hello() 中的 this 指向的是 o6
o6.hello("a", "b"); // name:wanglei, age:40, p1:a, p2:b
let o7 = {
    name: "wanglei",
    age: 20,
};
// call(thisObj,arg1,arg2,arg3,……) - hello() 中的 this 指向的是 call() 的第 1 个参数
o6.hello.call(o7, "x", "y"); // name:wanglei, age:20, p1:x, p2:y
// apply(thisObj,argArr) - hello() 中的 this 指向的是 apply() 的第 1 个参数
o6.hello.apply(o7, ["x", "y"]); // name:wanglei, age:20, p1:x, p2:y
// bind(thisObj,arg1,arg2,arg3,……) - hello() 中的 this 指向的是 bind() 的第 1 个参数(bind() 返回的是一个函数,要拿到结果需要再“()”一下,其他与 call() 一样)
o6.hello.bind(o7, "x", "y")(); // name:wanglei, age:20, p1:x, p2:y


// preventExtensions() - 禁止指定对象添加新属性
// Object.preventExtensions(o8);

// isExtensible() - 是否可为指定对象添加新属性,默认为 true,如果调用了 preventExtensions() 则此值为 false
// Object.isExtensible(o8);

// Object.seal() - 先调用 preventExtensions(),再将对象的所有属性标记为 configurable:false
// Object.seal(o8);

// Object.freeze() - 先调用 seal(),再将对象的所有属性标记为 writable:false
// Object.freeze(o8);

// 注:能用 Reflect 的方法就用 Reflect 的,而不要再用 Object 的了


// delete - 删除对象的属性
let o9 = {
    name: "webabcd"
}
console.log(o9.name); // webabcd
delete o9.name;
console.log(o9.name); // undefined


// 对象的解构赋值(destructuring)
// 将值赋给同属性名指向的变量
let {a: x1, b: x2} = {a: "aaa", b: "bbb"};
console.log(x1, x2); // aaa bbb
// 下面这句是简写,写全了就是 let {x3: x3, x4: x4} = {x3: "aaa", x4: "bbb"};
let {x3, x4} = {x3: "aaa", x4: "bbb"};
console.log(x3, x4); // aaa bbb
// 带默认值的
let {a: x5 = 1, b: x6 = 2} = {a: 3};
console.log(x5, x6); // 3 2
// 下面这句是简写,写全了就是 let {x7: x7 = 1, x8: x8 = 2} = {x7: 3};
let {x7 = 1, x8 = 2} = {x7: 3};
console.log(x7, x8); // 3 2
// 未被解构的都放入 ... 标记的变量
let {y1, y2, ...yyy} = {y5: 5, y1: 1, y2: 2, y3: 3, y4: 4};
console.log(y1, y2, yyy); // 1 2 {y5: 5, y3: 3, y4: 4}

源码 https://github.com/webabcd/Html5
作者 webabcd

posted @ 2024-09-24 11:25  webabcd  阅读(5)  评论(0编辑  收藏  举报