es6你用过哪些惊艳的写法

​

es6在项目中用得非常多，浏览器也支持了很多es6写法，通常为了兼容性，我们会用babel将一些比较高级的语法进行转换，比如箭头函数、Promise、对象解构等等，那么我们项目中有哪些你经常用的es6[1]呢？

本篇是笔者根据以往项目总结所用的es6,希望在项目中有所思考和帮助。

正文开始...

定义常量/变量(const/let)

这是一个百分百有用,是一个闭着眼睛都会的用法,不过我们注意const/let是es6引入的一个块级作用域的关键字，在{}中定义变量{}外部不能访问，并且不存在变量的提升, let与const定义的变量，不能重复定义，用const申明的变量不能重新赋值。

const STATUS = {
  0: '未开始',
  1: '进行中',
  2: '结束了'
};
let userName = 'Maic';

复制

对象/数组解构

项目中会用得非常多，告别那种一一取值再赋值吧

const userInfo = {
  name: 'Maic',
  age: 18,
  number: 10
}
const {name,age} = userInfo;
console.log(name, age);

const {name: nname, ...rests } = userInfo
console.log(nname, rests): // Maic {age: 18, number: 10}

const url = new URL('https://github.com/type-challenges/type-challenges/issues?q=label%3A5+label%3Aanswer');
const search = url.search;
const [, params] = search.split('?');
console.log(params) // q=label%3A5+label%3Aanswer

const arr = [1,2,3,4];
const [first, ...rest] = arr;
console.log(first, rest); // 1 [2,3,4]

复制

对象动态赋值

var key = 'test';
var obj = {
  [key]: 'test'
};

复制

对象合并

const objs = {name: 'Tom', age: 10};
const merge = (target,options) => {
    const ret = Object.assign(Object.create({}), target, options);
    return ret;
}
const nobj = merge(objs, {age: 18})
// or
const nobj2 = {...objs, age:18};

复制

数组合并

const arr = [1,2,3];
// 复制操作
const narr = [...arr];
// or
const [...n2arr] = arr;

// 合并数组
const barr = [4,5,6];
const carr = [...arr,...barr];

复制

Map

Map也俗称集合，项目中你可以用此来维护一组if的条件判断，或是以前策略模式的一组数据，可以用此来优化代码，让业务代码可拓展性更强，从此告别冗余的if else,switch case，这个会用得比较多，用下面一段伪代码来感受一下,

const queryDetail = () => {
  console.log('query detail');
};
const queryList = () => {
  console.log('query list');
}
const queryPic = () => {
    console.log('query pic')
}
const request = new Map([
  ['getDetail', queryDetail],
  ['queryList', queryList]
]);
if (request.has('getDetail')) {
  request.get('getDetail')();
}
if (!request.has('queryPic')) {
  request.set('queryPic', queryPic);
}
// or 循环执行
request.forEach(fn => {
    fn();
})
request.get('queryPic')();
console.log(request.entries(request));
// 获取所有的值
console.log(request.values(request));
// 获取所有的key
console.log(request.keys(request));
/*
[Map Entries] {
  [ 'getDetail', [Function: queryDetail] ],
  [ 'queryList', [Function: queryList] ],
  [ 'queryPic', [Function: queryPic] ]
}
*/

复制

Map常用的方法

const map = new Map();
Reflect.ownKeys(map.__proto__);
/**
[
  0: "constructor"
  1: "get"
  2: "set"
  3: "has"
  4: "delete"
  5: "clear"
  6: "entries"
  7: "forEach"
  8: "keys"
  9: "size"
  10: "values"
  11: Symbol(Symbol.toStringTag)
  12: Symbol(Symbol.iterator)
]
*/

复制

对象转Map

const obj = {a:1,b:2};
const map = new Map(Object.entries(obj));
/*
  等价于
  const map = new Map([
    ['a',1],
    ['b',2]
  ]);
*/
console.log(map);// Map(2) { 'a' => 1, 'b' => 2 }

复制

Map转对象

var map2 = new Map([['a','123'],['b','234']])
Object.fromEntries(map2.entries()) // {a: '123', b: '234'}

复制

WeakMap

与Map的区别是WeakMap是一种弱引用，WeakMap的key必须是非基础数据类型。WeakMap没有遍历的entries、keys、values、size方法，只有get、set、has、delete方法。

const bodyDom = document.getElementsByTagName('body')[0];
const weakMap = new WeakMap();
weakMap.set(bodyDom, 'bodyDom');
console.log(weakMap.get(bodyDom));

复制

Set

一般我们在项目常用去重操作,或者过滤数据处理

  var newset = [...new Set([1,1,2,3])]
  console.log(newset); // 1,2,3
  var arrsSet = new Set();
  arrsSet.add({name: 'Maic'}).add({name: 'Tom'})
  console.log([...arrsSet]);// [ { name: 'Maic' }, { name: 'Tom' } ]
  console.log(newset.has(1)) // true

复制

