JS知识点总结（二）

---

JS知识点总结（一）

17.延长作用域链

try-catch :创建一个新的变量对象，包含被抛出错误的对象声明

with语句：with语句会将指定的对象添加到作用域链当中去

18.判断一个值是什么类型的方法？

typeof
instanceof严格来说是 Java 中的一个双目运算符，用来测试一个对象是否为一个类的实例，用法为：

// 判断 foo 是否是 Foo 类的实例
function Foo(){} 
var foo = new Foo(); 
console.log(foo instanceof Foo) //true

对于数组、null、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object”

//toString()方法和 Object.prototype.toString.call()方法对比
var arr=[1,2];
//直接对一个数组调用 toString()
arr.toString();// "1,2"
//通过 call 指定 arr 数组为 Object.prototype 对象中的 toString 方法的上下文
Object.prototype.toString.call(arr); //"[object Array]"

19.数组的随机排序过程实现

//方法一
var arr = [1,2,3,4,5,6,7,8,9,10];
function randSort1(arr){
for(var i = 0,len = arr.length;i < len; i++ ){
var rand = parseInt(Math.random()*len);
var temp = arr[rand];
arr[rand] = arr[i];
arr[i] = temp;
}
return arr;
}
console.log(randSort1(arr));

//方法二
var arr = [1,3,4,5,68,26,90]
 arr.sort(function(){
        return Math.random()-0.3;
    })
    console.log(arr)

20.什么是事件冒泡，它是如何工作的？如何阻止事件冒泡、默认行为

在一个对象上触发某类事件（比如单击 onclick 事件），这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象.阻止事件冒泡行为的方法：event.stopPropagation()方法
阻止事件默认行为的方法：event.preventDefault()方法在一个对象上触发某类事件（比如单击 onclick 事件），这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象
阻止事件冒泡行为的方法：event.stopPropagation()方法
阻止事件默认行为的方法：event.preventDefault()方法

21.event对象的常见应用

1、event.preventDefault(); // 阻止默认行为，阻止 a 链接默认的跳转行为

2、event.stopPropagation(); // 阻止冒泡

3、event.stopImmediatePropagation(); // 按钮绑定了 2 个响应函数，依次注册 a,b两个事件，点击按钮，a 事件中event.stopImmediatePropagation()就能阻止 b 事件

4、event.currentTarget // 早期的 ie 不支持，当前绑定的事件

5、event.target

22.DOM与BOM的区别

BOM 的最根本对象是 window；DOM 最根本对象是 document（实际上是 window.document）BOM 的最根本对象是 window；DOM 最根本对象是 document（实际上是 window.document）

25.事件触发的三要素

1、事件源、就是你点的那个 div，触发的对象

2、事件类型、表示动作，比如点击、滑过等

3、事件处理函数（事件处理程序）、表示结果，比如点开关跳转到另一个页面

26.事件的委托机制

JavaScript 事件代理则是一种简单的技巧，把事件处理器添加到一个上级元素上，这样就避免了把事件处理器添加到多个子级元素上。这主要得益于浏览器的事件冒泡机制。

27.JavaScript 中的定时器有哪些？他们的区别及用法是什么？

1）setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
2）setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setTimeout 也叫定时器
setInterval 也叫计时器

28.比较attachEvent与addEventListener?

attachEvent 只能在 IE 浏览器给标签绑定事件, 可以多次绑定
语法：Element.attachEvent(Etype,EventName)
参数 Element:要为该元素动态添加一个事件
Etype:指定事件类型．比如：onclick,onkeyup,onmousemove 等
EventName:指定事件名称．也就是你写好的函数
addEventListenerW3C 标准, 除 IE 浏览器使用, 它给标签绑定事件语法：Element.addEventListener(Etype,EventName,boole)
Etype:事件类型.比如：click,keyup,mousemove.注意使用 addEventListener 绑定事件时，设置参数事件类型时不必写 on．否则会出错EventName:要绑定事件的名称．也就是你写好的函数boole:该参数是一个布尔值：默认 false．false 代表冒泡阶段执行, true 代表捕获阶段执行

29.document.write与innerHTML之间的区别？

document.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open, 浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被回流

innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘

30.如何最小化重绘与回流？

什么是重绘 Repaint 和重排 （回流 reflow）

重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。

重排（回流）:当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程

重绘不一定需要回流（比如颜色的改变），回流必然导致重绘（比如改变网页位置）

31.JS延迟加载的方式

js 的延迟加载有助与提高页面的加载速度
延迟加载就是等页面加载完毕之后，在加载JS文件的执行过程

1.defer属性的定义

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

2.async属性

HTML5 为

目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行。

async 和 defer 一样，都不会阻塞其他资源下载，所以不会影响页面的加载。

