js常见面试题整理

js常见面试题整理

• 持续整理中

1.写react/vue项目时列表组件的key的作用

• 如果v-for遍历生成的dom结构简单可以不用了，在数据变化时强制更新组件，以避免“原地复用”带来的副作用

2.[‘1’, ‘2’, ‘3’].map(parseInt)=[1,NAN,NAN]

• 实际代码：

['1', '2', '3'].map((item, index) => {return parseInt(item, index)})

// 详解
parseInt(string, ?radix);
	string 要被解析的值
	radix 从 2 到 36，表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意，10不是默认值

如果 radix 是 undefined、0或未指定的，JavaScript会假定以下情况：
	如果输入的 string以 "0x"或 "0x"（一个0，后面是小写或大写的X）开头，那么radix被假定为16，字符串的其余部分被当做十六进制数去解析。
	如果输入的 string以 "0"（0）开头， radix被假定为8（八进制）或10（十进制）。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制)，但不是所有的浏览器都支持。因此，在使用 parseInt 时，一定要指定一个 radix。
	如果输入的 string 以任何其他值开头， radix 是 10 (十进制)。
	如果第一个字符不能转换为数字，parseInt会返回 NaN。


// 正确代码：
['1', '2', '3'].map(Number)=[1,2,3]

3.防抖和节流

• 防抖: 触发高频事件后n秒内函数只执行一次，如果n秒内高频事件再次触发，则重算时间
  • 思路：每次触发事件时都取消之前的延时调用方法
• 节流: 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
  • 思路：每次触发事件时都判断当前是否有等待执行的延时函数

4.setTimeout、Promise、Async/Await 的区别

• 宏任务(macrotask)：
  script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境)

