JS小技巧(二)持续更新

92 阅读2分钟

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、语法区别

参数中断其他
forEachitem,index,arr,this(try...catch)index不能被重置
forindex,arrbreak continue return可以控制循环的起点

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 天

点击查看活动详情