js面试题小结

111 阅读4分钟

js知识点小结

js数据类型包括什么

JS 的数据类型:Number、String、Boolean、Null、undefined、object、symbol(这个是Es6新出来的) 其中Object又包含了这三种:Data、function、Array。

使用typeof可以判断数据类型

> typeof undefined
'undefined'
> typeof null 
'object'
> typeof true
'boolean'
> typeof 123
'number'
> typeof "abc"
'string'
> typeof function() {}
'function'
> typeof {}
'object'
> typeof []
'object'
 > typeof NAN
'number'

三种强制转换和两种隐式转换

 强制(parseInt,parseFloat,number)

 隐式(== – ===)

split和join

前者是切割成数组的形式,后者是将数组转换成字符串

数组的前填后删

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

事件委托

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

闭包

本质就是在一个函数内部创建另一个函数

有三个特性:
    函数嵌套函数
    函数内部可以引用函数外部的参数和变量
    参数和变量不会被垃圾回收机制回收
    

他的优缺点:
 优点:
     保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突

     在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)

     匿名自执行函数可以减少内存消耗

缺点:

    其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;

    其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响
    

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

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

js的本地对象,内置对象和宿主对象

    本地对象为array obj regexp等可以new实例化
    内置对象为gload Math 等不可以实例化的
    宿主为浏览器自带的document,window

== 和 === 的区别

前者可以自动转换类型,后者不行

javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、议和端口号的组合

代码题

数组去重

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

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

document.getElementById(“ID”).value

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

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

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

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

当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?

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

看下列代码,输出什么?解释原因

var a = null;
alert(typeof a); //object
解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。

看下列代码,输出什么?解释原因

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

看代码给答案

	var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
// 输出2

已知数组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("-");
    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;
}

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

1) 实现对该数组的倒排,输出[5,1,4,2,6,3]
2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

	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;
}

输出今天的日期,以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);

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

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

foo = foo||bar ,这行代码是什么意思?为什么要这样写?

if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。

看下列代码,将会输出什么?(变量声明提升)

	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引擎隐式地提升到当前作用域的顶部,但是只提升名称不会提升赋值部分

用js实现随机选取10–100之间的10个数字,存入一个数组,并排序

var iArray = []; 
funtion getRandom(istart, iend){
        var iChoice = istart - iend +1;
        return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
        iArray.push(getRandom(10,100));
}
iArray.sort();

合并两个数组删除第二个元素

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

怎样添加、移除、移动、复制、创建和查找节点(原生JS,实在基础,没细写每一步)

1)创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
2)添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
3)查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id,唯一性

有这样一个URL:item.taobao.com/item.htm?a=… ,请写一段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;
}