js面试题

1.new 操作符具体干了什么呢?

new 共经过了 4 几个阶段

1、创建一个空对象
2、设置原型链
3、让 Func 中的 this 指向 obj,并执行 Func 的函数体
4、判断 Func 的返回值类型:
function Test(){}
const test = new Test()
创建一个新对象:
const obj = {}

设置新对象的 constructor 属性为构造函数的名称,设置新对象的proto属性指向构造函数的 prototype 对象

obj.constructor = Test
obj.proto = Test.prototype
使用新对象调用函数,函数中的 this 被指向新实例对象
Test.call(obj)
将初始化完毕的新对象地址,保存到等号左边的变量中

2.sort 排序原理

冒泡排序法的原理:
比较相邻的元素。如果第一个比第二个大,就交换他们两个。
对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。
针对所有的元素重复以上的步骤,除了最后一个。
持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
示例:

var arr = [1, 5, 4, 2];
// sort()方法的比较逻辑为:
// 第一轮:1和5比,1和4比,1和2比
// 第二轮:5和4比,5和2比
// 第三轮:4和2比// 一.sort排序规则 return大于0则交换数组相邻2个元素的位置
// 二.arr.sort(function (a,b) {})中
// a --›代表每一次执行匿名函时候,找到的数组中的当前项;
// b --›代表当前项的后一项;
1.升序

var apple = [45, 42, 10, 147, 7, 65, -74];
// ①默认法,缺点:只根据首位排序
console.log(apple.sort());
// ②指定排序规则法,return可返回任何值
console.log(
  apple.sort(function(a, b) {
    return a - b; //若return返回值大于0(即a>b),则a,b交换位置
  })
);

2.降序

var arr = [45, 42, 10, 111, 7, 65, -74];
console.log(
  apple.sort(function(a, b) {
    return b - a; //若return返回值大于零(即b>a),则a,b交换位置
  })
);
3.如何判断当前脚本运行在浏览器还是 node 环境中?

通过判断 Global 对象是否为 window,如果不为 window,当前脚本没有运行在浏览器中

4.移动端最小触控区域是多大?

苹果推荐是 44pt x 44pt

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

300 毫秒
因为浏览器捕获第一次单击后,会先等待一段时间,如果在这段时间区间里用户未进行下一次点击,则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作,则浏览器会做双击事件处理。

6.解释 JavaScript 中的作用域与变量声明提升?

我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间。在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量。
所有申明都会被提升到作用域的最顶上
同一个变量申明只进行一次,并且因此其他申明都会被忽略
函数声明的优先级优于变量申明,且函数声明会连带定义一起被提升

7.Node.js 的适用场景?

比如:RESTFUL API、实时聊天、客户端逻辑强大的单页 APP,具体的例子比如说:本地化的在线音乐应用,本地化的在线搜索应用,本地化的在线 APP 等。

8.bind、call、apply 的区别

call 和 apply 其实是一样的,区别就在于传参时参数是一个一个传或者是以一个数组的方式来传。
call 和 apply 都是在调用时生效,改变调用者的 this 指向。

let name = 'Jack'
const obj = {name: 'Tom'}
function sayHi() {console.log('Hi! ' + this.name)}

sayHi() // Hi! Jack
sayHi.call(obj) // Hi! Tom
bind 也是改变 this 指向,不过不是在调用时生效,而是返回一个新函数。

const newFunc = sayHi.bind(obj)
newFunc() // Hi! Tom
9.使用构造函数的注意点

1.一般情况下构造函数的首字母需要大写,因为我们在看到一个函数首字母大写的情况,就认定这是一个构造函数,需要跟new关键字进行搭配使用,创建一个新的实例(对象)

构造函数在被调用的时候需要跟new关键字搭配使用。
在构造函数内部通过this+属性名的形式为实例添加一些属性和方法。
构造函数一般不需要返回值,如果有返回值
如果返回值是一个基本数据类型,那么调用构造函数,返回值仍旧是那么创建出来的对象。
如果返回值是一个复杂数据类型,那么调用构造函数的时候,返回值就是这个return之后的那个复杂数据类型。

