前端面经面经每日一题day04

​​​​​​​互联网大厂面试每日一题 -- 大厂面试每日一题

上面这个网址是我的题目的来源

不知不觉都已经第四天了,现在因为有了这个任务,我能够自己每天坚持去学习,然后输出。希望我分享的能够让看到的人收获,如果有什么问题可以发在评论区。

关于 JSON,以下代码输出什么

JSON.stringify 就是把JavaScript对象转换成JSON字符串,这个过程就是序列化。

它会忽视undefined和function(){}

对于函数get a(){|,本质是,就是变量a的get方法,如果没有return就是返回值是undefined,所以会忽视,如果有返回值,就是会赋值给变量a

补充:undefined就是初始化后未赋值,比如let a就是undefined,null就是给他赋值了null

复制代码
let obj={
    a:3,
    b:[1,2,3],
    c:{m:3},
    d:null,
    e:undefined,
    f:function(){},
    get e(){return 44},
    get g(){}
}
console.log(JSON.stringify(obj))
输出:{"a":3,"b":[1,2,3],"c":{"m":3},"d":null,"e":44}

JSON.parse 就是把JSON字符串转化为JavaScript对象。如果不是JSON字符串就会抛出异常。

如何把类数组转化为数组

类数组

特点:类数组有length属性,但是不具备数组原型链上的方法(比如push,pop)。

常见的类数组对象:arguments对象:传递给函数的所有参数。DOM方法返回的结果,document.querySelectorAll

转化为数组的方法

Array.from

这是一个ES6引入的静态对象,用于从类数组或可迭代对象中创建一个新数组实例。

复制代码
let obj={0:'1',1:'2',length:2}
let arobj=Array.from(obj)
console.log(arobj)

扩展运算符 ...

ES6 ,不适用于所有的类数组,但只能作用于可迭代对象iterable 比如DOM方法的结果,但是对于{length:3}就不可以,会出错。

复制代码
let all=document.querySelectorAll('li')
let allarr=[...all]
console.log(allarr)

Array API

ES5中可以借用Array API通过,call/apply改变this来完成转化。

Array.prototype.slice.call(arrayLike) 这个调用数组原型身上的方法,slice是数组一个方法,提取数组的部分元素,这里我们就提取数组的全部元素,call里面第一个就是需要转化的类数组,第二个就是slice方法切割的开头,第三个元素就是slice方法切割的结束。

复制代码
let obj={0:'1',1:'2',length:2}
let arobj=Array.prototype.slice.call(obj)
//或者let arobj=Array.prototype.slice.apply(obj)
console.log(arobj)

以上方法都可以,但是我们现在看一下稀疏数组,就是数组中元素为空,控制台显示如下:(2) 空属性 × 2

那么就是说,上述的方法不一定适用于类数组,最后总结一下,比较稳妥的类数组转化为数组的方法如下

Array.from(arrayLike)

相关推荐
独泪了无痕37 分钟前
Vue3 Hooks使用实战解析
前端·vue.js
程序喵大人1 小时前
【C++进阶】STL容器与迭代器 - 01 STL 容器先解决元素放在哪里
开发语言·c++·stl
cui_ruicheng1 小时前
Python从入门到实战(十六):多进程编程
开发语言·python
shawxlee2 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户059540174462 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹3 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen3 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱3 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
wdfk_prog3 小时前
嵌入式面试真题第 15 题:不可恢复异常后的通用崩溃快照、调用栈保存与离线分析架构
linux·开发语言·面试·架构
晴空了无痕3 小时前
从 Go 基础到 K8s:一条可落地的 Go 服务端成长路线
开发语言·后端·golang·kubernetes