ES6 méthodes pratiques Object.assign, defineProperty, Symbol

1. Fusionner les objets-Object.assign ()

introduction

• La méthode assign permet d'affecter plusieurs objets (dictionnaires), syntaxe: Object.assign (srcObj, obj1, obj2 ...)
• Les clés en double seront écrasées (notez en particulier que l'objet est écrasé), pour les paramètres énumérables (itératifs) (objets fusionnés) s'ils ne sont pas des objets, ils seront automatiquement convertis en fusion d'objets (comme une chaîne, []), pour non énumérables Les paramètres (non définis, null) seront automatiquement ignorés.
• Si l'objet source (le premier paramètre) n'est pas énumérable, une erreur sera signalée

let srcObj= {
    
     a: 'a',b:'b',obj:{
    
    title:"我要被覆盖了"} },
obj1 = {
    
     b: 2 }, 
obj2 = {
    
     c: 3 },
str3 = "字符串",
num4 = 5;
obj = {
    
    newTitle:"我是新的title"} 

// 1.合并、重复覆盖、自动转换成对象合并、自动跳过举例：
console.log(Object.assign(srcObj, obj1 , obj2, str3, num4,obj));
// {a:'a',b:'2',c:3,0: "字",1: "符",2: "串",obj:{newTitle:"我是新的title"}}

// 2.报错
Object.assign(null, obj1 , obj2 )) 

Avancée

