js面试题3

数组方法filter（）的使用

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

例如 在一个数组中要想删掉偶数，只保留奇数

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
	return x % 2 !== 0;
});

r; // [1, 5, 9, 15]

找出两个数组的并集，交集和差集

并集

let union = Array.from(new Set(a.concat(b)))

交集

let intersection = Array.from(new Set(a.filter(v => bSet.has(v))))

差集

let difference = Array.from(new Set(a.concat(b).filter(v => !aSet.has(v) || !bSet.has(v))))

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

  var iArray = [];
  function getRandom(istart, iend) {
        var iChoice = iend - istart + 1;    //加1是为了取到100
        var res = Math.floor(Math.random() * iChoice + istart);  
        return res;
  }
  for (var i = 0; i < 10; i++) {
        iArray.push(getRandom(10, 100));
     }
  iArray.sort(function (a, b) {
        return a > b;
  });
  console.log(iArray);

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

var array1 = [‘a’,‘b’,‘c’];

var bArray = [‘d’,‘e’,‘f’];

var cArray = array1.concat(bArray);

cArray.splice(1,1);

有这样一个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 urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}

清除字符串前后的空格

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

以下两个变量a和b，a+b的哪个结果是NaN？

  // var a=undefined; b=NaN  // NAN
  // var a= '123' ;b=NaN //123NAN
  // var a=NaN , b='undefined' //NANundefined
  // console.log(a+b)

js延迟加载的方式有哪些？

1. defer和async
   script标签定义了 defer属性，表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行

   script标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。

2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

3. 将script标签放到页面底部

浏览器的渲染和操作顺序

1 HTML解析完毕。
2 外部脚本和样式表加载完毕。
3 脚本在文档内解析并执行。
4 HTML DOM 完全构造起来。
5 图片和外部内容加载。
6 网页完成加载。

重绘和回流

重绘是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变visibility、outline、前景色。
当重绘发生时，浏览器会验证DOM树上的所有其它结点的visibility属性

回流是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发回流，都会导致它的子结点及祖先结点重新渲染。

在哪些情况下会导致回流发生：
改变窗囗大小
改变文字大小
添加/删除样式表
内容的改变，如用户在输入框中敲字(这样也会-_-||)
激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活)
操作class属性
脚本操作DOM
计算offsetWidth和offsetHeight
设置style属性

将回流对性能的影响降低到最小

1、尽可能限制reflow的影响范围。以上面的代码为例，要改变p的样式，class不要加在div上，通过父级元素影响子元素不好。最好直接加在p上。

2、通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow。所以最好通过设置class的方式。

3、实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。

4、权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

5、不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

6、很多情况下都会触发reflow，如果css里有表达式，每次都会重新计算一遍。

判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}

字符串反转

str = str.split(’’).reverse().join(’’)

列出3条以上ff和IE的脚本兼容问题

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

数组和对象有哪些原生方法，列举一下？

Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素

Object.hasOwnProperty( ) 检查属性是否被继承
Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型
Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性
Object.toLocaleString( ) 返回对象的本地字符串表示
Object.toString( ) 定义一个对象的字符串表示
Object.valueOf( ) 指定对象的原始值

在JS中有哪些会被隐式转换为false

Undefined、null、关键字false、NaN、零、空字符串

外部JS文件出现中文字符，会出现什么问题，怎么解决？

会出现乱码，加charset=”utf-8”;