每日进步一点点

js拓展 https://github.com/mqyqingfeng/Blog

JavaScript专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

1. 答案：1，undefined，2

3.统计‘aaabbbdddddd'中字符出现最多的或者字母个数

function distinction(str){
var obj={};
return (function(){
 for(var i=0;i<str.length;i++){
 var v=str.charAt(i);
if(obj[v]&&obj[v].value==v){
   obj[v].count=++obj[v].count;
}else{
obj[v]=[];
obj[v].count=1;
obj[v].value=v;
}
}
return obj;
})()

}
var str='aaabbbdddddd';
console.log(distinction(str));

4.移除数组arr中所有值与item值相等的元素，不直接修改数组arr，结果返回新的数组

outer func:this foo=bar
outer func:self.foo=bar
inner func:this.foo=undefined
inner fucn:self.foo=bar

基底相当于索引

Array.protptype.slice.call(arraylike);

Array.protptype.slice表示数组中的原型中的slice 方法，slice方法返回的是Array类型的对象。

9.描述一下cookies，sessionStorage,和localstorage的区别？

相同点：都是缓存在客户端

不同点： 1.大小 cookie数据大小不能超过4k。sessionStorage和localStorage.虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间 localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3.数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端　　 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

10.元素中的IFC值的是啥

IFC ( inline formatting context) :行内格式化上下文。 Ro与块级元素形成对比，当元素的CSS属性display的计算值为inline,inline- block, inline -table, intine-flex或intine-grid时，它是行内级元素。视觉上它将内容与其它行内级元素排列为一行，直到该行被占满然后换行。典型的如段落内容，文本或图片，都是行内级元素。

行内级元素生成行内级盒，参与行内格式化上下文( inline format-ting context)，被渲染为水平排列，直到当行被占满然后换行。行内级盒分为行内盒( inline boxes )和原子行内级盒(atomic in-line -level boxes)。前者由非置换元素且display值为inline的元素生成;后者由行内级置换元素，或display值为inline-block, in-line-table, inline-flex, inline-grid的元素生成。

BFC 块格式化上下文使 BFC 内部的浮动元素不会到处乱跑。 和浮动元素产生边界 https://www.jianshu.com/p/0d713b32cd0d

11.js

var a=1;
if(function b(){}){
a+=typeof (b);
}
console.log(a); //1undefined

12.js中的arguments，克隆

function fn(arg1,arg2){
    console.log(arg1,arg2);
    arg1[0]="duyi";
    arg2="Web";
    console.log(arg1);
    console.log(arguments[1]);
}
fn("html","css");

//结果
html css
html
web

13.arguments,this用法

var length=1000;
var obj={
    length:10,
    fn:function(fn){
    fn();
    arguments[0]();

    }
}
function fn(){
    console.log(this.length);
}
obj.fn(fn, 1,2,3)
//结果
1000
4

14.js中的包装类

var a={};
var b={n:1};
var c={m:2};
a[b]=3;
a[c]=4;
console.log(a[b]);
//4

15.js中的伪数组

var arr=[1,2,3];
arr[9]=10;
console.log(arr.length);
//10

16.去除字符串中的字母

正则表达式匹配，用空字符串代替

var str='1a5s8swd2cd787frfrr8f5f2';
    str=str.replace(/[a-zA-Z]/g,"")
    console.log(str);

17.Dom Ready时间如何获取，如何优化

获取方式:

　　高级浏览器通过DOMContentLoaded事件获取。

　　低版本webkit内核浏览器可以通过轮询document.readyState来实现ie中可通过setTimeout不断调用documentElement的doScroll方法，直到其可用来实现

　　(可以参考jQuery的实现)

优化建议:

　　减少dom结构的复杂度，节点尽可能少，嵌套不要太深优化关键呈现路径

18.统计字符串中“aaaabbbcccddfgh”中字母个数或者最多字母数

function distinction(str) {

var obj = {};

return (function (){

for (var i = 0; i < str.length; i++) {

var v = str.charAt(i);

if (obj[v] && obj[v].value == v) {

obj[v].count = ++obj[v].count;

} else {

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

return obj

})()

}

var str = 'aaabbbbbddddddd';

console.log(distinction(str));

//a:{count:3,value:"a"};

//b:{count:5,value:"b"};

//c:{count:7,value:"c"};

思路2：

// 创建一个目标结果对象（即最后函数返回值，代码中为 result）；

// 循环遍历字符串（传入的参数, str），结果对象（result）里存在该字母，则次数＋1

// 若不存在，则以 {当前字母: 1} 的形式加到结果对象中。

 function getMost(str) {
            // 步骤1
            var result = {};
            for (let i in str) {
                if (str[i] in result) {
                    // 步骤2
                    result[str[i]]++;
                } else {
                    // 步骤3
                    var object = {};
                    object[str[i]] = 1;
                    result = Object.assign(result, object);
                }
            }
            return result;
        }
        var result = getMost("aaaabbbcccddfgh");
        console.log(result); //{ a: 4, b: 3, c: 3, d: 2,f:1,g:1,h:1}
        //getMost方法es6写法  
        function getMost(str) {
            var result = Array.prototype.reduce.call(str, function (allWords, curWord) {
                allWords[curWord] ? allWords[curWord]++ : allWords[curWord] = 1;
                return allWords;
            }, {});

            return result;
        }
        var result = getMost("aaaabbbcccddfgh");
        console.log(result); //{ a: 4, b: 3, c: 3, d: 2,f:1,g:1,h:1}

思路三：

//例：原字符串 “xyzzyxyz”

// 使用 split()，将字符串转换为字符串数组：['x','y','z','z','y','x','y','z']；

// 使用 sort()，将乱序的字符串数组排序：['x','x','y','y','y','z','z','z']；

// 使用 join()，将数组组合为字符串：'xxyyyzzz'；

// 使用 match()，将字符串通过正则，把连续重复字母，分组返回：['xx'],['yyy'],['zzz']；

// 使用 reduce，对数组进行迭代，在回调函数里生成结果函数：{x: 2, y: 3, z: 3}

function getMost(str) {
            var result = {};
            result = str.split('').sort().join('').match(/(.)1+/g).reduce(function (result, cur) {
                result[cur[0]] = cur.length;
                return result;
            }, {});

            return result;
        }
        var result = getMost("xyzzyxyz");
        console.log(result); //{x: 2, y: 3, z: 3}

19.什么是NaN,他的类型是什么，如何可靠性的测试一个值是否等于NaN?

NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的，不能执行的原因要么是因为其中的运算对象之一非数字（例如， "abc" / 4），要么是因为运算的结果非数字（例如，除数为零）

类型是 Number console.log(typeof NaN === "number"); // logs "true" 与自己本身 console.log(NaN === NaN); // logs "false"

一种半可靠的方法来测试一个数字是否等于 NaN，是使用内置函数 isNaN()，但即使使用 isNaN() 依然并非是一个完美的解决方案。

一个更好的解决办法是使用 value !== value，如果值等于NaN，只会产生true。另外，ES6提供了一个新的 Number.isNaN() 函数，这是一个不同的函数，并且比老的全局 isNaN() 函数更可靠。

20.$(this)和this关键字在jquery中有何不同

$(this)返回一个jQuery 对象，你可以对它调用多个jQuery方法，比如用text()获取文本，用val()获取值等等。
而this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素。你不能对它调用jQuery方法，直到它被$()函数包裹，例如$(this)。21

21.对象的属性

 var obj={a:3,b:2,c:1};
    delete obj.b;
    console.log(obj);
    // 要使其打印的结果是  obj{a:3,c:1}  通过delete