• Lors de la déclaration d'un objet, son attribut énumérable est vrai par défaut, et nous pouvons également l'afficher comme faux, de sorte que l'objet n'est pas nécessairement itérable (voir n'est pas nécessairement vrai), mais il peut être pris par '.' À.
• Si le type de copie est de type Symbole, il sera également copié. Symbole: C'est un type de données comme int, float, etc., sauf qu'il s'agit d'un type caché et qu'il n'est pas accessible directement

// 1.跳过不可迭代的对象
var unEnumer = Object.defineProperty({
    
    }, "k", {
    
    
          enumerable: false,
          value: "hello"
        }), // {k:"hello"}
    // 这样定义对象，任何值都能作为键（被视为字符串）
    enumer = Object.defineProperty({
    
    }, null,{
    
    
          enumerable: true,
          value: "hello"
        }) // {"null":"hello"}
console.log(Object.assign( {
    
     b: "c" },unEnumer ,enumer ));
// {b: "c",null: "hello"}

// 2.合并Symbol 类型，既可以当键也可以当值
 console.log(Object.assign({
    
     a: 'b' }, {
    
     [Symbol('c')]: 'd' },{
    
    'e':Symbol('f')}))
// {a: "b", e: Symbol(f), Symbol(c): "d"}

Remarque

• Relation d'influence entre les données copiées
• Si l'objet de copie est un tableau, il sera traité selon un dictionnaire. Le tableau est bien compris comme un dictionnaire, tel que ['a', 'b', 'c'], qui attribuera en fait automatiquement des clés, ce qui équivaut à {0: 'a', 1: 'b', 2: 'c'}, donc les règles de traitement sont les mêmes que celles du dictionnaire.
• Gestion de la fonction de valeur et de la fonction d'affectation

// 1.影响关系
var obj1 = {
    
     a: 1 },obj2={
    
    b:{
    
    c:1}};
var obj = Object.assign({
    
    }, obj1,obj2);
obj1.a = 2 // 不影响
obj2.b.c = 3 // 影响
console.log(obj,obj1,obj2) // {a: 1,b: {c: 3}}

// 2.处理数组
console.log(Object.assign([1, 2, 3], [4, 5])) // 合并完还是数组 [4, 5, 3]
console.log(Object.assign({
    
    0:1,3:3}, [4, 5])) // 合并完是对象 {0: 4, 1: 5, 3: 3}
console.log(Object.assign( [4, 5],{
    
    0:1,3:3})) // 合并完还是数组 [1, 5, empty, 3]  empty?

// 3.对取值函数处理和赋值函数处理
var obj1={
    
    get foo(){
    
    return "a"}},
obj2={
    
    foo:()=>{
    
    return "a"}}
console.log(obj1) // foo: "a"，obj1.foo得到的是函数执行结果，计算属性原理？
console.log(obj2) // foo: ƒ foo()，obj2.foo得到的是函数地址
console.log(Object.assign({
    
    },{
    
    get obj1(){
    
    return "a"}},{
    
    obj2:()=>{
    
    return "a"}})) // {obj1: "a"，obj2: ƒ obj2()}

utilisation

• Ajouter des propriétés aux objets, méthodes
• Cloner des objets, combiner plusieurs objets avec une nouvelle syntaxe
• Spécifiez les valeurs par défaut des attributs

// 1.为对象同时添加（更新）多个属性、方法
var obj = {
    
    title:"标题",dateStamp:"2020/5/22"},
newProp = {
    
    get dateStamp(){
    
     return Date.now()},text:"新属性",fun1(){
    
    return "新方法"}};
console.log(Object.assign(obj, newProp)) // {title: "标题", dateStamp: 1590119249783, text: "新属性", fun1: ƒ}

// 2.克隆
var obj = {
    
    };
var obj1 = {
    
     a: 1 };
Object.defineProperty(obj1, "k", {
    
    
    enumerable: true,
    // value: "hello",
    get() {
    
    
      console.log("获取obj1的k值");
    } // 当使用了getter或setter方法，不允许使用writable和value这两个属性?   
    });
console.log(Object.assign(obj, obj1)); // 获取obj1的k值 {a: 1, k: undefined}
console.log(Object.assign(obj, obj1).k); // 获取obj1的k值 undefined
console.log(obj1.k); // 获取obj1的k值 undefined
// 采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值（什么意思？）

// 3.为对象指定默认值和属性
const defaultVal = {
    
    
      title: "未定义",
      time: "0"
    };
var obj = {
    
    },
obj1 = {
    
    };
Object.defineProperty(obj1, "title", {
    
    
  enumerable: true,
  // value: "hello",
  get() {
    
    
    console.log("获取obj的title值");
    return "标题"
  }
});
// 注意顺序，先默认值，再配置属性，obj在最后
console.log(Object.assign({
    
    }, defaultVal,obj1,obj));

2. Définissez l'objet-Object.defineProperty (obj, prop, descriptor)

Définir les propriétés: Object.defineProperty (obj, prop, descriptor)

Les propriétés sont définies lorsque l'objet est créé et les valeurs par défaut de toutes les propriétés sont vraies; et lorsque les propriétés ajoutées par defineProperty sont utilisées, les valeurs par défaut des propriétés sont toutes fausses. Lorsque vous utilisez des méthodes getter ou setter, les deux attributs writable et value ne sont pas autorisés?

obj, l'objet
prop à modifier , avec le
descripteur de nom de propriété modifié et la description de la propriété à modifier

configurable, si l'attribut est configurable. La signification de configurable inclut: si l'attribut peut être supprimé (supprimer), si les attributs inscriptibles, énumérables et configurables de l'attribut peuvent être modifiés. Après avoir changé en faux, la modification ne peut pas être supprimée (irréversible). Valeur par défaut true

énumérable, si l'attribut est énumérable. La signification énumérable comprend: s'il peut être parcouru pour ... in, si le nom de la propriété peut être obtenu via la méthode Object.keys (), s'il est changé en false, il ne sera pas parcouru quand pour in, mais il est toujours accessible en utilisant "." . Valeur par défaut true

Inscriptible, qu'il soit accessible en écriture, changez en false et l'attribut actuel devient en lecture seule. . Valeur par défaut true

value, la valeur par défaut de l'attribut.

set, le réécrivain de propriété (ainsi appelé pour l'instant). Une fois l'attribut réaffecté, cette méthode est automatiquement appelée.

get, le lecteur de l'attribut (ainsi appelé pour l'instant). Une fois la propriété accédée et lue, cette méthode est automatiquement appelée.

3. Nouveau symbole de type de données

Le symbole est une nouvelle fonctionnalité introduite par la spécification ES6, et sa fonction est similaire à un identifiant qui identifie l'unicité.

définition

    let s1 = Symbol();
    let s2 = Symbol("another symbol"); // 传入描述信息 可以是任何可以被转型成字符串的值，如：字符串、数字、对象、数组等
    let s3 = Symbol();
    console.log(s1,s2,s3)
    console.log(typeof s1); // 'symbol'
    console.log(s1===s2,s1===s3); // false - 每个Symbol实例都是唯一的。

application

• Étant donné que la clé de type Symbol ne peut pas être énumérée via Object.keys () ou for ... in, elle n'est pas incluse dans les propres noms de propriété de l'objet, elle peut donc être utilisée pour certaines opérations et accès externes L'attribut de est défini par Symbol comme la clé (unique) de l'objet;
• En raison de cette fonctionnalité, lorsque vous utilisez JSON.stringify () pour convertir un objet en chaîne JSON, l'attribut Symbol sera également exclu
• Pas besoin de penser au contenu de la valeur
• Haute sécurité
• Partage multi-module unique

	const NAME = Symbol("it`s const key");
    const AGE = Symbol("it`s const key");
    let obj = {
    
    [NAME]: "默认名称"};
    obj[AGE] = "赋值年龄";
    // 访问
    console.log(obj[NAME],obj[AGE]) // 默认名称, 赋值年龄
    // 获取所有1
    console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(it`s const key), Symbol(it`s const key)]
    // 获取所有2
    console.log(Reflect.ownKeys(obj)); // [Symbol(it`s const key), Symbol(it`s const key)]

    // 定义常量不用再去想值的内容了
    const id = Symbol(); // id - 唯一

	// 注册全局Symbol，实现多模块共享唯一Symbol
    let s1 = Symbol.for("global_symbol_1"); //注册一个全局Symbol
    let s2 = Symbol.for("global_symbol_1"); //获取全局Symbol，注意描述一直才行
    let s3 = Symbol.for("global_symbol_3");
    console.log(s1 === s2); // true
    console.log(s1 === s3); // false

À suivre...