本文版权归 “公众号 | 前端一万小时” 所有，侵删！ 复制代码
?本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引， 含未公开发布和写作中的文章，每日持续更新中。
?本文使用指南：
收藏/点赞，方便查阅和全文搜索；关注公众号「前端一万小时」；公众号内回复文章对应编号，即可获取面试题答案参考；以上三步搞定了“知其然”，想要“知其所以然”，去公众号探索探索吧。以下代码输出的结果是？ var a = 1; a+++a; typeof a+2;
以下代码输出什么？ var d = a = 3, b = 4 console.log(d)
以下代码输出什么？ var d = (a = 3, b = 4) console.log(d)
以下代码输出结果是？为什么？ var a = 1, b = 2, c = 3; var val = typeof a + b || c >0 console.log(val) var d = 5; var data = d ==5 && console.log(‘bb’) console.log(data) var data2 = d = 0 || console.log(‘haha’) console.log(data2) var x = !!“Hello” + (!“world”, !!“from here!!”); console.log(x)
以下代码输出结果是？为什么？ var a = 1; var b = 3; console.log( a+++b );
以下代码输出的结果是？为什么？ console.log(1+1); console.log(“2”+“4”); console.log(2+“4”); console.log(+“4”); 复制代码
《③ 变量、值、数据类型、数据类型转换》[编号：js_03]涉及面试题： 1. JavaScript 定义了几种数据类型？哪些是原始类型？哪些是复杂类型？null 是对象吗？ 2. 对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？ 3. 怎样判断“值”属于哪种类型？typeof 是否能正确判断类型？instanceof 呢？ instanceof 有什么作用？内部逻辑是如何实现的？ 4. null，undefined 的区别？ 5. 说一下 JS 中类型转换的规则？ 6. 以下代码的输出？为什么？ console.log(a); var a = 1; console.log(b);以下代码输出什么？ var a = typeof 3 + 4 console.log(a)
以下代码输出什么？ var a = typeof typeof 4+4 console.log(a) 复制代码
《④ 流程控制语句》[编号：js_04]涉及面试题： 1. break 与 continue 有什么区别？ 2. switch case 语句中的 break 有什么作用？ 3. for of、for in 和 forEach、map 的区别？ 4. 写出如下知识点的代码范例： ① if-else 的用法； ② switch-case 的用法； ③ while 的用法； ④ do-while 的用法； ⑤ for 遍历数组的用法； ⑥ for-in 遍历对象的用法； ⑦ break 和 continue 的用法。 以下代码输出什么？ var a = 2 if(a = 1) { console.log(‘a等于1’) }else{ console.log(‘a不等于1’) } 复制代码如下代码的输出？为什么？ sayName(‘world’); sayAge(10); function sayName(name){ console.log('hello ', name); } var sayAge = function(age){ console.log(age); };
如下代码的输出？为什么？ var x = 10; bar() function bar(){ var x = 30; function foo(){ console.log(x) } foo(); }
如下代码的输出？为什么？ var x = 10 bar() function foo() { console.log(x) } function bar(){ var x = 30 foo() }
如下代码的输出？为什么？ var a = 1 function fn1(){
function fn3(){ function fn2(){ console.log(a) } fn2() var a = 4 } var a = 2 return fn3 } var fn = fn1() fn() //–>？
如下代码的输出？为什么？ var a = 1 function fn1(){ function fn2(){ console.log(a) } function fn3(){ var a = 4 fn2() } var a = 2 return fn3 } var fn = fn1() fn() //–>？
如下代码的输出？为什么？ var a = 1 function fn1(){ function fn3(){ var a = 4 fn2() } var a = 2 return fn3 } function fn2(){ console.log(a) } var fn = fn1() fn() //–>？
如下代码的输出？为什么？ var a = 1 var c = { name: ‘oli’, age: 2 } function f1(n){ ++n } function f2(obj){ ++obj.age } f1(a) f2© f1(c.age) console.log(a) console.log©
如下代码的输出？为什么？ var obj1 = {a:1, b:2}; var obj2 = {a:1, b:2}; console.log(obj1 == obj2); console.log(obj1 = obj2); console.log(obj1 == obj2); 复制代码
《② JS 数组——让数据排排坐》[编号：js_06]涉及面试题： 1. 写一个函数 squireArr，其参数是一个数组，作用是把数组中的每一项变为原值的平方。 var arr = [3, 4, 6] function squireArr( arr ){ //补全 } squireArr(arr) console.log(arr) //-->[9, 16, 36]写一个函数 squireArr，其参数是一个数组，返回一个新的数组，新数组中的每一项是原数组 对应值的平方，原数组不变。 var arr = [3, 4, 6] function squireArr( arr ){ //补全 } var arr2 = squireArr(arr) console.log(arr) //–>[3, 4, 6] console.log(arr2) //–>[9, 16, 36]
遍历 company 对象，输出里面每一项的值。 var company = { name: ‘qdywxs’, age: 3, sex: ‘男’ }
遍历数组，打印数组里的每一项的平方。 var arr = [3,4,5] 复制代码
《③ JS 对象——理解对象》[编号：js_07]涉及面试题： 1. 介绍 js 有哪些内置对象？ 2. 以下代码输出什么？ var name = 'sex' var company = { name: 'qdywxs', age: 3, sex: '男' } console.log(company[name]) 以下代码输出什么？ var name = ‘sex’ var company = { name: ‘Oli’, age: 3, sex: ‘男’ } console.log(company.name) 复制代码 《④ 了解 DOM——与网页交互》《⑤ JS 事件——异步编码》封装一个 Car 对象。 var Car = (function(){ var speed = 0; //补充 return { setSpeed: setSpeed, getSpeed: getSpeed, speedUp: speedUp, speedDown: speedDown } })() Car.setSpeed(30) Car.getSpeed() //–>30 Car.speedUp() Car.getSpeed() //–>31 Car.speedDown() Car.getSpeed() //–>30
如下代码输出多少？如何连续输出 0，1，2，3，4？ for(var i=0; i<5; i++){ setTimeout(function(){ console.log(‘delayer:’ + i ) }, 0) }
如下代码输出多少？ function makeCounter() { var count = 0 return function() { return count++ }; } var counter = makeCounter() var counter2 = makeCounter(); console.log( counter() ) //–>0 console.log( counter() ) //–>1 console.log( counter2() ) //–>? console.log( counter2() ) //–>? 复制代码
《JS 数组：① ES3 数组方法》[编号：js_12]涉及面试题： 1. 数组的哪些 API 会改变原数组？ 2. 写一个函数，操作数组，返回一个新数组，新数组中只包含正数。 function filterPositive(arr){ } var arr = [3, -1, 2, <span class="hljs-literal">true</span>] filterPositive(arr) console.log(filterPositive(arr)) //-->[3, 2]补全代码，实现数组按姓名、年纪、任意字段排序。 var users = [ { name: “John”, age: 20, company: “Baidu” }, { name: “Pete”, age: 18, company: “Alibaba” }, { name: “Ann”, age: 19, company: “Tecent” } ] users.sort(byField(‘age’)) users.sort(byField(‘company’))
用 splice 函数分别实现 push、pop、shift、unshift 方法。 如: function push(arr, value){ arr.splice(arr.length, 0, value) return arr.length } var arr = [3, 4, 5] arr.push(10) // arr 变成[3,4,5,10]，返回 4 复制代码
《JS 数组：② ES5 数组方法》[编号：js_13]涉及面试题： 1. for of、for in 和 forEach、map 的区别？ 2. 数组的哪些 API 会改变原数组？ 3. 如何消除一个数组里面重复的元素？ 4. 判断一个变量是否是数组，有哪些办法？ 5. ["1", "2", "3"].map(parseInt) 答案是多少？ 6. 取数组的最大值（ES5、ES6）？ 7. 实现一个 reduce 函数，作用和原生的 reduce 类似下面的例子。 Ex： var sum = reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); => 6 怎样用原生 JS 将一个多维数组拍平？ var array = [1, [2], [3, [4, [5]]]] function flat(arr) { //补全 } console.log(flat(array)) //–>[1, 2, 3, 4, 5] 复制代码 《面向对象编程：① 对象构造函数》[编号：js_14]涉及面试题： 1. new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？ 2. Object.create 有什么作用？ 3. 怎样判断“值”属于哪种数据类型？typeof 是否能正确判断类型？instanceof 呢？instanceof 有什么作用？内部逻辑是如何实现的？ 4. JavaScript 有哪些方法定义对象？ 5. 如下代码中？new 一个函数本质上做了什么？ function Modal(msg){ this.msg = msg } var modal = new Modal() 复制代码 《面向对象编程：② 使用原型》[编号：js_15] 涉及面试题： 1. JS 原型是什么？如何理解原型链？ 2. JS 如何实现继承？ 3. 实现一个函数 clone 可以对 JavaScript 中的五种主要数据类型（Number、string、Object、Array、Boolean）进行复制？ 4. 对 String 做扩展，实现如下方式获取字符串中频率最高的字符： var str = 'ahbbccdeddddfg'; var ch = str.getMostOften(); console.log(ch); //-->d，因为 d 出现了 5 次有如下代码，代码中并未添加 toString 方法，这个方法是哪里来的？画出原型链图进行解释： function People(){ //补全 } var p = new People() p.toString()
有如下代码，解释 Person、 prototype、proto、p、constructor 之间的关联： function Person(name){ this.name = name; } Person.prototype.sayName = function(){ console.log(‘My name is :’ + this.name); } var p = new Person(“Oli”) p.sayName();
下面两种写法有什么区别？ // 方法1： function People(name, sex){ this.name = name; this.sex = sex; this.printName = function(){ console.log(this.name); } } var p1 = new People(‘Oli’, 2) // 方法2： function Person(name, sex){ this.name = name; this.sex = sex; } Person.prototype.printName = function(){ console.log(this.name); } var p1 = new Person(‘Aman’, 2);
补全代码，实现继承： function Person(name, sex){ // 补全 }; Person.prototype.getName = function(){ // 补全 }; function Male(name, sex, age){ // 补全 }; // 补全 Male.prototype.getAge = function(){ // 补全 }; var catcher = new Male(‘Oli’, ‘男’, 2); catcher.getName();
如下代码中 call 的作用是什么？ function Person(name, sex){ this.name = name; this.sex = sex; } function Male(name, sex, age){ Person.call(this, name, sex); //这里的 call 有什么作用？ this.age = age; } 复制代码
《JS 提供的对象：① 作为对象的“字符串”》[编号：js_16]涉及面试题： 1. 多行字符串的声明有哪几种常见写法？ 2. 以下代码输出什么？ var str = 'C:\Users\Document\node\index.js' console.log(str.length) 如何声明 str 让 console.log(str) 输出 C:\Users\Document\node\index.js ？ 复制代码 《JS 提供的对象：② 正则表达式》[编号：js_17] 涉及面试题： 1. 写一个函数 isValidUsername(str)，判断用户输入的是不是合法的用户名（长度 6-20 个字符， 只能包括字母、数字、下划线）？ 2. 写一个函数 isPhoneNum(str)，判断用户输入的是不是手机号？ 3. 写一个函数 isEmail(str)，判断用户输入的是不是邮箱？ 4. 写一个函数 trim(str)，去除字符串两边的空白字符？ 5. \d，\w，\s，[a-zA-Z0-9]，\b，.，*，+，?，x{3}，^，$ 分别是什么? 6. 什么是贪婪模式和非贪婪模式？ 复制代码 《JS 提供的对象：③ Date》[编号：js_18] 涉及面试题： 写一个函数，参数为时间对象毫秒数的字符串格式，返回值为字符串。假设参数为时间对象毫秒数 t， 根据 t 的时间分别返回如下字符串： - 刚刚（ t 距当前时间不到1分钟时间间隔）； - 3分钟前（t 距当前时间大于等于1分钟，小于1小时）； - 8小时前（t 距离当前时间大于等于1小时，小于24小时）； - 3天前（t 距离当前时间大于等于24小时，小于30天）； - 2个月前（t 距离当前时间大于等于30天小于12个月）； - 8年前（t 距离当前时间大于等于12个月）。 <span class="hljs-keyword">function</span> friendlyDate(time){ // 补充 } var str = friendlyDate( <span class="hljs-string">'1556286683394'</span> ) //--> x 分钟前（以当前时间为准） var str2 = friendlyDate(<span class="hljs-string">'1555521999999'</span>) //--> x 天前（以当前时间为准）复制代码
《JS 提供的对象：④ Math》[编号：js_19]涉及面试题： 1. 写一个函数，返回从 min 到 max 之间的随机整数，包括 min 不包括 max ？ 2. 写一个函数，生成一个随机颜色字符串，合法的颜色为 #000000 ~ #ffffff。 function getRandColor(){ //补全 } var color = getRandColor() console.log(color) //-->#3e2f1b写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括 0 到 9，a 到 z，A 到 Z。 function getRandStr(len){ //补全 } var str = getRandStr(10); //–>0a3iJiRZap
写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0 ~ 255.255.255.255。 function getRandIP(){ //补全 } var ip = getRandIP() console.log(ip) //–>10.234.121.45 复制代码
《JS 提供的对象：⑤ JSON》[编号：js_20]涉及面试题： 1. JSON 格式的数据需要遵循什么规则？ 2. 使用 JSON 对象实现一个简单的深拷贝函数（deepCopy）？ 3. XML 和 JSON 的区别？ 4. eval 是做什么的？ 5. 深拷贝和浅拷贝的区别？如何实现？ 复制代码 《浏览器提供的对象：① BOM》[编号：js_21] 涉及面试题： 1. URL 如何编码解码？为什么要编码？ 2. iframe 有那些缺点？ 3. 补全如下函数，判断用户的浏览器类型。 function isAndroid(){ // 补全 } function isIphone(){ // 补全 } function isIpad(){ // 补全 } function isIOS(){ // 补全 } 复制代码 《浏览器提供的对象：② DOM》[编号：js_22] 涉及面试题： 1. 什么是 Virtual DOM，为何要用 Virtual DOM？ 2. 怎么添加、移除、复制、创建、和查找节点？ 3. offsetWidth/offsetHeight，clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？ 4. attribute 和 property 的区别是什么？ 5. 写一个函数，批量操作 css。 function css(node, styleObj){ //补全 } css(document.body, { 'color': 'red', 'background-color': '#ccc' }) 补全代码，要求：当鼠标放置在 li 元素上，会在 img-preview 里展示当前 li 元素的 data-img 对应的图片。 <ul class=“ct”> <li data-img=“1.png”>鼠标放置查看图片1</li> <li data-img=“2.png”>鼠标放置查看图片2</li> <li data-img=“3.png”>鼠标放置查看图片3</li> </ul> <div class=“img-preview”></div> <script> //你的代码 </script> 复制代码 《浏览器提供的对象：③ 定时器》[编号：js_23]涉及面试题： 1. setTimeout、setInterval、requestAnimationFrame 各有什么特点？ 2. 实现一个节流函数？ 3. setTimeout 倒计时为什么会出现误差？ 4. 简单解释单线程、任务队列的概念？ 5. 简述同步和异步的区别？ 6. JS 延迟加载的方式有哪些？ 7. 函数防抖节流的原理？ 8. defer 和 async ？ 9. 下面这段代码输出结果是？ 为什么？ var flag = true; setTimeout(function(){ flag = false; },0) while(flag){} console.log(flag); 下面这段代码输出结果是？为什么？ var a = 1; setTimeout(function(){ a = 2; console.log(a); }, 0); var a ; console.log(a); a = 3; console.log(a); 复制代码 《JS 事件：① 事件流和 DOM2 事件处理程序》[编号：js_24]涉及面试题： 1. DOM 事件模型是什么？ 2. 解释 DOM2 事件传播机制？ 复制代码 《JS 事件：② 事件对象和事件代理》[编号：js_25] 涉及面试题： 1. 解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理？ 2. 写一个 Demo，演示事件传播的过程，演示阻止传播的效果？ 3. JS 的事件委托是什么，原理是什么？ 复制代码 《JS 事件：③ 常见事件使用》[编号：js_26] 涉及面试题： window.onload 和 document.onDOMContentLoaded 有什么区别？ 复制代码