前端面试题汇总(JS 基础篇)

前端面试题汇总(JS 基础篇)**

1、javascript 的 typeof 返回哪些数据类型**

object number function boolean underfind string
 typeof null;//object 
 typeof isNaN;// 
 typeof isNaN(123) 
 typeof [];//object 
 Array.isARRAY(); es5
  toString.call([]);//”[object Array]” 
  var arr=[]; 
  arr.constructor;//Array

2、例举 3 种强制类型转换和 2 种隐式类型转换?
强制(parseInt,parseFloat,Number())
隐式(==)
1==”1”//true null==undefined//true
3、split() join()的区别
前者是切割成数组的形式,
后者是将数组转换成字符串
4、数组方法 pop() push() unshift() shift()
Push()尾部添加
pop()尾部删除
Unshift()头部添加
shift()头部删除
5、事件绑定和普通事件有什么区别
传统事件绑定和符合 W3C 标准的事件绑定有什么区别?

div1.onclick=function(){};
   <button onmouseover=””></button>

  1、如果说给同一个元素绑定了两次或者多次
  相同类型的事件,那么后面的绑定会覆盖前面
   的绑定
 2、不支持 DOM 事件流 事件捕获阶段
 目标元素阶段=>事件冒泡阶段 addEventListener
  1、 如果说给同一个元素绑定了两次或者多次
  相同类型的事件,所有的绑定将会依次触发
   2、 支持 DOM 事件流的 
 3、 进行事件绑定传参不需要 on 前缀 addEventListener(“click”,function(){},true);
 //此时的事件就是在事件冒泡阶段执行 ie9 开始
 ,ie11 edge:addEventListener ie9 以
 前:attachEvent/detachEvent 
      1、 进行事件类型传参需要带上 on 前缀
       2、 这种方式只支持事件冒泡,不支持事件捕获 
      

事件绑定是指把事件注册到具体的元素之上,普通事件指的是可以用来注册的事件
6、IE 和 DOM 事件流的区别

 1.执行顺序不一样、
  2.参数不一样 
  3.事件加不加 on
   4.this 指向问题

IE9 以前:attachEvent(“onclick”)、detachEvent(“onclick”) IE9 开始跟 DOM 事件流是一样的,都是 addEventListener

7、IE 和标准下有哪些兼容性的写法

var ev = ev || window.event 
document.documentElement.clientWidth || document.body.clientWidth 
var target = ev.srcElement||ev.target

8、call 和 apply 的区别
call 和 apply 相同点: 都是为了用一个本不属于一个对象的方法,让这个对象去执行

toString.call([],1,2,3) 
toString.apply([],[1,2,3]) 
Object.call(this,obj1,obj2,obj3) 
Object.apply(this,arguments)

9、b 继承 a 的方法
考点:继承的多种方式

 function b(){} 
 b.protoototype=new a;

10、JavaScript this 指针、闭包、作用域
this:指向调用上下文
闭包:内层作用域可以访问外层作用域的变量
作用域:定义一个函数就开辟了一个局部作用域,整个js执行环境有一个全局作用域
11、事件委托是什么
符合 W3C 标准的事件绑定addEventLisntener /attachEvent
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
12、闭包是什么,有什么特性,对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
闭包的缺点:滥用闭包函数会造成内存泄露,因为闭包中引用到的包裹函数中定义的变量都
永远不会被释放,所以我们应该在必要的时候,及时释放这个闭包函数
13、如何阻止事件冒泡和默认事件
e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 之前
阻止默认事件:
为了不让 a 点击之后跳转,我们就要给他的点击事件进行阻止

 return false
  e.preventDefault();

14、添加 删除 替换 插入到某个接点的方法

obj.appendChild()
obj.insertBefore() //原生的 js 中不提供 insertAfter(); 
obj.replaceChild()//替换 
obj.removeChild()//删除

15、javascript 的本地对象,内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window
16、document load 和 document ready 的区别
Document.onload是在结构和样式加载完才执行 js
window.onload:不仅仅要在结构和样式加载完,还要执行完所有的样式、图片这些资源文 件,全部加载完才会触发window.onload事件
Document.ready原生中没有这个方法,jquery中有$().ready(function)

**17、”==”和“===”的不同**

前者会自动转换类型
后者不会
1==”1”
null==undefined
===先判断左右两边的数据类型,如果数据类型不一致,直接返回 false 之后才会进行两边值的判断
18、javascript 的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协 议和端口号的组合
http,ftp:协议
主机名;localhost
端口名:8
同源策略带来的麻烦:ajax在不0:http 协议的默认端口
https:默认端口是8083
同域名下的请求无法实现,
如果说想要请求其他来源的js文件,或者json数据,那么可以通过jsonp来解决
19、编写一个数组去重的方法

