ES6的一些新增知识点

 一、参数默认值

function foo(x = 10,y = 20) { // 传参时直接以等号赋值默认值
    return x + y;
};
// 设置默认值时 当传参时值为传参时的值 不传时为默认值
foo();         // 返回 30
foo(1,2);      // 返回 3


// 参数为对象默认值
function bar({}){                                   // 默认值为空
    
};

function bar({name,age} = {name: '小明', age: 18}){ // 对象结构赋值默认值
    
};

function bar({name = '小明',age = 18} = {}){        // 空对象结构赋值默认值
    
};

二、对象及数组解构赋值

const obj = {
    name: '小明',
    age: 18,        
};

const {name,age} = obj;
console.log(name,age); // 此时name和age就为obj对象里的值


const arrs = [1,2,3];

const [a,b] = arrs;    // a = 1 b = 2
const [,a,b] = arrs;   // a = 2 b = 3
const [,,a,b] = arrs;  // a = 3 b = undefined

三、展开运算符

const arrs = [1,2,3];

function foo(a,b,c) {
    console.log(a,b,c)
};

// 调用时可以这样传入一个数组 会把该数组的各个值从下标0开始依次作为这个函数的形参来使用
foo(...arrs);  // a = 1  b = 2  c = 3

// 同时也可以传入一个字符串 效果和数组相同
const message = 'xiaoming';
foo(...message);  // a = x  b = i  c = a


//扩展运算符为浅拷贝
// 第一层为深拷贝 第二层时拷贝的就是复杂数据放入到内存中的内存地址 因内存地址是一样的 在任何一个地址引用处修改里面的属性，所引用的这个地址所有地方都会被改掉，这就是浅拷贝，可利用JSON进行深拷贝
const obj = {
    name: '小明',
    age: 18,
    address: {
        city: '22'    
        abbly: '11'
    },
};

const newObj = {...obj}  // 循环obj所有的属性放入到newObj这个常量种

四、Symbol类型

// Symbol为一个函数，调用时会返回一个独一无二的值
// 如： 
const s1 = Symbol();
const s2 = Symbol();

console.log(s1 === s2);  // false

// Symbol使用场景：
// 当我们需要向一个对象里新增属性函数时，不清楚这个对象的数据结构，有可能就会覆盖掉原有属性,或定义时不想重复时,用Symbol就可以避免这种情况

const s3 = Symbol();
const s4 = Symbol();

const obj = {
    name: '小明',
    age: 18,
    [s3]: '111',  // 定义时
};

obj[s4] = '222';  // 新增时

//获取也要用 obj[s3] 不能使用打点的方式获取

五、Object.defineProperty()方法

// Object.defineProperty()方法，会在一个对象上定义一个新属性或修改一个现有属性
// Object.defineProperty() 需要传三个参数： 1参为目标对象，2参为新增或修改的key名，3参为要定义属性的属性描述符对象

// 用法：
const obj = {
    name: '小明',
    age: 18,
    set name(n) {
        this._name = n;
    },
    get name() {
        return this._name;
    }
};

// 新增时：
Object.defineProperty(obj,'address',{
    // 属性描述符数据属性：
    value: '中国',
    configurable: true,
    enumerable: true,
    writable: true,
});

// 属性描述符的数据属性各个含意：
// 1. value 为新增属性的值或修改属性的新值  不写则为underfined    
// 2. configurable 该属性是否可以修改或删除 布尔值 默认为false
// 3. enumerable   该属性是否可以枚举循环   布尔值 默认为false
// 4. writable     该属性是否可以被覆盖新值 布尔值 默认为false


Object.defineProperty(obj,'_name',{
    // 属性描述符存取属性 隐藏私有属性 解惑访问和设置：
    configurable: true,
    enumerable: true,
    get() {
        return this.name;
    }
    set(n) {
        this.name = n;
    },
});

// configurable和enumerable属性和数据属性相同 
// get 和 set 函数时获取或设置新值后回调的方法； 
// vue2的响应式原理就是使用的Object.defineProperty的存取属性来实现的
// vue3的响应式原理是使用了Proxy和Reflect进行监听代理对象触发不同的捕获器方法来实现的

六、Object.defineProperties() 方法

// Object.defineProperties() 方法就是可以批量新增属性或修改
// 参数为俩个 1参为目标对象 2参为多个属性的对象
// 用法：
const obj = {
   name: '小明',
   age: 18,
};

Object.defineProperties(obj,{
    'address': {
       configurable: true,
       enumerable: true,
       writable: true,
       value: '中国',
    },
    'async': {
       configurable: true,
       enumerable: true,
       writable: true,
       value: 'await',
  },
});
console.log(obj);

...