个人 web 分享 92 道 JavaScript 面试题附加回答

{} 创建一个新对象[] 创建一个新数组funtion(){...} 创建一个新的方法new Foo() new 关键字，一次内存的分配

<script src="dadaqianduan.js"></script> // 浏览器会立即加载并执行相应的脚本
<script async src="dadaqianduan.js"></script> // 后续文档的加载和渲染与js脚本的加载和执行是并行进行的
<script defer src="dadaqianduan.js"></script> // 加载后续文档的过程和js脚本的加载是并行进行的，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前

// 作为函数参数传递var a = 1;function foo() { var a = 2; function dada() {  console.log(a); } da(dada);}
function da(fn) { // 闭包 fn();}
foo(); // 输出2

arrayObject.unshift(newelement1,newelement2,....,newelementX)newelement1	必需。向数组添加的第一个元素。newelement2	可选。向数组添加的第二个元素。newelementX	可选。可添加若干个元素。

document.getElementById(id);// 返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);// 返回带有指定名称的节点集合
document.getElementsByTagName(tagName);// 返回带有指定标签名的对象集合
document.getElementsByClassName(className);// 返回带有指定class名称的对象集合

createDocumentFragment() //创建一个DOM片段
document.createElement(eName); // 创建一个节点document.createAttribute(attrName); // 对某个节点创建属性document.createTextNode(text); // 创建文本节点

document.insertBefore(newNode, referenceNode); // 在某个节点前插入节点parentNode.appendChild(newNode); // 给某个节点添加子节点

cloneNode(true | false); // 复制某个节点

parentNode.removeChild(node); // 删除某个节点的子节点node是要删除的节点

getAttribute(name) // 通过属性名称获取某个节点属性的值setAttribute(name,value); // 通过某个节点属性的值removeAttribute(name); // 删除某个属性

curtNode.previousSibling; // 获取已知节点的相邻的上一个节点curtNode.nextSibling; // 获取已知节点的下一个节点

window.addEventListener("storage",function(event){ $("#name").val(event.key+"="+event.newValue);});

$(function(){   $("#btn").click(function(){       var name = $("#name").val();       localStorage.setItem("name", name);   });});

console.log(null==undefined)//true
console.log(null===undefined)//false

var obj = new Object();

obj._proto_ = Object.prototype

function da(name) { this.name = name;}da.prototype.sayName = function() { console.log(this.name);}const jeskson = new da('dada');console.log(jeskson.name); // dadajeskson.sayName(); // dada

function da(name) { this.name = name; return 1;}const jeskson = new da('dada');console.log(jeskson.name); // dada

function da(name) { this.name = name; console.log(this); // da {name: 'dada'} return {age:1}}const jeskson = new da('dada');console.log(jeskson); // {age:1}console.log(jeskson.name); // undefined

<script type="text/javascript" >  function A(){    $.post("/lord/login",{name:username,pwd:password},function(){      alert("Hello");    });  }  $(function (){    setTimeout('A()', 1000); //延迟1秒  })</script>

call(this, arg1, arg2, arg3);apply(this, arguments);
function add(a,b){ console.log(a+b);}function sub(a,b){ console.log(a-b);}add.call(sub, 2, 1);add.apply(sub, [2,1]);

var f1 = function(a,b) { console.log(a+b);}var f2 = function(a,b,c) { console.log(a,b,c);}f2.apply(f1,[1,2]) // 1 2 undefined

var f1 = function(a,b) { console.log(a+b);}var f2 = function(a,b,c) { console.log(a,b,c);}f2.call(f1,[1,2]); // [1,2] undefined undefinedf2.call(f1, 1, 2); // 1 2 undefined

 //apply用法 var arr = new Array(1,2,3) var arr1 = new Array(11,21,31) Array.prototype.push.apply(arr,arr1) console.log(arr)//[1, 2, 3, 11, 21, 31]  //call用法 var arr = new Array(1,2,3) var arr1 = new Array(11,21,31) Array.prototype.push.call(arr,arr1[0],arr1[1],arr1[2]) console.log(arr)//[1, 2, 3, 11, 21, 31]

 //apply的用法 var _maxNum = Math.max.apply(null,[1,3,2,4,5]) console.log(_maxNum)//5 var _minNum = Math.min.apply(null,[1,3,2,4,5]) console.log(_minNum)//1  //call的用法 var _maxNum = Math.max.call(null,1,3,2,4,5) console.log(_maxNum)//5 var _minNum = Math.min.call(null,1,3,2,4,5) console.log(_minNum)//1

let params = [1,2,3,4,5];dada.call(obj, ... params);

var func = function( a, b, c ){     console.log(this === window); // 输出:true};func.apply( null, [ 1, 2, 3 ] );
// 在严格模式下,函数体内的 this 还是为 null
var func = function( a, b, c ){     "use strict";    console.log(this === null); // 输出:true};func.apply( null, [ 1, 2, 3 ] );

var obj1={     name: 'dada'};var obj2={     name: 'da'};window.name = 'window';var getName = function(){     console.log ( this.name );};getName(); // 输出: windowgetName.call( obj1 );// 输出: dadagetName.call(obj2 ); // 输出: da

document.getElementById( 'div1' ).onclick = function(){    console.log( this.id );// 输出: div1    var func = function(){         console.log ( this.id );// 输出: undefined    }     func();}; //修正后document.getElementById( 'div1' ).onclick = function(){    var func = function(){         console.log ( this.id );// 输出: div1    }     func.call(this);}; 

function createPerson(name,age,job){    var o = new Object();    o.name=name;    o.age=age;    o.job=job;    o.sayName = function(){        alert(this.name);    }}var person1 = createPerson("da",1,"it");var person2 = createPerson("dada",2,"it");

function Person(name,age,ob){    this.name=name;    this.age=age;    this.job=job;    this.sayName = function(){        alert(this.name);    }var person1 = new Person("dada",1,"web");var person2 = new Person("dada",2,"web");}

function Person(){}Person.prototype.name = "da";Person.prototype.age = 1;Person.prototype.job = "web";Person.prototype.sayName = function(){    alert(this.name);} var person1 = new Person();person1.sayName();    //"dada" var person2 = new Person();person2.sayName();    //"dada" alert(person1.sayName == person2.sayName);   //true

function Person(name,age){    this.name = name;    this.age = age;    this.friends = ["da","dada"];}Person.prototype = {    constructor:Person,    sayName:function(){        alert(this.name);    }}var person1 = new Person("da1",1);var person2 = new Person("da2",2);person1.friends.push("dadada");console.log(person1.friends);    //["da","dada","dadada"]console.log(person2.friends);    //["da","dada"]console.log(person1.friends === person2.friends);    //falseconsole.log(person1.sayName === person2.sayName);   //true

function Person(name,age,job){    this.name=name;    this.age=age;    this.job=job;
    if(typeof this.sayName!="function"){        Person.prototype.sayName=function(){            alert(this.name);        };    }}

简单的promise对象的构造函数的结构：
var Promise = function() { this.callbacks = []; // 用于管理回调函数}Promise.prototype = { construct: Promise, resolve: function(result) { // 请求成功时执行的方法 }, reject: function(result) { // 请求失败时执行的方法 }, complete: function(type, result) { // 执行回调 }, then: function(successHandler, failedHandler) { // 绑定回调函数 }}

// 同步操作变成异步操作f1();f2();
function f1(callback) { setTimeout(function() {  callback(); },1000);}f1(f2);

$('#clickBtn').on('click',function(e){console.log('xxx');}

f1.on('dada', f2);
function f1() { setTimeout(function() {  f1.trigger('dada'); },1000);}
// f1.trigger('dada')表示执行完成后，立即触发dada事件，然后开始执行f2

foo(); // 在函数声明之后调用 foo，可以正常调用。因为 foo 被提前到最前面定义了。function foo() {   return true;}

函数名(参数)
函数名.call(函数名,参数)
函数名.apply(函数名,[参数])
new 函数名(参数)
定时器
把函数声明变成函数表达式再调用
ES6里的模版字符串

foo(); // 在函数表达式之前调用函数，报错。因为这时候还没有 foo 这个变量。var foo = function() {   return foo;};

函数名(参数)
函数名.call(函数名,参数)
函数名.apply(函数名,[参数])
new 函数名(参数)
直接在后面加上一对小括号
定时器
ES6里的模版字符串
以被赋值的形式出现（根据具体形式调用）

var getName // 变量被提升，此时为undefined
getName() // dada 函数被提升
var getName = function() { console.log('da')}// 函数表达式此时才开始覆盖函数声明的定义
getName() // da
function getName() { console.log('dada')}
getName() // da

1. 函数声明2. 函数表达式3. ES6里箭头函数4. new Function()

document.cookie = 'user=jeskson;expires='+new Date(0);

function byte(str) { var bytes = str.length; for(var i=0; i<bytes; i++) {  if(str.charCodeAt(i)>255) {   bytes++;  } } return bytes}console.log(byte('dada'));

function outer() { var a = '变量1' var inner = function() {  console.info(a);}return inner; // inner就是一个闭包函数，因为它能访问到outer函数的作用域}

<button onclick="fun()" >按鈕</button><script>    function fun() {        document.write("write内容");    }</script>
<button onclick="fun()">按钮</button><script>    function fun() {       document.getElementById("p").innerHTML="新增加的innerHTML内容";    }</script>

function readAjaxFile(url) { // 创建xhr var xhr = new XMLHttpRequest(); // 监听状态 xhr.onreadystatechange = function() {  // 监听状态值  if(xhr.readyState === 1 && xhr.status === 200) {   console.log(xhr.responseTest)  } } // 打开请求 xhr.open('GET', url, true) // 发送数据 xhr.send(null)}

function readInputFile(id) { var file = document.getElementById(id).files[0]; // 实例化 var reader = new FileReader(); // 读取文件 reader.readAsText(file) // 监听返回 reader.onload = function(data) {  console.log(data, this.result); }}

document.form.action = 'submit';

["1","2","3"].map(parseInt)

var name = 'jeskson';function person() { return this.name;}
console.log(this.name); // jesksonconsole.log(window.name); // jesksonconsole.log(person()); // jeskson

var name = "jeskson";
function person() { console.log(this.name);}
person(); // jeskson
var obj = { name: "dada", person: function() {  console.log(this.name); }}
obj.person(); // dada

function Person(name) { this.name = name; return name;}console.log(new Person('jeskson').name); // jeskson

function person() { return this.name;}
var obj = { name: 'jeskson'}
console.log(person.call(obj)); // jesksonconsole.log(person.apply(obj)); // jeskson

<input type="button" id="btnDa" value="dada">
<script>var btnDa = document.getElementById("btnDa");btnDa.onClick=function() { console.log(this); // this指向的是btnDa对象}</script>

var show = function() { this.myName="jeskson"; /// this指向的是obj对象}var obj = new show();

// 标准的有伪数组对象var da = { 0: 'a', 1: 'b', length: 2};var dada = Array.prototype.slice.call(da);console.log(da[0]); // avar dadada = [].slice.call(dada);console.log(da[0]); // a

aaaabbbccccddhgddada

function dealStr(str) { var obj = {}; for(var i = 0; i<str.length; i++){  var v = str.charAt(i);  if(obj[v] && obj[v].value === v) {   ++obj[v].count  }else{   obj[v] = {    count: 1,    value: v   }  } } return obj;}
var obj = dealStr(str);for(key in obj) { console.log(obj[key].value+'='+obj[key].count);}

function trim(str) {    if (str && typeof str === "string") {        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符    }}

var arr3 = [];
// 遍历arr1for (var i = 0; i < arr1.length; i++) {  arr3.push(arr1[i]);}
// 遍历arr2for (var j = 0; j < arr2.length; j++) {  arr3.push(arr2[j]);}
console.log(arr3); // [1,2,3,4,5,6]

var arr3 = arr1.concat(arr2);
console.log(arr3); // [1,2,3,4,5,6]

arr1.push.apply(arr1, arr2);

xxx is not defined

for, while, do...while, for_in, for of (es6新增)
while(条件表达式语句){    执行语句块;}
do{    执行语句块；}while(条件表达式语句);
for(初始化表达式;循环条件表达式;循环后的操作表达式){    执行语句块;}

    var obj = {        name: 'jeskson'    }    console.log(obj.name);//'jeskson'    delete obj.name;    console.log(obj.name);//undefined

设置Cookie的语法如下： set-Cookie:name=value;[expires=date];[path=dir];[domain=domainn];[secure]

var da = [ 1, 2, 3];da.pop();
// da: [1,2]

for (var item in object

var da = function() { console.log('dadaqianduan.cn')}da();

"abcdef".split("")   //  ["a", "b", "c", "d", "e", "f"]"abcdef".split()    // ["abcdef"]"2:3:4:5".split(":",3)  //  ["2", "3", "4"]
[1,2,3,4,5].join()   // "1,2,3,4,5"[1,2,3,4,5].join(':')  // "1:2:3:4:5"

function Person (name, age) {  this.name = name  this.age = age} console.log(Person.prototype) Person.prototype.type = 'it' Person.prototype.sayName = function () {  console.log(this.name)} var p1 = new Person('jeskson', 18);var p2 = new Person('dada', 18); console.log(p1.sayName === p2.sayName) // => true

function Person() {}
--> 原型属性（prototype) 神秘的对象Person.prototype
--> 由构造函数创建 Person实例 --> __proto__ 原型对象 --> 神秘对象

console.log(obj.__proto__);
console.log(obj.prototype);
console.log(obj.__proto__ === Object.prototype);

1. 实例对象.__proto__===原型
2. 原型.constructor===构造函数
3. 构造函数.prototype===原型

function getDataType(obj) {if (obj === null) {return “null”;} else if (typeof obj === “object”) {if (obj instanceof Array) {return “array”;} else {return “object”;}} else {return typeof obj;}}

==  只做值的判断，实际隐式转换了类型，然后才进行的比较

parseInt()     将字符串强类型制转换为数字整数类型
parseFloat()  将字符串类型转换为浮点类型
Number()      只能将纯数字的字符转换为数字

var d = new Date();var year = d.getFullYear();var month = d.getMonth() + 1;month = month < 10 ? "0" + month : month;var day = d.getDate();daty = day<10? "0"+day : day;console.log(year+'-'+month+'-'+day);

var isArray = [];function getRandom(start, end) { return Math.floor(Math.random() * (end-start+1) + start)}for(var i = 0; i<10; i++){ isArray.push(getRandom(10,100))}isArray.sort()console.log(isArray)

function clone(obj) { var buf; if(obj instanceof Array) {  var i = obj.lenght;  buf = [];  while(i--) {   buf[i] = clone(obj[i])  }  return buf; }else if(obj instanceof Object) {  buf = {};  for(var i in obj) {   buf[i] = clone(obj[i])  }  return buf; }else{  return buf = obj; }}

function noRepeat(arr) { var i = 0, len = arr.length, obj = {}, result = []; while(++i < len) { obj[arr[i]] || result.push(arr[i]) obj[arr[i]] = true;}return result;}

function Person(name, job, site) { this.name = name; this.job = job; this.site = site;}Person.prototype = { getName: function() {  console.log('my name'+this.name); } getJob: function() {  console.log('my job'+ this.job); } getWork: function() {  console.log('my work' + this.site); }}
var da = new Person('dada', 'it', 'shenzheng');da.getName();da.getJob();da.getWork();

function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function SubType() {this.property = false;}//继承了SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true

function SuperType() {this.colors = ["red","blue","green"];}
function SubType() {SuperType.call(this);//继承了SuperType}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

function SuperType(name) {this.name = name;this.colors = ["red","blue","green"];}
SuperType.prototype.sayName = function() {console.log(this.name);}
function SubType(name, age) {SuperType.call(this,name);//继承属性this.age = age;}
//继承方法SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype;Subtype.prototype.sayAge = function() {console.log(this.age);}
var instance1 = new SubType("da",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("dada",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"dada"
instance2.sayAge();//20

(new Foo).__proto__ === Foo.prototype;(new Foo).prototype === undefined;

function Point(x, y) {    this.x = x;    this.y = y;}
var myPoint = new Point();
// the following are all truemyPoint.__proto__ == Point.prototypemyPoint.__proto__.__proto__ == Object.prototypemyPoint instanceof Point;myPoint instanceof Object;

// 通过函数字面量function da() {}
// 函数表达式var da = function() {}
// 通过构造函数var da = new Function();

decodeURI()	解码某个编码的 URI。decodeURIComponent()	解码一个编码的 URI 组件。encodeURI()	把字符串编码为 URI。encodeURIComponent()	把字符串编码为 URI 组件。escape()	对字符串进行编码。eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。getClass()	返回一个 JavaObject 的 JavaClass。isFinite()	检查某个值是否为有穷大的数。isNaN()	检查某个值是否是数字。Number()	把对象的值转换为数字。parseFloat()	解析一个字符串并返回一个浮点数。parseInt()	解析一个字符串并返回一个整数。String()	把对象的值转换为字符串。unescape()	对由 escape() 编码的字符串进行解码。

Infinity	代表正的无穷大的数值。java	代表 java.* 包层级的一个 JavaPackage。NaN	指示某个值是不是数字值。Packages	根 JavaPackage 对象。undefined	指示未定义的值。

Concat（）：表示把几个数组合并成一个数组。 Join（）：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。 Pop（）：移除数组最后一个元素。 Shift（）：移除数组中第一个元素。 Slice（start，end）：返回数组中的一段。 Push（）：往数组中新添加一个元素，返回最新长度。 Sort（）：对数组进行排序。 Reverse（）：反转数组的排序。 toLocaleString();返回当前系统时间。
ceil()：向上取整。floor():向下取整。round():四舍五入。random():取随机数。
get/setDate()：返回或设置日期。get/setFullYear():返回或设置年份，用四位数表示。get/setYear():返回或设置年份。get/setMonth():返回或设置月份。0为一月get/setHours():返回或设置小时，24小时制get/setMinutes():返回或设置分钟数。get/setSeconds():返回或设置秒钟数。get/setTime():返回或设置时间（毫秒为单位）。