var arr=[1,1,3,4,2,4,7];
 =>[1,3,4,2,7]

一个比较简单的实现就是:
1、 先创建一个空数组,用来保存最终的结果 2、 循环原数组中的每个元素
3、 再对每个元素进行二次循环,判断是否有与之相同的元素,如果没有,将把这个元素放 到新数组中
4、 返回这个新数组

  function oSort(arr) { 
  var result ={}; 
  var newArr=[]; 
  for(var i=0;i<arr.length;i++){ if(!result[arr]) {
   newArr.push(arr) result[arr]=1 
   }
   }return newArr
    }</arr.length;i++)

20、JavaScript 是一门什么样的语言,它有哪些特点?
脚本语言
运行环境:浏览器中的 JS 引擎(v8.。。)
语言特性:面向对象,动态语言:

//动态语言的特性 
var num=10;//num 是一个数字类型 
num="jim";//此时 num 又变成一个字符串类型 
//我们把一个变量用来保存不同数据类型的语言称之为一个动 态语言
 //静态语言:c# java c c++ 
 //静态语言在声明一个变量就已经确定了这个变量的数据类型,
 // 而且在任何时候都不可以改变他的数据类型

21、JavaScript 的数据类型都有什么?
基本数据类型:String,Boolean,number,undefined,object,Null
引用数据类型:Object(Array,Date,RegExp,Function)
那么问题来了,如何判断某变量是否为数组数据类型?
方法一.判断其是否具有“数组性质”,如 slice()方法。可自己给该变量定义slice方法, 故有时会失效
方法二.obj instanceof Array在某些IE版本中不正确
方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,
最好的方法如下:toString.call(18);
//”[object Number]” toString.call(“”);
//”[object String]”解析这种简单的数据类型直接通过typeof就可以直接判断toString.call常用于判断数组、正则这些复杂类型

 toString.call(/[0-9]{10}/)
 //”[object RegExp]” 
 if(typeof Array.isArray==="undefined"){ 
 Array.isArray = function(arg){ 
 return Object.prototype.toString.call(arg)==="[object Array]" 
 };
  }

22、已知 ID 的 Input 输入框,希望获取这个输入框的输入值,怎么做?(不使 用第三方框架)

document.getElementById(ID).value

23、希望获取到页面中所有的 checkbox 怎么做?(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];//返回的所有的 
 checkbox var len = domList.length; //缓存到局部变量 
 while (len--) { 
 //使用 while 的效率会比 for 循环更高
  if (domList[len].type == ‘checkbox’) { 
  checkBoxList.push(domList[len]); 
  } 
  }

24、设置一个已知 ID 的 DIV 的 html 内容为 xxxx,字体颜色设置为黑色(不使用 第三方框架)

var dom = document.getElementById(ID); 
dom.innerHTML = “xxxx” 
dom.style.color = “#000

25、当一个 DOM 节点被点击时候,我们希望能够执行一个函数,应该怎么做?
直接在DOM里绑定事件:<div onclick=”test()”>JS里通过 onclick绑定:xxx.onclick = test通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)那么问题来了,Javascript 的事件流模型都有什么? “事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
DOM 事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

26、看下列代码输出为何?解释原因。
代码如下:

var a; alert(typeof a); // “undefined” //alert(b); // 报错
 b=10; 
 alert(typeof b);//”number”

解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var 声明变量但并未对其赋值进行初始化时,这个变量的值就是 undefined。而b由于未声明将 报错。注意未申明的变量和声明了未赋值的是不一样的。
undefined会在以下三种情况下产生:
1、 一个变量定义了却没有被赋值
2、 想要获取一个对象上不存在的属性或者方法: 3、 一个数组中没有被赋值的元素
注意区分 undefined 跟 not defnied(语法错误)是不一样的
27、看下列代码,输出什么?解释原因。
var a = null;
alert(typeof a); //object
解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用 typeof检测会返回”object”
28、看下列代码,输出什么?解释原因

var undefined;//此时 undefined 这个变量的值是 undefined 
undefined == null; // true
 1 == true; // true 
 此时会把布尔类型的值转换为数字类型 true=1 false=0
2 == true; // false
 0 == false; // true
  0 == ''; // true
   NaN == NaN; // false
    [] == false; // true
     [] == ![]; // true 
     undefined 与 null 相等,但不恒等(===) 一个是 number 一个是 string 时,会尝试将 string 转换为 number
      尝试将 boolean 转换为 number,01
       尝试将 Object 转换成 number 或 string,取决于另外一个对比量的类型 所以,对于 0、空字符串的判断,建议使用 “===” 。“===”会先判断两边的值类 型,类型不匹配时为 false。 那么问题来了,看下面的代码,输出什么,foo 的值为什么?
        var foo = "11"+2-"1"; console.log(foo);//111
         console.log(typeof foo); 