10.如何获取浏览器版本信息

window.navigator.userAgent

11.数组的常用方法

Array.map()
此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(x =› x * 2);
//arr= [1, 2, 3, 4, 5]   原数组保持不变
//newArr = [2, 4, 6, 8, 10] 返回新数组
Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数,没有返回值,直接改变原数组,注意和 map 方法区分

let arr = [1, 2, 3, 4, 5];
num.forEach(x =› x * 2);
// arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分
Array.filter()

此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5]   
const isBigEnough =› value =› value ›= 3
let newArr = arr.filter(isBigEnough )
 //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
Array.every()

此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回 true,否则为 false

let arr = [1, 2, 3, 4, 5]
const isLessThan4 =› value =› value ‹ 4
const isLessThan6 =› value =› value ‹ 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true
Array.some()

此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回 true,若所有元素都不满足判断条件,则返回 false:

let arr= [1, 2, 3, 4, 5]
const isLessThan4 =› value =› value ‹ 4
const isLessThan6 =› value =› value › 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false
Array.reduce()

此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型:

let arr = [1, 2, 3, 4, 5];
const add = (a, b) =› a + b;
let sum = arr.reduce(add);
//sum = 15  相当于累加的效果与之相对应的还有一个 

Array.reduceRight() 方法,区别是这个是从右向左操作的
Array.push()
此方法是在数组的后面添加新加元素,此方法改变了数组的长度:
Array.pop()
此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度:

let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr); //[1, 2, 3, 4]
console.log(arr.length); //4
Array.shift()

此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度:

let arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr); //[2, 3, 4, 5]
console.log(arr.length); //4
Array.unshift()

此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度:

let arr = [1, 2, 3, 4, 5];
arr.unshift(6, 7);
console.log(arr); //[6, 7, 2, 3, 4, 5]
console.log(arr.length); //7
Array.isArray()

判断一个对象是不是数组,返回的是布尔值
Array.concat()
此方法是一个可以将多个数组拼接成一个数组:

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
`let arr = arr1.concat(arr2)`
console.log(arr)//[1, 2, 3, 4, 5]
** Array.toString()**

此方法将数组转化为字符串:

let arr = [1, 2, 3, 4, 5];
   let str = arr.toString()
   console.log(str)// 1,2,3,4,5
Array.join()

此方法也是将数组转化为字符串:

let arr = [1, 2, 3, 4, 5];
let str1 = arr.toString()
let str2 = arr.toString(',')
let str3 = arr.toString('##')
console.log(str1)// 12345
console.log(str2)// 1,2,3,4,5
console.log(str3)// 1##2##3##4##5

通过例子可以看出和 toString 的区别,可以设置元素之间的间隔~

Array.splice(开始位置, 删除的个数,元素)
万能方法,可以实现增删改:

     let arr = [1, 2, 3, 4, 5];
     let arr1 = arr.splice(2, 0 'haha')
     let arr2 = arr.splice(2, 3)
     let arr1 = arr.splice(2, 1 'haha')
     console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
     console.log(arr2) //[1, 2] 删除三个元素
     console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素
12.字符串常用操作

charAt(index):返回指定索引处的字符串
charCodeAt(index):返回指定索引处的字符的 Unicode 的值
concat(str1,str2,...):连接多个字符串,返回连接后的字符串的副本
fromCharCode():将 Unicode 值转换成实际的字符串
indexOf(str):返回 str 在父串中第一次出现的位置,若没有则返回-1
lastIndexOf(str):返回 str 在父串中最后一次出现的位置,若没有则返回-1
match(regex):搜索字符串,并返回正则表达式的所有匹配
replace(str1,str2):str1 也可以为正则表达式,用 str2 替换 str1
search(regex):基于正则表达式搜索字符串,并返回第一个匹配的位置
slice(start,end):返回字符索引在 start 和 end(不含)之间的子串
split(sep,limit):将字符串分割为字符数组,limit 为从头开始执行分割的最大数量
substr(start,length):从字符索引 start 的位置开始,返回长度为 length 的子串
substring(from,to):返回字符索引在 from 和 to(不含)之间的子串
toLowerCase():将字符串转换为小写
toUpperCase():将字符串转换为大写
valueOf():返回原始字符串值

