1. this指向问题
在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。
- this指向的对象称为函数的上下文对象context；
- this的指向取决于函数被调用方式
- this的指向不是函数声明是绑定的，而是在函数运行过程中动态绑定的。
1.全局环境输出this，指向谁，(window)
2.全局函数输出this，指向谁 (window)
3.对象的方法输出this，指向谁 (this 放在方法中指向调用这个方法的对象)
4.dom事件输出this，指向谁 (DOM 对象)
5.构造函数中的this，指向谁 (用来创建对象)
6.new关键字做了什么
new 会创建对象，将构造函数中的this指向创建的this 指向fn
7.箭头函数中的this指向谁 (没有this)
普通函数谁调用指向谁，箭头函数在哪里定义指向谁
箭头函数外指向谁就指向谁
2. 说说你对闭包的理解。
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染；缺点是闭包会常驻内存，增加内存使用量，使用不当很容易造成内存泄漏。在JavaScript中，函数即闭包
，只有函数才会产生作用域闭包有3个特性
-
函数嵌套函数。
-
在函数内部可以引用外部的参数和变量
-
参数和变量不会以垃圾回收机制回收
3. 如何实现浏览器内多个标签页之间的通信？
- 调用 localstorge、 cookie等数据存储通信方式
4. call()和apply()的区别和作用是什么？
作用：
1 .作用都是在函数执行的时候，动态改变函数的运行环境（执行上下文）。
2 .call和 apply的第一个参数都是改变运行环境的对象。
3 .call（）和apply（）都是function 原型上的方法 用来改变this指向
4 .和它功能相似的还有bind（）改变this指向，但bind（）并没有立即执行，只是预先处理改变 this
区别：
call从第二个参数开始，每一个参数会依次传递给调用函数；apply的第二个参数是数组，数组的每一个成员会依次传递给调用函数。
call()比apply()性能更好些
// call可以改变this指向，主要作用可以实现继承
let o = {
name: "andy",
};
function fn(a, b) {
console.log(this);
console.log(a + b);
}
fn.call(o, 3, 5);
// apply 可以调用函数，改变this指向，第二个参数必须是数组形式
let arr = [1, 2, 3, 4, 5];
let max = Math.max.apply(Math, arr);
console.log(max); //5
// 1.bind() 方法不会调用函数，但是能改变函数内部的this指向
// 2.返回由指定的this值和初始化参数改造的原函数拷贝
// 3.返回的是原函数改变this之后的新函数
// 4.如果有的函数我们不需要立即调用，但是又想改变函数内部的this指向此时用bind
call的应用场景
将伪数组转化成数组 （）
let div=docunment.getElementByTagName('div')
console.log(div) //伪数组
let arr=Array.prototype.slice.call(div)
console.log(arr) //数组
// 扩展知识
// Array.prototype.slice不支持IE8以下（兼容性问题）
// 兼容性写法
function listToArray(likeArray) {
let ary = []
try {
ary = Array.prototype.slice.call(likeArray)
// return ary
} catch (e) {
for (let i = 0; i < likeArray.length; i++) {
ary[ary.length] = likeArray[i]
}
}
return ary
}
let div = document.querySelectorAll('.box')
// console.log(div) //nodeList
// console.log(listToArray(div)) // Array
// 把参数转化为数组
function fn() {
console.log(Array.prototype.slice.call(arguments))
}
fn(1, 2, 3, 4, 5, 6)
apply的应用场景
合并数组，判断数据类型
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6];
[].push.apply(arr1, arr2)
console.log('arr1', arr1)
// 判断数据类型
console.log(Object.prototype.toString.call(arr1) === '[object Array]')
5. 请解释一下 JavaScript的同源策略。
同源策略指的是协议、域名、端口相同。同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性
同源策略是为了保证用户信息的安全，防止恶意的网站窃取数据，最初的同源策略是指不同网站下的cookie设置。
同源策略是浏览器给予Ajax技术的限制，服务器端是不存在同源政策的限制的。
6. 如何判断一个对象是否属于某个类？
使用 instanceof关键字，判断一个对象是否是类的实例化对象；使用 constructor属性，判断一个对象是否是类的构造函数。
7. 什么是事件代理（事件委托）？
事件代理（ Event Delegation），又称为事件委托，是 JavaScript中绑定事件的常用技巧。顾名思义，“事件代理”就是把原本需要绑定的事件委托给父元素，让父元素负責事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。
8.说明如何使用 JavaScript提交表单。
document .form [0] .submit();
9. 哪些关键字用于处理异常?
try {
// 执行代码
} catch {
// 捕获异常
}
10. 数据类型
Symbol知识补充
1.ES6中引入了一种新的原始数据类型 Symbol。表示独一无二的值，他是JavaScript语言第七种数据类型。
特点：
1.Symbol 的值是唯一的，用于解决命名冲突的问题
2.Symbol 的值不能与其他数据进行运算
3.Symbol 定义的对象不能使用for …in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
11. 暂时性死区
var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。
let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
12. 请求的发送方法：
AJAX概述：
AJAX 可以使网页实现异步更新，可以在不重新加载整个网页的情况系，对网页某个部分进行更新
XMLHttpRequest 是 AJAX 的基础
请求发送：
/*
创建 XMLHttpRequest 对象使用 xhr.open(method,url,async) 方法发送到请求服务器，
一般传递三个参数：
method:发送请求的类型
url:发送的地址
async:true(异步)或者false(同步)
*/
const xhr = new XMLHttpRequest();
/*
定义请求方法和路径
get 方式：请求参数在URL后边拼接，send()方法为空参
post 方式：请求参数在send()方法中定义
*/
xhr.open("GET", "http://localhost:8000/home");
// 请求发送
xhr.send();
/*指定回调函数，由回调函数处理请求后的响应问题*/
xhr.onreadystatechange = function () {
// 请求完成且响应正常
if (xhr.readyState === 4 && xhr.status === 200) {
// 成功处理
let res = xhr.responseText
}
}
13. 把字符串中的字母大小写互换
let str = 'FIRSTNAME是张，lastname是三'
str = str.replace(/[a-zA-Z]/g, content => {
// content是每一次正则匹配的结果
//验证方式把字母转换为大写后看和之前是否一样，如果一样之前就是大写
return content.toUpperCase() === content ? content.toLowerCase() : content.toUpperCase()
})
console.log(str)
14. 字符串中的查找
let str = "abcdefghijklmn";
let test = "gh";
~(function () {
// 遍历查找
// function myIndexOf(test) {
// let lenT = test.length;
// let lenS = this.length;
// let res = -1;
// // 判断被检测的test子符串长度是否大于str子符串长度
// if (lenT > lenS) {
// return -1;
// }
// for (let i = 0; i < lenS - lenT; i++) {
// if (this.substr(i, lenT) === test) {
// res = i;
// break;
// }
// }
// return res;
// }
// 正则
function myIndexOf(test) {
// console.log(this, "str字符串");
let reg = new RegExp(test);
let res = reg.exec(this);
return res === null ? -1 : res.index;
}
String.prototype.myIndexOf = myIndexOf;
})();
console.log(str.myIndexOf(test));
15. 数组扁平化
//使用 Infinity，可展开任意深度的嵌套数组
// flat会去除空项
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr = [1, 2, [3, 4]];
// 展开一层数组
arr.flat();
// 等效于
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
// 使用扩展运算符 ...
const flattened = arr => [].concat(...arr);
16. 多维数组去重
// 先把数组展开再去重
let arr = [1, 2, [1, 2, 3], [3, 5, [5, 8, [4, 5]]]];
arr = new Set(
arr
.toString()
.split("")
.map((item) => Number(item))
);
console.log(arr);
17. 数组中求最大值
function getMax(arr) {
let max = arr[0];
for (let i = 0; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
let res = getMax([2, 5, 6, 48, 8]);
console.log(res);
// 方法2 利用内置对象Math和es6的展开运算符
console.log(Math.max(...[2, 5, 6, 48, 8]));
18. 函数判断是否是闰年
function isRunYear(year) {
let flag = false;
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
flag = true;
}
return flag;
}
console.log(isRunYear(2020));
19. 作用域链
- 写在函数内部的是局部作用域
- 如果函数中还有函数，那么在这个作用域中又诞生了一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链
作用域
- 作用域是可访问变量的集合
- 作用域分为全局作用域和局部作用域
- 变量在函数内声明，变量为局部作用域。
- 变量在全局环境下声明，变量为全局作用域。
- 局部变量在函数执行完毕后销毁。
- 全局变量在页面关闭后销毁。
在这里插入代码片
20. 预解析
javaScript代码是由浏览器中 javaScript 解析器来执行的，javaScript 解析器在运行 javaScript 代码的时候分为两步： 预解析和代码执行
-
预解析：会把所有 var 和 function 提升到当前作用域中的最前面
-
预解析分为两步：
变量提升：把所有的变量声明提升到当前作用域最前面， 不提升赋值操作
函数提升：把所有的函数声明提升到当前作用域最前面， 不调用函数 -
代码执行：按照代码的书写顺序从上往下执行
//案列1
var num = 10;
fun();
function fun() {
console.log(num); // undefined
var num = 20;
}
//案列2
var num = 10;
function fun() {
console.log(num);// undefined
var num = 20;
console.log(num);//20
}
fun();
//案列3
var a = 10;
fun();
function fun() {
var b = 9;
console.log(a);// undefined
var a = "123";
console.log(b);//9
}
//案例4
fun();
console.log(c); //9
console.log(b); //9
console.log(a); // 报错
function fun() {
var a = (b = c = 9);
// 相当于 var a=9,b=9,c=9 b和c直接赋值没有var当全局变量看
console.log(a); //9
console.log(b); //9
console.log(c); //9
}
21. 暂时性死区
var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。
let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
22. new关键字执行过程
- 在内存中创建一个新的空对象
- 让this指向这个新的对象
- 执行构造函数里面的代码，给这个新对象添加属性和方法
- 返回这个新对象（所以构造函数里不需要return）
23. 从一个数组中随机出一个不重复的N个项的数组
function getList(array) {
let len = array.length;
let t = null;
let i = null;
while (len) {
i = Math.floor(Math.random() * len--);
t = array[len];
array[len] = array[i];
array[i] = t;
}
return array;
}
let currentList=[1,2,3,4,5,6,7,8,9,10];
let newCurrentList = JSON.parse(JSON.stringify(currentList));
let res = getList(newCurrentList);
console.log(res.slice(0, 5));
24.数组的插入排序
function insertSort(arr) {
var len = arr.length;
for (var i = 1; i < len; i++) {
var temp = arr[i];
var j = i - 1; //默认已排序的元素
while (j >= 0 && arr[j] > temp) {
//在已排序好的队列中从后向前扫描
arr[j + 1] = arr[j]; //已排序的元素大于新元素，将该元素移到一下个位置
j--;
}
arr[j + 1] = temp;
}
return arr;
}
const arr = [4, 9, 2, 6, 7, 5];
console.log(insertSort(arr))
25.数组的二分插入排序（效率比插入排序高）
function binaryInsertSort(arr) {
var len = arr.length;
for (var i = 1; i < len; i++) {
var key = arr[i],
left = 0,
right = i - 1;
while (left <= right) {
//在已排序的元素中二分查找第一个比它大的值
var mid = parseInt((left + right) / 2); //二分查找的中间值
if (key < arr[mid]) {
//当前值比中间值小 则在左边的子数组中继续寻找
right = mid - 1;
} else {
left = mid + 1; //当前值比中间值大 在右边的子数组继续寻找
}
}
for (var j = i - 1; j >= left; j--) {
arr[j + 1] = arr[j];
}
arr[left] = key;
}
return arr;
}
console.log(binaryInsertSort(arr));
26.数据检测的方法
typeof constructor instanceof Object.prototype.toString.call()
27.介绍下Set、Map、WeakSet 和 WeakMap 的区别？
-
Set，对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用 。
-
WeakSet，成员都是对象；成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏；
-
Map，本质上是键值对的集合，类似集合；可以遍历，方法很多，可以跟各 种数据格式转换。
-
WeakMap，只接受对象最为键名（null 除外），不接受其他类型的值作为键名；键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收， 此时键名是无效的；不能遍历，方法有 get、set、has、delete。
28.Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？
promise 构造函数是同步执行的，then 方法是异步执行的
- promie分为三个状态
- 状态不会改变
理解
从语法上讲promise是一个构造函数
从功能上将promise对象用来封装一个异步操作并可以获取结果
基本流程
刚开始是pending状态—>执行异步操作，成功了执行resolve，失败了执行reject
promise.all（）方法
包含n个promise的数组，返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败
promise.race（）方法
顾名思义，Promse.race就是赛跑的意思，第一个完成的promise的结果状态就是最终的结果状态。
关于promise的一些问题
1. 当一个 promise 指定多个成功/失败回调函数, 都会调用吗？
答：当 promise 改变为对应状态时都会调用
2. 改变 promise 状态和指定回调函数谁先谁后?
答：都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调。
如何先改状态再指定回调?
在执行器中直接调用 resolve()/reject()
延迟更长时间才调用 then()
什么时候才能得到数据?
如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
3. promise.then()返回的新 promise 的结果状态由什么决定?
答：由 then() 指定的回调函数执行的结果决定。
4. promise 如何串连多个操作任务
答：promise 的 then() 返回一个新的 promise, 可以开成 then() 的链式调用
通过 then 的链式调用串连多个同步/异步任务
29.如何检测是否null?
var exp = null;
if(!exp&&typeof(exp) != "undefined" && exp != 0) {
alert("is null");
}
30.let的作用
-
块级作用域，全局变量挂载到全局对象，
let声明变量不允许当前作用域范围内重复声明，在循环中let会做特殊处理， -
在循环中用
let声明的循环变量，会特殊处理 ，每次进入循环体，都会开启一个新的作用域，并且将循环变量绑定到该作用域（每次循环使用的是一个全新的循环变量）
31.作用域的理解
- 浏览器给js的生存环境叫作用域。作用域分为变量作用域和函数作用域。
- 变量作用域又分为全局变量和局部变量。全局变量是在代码的任何地方都可以访问，另外局部变量的优先级要高于同名的全局变量,也就是说当局部变量与全局变量重名时，局部变量会覆盖全局变量
- JavaScript的函数作用域是指在在函数内声明的所有变量在函数体内始终是可见的，也就是说函数的作用域是在定义这个函数的时候就已经确定了。
32.如何理解ＤＯＭ和ＢＯＭ？
-
DOM 全称是 Document Object Model，也就是文档对象模型。
-
DOM是一个操作HTML的API接口
-
BOM 是 Browser Object Model，浏览器对象模型。
-
BＯＭ包含location、history、window 、screen
33.如何理解闭包，和使用场景？
1、个人理解：
能够在函数外部访问到函数内部作用域的局部变量的函数，就构成了一个闭包。
外部函数在调用之后，其作用域本应该被销毁，也就是作用域内定义的局部变量也会随之被销毁。
但闭包的存在使我们仍然可以访问外部函数的变量
// 一个简单的闭包例子
function outer() {
let a = 1; // 定义一个内部变量
return function() {
return a; // 返回a变量值
}
}
let b = outer();
console.log(b()); // 打印1
在outer函数内部，创建一个inner函数，并且该inner函数读取outer函数作用域中定义的局部变量。同时该内部函数作为外部函数的返回值
2、内存泄漏**
闭包会引用包含函数的整个变量对象，如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素无法被销毁。所以我们有必要在对这个元素操作完之后主动销毁。
function assignHandler() {
var element = document.getElementById('element ');
var id = element.id;
element.onclick = function() {
alert(id);
};
element = null;
}
3、闭包的应用场景
设计私有的方法和变量
4、闭包的缺点
闭包会比其他函数占用更多的内存，过度使用闭包可能会导致内存占用过多。
34.如何理解async和await?
- async函数是ES8出来的特性，实际上只是基于promise的语法糖，用来处理异步的操作
- promise 虽然解决了回调地狱，但是如果处理流程复杂的话，整段代码将充满then（）方法，语义化不明显。
async函数就完美的解决了以上问题，异步操作就如同操作同步流程，同时async函数自带执行器，执行的时候无需手动加载 - async函数返回的promise对象必须等到内部所有await命令的promise对象执行完才会发生状态改变。也就是说，只有当async函数内部的异步操作都执行完，才会执行then方法的回调
- 当async函数中只要一个await出现reject状态，则后面的await都不会被执行。解决办法就是添加try catch捕获异常，throw error抛出错误
- await 必须写在 async 函数中, 但 async 函数中可以没有 await，如果 await 的 Promise 失败了, 就会抛出异常,
35.GET和POST的区别?
- GET和POST都是http的请求方法
- GET特点：
1） GET用于信息获取，而且是安全（用于获取信息而不是修改信息）和幂等（指无论调用这个URL多少次，都不会有不同的结果）的
2）GET请求会被浏览器主动缓存的，如果下一次的传输数据相同，那么就会返回缓存中的内容
3）GET方法中的ＵRL 一般具有长度限制，这个限制不是HTTP协议规定的是浏览器限制 - POST特点：
1） 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）
2）POST方法可能会修改服务器上的资源，所以他是不符合幂等的 - 注意：
1）GET和POST的底层都是使用TCP进行数据的传输，HTTP协议为了区分请求设置类别所以做了一些规定
36.ES6有哪些新特性?
1 . promise、async/await、解构赋值、模板字符串、定义变量的方式let、const
37. = =和===有什么区别?
1 . = =用来判断数值是否相等，===还要判断类型是否相等
38.js延迟加载的方法有哪些？
1 . defer和async属性加载文件时不会阻止页面渲染，区别是脚本是否需要等待页面解析且无依赖独立运行。如果需要那么应该使用async，如果不需要使用defer
2 .使用setTimeout
3. 将脚本元素放在文档的底部
39.如何理解宏任务和微任务?
宏任务：计时器、ajax 、读取文件、setImmediate node.js中的立即执行函数
微任务：process.nextTick --nodejs 进程的下一刻,这是个大哥,最先执行的微任务系列、promise.then()、catch、finally
40.如何解决跨域?
首先我们需要知道什么是跨越，跨域指的是浏览器不能执行其他网站的脚本，他是由同源策略造成的。同源策略是指协议、端口、域名相同。
1、response添加header//表示支持所有网站访问，也可以额外配置相应网站
resp.setHeader(“Access-Control-Allow-Origin”, "");
2、jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递,所以jsonp的 type类型只能是get ！
3、利用nginx反向代理，将请求分发到部署到相应项目的tomcat服务器，当然也不存在跨域问题
4、后端处理cors
41.http和https?
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
42.JS事件循环机制?
- Event Loop事件循环，事件循环机制是一个不断循环的机制，事件循环会不断去寻找可以执行的任务来执行。在执行完同步任务以后，会执行微任务对列的任务，把微任务对列的任务清空完以后才会执行宏任务
43.浏览器输入url到渲染页面都发生了什么?
1）请求发起后，浏览器首先会DNS解析这个域名 ，查看本地是否有对应的，DNS解析是一个递归查询的过程
2）如果没有对应的IP地址，DNS服务器向服务器发送请求，
3）建立TCP链接，
4）浏览器向WEB服务器发起Http请求
5）服务端处理，服务器解析用户请求，调用数据库信息，最后返回给客户端
6）关闭PCP链接
7）浏览器解析资源
8）浏览器布局渲染
44上传文件怎么区分文件是哪种类型的?
通过文件后缀判断文件类型
45.ts和js有什么区别?
1）ts是js的超集，即你可以在ts中使用原生js的语法
2）ts需要静态编译，最终编译为js文件
3）ts必须指定数据类型
46.深拷贝和浅拷贝？深拷贝的方式哪些？
1）浅拷贝：简单的赋值拷贝操作
2）深拷贝：在堆区重新申请空间，进行拷贝操作
3）他们的区别就是是否真正获取一个对象的复制实体，而不是引用
4）深拷贝的方式：
①、JSON.parse(JSON.stringfiy())缺点是无法拷贝正则，函数、时间
②、递归方法
function deepCopy(obj) {
let objArray = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === "object") {
objArray[key] = this.deepCopy(obj[key]);
} else {
objArray[key] = obj[key];
}
}
}
}
return objArray;
}
③
47.es6和es5的区别?
ES6相当于ES5在向下兼容的基础上提供了大量新特型，解决了核心语言的许多局限性，更容易编写代码
CSS部分
1.盒子模型
有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
分为标准盒模型和怪异盒模型
2.让3个盒子一行排列，给定左右两个盒子的宽度，如何让中间的盒子自适应?
1）左右盒子浮动指定宽度并浮动，中间的盒子给个左右margin达到自适应
2）左右采用对对定位，中间采用margin
2.SCSS和LESS的优点
1）scss和less是一种对css的扩展提升，增加了规则、变量、混入、选择器、嵌套等特性，可以理解为用js的方式去书写，所以必须经过编译css，然后引用编译好的css
2）src和herf的区别？
3) 视口的理解？
4）web标准是什么？
5）html的概念
6）w3c？
Git部分
1）Git是分布式版本控制工具。
2）Git可以从服务器克隆、创建分支、提交代码等功能
echarts部分
1）常用属性
series：系列列表，可以指定图标类型和图标数据
xAxis:直角坐标系的X轴
yAxis:直角坐标系的Y轴
grid：直角坐标系的网格
title：标题
tooltip：提示框组件
webpack部分
webpack是一个打包工具，它做的是分析项目结构打包成合适的格式
扫一扫
1595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
