JS 小知识点

爱赛跑的小雅
236 阅读8分钟

JS代码中的use strict是什么意思？

use strict是一种ECMAscript5添加的(严格）运行模式，这种模式使得Javascript 在更严格的条件下运行。

设立"严格模式"的目的，主要有以下几个:

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全;
  • 提高编译器效率，增加运行速度;
  • 为未来新版本的Javascript 做好铺垫。 区别:
  • 禁止使用with语句。
  • 禁止this关键字指向全局对象。
  • 对象不能有重名的属性。

为什么部分请求中，参数需要使用 encodeURIComponent 进行转码？

一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。
这意味着，如果URL中有汉字，就必须编码后使用。不同的操作系统、不同的浏览器将导致完全不同的编码结果。
就是使用Javascript先对URL编码，然后再向服务器提交，不要给浏览器插手的机会。因为Javascript的输出总是一致的，所以就保证了服务器得到的数据是格式统一的。 它对应的解码函数是decodeURIComponent()。

base64编码图片，为什么会让数据量变大？

Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码。把一个3字节为一组的数据重新编码成了4个字节。即字节增加了33.3%，数据量相应变大。所以20M的数据通过Base64编码后大小大概为20M*133.3%=26.67M。

123['toString'].length + 123 的输出值是多少？

function的length

function fn1 (name) {}

function fn2 (name = '林三心') {}

function fn3 (name, age = 22) {}

function fn4 (name, gender, age = 22) {}

function fn5(name = '林三心', age, gender) { }

console.log(fn1.length) // 1
console.log(fn2.length) // 0
console.log(fn3.length) // 1
console.log(fn4.length) // 2
console.log(fn5.length) // 0

function的length指的是第一个具有默认值之前的参数的个数

剩余参数不算入length之中

function fn1(name, ...args) {}

console.log(fn1.length) // 1

所以，123['toString'].length + 123 = ?的答案是124

image.png

使用js生成1-10000的数组

实现的方法很多，除了使用循环（for,while,forEach等）外，最简单的是使用Array.from

// 方法一
Array.from(new Array(10001).keys()).slice(1) 
// 方法二 
Array.from({length: 1000}, (node, i) => i+1)

写一个 repeat 方法，实现字符串的复制拼接

方法一

空数组 join

function repeat(target, n) {
    return (new Array(n+1)).join(target)
}

方法二

改良方法1，省去创建数组这一步，提高性能。之所以创建一个带 length 属性的对象，是因为要调用数组的原型方法，需要指定 call 第一个参数为类数组对象。

function repeat(target, n) {
    return Array.prototype.join.call({
        length: n+1
    }, target)
}

使用原生js给一个按钮绑定两个onclick事件

image.png

document.write和innerHTML有什么区别

  • document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
  • innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
  • innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
  • innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

JavaScript中的错误有哪几种类型？

image.png

js中的undefined和 ReferenceError: xxx is not defined 有什么区别？

  • ReferenceError：当尝试引用一个未定义的变量/函数时，就会抛出ReferenceError。
  • undefined：当一个变量声明后，没有被赋值，那么它就是undefined类型。

如何判断当前脚本运行在浏览器还是 node 环境中？

this === window ? 'browser' : 'node'; 通过判断 Global 对象是否为 window，如果不为 window，当前脚本没有运行在浏览器中。

移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？

移动端点击有 300ms 的延迟是因为移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待 300ms，看用户有没有下一次点击，来判断这次操作是不是双击。 有三种办法来解决这个问题：

  • 通过 meta 标签禁用网页的缩放。
  • 通过 meta 标签将网页的 viewport 设置为 ideal viewport。
  • 调用一些 js 库，比如 FastClick click 延时问题还可能引起点击穿透的问题，就是如果我们在一个元素上注册了 touchStart 的监听事件，这个事件会将这个元素隐藏掉，我们发现当这个元素隐藏后，触发了这个元素下的一个元素的点击事件，这就是点击穿透。

什么是点击穿透，怎么解决？

在发生触摸动作约300ms之后，移动端会模拟产生click动作，它底下的具有点击特性的元素也会被触发，这种现象称为点击穿透。

常见场景

  1. 情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。
  2. 情二：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了。 发生的条件
  • 上层元素监听了触摸事件，触摸之后该层元素消失
  • 下层元素具有点击特性（监听了click事件或默认的特性（a标签、input、button标签）） 解决点击穿透的方法
  1. 方法一：书写规范问题，不要混用touch和click。既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了。
  2. 方法二：吃掉（或者说是消费掉）touch之后的click，依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等。

前端路由

什么是前端路由？

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

什么时候使用前端路由？

在单页面应用，大部分页面结构不变，只改变部分内容的使用

前端路由有什么优点和缺点？

优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点：单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

实现方式

前端路由一共有两种实现方式，一种是通过 hash 的方式，一种是通过使用 pushState 的方式。

怎么检测浏览器版本？

  1. window.navigator.userAgent:但这种方式很不可靠，因为 userAgent 可以被改写，并且早期的浏览器如 ie，会通过伪装自己的 userAgent 的值为 Mozilla 来躲过服务器的检测。

  2. 第二种方式是功能检测，根据每个浏览器独有的特性来进行判断，如 ie 下独有的 ActiveXObject。

什么是 Polyfill ？

Polyfill 指的是用于实现浏览器并不支持的API 的代码。 比如说 querySelectorAll 是很多现代浏览器都支持的原生 Web API，但是有些古老的浏览器并不支持，那么假设有人写了一段代码来实现这个功能使这些浏览器也支持了这个功能，那么这就可以成为一个 Polyfill。

Js 动画与 CSS 动画区别及相应实现

  • CSS3 的动画的优点

    • 在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化
    • 代码相对简单

  • 缺点

    • 在动画控制上不够灵活
    • 兼容性不好 JavaScript 的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。对于一些复杂控制的动画，使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑 CSS 吧

mouseover 和 mouseenter 有什么区别？

当鼠标移动到元素上时就会触发 mouseenter 事件，类似 mouseover，它们两者之间的差别是 mouseenter 不会冒泡。 由于 mouseenter 不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其 mouseover 和 mouseout 事件，但是却不会触发 mouseenter

Math.ceil 和 Math.floor 有什么区别？

Math.ceil() ： 向上取整，函数返回一个大于或等于给定数字的最小整数。 Math.round() 四舍五入 Math.floor() ： 向下取整，函数返回一个小于或等于给定数字的最大整数。

toPrecision 和 toFixed 和 Math.round 有什么区别？

  • toPrecision 用于处理精度，精度是从左至右第一个不为 0 的数开始数起。
  • toFixed 是对小数点后指定位数取整，从小数点开始数起。
  • Math.round 是将一个数字四舍五入到一个整数。

直接在script标签中写 export 为什么会报错？

现代浏览器可以支持用 script 标签引入模块或者脚本，如果要引入模块，必须给 script 标签添加 type=“module”。如果引入脚本，则不需要 type。script 标签如果不加type=“module”，默认认为我们加载的文件是脚本而非模块，如果我们在脚本中写了 export，当然会抛错。

avatar
文章
阅读
粉丝