13.作用域的概念及作用

作用域 : 起作用的一块区域
作用域的概念: 对变量起保护作用的一块区域
作用: 作用域外部无法获取到作用域内部声明的变量,作用域内部能够获取到作用域外界声明的变量。

14.作用域的分类

块作用域、词法作用域、动态作用域
解析:

块作用域 花括号 {}
词法作用域(js 属于词法作用域)
作用域只跟在何处被创建有关系,跟在何处被调用没有关系
动态作用域
作用域只跟在何处被调用有关系,跟在何处被创建没有关系

15.js 属于哪种作用域

词法作用域(函数作用域)
解析:

// 块作用域
/{
var num =123;
}
console.log(num);
/
// 如果js属于块作用域,那么在花括号外部就无法访问到花括号内部的声明的num变量。
// 如果js不属于块级作用域,那么花括号外部就能够访问到花括号内部声明的num变量
// 能够输出num变量,也就说明js不属于块级作用。
// 在ES6 之前的版本js是不存在块级作用域的。

//js属于词法作用域还是动态作用域

// js中函数可以帮我们去形成一个作用域

/* function fn(){
var num =123;
}
fn();
//在函数外界能否访问到num这样一个变量

console.log(num)*/ //Uncaught ReferenceError: num is not defined

// 如果函数能够生成一个作用域,那么在函数外界就无法访问到函数内部声明的变量。
// js中的函数能够生成一个作用。 函数作用域 。

// 词法作用域:作用的外界只跟作用域在何处创建有关系,跟作用域在何处被调用没有关系

var num = 123;
function f1() {
  console.log(num); //
}
function f2() {
  var num = 456;
  f1(); //f1在f2被调用的时候会被执行 。
}
f2();

//如果js是词法作用域,那么就会输出f1被创建的时候外部的num变量 123
//如果js是动态作用域,那么f1执行的时候就会输出f1被调用时外部环境中的num  456
16.自执行函数?用于什么场景?好处?

自执行函数:
1、声明一个匿名函数
2、马上调用这个匿名函数。
作用:创建一个独立的作用域。
好处:防止变量弥散到全局,以免各种 js 库冲突。隔离作用域避免污染,或者截断作用域链,避免闭包造成引用变量无法释放。利用立即执行特性,返回需要的业务函数或对象,避免每次通过条件判断来处理场景:一般用于框架、插件等场景

17.多个页面之间如何进行通信

cookie
web worker
localeStorage 和 sessionStorage

18.css 动画和 js 动画的差异

代码复杂度,js 动画代码相对复杂一些
动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css 动画不能添加事件
动画性能看,js 动画多了一个 js 解析的过程,性能不如 css 动画好

19.数组方法 pop() push() unshift() shift()
arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素
arr.push() 从后面添加元素,返回值为添加完后的数组的长度
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.shift() 从前面删除元素,只能删除一个 返回值是删除的元素
20.事件绑定与普通事件有什么区别

用普通事件添加相同事件,下面会覆盖上面的,而事件绑定不会

普通事件是针对非 dom 元素,事件绑定是针对 dom 元素的事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • 1. sort 排序原理 冒泡排序法解析:冒泡排序法的原理:比较相邻的元素。如果第一个比第二个大,就交换他们两个。...
    Daeeman阅读 202评论 0 2
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,096评论 0 3
  • 1.介绍js的基本数据类型。Undefined、Null、Boolean、Number、String2.介绍js有...
    lucky婧阅读 692评论 0 5
  • document load 和 document ready 的区别? JavaScript 中如何检测一个变量是...
    Daeeman阅读 188评论 0 2
  • 1. document load 和 document ready 的区别 页面加载完成有两种事件 load是当页...
    大马虎阅读 501评论 0 0