缺点：不能控制加载的顺序

3.使用 setTimeout 延迟方法的加载时间

延迟加载 js 代码，给网页加载留出更多时间
注意：这段代码直到文档加载完才会加载指定的外部 js 文件。因此，不应该把那些页面正常加载需要依赖的javascript 代码放在这里。而应该将 JavaScript 代码分成两组。一组是
让JS最后加载把 js 外部引入的文件放到页面底部，来让 js 最后引入，从而加快页面加载速度

32.什么是闭包？

一个作用域可以访问另外一个函数内部的局部变量 ,或者说一个函数（子函数）访问另一个函数（父函数）中的变量。 此时就会有闭包产生 ,那么这个变量所在的函数我们就称之为闭包函数。
闭包的优缺点： 延伸了变量的作用范围, 因为闭包函数中的局部变量不会等着闭包函数执行完就销毁, 因为还有别的函数要调用它 , 只有等着所有的函数都调用完了他才会销毁 闭包会造成内存泄漏，如何解决：用完之后手动释放

33.什么是内存泄露？哪些会造成内存泄露？

内存空间使用完毕没有被及时回收就会造成内存泄露
包括常见的定时器函数、闭包与控制台日志

34.原型的定义？

每个构造函数都有一个prototype原型属性，它的原型对象中有一个__proto__原型属性。JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变

35.常见的JS继承方法？

原型链继承（继承的是方法）、构造函数继承（继承的是属性）、原型式继承、组合式继承、寄生式继承、寄生式组合继承 6种继承方式
ES6继承方式

//使用class创建一个父类
class Parent {
constructor(name,age){
this.name = name
this.age = age
}
sayName(){
console.log(this.name);
} 
}

//利用class创建一个子类，通过extends实现继承，同时利用super方法继承父类的属性值
class Child extends Parent{
constructor(name,age,gender){
super(name,age)
this.gender = gender
}
sayGender(){
console.log(this.gender);
} }

//实例化对象
const ming = new Child('ming',18,'男')
ming.sayGender()
ming.sayName()
console.log(ming.name);
console.log(ming.age);

36.this对象的理解

函数调用是this永远指向window;方法调用永远指向调用方法的对象；以构造函数的形式调用时，this 是新创建的那个对象；call、apply、bind指向它前面调用的对象，其中call传递的参数要逐个列举出来，apply传递给函数的是参数数组的内容，bind()方法创建一个新的函数，当这个新的函数被调用时，其 this 值为提供的值，其参数列置为创建时指定的参数序列表前几项，置为创建时指定的参数序列；箭头函数的this要看外层是否有函数：如果有，外层函数的 this 就是内部箭头函数的 this如果没有，就是 window

37.数组中的 forEach 和 map 的区别？

循环遍历数组中的每一项
forEach 和 map 方法里每次执行匿名函数都支持 3 个参数，参数分别是 item（当前每一项），index（索引值），arr（原数组）

38.EventLoop事件循环机制

JavaScript 的事件分两种，宏任务(macro-task)和微任务(micro-task)

宏任务：包括整体代码 script，setTimeout，setInterval

微任务：Promise.then(非 new Promise)，process.nextTick(node 中)

事件的执行顺序——先执行宏任务，然后执行微任务，任务有同步的任务和异步的任务，同步的进入主线程，异步的进入 Event Table 并注册函数，异步事件完成后，会将回调函数放在事件队列中，如果还有异步的宏任务，那么就会进行循环执行上述的操作。