//执行完后 foo 的值为 111,foo 的类型为 number。

29、看代码给答案。

var a = new Object();
 a.value = 1;
  b = a; {value:1} 
  b.value = 2; 
  alert(a.value);//2

答案:2(考察引用数据类型细节)

30 、 已 知 数 组 var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert 出”This is Baidu Campus”。
答案:alert(stringArray.join(“ ”))

已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”

getElementById”。 //
function combo(msg){ var arr=msg.split("-");//[get,element,by,id] 
for(var i=1;i<arr.length;i++){ 
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length -1);//Element }msg=arr.join("");
//msg=” getElementById” 
return msg; }
 //(考察基础 API)

31、var numberArray = [3,6,2,4,1,5]; (考察基础 API)

  1. 实现对该数组的倒排,输出[5,1,4,2,6,3]
function combo(msg){ 
var arr=msg.split("-");
 for(var i=1;i<arr.length;i++){ 
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length -1); 
}msg=arr.join("");
 return msg; }

32、输出今天的日期,以 YYYY-MM-DD 的方式,比如今天是 2014 年 9 月 26 日, 则输出 2014-09-26

var d = new Date(); 
// 获取年,getFullYear()返回 4 位的数字
 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;
alert(year + '-' + month + '-' + day);

33、将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>中的{$id}替换 成10{$name}替换成 Tony(使用正则表达式)

<tr>
<td>
{$id}
</td>
<td>
{$id}
_{$name}
</td>
</tr>.replace(/{\$id}/g,10).replace(/{\$name}/g, ‘Tony’);

34、为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写 一个函数 escapeHtml,将<, >, &, “进行转义

function escapeHtml(str) {
 //[<>”&]:中括号中字符只要其中的一个出现就代表满足条件
  //给 replace 第二个参数传递一个回调函数,回调函数中参数就是匹配结果,如果匹配不到就是 
  null return str.replace(/[<>”&]/g, 
  function(match) {
   switch (match) { 
   case<: return&lt;; 
   case>: return&gt;;
   case&: return&amp;;
   case “\””: return&quot;; 
   } 
   }); 
   }

35、foo = foo||bar ,这行代码是什么意思?为什么要这样写?
这种写法称之为短路表达式
答案:if(!foo) foo = bar; //如果 foo 存在,值不变,否则把 bar 的值赋给 foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要 最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。
注意 if 条件的真假判定,记住以下是 false 的情况:
空字符串、false、undefined、null、0
36、看下列代码,将会输出什么?(变量声明提升)

var foo = 1; 
function(){
 console.log(foo);
  var foo = 2;
   console.log(foo);
    }

答案:输出 undefined 和 2。上面代码相当于:

var foo = 1;
 function(){
 var foo; console.log(foo);//undefined 
  foo = 2; 
  console.log(foo); // 2; }

函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部,但是只提升名 称不会提升赋值部分。
37、用 js 实现随机选取 10–100 之间的 10 个数字,存入一个数组,并排序。

var iArray = []; 
funtion getRandom(istart, iend){ 
var iChoice = istart - iend +1; 
return Math.floor(Math.random() * iChoice + istart; }
Math.random()就是获取 0-1 之间的随机数(永远获取不到 1for(var i=0; i<10; i++){ 
var result= getRandom(10,100); 
iArray.push(result); }
iArray.sort();

38、把两个数组合并,并删除第二个元素。

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

39、怎样添加、移除、移动、复制、创建和查找节点(原生 JS,实在基础,没 细写每一步)
1)创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找 getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id,唯一性

**40、有这样一个 URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e, 请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定),将其 按 key-value 形式返回到一个 json 结构中,如{a:’1′, b:’2′, c:”, d:’ xxx’, e:undefined}。如何实现? **

function serilizeUrl(url) {

var result = {};
 url = url.split("?")[1];
 var map = url.split("&");
 for(var i = 0, len = map.length;
  i < len; i++) {
   result<script>jQuery(function($)
    {$("#google-maps-1").gMap({
    controls:false,
    scrollwheel: false,
    markers: [{
    address: "",icon: {
    image: "http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/_colors/red/pin.png",
    iconsize: [32, 32],iconanchor: [16,27],infowindowanchor: [16, 27]
    }
    }],address: "",zoom: 15,icon: {
    image: "http://blog.jobbole.com/wp-content/themes/jobboleblogv3/_assets/img/_colors/red/pin.png",
    iconsize: [32, 32],iconanchor: [16,27],infowindowanchor: [16, 27]
    }
    });
    });
    </script>
    <div id="google-maps-1" class="google-maps" style="width: 100%; height: 200px;">
    </div>
    .split("=")[0]] = map[i].split("=")[1];
     }
    return result; 
    }