根据某个字段找出两组数据中相同的数据,并合并

const data1 = [
  {price:100,attr: 'nick'}, 
  {price: 200,attr: '领带'}
];
const data2 = [
  {price:200,attr: '眼镜'}, 
  {price: 5000,attr: '戒子'}, 
  {price:100,attr: 'nick'}
];

const findSomeByKey = (target1, target2, key) => {
    const target2Set = new Set([...target2]);
    const ret = [];
    const tagret = target1.map(v => v[key]);
    target2.forEach(v => {
      Object.entries(v).forEach(s => {
          const [, val] = s;
          if (tagret.includes(val)) {
              const curent = target1.find(v => v[key] === val);
              ret.push(v, curent)
          }
      })
    })
    return ret
}
findSomeByKey(data1, data2, 'price');
/*
[
  {price: 200, attr: '眼镜'},
  {price: 200, attr: '领带'},
  {price: 100, attr: 'nick'},
  {price: 100, attr: 'nick'}
]

复制

Set的常用方法

const nset = new Set();
console.log(Reflect.ownKeys(nset.__proto__));
/*
[
  0: "constructor"
  1: "has"
  2: "add"
  3: "delete"
  4: "clear"
  5: "entries"
  6: "forEach"
  7: "size"
  8: "values"
  9: "keys"
  10: Symbol(Symbol.toStringTag)
  11: Symbol(Symbol.iterator)
]
*/

复制

WeakSet

没有循环，没有get,不太常用

const nweakSet = new WeakSet([['name','Maic'],['age',18]]);
console.log(nweakSet);
console.log(Reflect.ownKeys(nweakSet.__proto__));
/**
   "constructor"
    1: "delete"
    2: "has"
    3: "add"
    4: Symbol(Symbol.toStringTag)
*/

复制

Reflect

这是es6中比较新的api

// 判断对象熟悉是否存在
const nobj = {a: 1}
if ('a' in nobj) {
    console.log('存在')
} else {
  console.log('不存在')
}
// or
console.log(nobj.hasOwnProperty('a'));
// or
console.log(Object.hasOwn(nobj, 'a'))

// now
Reflect.has(nobj, 'a');
// 向对象中添加属性
Reflect.defineProperty(obj,'b', {value: 22})
console.log(nobj); // {a:1,v:2}
// 删除对象属性
Reflect.deleteProperty(nobj, 'a');
console.log(nobj); // {b:22}

// 调用函数
function f() {
  this.age = 18;
  this.arg = [...arguments];
  console.log(this.arg,this.age); // [1,2] 18
}
Reflect.apply(f, this, [1,2]);
// 相当于过去这个
Function.prototype.apply.call(f,this,[1,2])

// 遍厉对象,获取key
console.log(Reflect.ownKeys(nobj));// ['a', 'b']

复制

Proxy

es6对象代理,劫持对象，在vue3中实现双向数据绑定，用Proxy实现一个观察者模式

var bucket = new Set();
var effect = (fn) => {
  bucket.add(fn)
}
const proxyOption = {
  set(target, key, val, receiver) {
      const result = Reflect.set(target, key, val, receiver);
      bucket.forEach(item => {
        Reflect.apply(item, this,[])
      })
      return result
  },
  get(target, key,receiver) {
      return Reflect.get(target, key)
  }
}
// 创建观察器
const observer = (obj) => new Proxy(obj, proxyOption);
const obj = {
  name: 'Maic',
  age: 18
}
// 将obj添加到观察器中
const userInfo2 = observer(obj);

effect(() => {
    console.log(userInfo2.name, userInfo2.age);
});

userInfo2.name = 'Tom'; // 触发Proxy

复制

async/await

这个用得太多了，异步变成同步操作,async定义的一个函数，会默认返回一个Promise,注意async中不一定有await,但是有await一定得有async。

const featchList = () => new Promise((resolve, reject) => {
  resolve({code: 0, message: '成功'})
})
const requests = async () => {
  try {
    const {code} = await featchList();
  } catch (error) {
      throw error;
  }
  
  console.log(code, '=code');
}
requests();

复制

Class

 class Utils {
   constructor(name, age) {
     Object.assign(this, {name, age});
     // or
     /*
       this.name = name;
       this.age = age;
     */
   }
 }
 const utils = new Utils('utils', 18)

复制

函数默认参数

function test(name = 'Maic') {
    console.log(name)
}

复制

箭头函数

不过要注意箭头函数的一些特性，比如没有没有自己的this,不能被实例化，也不能用bind,call之类的

const request = () => {};
// 以前
const requestFn = function() {}

复制

总结

1、常用的let、const

2、对象解构，扩展运算符，数组解构等

3、Map,Set,Reflect,Proxy、class、箭头函数等常见的运用

4、本文示例code example[2]

参考资料

[1]es6: https://es6.ruanyifeng.com/

[2]code example: https://github.com/maicFir/lessonNote/tree/master/javascript/10-es6