console.log('1');
setTimeout(function() {
console.log('2');
Promise.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
//1 2 4 3 5
//代码解释 先执行同步任务，再执行宏任务，若没有微任务则本轮事件循环结束，若存在微任务，则按照先进先出的原则，输出微任务中的内容
1、宏任务同步代码 console.log(‘1’) 2、setTimeout，加入宏任务 Event Queue，没有发现微任务，第一轮事件循环走完
3、第二轮事件循环开始，先执行宏任务，从宏任务 Event Queue 中独取出 setTimeout 的回
调函数
4、同步代码 console.log(‘2’),发现 process.nextTick，加入微任务 Event Queue
5、new Promise，同步执行 console.log(‘4’),发现 then，加入微任务 Event Queue
6、宏任务执行完毕，接下来执行微任务，先执行 process.nextTick，然后执行 Promise.then
7、微任务执行完毕，第二轮事件循环走完，没有发现宏任务，事件循环结束

39.JS中节流与防抖的概念

**应用场合：**在对窗口进行resize（重新布局）、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕此时我们可以采用 debounce（防抖）和 throttle（节流）的方式来减少调用频率，同时又不影响实际效果
**防抖：**当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

//滚动条事件的触发效果
function debounce(fn, wait) {
var timeout = null; 
return function() { 
if(timeout !== null) clearTimeout(timeout); 
timeout = setTimeout(fn, wait); 
} 
} // 处理函数
function handle() { 
console.log(Math.random()); 
}
// 滚动事件 window.addEventListener('scroll', debounce(handle, 1000));

节流：
当持续触发事件时，保证一定时间段内只调用一次事件处理函数

var throttle =function(func, delay) {
var prev = Date.now(); 
return function() { 
var context = this; 
var args = arguments; 
var now = Date.now(); 
if (now - prev >= delay) { 
func.apply(context, args);
prev = Date.now(); 
} 
} 
}
function handle() {console.log(Math.random());} 
window.addEventListener('scroll', throttle(handle, 1000));

区别：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

结合应用场景

防抖(debounce)

search 搜索联想，用户在不断输入值时，用防抖来节约请求资源。

window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流(throttle)

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 来判断

40.JS冒泡排序的实现过程

//数据给定为100、289、12、89、78
//冒泡排序算法
function  sort1(arr) {
    for(var i = 0;i<arr.length;i++){
        for(var j = 0;j<arr.length-i;j++){
            if(arr[j]>arr[j+1]){
            var c = arr[j];//交换变量的内存地址 而不是其中的值
            arr[j] = arr[j+1];
            arr[j+1] = c;
            }
            
        }
    }
    return arr.toString();
}
console.log(sort1([100,289,12,89,78]))

41.利用JS随机选取1-100之间的10个数，存入一个数组中并进行排序的过程

function sort2(array1,len,min,max) {
    if(len>=(max-min)){
      return alert('超过数组下标的索引值')
    }

    if(array1.length>=len){
        array1.sort(function(a,b){
            //升序排列
            return a-b;
        });
        return array1;
    }

    var item1 = parseInt(Math.random()*(max-min-1))+(min+1)
    for (let j = 0; j < array1.length; j++) {
        if(item1 == array1[j]){
            sort2(array1,len,min,max)
            return;
        }
        
    }

    array1.push(item1);
    return array1;
}

var arr = [22,10,90,89,56,45,45];
console.log(sort2(arr,6,1,100))

42.数组字符串拼接api–join方法的使用

//join、slice、concat、map、filter都不会改变原数组的内容
var str = ['初次','见到','你','很高兴','我的小玉']
alert(str.join(""))

43.最简单获取年月日方法2018-10-29

var d = new Date()
var year  = d.getFullYear()
// 获取月，月份比较特殊，0 是 1 月，11 是 12 月
var month = d.getMonth()+1;
month = month<10?'0'+month:month
//获取日
var day = d.getDate();
day = day<10?'0'+day:day;
console.log(year+'-'+month+'-'+day)

44.把两个数组合并，并删除第二个元素的内容

var array1 = ['a','b','c'];
var bArray = ['d','e','f']; 
var cArray = array1.concat(bArray); 
cArray.splice(1,1);

45.split()与join()的区别与联系

split()是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里即切割成数组的形式；
join() 是把数组中的字符串连成一个长串，可以大体上认为是 split()的逆操作

46.数组去重的实现方式

• 使用set方法[…new Set(arr)]

let arr =[1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr)=> [...new Set(arr)]; 
unique(arr);//[1, 2, 3, 4, 6, 7]

• 双重for循环的实现

通过判断第二层循环，去重的数组中是否含有该元素，如果有就退出第二
层循环，如果没有 j==result.length 就相等，然后把对应的元素添加到最后的数组里面。
let arr = [1,2,3,4,3,2,3,4,6,7,6]; 
let result = []; 
for(var i = 0 ; i < arr.length; i++) {
for(var j = 0 ; j < result.length ; j++) {
if(arr[i] === result[j]){
break;
};
};
if(j == result.length){
result.push(arr[i]);
}; 
}; 
console.log(result);

• 双重for循环+splice方法去重实现

function unique(arr){ 
for(vari=0; i<arr.length; i++){ 
for(var j=i+1; j<arr.length; j++){ 
if(arr[i]==arr[j]) {
//第一个等同于第二个，splice 方法删除第二个
arr.splice(j,1); 
    j--; 
} 
} 
} 
return arr; 
}

47.进程、线程以及他们间的联系

一个进程可以有多个线程

3.1）一个程序至少一个进程，一个进程至少一个线程，进程中的多个线程是共享进 程

的资源

3.2）Java 中当我们启动 main 函数时候就启动了一个 JVM 的进程，而 main 函数所在线

程就是这个进程中的一个线程，也叫做主线程

3.3）一个进程中有多个线程，多个线程共享进程的堆和方法区资源，但是每个线程有自己的程序计数器，栈区域