ES6新特性2

2020-09-27

ES6新特性2

ES6对象字面量增强:

• key和val的变量名相同的情况下可以省略：后面
• 在对象中添加一个函数可以直接写 fn(){} 替代原来的 fn: function() {}
• 但是这两种添加函数的方式是等价的 fn(){} 新的这种方式也是一个普通函数不是箭头函数 要注意this
• es6允许[]的形式写一个变化的属性名 这种属性名被叫做 计算属性名
• [] 中可以写任意的表达式 表达式的执行结果会作为属性名 例如getkey()的返回值'keyname'会作为属性名

const bar = 'bar';

const getKey = (str) => 'key' + str;

const obj = {
  foo: 123,
  // bar: bar,
  bar, // es6中变量名与属性名一样可以省略：之后的东西
  // method1: function() {} 
  // 下面这种方式等价于上面这种就是普通函数不是箭头函数 注意this指向
  method1() {console.log(this);}, // ES6可以直接写成这种形式

  // es6允许[]的形式写一个变化的属性名 
  // [] 中可以写任意的表达式 表达式的执行结果会作为属性名
  // 例如getkey()的返回值'keyname'会作为属性名
  // 这种属性名被叫做 计算属性名
  [getKey('name')]: 'lanpang',
}
console.log(obj);

Proxy监视对象中的属性读写:

• get方法的返回值会作为访问所有对象中成员的值 例如 如果get方法return 111 那么不管访问proxyObj中的任何属性 得到的都是111

let obj = {
  name: 'lanpang',
  age: 18
}

let proxyObj = new Proxy(obj, {
  // target 就是Proxy代理的对象 也就是 obj
  // property 是当前访问的key
  get(target, property) { // 监视obj中数据的访问
    return 111;
  },
})

let a = proxyObj.name;
console.log(a); // 111

• set可以监听ProxyObj中成员的改变 其中可以做数据校验 例如当改变age时 如果传入的不是数字类型 可以抛出错误
• 对比于Object.defineProperty defineProperty只能监听数据的读和写 而proxy功能更加强大 可以监听到delete操作或其他
• 更方便的对数组进行操作 而如果在defineProperty上去实现 则要重写数组的各种方法
• proxy是以非侵入的式的方式去监听对象数据的读写 而 defineProperty是

// const { set } = require("lodash");

let obj = {
  name: 'lanpang',
  age: 18
}

let proxyObj = new Proxy(obj, {
  // target 就是Proxy代理的对象 也就是 obj
  // property 是当前访问的key
  get(target, property) { // 监视obj中数据的访问
    // console.log(111);
    // console.log(target);
    // console.log(property);
    // return 111; // get的返回值就是获取proxyObj属性得到的值
    // 例如 如果返回111 那么 proxyObj.name = 111 && proxyObj.age = 111 && proxyObj.anything = 111;
    return property in target ? target[property] : undefined;
  },
  // set用作监听对象中成员的改变
  // value 是要设置的值 
  set(target, property, value) {
    // console.log(target);
    // console.log(property);
    // console.log(value);
    target[property] = value;
  },
  deleteProperty(target, property) {
    console.log('delete', property);
    delete target[property];
  }
})

proxyObj.sex = 'man';

delete proxyObj.age;
console.log(obj)

const arr = [1, 2, 3, 4, 5];
const proxyArr = new Proxy(arr, {
  set(target, property, value) {
    console.log(target);
    console.log(property);
    console.log(value);
    target[property] = value;
    return true;
  }
});

// proxyArr.push(111, 222);
// console.log(arr); 

Object.defineProperty(obj, 'name', {
  get() {
    console.log('name 被访问');
    return obj._name;
  }
})

const a = obj.name;
console.log(a);

Relect新的内置函数:

• 与Math对象一样 只能调用Math.xxx而不能new
• Reflect就是对proxy内部13个方法的默认实现 可以用来对对象做一下操作
• 提供了统一的一套用于操作对象的API

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

const proxy = new Proxy(obj, {
  get(target, property) {
    console.log('我做了一些想做的事情。。。');
    return Reflect.get(target, property); // 标准的proxy应该在做完事情之后返回Reflect中标准的写法
  }
})

'name' in obj;
delete obj.age;
Object.keys(obj);

// 用于替换上面的方法
Reflect.has('name');
Reflect.deleteProperty(obj, 'age');
Reflect.ownKeys(obj);

Symbol:

• 表示一个独一无二的值 Symbol('1') !== Symbol('1')
• 从ES6开始 对象可以使用 Symbol作为属性名 以前只能是string obj[Symbol()] = '123';
• Symbol常用来设定对象的私有成员

新方法:

• Object.values 对应 Object.keys 获取对象的值的数组
• Object.entries 将对象转换成键值对数组
• String.prototype.padEnd / padStart 用指定字符串填充字符串达到指定长度

const obj = {
  name: 'lanpang',
  age: 18
}
// console.log(Object.values(obj)); // ['lanpang', 18];
// console.log(Object.keys(obj)); // ['name', 'age'];

// Object.entries----------以数组的形式输出对象的key value
console.log(Object.entries(obj)); // [['name', 'lanpang'], ['age': 18]]

// entries 可以更方便的使用for of方法遍历一个对象
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// 还可以很便利的将一个普通对象转换为一个Map数据类型
console.log(new Map(Object.entries(obj)));

// String.prototype.padStart / String.prototype.padEnd
// 使用指定字符对字符串的前 / 后进行填充 直到满足指定长度
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key.padEnd(16,'-')} | ${value.toString().padStart(5, 0)}`);
}

总结:

• 记录一些ES6新特性中以前不熟或者没接触过的知识点
• 有许多用法都挺有用的 值得运用到实际开发中。例如 Object.entries 方法