javaScript常用知识点

1. this指向问题

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。

this指向的对象称为函数的上下文对象context；
this的指向取决于函数被调用方式
this的指向不是函数声明是绑定的，而是在函数运行过程中动态绑定的。

javascript

复制代码

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()性能更好些

javascript

复制代码

// 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

5. 请解释一下 JavaScript的同源策略。

同源策略指的是协议、域名、端口相同。同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性同源策略是为了保证用户信息的安全，防止恶意的网站窃取数据，最初的同源策略是指不同网站下的cookie设置。

同源策略是浏览器给予Ajax技术的限制，服务器端是不存在同源政策的限制的。

6. 如何判断一个对象是否属于某个类？

使用 instanceof关键字，判断一个对象是否是类的实例化对象；使用 constructor属性，判断一个对象是否是类的构造函数。

7. 什么是事件代理（事件委托）？

事件代理（ Event Delegation），又称为事件委托，是 JavaScript中绑定事件的常用技巧。顾名思义，“事件代理”就是把原本需要绑定的事件委托给父元素，让父元素负責事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。

8.说明如何使用 JavaScript提交表单。

document .form [0] .submit();

9. 哪些关键字用于处理异常?

javascript

复制代码

try { // 执行代码 } catch { // 捕获异常 }

10. 数据类型

在这里插入图片描述

11. 暂时性死区

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。 let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

12. 请求的发送方法：

AJAX概述：

AJAX 可以使网页实现异步更新，可以在不重新加载整个网页的情况系，对网页某个部分进行更新 XMLHttpRequest 是 AJAX 的基础

请求发送：

javascript

复制代码

/* 创建 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. 把字符串中的字母大小写互换

javascript

复制代码

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. 字符串中的查找

javascript

复制代码

15. 数组扁平化

javascript

复制代码

//使用 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. 多维数组去重

javascript

复制代码

// 先把数组展开再去重 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. 数组中求最大值

javascript

复制代码

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. 函数判断是否是闰年

javascript

复制代码

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 提升到当前作用域中的最前面
预解析分为两步：变量提升：把所有的变量声明提升到当前作用域最前面，不提升赋值操作函数提升：把所有的函数声明提升到当前作用域最前面，不调用函数
代码执行：按照代码的书写顺序从上往下执行

javascript

复制代码

//案列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个项的数组

javascript

复制代码

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.数组的插入排序

javascript

复制代码

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))