41、正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么不同?匹配邮箱的正则表达式?
当使用 RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要 双反斜杠(即\表示一个\)。使用正则表达字面量的效率更高。 邮箱的正则匹配:

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

看下面代码,给出输出结果是?。

for(var i=1;i<=3;i++){
 setTimeout(function(){ 
 console.log(i); 
 },0); 
 };

答案:4 4 4。
原因:Javascript 事件处理器在线程空闲之前不会运行。
如何让上述代码输出 1 2 3?

for(var i=1;i<=3;i++){ 
setTimeout((function(a){ 
//改成立即执行函数 
console.log(a); 
})(i),0);
 };
//输出123

42、写一个 function,清除字符串前后的空格。(兼容所有浏览器)
使用自带接口 trim(),考虑兼容性:

if (!String.prototype.trim) { 
String.prototype.trim = function() {
 return this.replace(/^\s+/, "").replace(/\s+$/,""); //\s 匹配空白字符:回车、换行、制表符 tab 空格
  } 
  } 
  // test the function 
  var str = " \t\n test string ".trim();
   alert(str == "test string");
    // alerts "true"

43、Javascript 中 callee 和 caller 的作用?
arguments.callee:获得当前函数的引用
caller 是返回一个对函数的引用,该函数调用了当前函数;
callee 是返回正在被执行的 function 函数,也就是所指定的 function 对象的正文。
那么问题来了?如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子; 假定每对兔子都是一雌一雄,试问一对兔子,第 n 个月能繁殖成多少对兔子?(使用 callee 完成)这个问题很经典!

var result=[]; 
function fn(n){
//典型的斐波那契数列
if(n==1){ 
return 1; 
}else if(n==2){ 
return 1; 
}else{ 
if(result[n]){ 
return result[n]; 
}else{ //argument.callee()表示 fn() result[n]=arguments.callee(n-1)+arguments.callee(n -2); return result[n]; 
} 
} 
}

每天一句中文式外语

俄语

деньги (借你给)посольство (把所里撕特挖) 大使馆
таможня (打毛日尼阿) 海关
пошлина (抱失离那) 关税
паспорт (八四八勒特) 护照
виза (为咱) 签证
выездная виза (为业自得拿呀 为咱) 
出境卡
въездная виза (无业自得拿呀 为咱) 
入境卡
самолёт (撒马料特) 飞机
прямой рейс ( 扑俩贸易 列意思 ) 
直达航班
пересадка (别列撒特嘎) 转机
аэропорт (阿爱拉波勒特) 机场
билет в первом классе (比列特
夫 别了挖木 克拉谢) 头等仓机票
билет в туристическом классе (比列
特 夫 度累死几切丝嘎木 克拉谢) 经济仓票
вокзал (挖个砸) 火车站
поезд (波也斯特) 火车
билет на поезд (比列特 拿 波也斯特) 
火车票
станция (思党测呀) 车站
автобус (阿富多不死) 公交车
такси (大可喜) 出租车
улица (屋里擦) 街道
хлеб (和列谱) 面包
буфет (不费特) 小餐馆
столовая (四达罗挖呀) 食堂
блюда (不留答)рис (累死) 米饭
лопша (拉扑厦) 面条
пиво (比瓦) 啤酒
водка (我特加) 伏特加
напитка (拿比特嘎) 饮料
сок (索克) 果汁饮料
суп (素朴)чай (恰以) 茶
минеральная вода (米涅拉里拿呀 瓦大)
矿泉水
сигарета (吸嘎列答) 香烟
больница (八里你擦) 医院
врач (无拉起) 医生
доктор (多可打了) 大夫
медсестра (灭材丝特拉) 护士
лекарство (列嘎勒斯特挖)грипп (哥离谱) 流感
аптека (阿铺接嘎) 药房
уборная‚туалет (无波了拿呀,度啊列特)
厕所
общественный туалет (阿不写丝特为
内衣 度阿列特) 公共厕所
спорт (斯波勒特) 体育运动
спортивный зал (斯扒了及无内衣 砸了)
健身房
баскетбол (巴思该特波) 篮球
футбол (复得包) 足球
пинг-понг (比恩克波恩克) 乒乓球
театр (接阿特) 歌舞剧院
кино (给诺) 电影院
баня (八尼阿) 浴室
банк (八恩克) 银行
магазин (马嘎则恩) 商店
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Eugene.Tom.Lee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值