JS小技巧（二）持续更新

theme: channing-cyan

1 forEach

forEach 跳出循环

      try {
        const formData = [
          1,2,
        ]
        formData.forEach((i) => {
          if (i===1) {
            res = false
            throw new Error()
          }
        })
      } catch (e) {
        return res
      }

比较for ，forEach之间的区别（延伸出for...of）

// 可以迭代 Array String Set：去重后的数组
let iterable = [10, 20, 30];
for (let value of iterable) {
    value += 1;
    console.log(value);
}

1、本质区别

forEach ：负责遍历可迭代的对象，

for：是一种循环机制，只是能通过它遍历出数组

2、语法区别

3、性能区别

性能比较：for > forEach > map

for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。
forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。
map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。

2 JavaScript 是单线程

为什么是单线程的喃？

这是因为 JavaScript 可以修改 DOM 结构，如果 JavaScript 引擎线程不是单线程的，那么可以同时执行多段 JavaScript，如果这多段 JavaScript 都修改 DOM，那么就会出现 DOM 冲突。

为了避免 DOM 渲染的冲突，可以采用单线程或者死锁， JavaScript 采用了单线程方案。

缺点及解决方案

但单线程有一个问题：如果任务队列里有一个任务耗时很长，导致这个任务后面的任务一直排队等待，就会发生页面卡死，严重影响用户体验。

为了解决这个问题，JavaScript 将任务的执行模式分为两种：同步和异步。

3 async 和await

多个await命令后面的异步操作，如果不存在继发关系（即互不依赖），最好让它们同时触发

let foo = await getFoo();
let bar = await getBar();
// 上面这样写法 getFoo完成以后，才会执行getBar

// 同时触发写法 ↓

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

4 数组的get方法

取数组内指定对象的值

常规做法：数组过滤，过滤后的数组下标索引0，再取对应的键值

get方法：Array.get(key,value,name)

数组内对象满足key value一致。name 对应的是要取的键

const array=[]
// 方法1
const list = array.filter(i=>i.id===1)
const name = list[0].name
// 方法2
const name = array.get('id',1,'name)

开启编程成长之旅！这是我参与「编程 · 2 月更文挑战」的第 1 天

点击查看活动详情