• 微任务(microtask)：
  Promise、 MutaionObserver、process.nextTick(Node.js环境）

• settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行；

• promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行；

• async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。

5.vue事件带默认参数时，传递其他参数

• 示例

@submit='(arg1, arg2) => doSomething(arg1,arg2, arg3)'
@submit='doSomething(...$event, '我是第三参数')'

6.js中this的作用

• this始终指向最后一个调用它的对象，创建实例new，会将this自动指向类/构造函数，此时的this是类，没有调用的对象this为window，严格模式下是undefined,
• es6: 箭头函数中没有this，在箭头函数内部访问到的 this 都是从外部获取的、
• call/appl/bind继承另一个类的方法和属性，
  call(this,a,b), call(this,a,b)( ), apply(this,array),
  this指向当前类，bind 返回的是一个新的函数，你必须调用它才会被执行

7.函数柯里化

• 示例

只传递函数的一部分参数去调用他，让他返回的函数去处理其他参数

f(x,y){
	return x+ y
}
// f(1,2)

f1(x){
	return function(y,z){
		return x + y + z
	}
}
// f1(1)(2,3)

优点：
1.更利于函数的复用
2.提前确认，将函数放在一个自执行的函数中，再条件判断语句后返回当前需要定义的函数

8.js垃圾回收机制

• 什么是垃圾:

  • 没有被引用的对象，多个对象形成一个环，相互调用，导致根找不到他们。

• （标记-清除 算法）

  • 第一阶段：
    • 标记。从根结点出发遍历对象，对访问过的对象打上标记，表示该对象可达。
    • 标记法，每隔一段时间对所有的空间地址检测，如果没有被占用，立即回收
  • 第二阶段：
    • 清除。对那些没有标记的对象进行回收，这样使得不能利用的空间能够重新被利用。
    • 计数法，空间地址被占用一次+1，空闲一次空间地址-1，如果为0 被回收

9.void(0)

• void是一元运算符，返回undefined,
• 替代undefined，undefined不是关键字
• 客户端url，javascript:void(0);，URL中可以写带有副作用的表达式，而void则让浏览器不必显示这个表达式的计算结果
• 阻止默认事件

10.promise.all(iterable)

• iterable是一个全部是promise的数组，只要数组中有一个promise被reject，最后都会被catch，只有所有promise的resolve都触发才会触发.then

11.import export

• 单export导出变量需要加{}，import 接受时也需要加{}，

• export default 不需要加{}，import也不需要

• 每个文件只有一个default

• 少见情况

// user.js
export default class User { 
	constructor(name) { 
		this.name = name; 
	} 
} 
export function sayHi(user) { 
	alert(`Hello, ${user}!`); 
}
// handle.js
import {default as User, sayHi} from './user.js'; 
new User('John');

12.i++ 与 ++i 的主要区别有两个：

• i++ 返回原来的值，++i 返回加1后的值。
• i++ 不能作为左值，而++i 可以。

13 onload函数和onready区别

• onload在所有相关资源加载完执行
• onready在dom元素加载完执行

14iframe作用

• A.实现跨域
• B.引入第三方内容
• C.独立交互内容

15.跨域

• 浏览器的同源政策：只接受域名+协议+端口相同的请求

• 解决方案：

  • jsonp
    • 用script标签的src属性来实现跨域，拼接url，然后将动态添加一个script元素到头部，只能get
  • cors
    • 需要后台支持
    • Access-Control-Allow-xxxx
  • nginx代理跨域
  • Iframe+document.domain

16.判断是否为数组

• 示例

var a = [1,2,3]

// 1.
a instanceof Array  // true

// 2.
Array.isArray(a)  // true

17.js 数组去重

• 双重for循环 es5老方法

• Array.from(new Set(arr)) es6的Set去重

var a = [2,3,4,2,1,3,4]
Array.from(new Set(a))
// [2, 3, 4, 1]

18.echarts封装公共配置项

• js 写在构造函数内 vue 组件的形式
• Tips:将子组件相关方法的调用放在nextTick里面,将回调延迟到下次 DOM 更新循环之后执行

19.Tsconfig.json 常用配置

• 示例

{
  "compilerOptions": {
    "allowUnreachableCode": true, // 不报告执行不到的代码错误。
    "allowUnusedLabels": false,	// 不报告未使用的标签错误
    "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
    "baseUrl": ".", // 工作根目录
    "experimentalDecorators": true, // 启用实验性的ES装饰器
    "jsx": "react", // 在 .tsx文件里支持JSX
    "sourceMap": true, // 是否生成map文件
    "module": "commonjs", // 指定生成哪个模块系统代码
    "noImplicitAny": false, // 是否默认禁用 any
    "removeComments": true, // 是否移除注释
    "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
      "node", // 引入 node 的类型声明
    ],
    "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
      "src": [ //指定后可以在文件之直接 import * from 'src';
        "./src"
      ],
    },
    "target": "ESNext", // 编译的目标是什么版本的
    "outDir": "./dist", // 输出目录
    "declaration": true, // 是否自动创建类型声明文件
    "declarationDir": "./lib", // 类型声明文件的输出目录
    "allowJs": true, // 允许编译javascript文件。
    "lib": [ // 编译过程中需要引入的库文件的列表
      "es5",
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "dom"
    ]
  },
  // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
  "include": [
    "src/**/*"
  ],
  // 指定一个排除列表（include的反向操作）
  "exclude": [
    "demo.ts"
  ],
  // 指定哪些文件使用该配置（属于手动一个个指定文件）
  "files": [
    "demo.ts"
  ]
}

20.闭包的缺点

• 引用的变量可能发生变化This指向
• 内存泄露

21.扁平化数组

• 遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat
• reduce
• 递归

22.浏览器输入url执行的全过程

• 域名解析-信息上传到服务器-tcp三次握手-建立tcp连接发起http请求-服务器响应请求-解析html代码-断开tcp连接四次挥手-渲染成功
• 1.DNS域名解析为服务器主机的IP地址；
• 2.根据IP,找到对应的服务器，发起TCP三次握手；
• 3.建立TCP连接后发起HTTP请求；
• 4.服务器得到HTTP请求，浏览器得到资源后；
• 解析dom，渲染css，最后渲染js
  • 5.浏览器解析HTML代码，并请求HTML代码中的资源
  • 6.浏览器对页面进行渲染并展示给用户；

