美文网首页
一些es6的小技巧

一些es6的小技巧

作者: FrankFang7 | 来源:发表于2021-12-15 18:32 被阅读0次
// 结构对象
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5
}
const { a, b, c, d: d1 } = obj
const f = a + b
console.log(a, b, c, d1, f) //1 2 3 4 3

// 数组合并并去重
const arr1 = [1, 2, 3]
const arr2 = [3, 4, 5]
const arr3 = [...new Set([...arr1, ...arr2])]
console.log(arr3) //[1, 2, 3, 4, 5]

// 对象合并
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const obj3 = { ...obj1, ...obj2 }
console.log(obj3) //{a:1, b:2}

// 判断条件
const condition = [1, 2, 3, 4]
if (condition.includes(5)) {
  console.log('包含')
} else {
  console.log('不包含') //不包含
}

// filter和find的区别:filter返回符合条件的数组;find找到一项就停止遍历,返回该项
const arr4 = [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'A', age: 18 }]
const resultA = arr4.filter(item => item.name === 'A')
console.log(resultA) //[{name: 'A'}, {name: 'A', age: 18}] 
const resultB = arr4.find(item => item.name === 'A')
console.log(resultB) //{name: 'A'} 

// 扁平化数组:其中使用Infinity作为flat的参数,使得无需知道被扁平化的数组的维度
const deps = {
  'A部门': [1, [2, 3]],
  'B部门': [3, 4],
  'C部门': [5, 6],
  'D部门': [7, [8, 9]]
}
let member = Object.values(deps).flat(Infinity)
console.log(member) // [1, 2, 3, 3, 4, 5, 6, 7, 8, 9]

// 获取对象属性值
const obj4 = {}
if (obj4?.name) { //等于 obj4 && obj4.name
  console.log(obj4.name)
} else {
  console.log('no name')
}

// 判断空值:和!value有啥区别?
let value = null
if ((value ?? '') !== '') {
  console.log('value不为空')
}

// 异步函数
const fn = async () => {
  const res1 = await fn1()
  const res2 = await fn2()
  console.log(res1) //1
  console.log(res2) //2
}

// 并发请求
const fn = () => {
  Promise.all([fn1(), fn2()]).then(res => { console.log(res) }) //[1,2]
}
// 如果并发请求时,只要其中一个异步函数处理完成,就返回结果,要用到 Promise.race()

相关文章

  • 一些es6的小技巧

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • ES6总结

    es6-cheatsheet 这是一个 ES2015(ES6) 的Cheatsheet,其中包括提示、小技巧、最佳...

  • ES6小技巧

    1- 数组去重 数组拼接 assign

  • 2018-03-31

    关于 ECMAScript 2015(ES6)的一些有用的提示和技巧 以UPX漏洞为例介绍整数溢出(基础篇)

  • 7个javascript实用小技巧

    每种编程语言都有一些“黑魔法”或者说小技巧,JS也不例外,大部分是借助ES6或者浏览器新特性实现。下面介绍的7个实...

  • 6个讨喜的 ES6 小技巧

    【编者按】本文作者为 Axel Rauschmayer,主要介绍6个 ES6 小技巧。文章系国内 ITOM 管理平...

  • 算法--leetcode-283-移动零

    相当于是使用 for 进行交换的一个小技巧的练习,后面会给出一些算法的小技巧,都是总结的一些算法的小技巧。

  • web前端中一些ES6的小技巧

    EcmaScript 2015 (ES6) 已经出现了很多年了,我们可以使用它的一些新特性。 1.设置必须的函数参...

  • 70个做饭小技巧

    70个做饭小技巧 文/瑶静 今天,向大家分享一些做饭的小技巧。...

网友评论

      本文标题:一些es6的小技巧

      本文链接:https://www.haomeiwen.com/subject/peppfrtx.html