23.webpack手动搭建vue项目

• 操作示例
  新建文件夹-npm init初始化-npm i vue webpack-在根目录创建app.vue,main.js(挂载和vue实例化),webpack.config.js（配置入口文件，输出文件）-测试打包，package.json的script中加入build配置-安装vue-loader,在webpack的module的loader中加vue-loader-npm i css-loader等并配置-安装html-webpack-plubgin-vue-router-封装axios-拦截器-框架搭建完

24.animation

• 示例

animation-name: example; 名称
  animation-duration: 4s; 需要的时间
  animation-delay: 2s; 动画延迟
animation-iteration-count：动画运行次数


@keyframes example {
From to 或者
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

25.原型和原型链的理解

每个构造函数都有一个prototype属性，这个属性会指向他的原型对象，
每个实例化的对象都会有proto属性，这个属性会指向改对象的原型，
每个原型都有constactor属性，指向关联的构造函数
当读取实例对象的属性时，会先去内部找，找不到就去关联的原型对象中找，还没有就会一直往上找原型对象的原型，知道最顶层的Object.prototype,如果他的proto属性为null，那么最终会返回undefined

这样层层递进就形成了实例予原型之间的链式关系，就是原型链

26.dom的事件流三个阶段

• 事件捕获阶段：
• 目标阶段：
• 事件冒泡：

27.type和interface区别

• 相同：
  • 都可以描述一个对象或者函数
  • 都可以被继承
• 不同点：
  • type:可以声名类型别名，联合类型，元组
  • interface：interface可以声名合并

28.原生js实现类继承

• prototype (组合继承，寄生继承，组合寄生继承)
• call/apply(借用构造函数)

29.less做css-module

• vscode插件:css tree

30.meta标签

• 示例

<meta name=”元数据类型” content=”具体描述信息”>

元数据类型：application name：web系统名称，author：作者名，
viewreport：视口初始大小（content="width=device-width, initial-scale=1.0"
）

31.泛型

• 不知道具体数据类型时可以使用泛型

<T>
Interface T{					
	type T number
	...
}

32.fetch请求

• XMLHttpRequest 的升级版，功能差异

使用promise，
采用模块化设计，
通过数据流处理数据，
fetch(url)
  .then(...)
  .catch(...)
用法同promise

• 详情参考阮一峰

33.Promise

• promise是js异步编程的新的解决方案，解决了回调函数多重嵌套带来的回调地狱问题。

• Promise从语法上说是构造函数。

• promise从功能上讲，原来封装异步操作并返回其结果

• Promise 状态：pending resolved rejected

• 流程

：new Promise() 初始pending状态==>执行内部异步函数==>成功调用resolved，失败调用rejected==>指定成功回调后的函数.then(),失败回调后的函数.catch(),不管结果如何的函数.finally()


var p =new Promise((resolve,reject)=>{
    setTimeout(()=>{
        var time = new Date()
        if(time % 2 ===0){
            resolve('成功回调后的值'+ time)
        }else{
            reject('失败回调后的值'+time)
        }

    },1000)
})

p.then(
    value=>{
        console.log(value)
    },
    reason=>{
        console.log(reason)
    }
)

p.catch(reason=>{
    console.log(reason)
})

p.finally(()=>{
    
})

• Promise.all(),并行执行多个promise异步函数，所有promise都resolved才会返回最后他们所有的resolved结果一个数组(按顺序的)，执行中遇到任意rejected会立即rejected那个错误的结果。
  Promisee.race(),返回第一个成功和失败的promise的结果

• Async函数返回一个promise对象，函数执行结果是resolved
  Await在async内部必须，await后跟一个promise，var a = await new promise() ,a的值是这个promise的resolve结果

34.插件的制作方式

• 说明

(function(){})();立即执行函数，闭包，避免污染全局变量 
通常一个插件只暴露一个变量给全局供其它程序调用 
还有其它写法，运算符+函数体+括号 
例：!function(){}(); +function(){}(); -function(){}(); 
void function(){}(); 等等只要能对函数返回值进行运算的符号都可以