万丈高楼平地起，巩固你的基础知识点，js知识点巩固第一步，面试不在难（1）

时间  2021-08-14 标签 es6 ajax 数组 bash markdown 闭包 app 函数 this spa

前言

万丈高楼平地起，为了更好的工做咱们必须熟记这些知识点。虽然不必定用到，但记仍是要记得。这个只是我知识点整理的第一步后面会慢慢更新的，看的好能够点个赞，谢啦!es6

1.JS

1.1 JS 数据类型

JS基本有5种简单数据类型：Number,String,Bolean,Null,Underfined.引用数据类型：function,Object,Arrayajax

判断数据类型的方法

经常使用的数据类型判断方法有三种typeof,instanceof,Object.prototype.toString.call()下面介绍一下这几种方法。数组

typeof

console.log(typeof 2);              //number
    console.log(typeof true)            //bolean;
    console.log(typeof 'str')           //string;
    console.log(typeof underfined)      //underfined;
    console.log(typeof [])              //object;
    console.log(typeof {})              //object;
    console.log(typeof function(){})    //function;
    console.log(typeof null)            //object
复制代码

优势：可以快速区分基本数据类型 缺点：不能区分object array null 都返回object;bash

insranceof

有点：可以区分Array、Object和function,适合于判断自定义的实例对象 缺点：Number、Bolean、String基本数据类型不能判断markdown

console.log(2 instanceof Number);  //false;
console.log(true instanceof Bolean); //false;
console.log('str' instanceof String) //false;
console.log([] instanceof Array);  //true;
console.log(function(){} instanceof Function) //true;
console.log({} instanceof Object);  //true

复制代码

Object.prototype.toString.call()

优势：精准判断数据类型
缺点：写法繁琐不容易记，封装后使用闭包

var toString = Object.prototype.toString;
console.log(toString.call(2))   //[Object Number];
console.log(toString.call(true))  //[Object Boolean];
console.log(toString.call('str')) //[Object String];
console.log(toString.call([]))    //[Object Array];
console.log(toString.call(function(){})) //[Object Function];
console.log(toString.call({}))  //[Object Object];
console.log(toString.call(underfined));   //[Object underfined];
console.log(toString.call(null)); //[Object Null]
复制代码

1.2 var,let,const的区别

let 为ES6新增的变量生命的命令，它相似于var,可是有如下不一样：app

  • var声明的变量，其做用域为该语句所在的函数内，且存在变量提高现象。
  • let声明的变量，其做用域为该语句所在的代码块内，不存在变量提高。
  • const声明的变量不容许修改。

null和undefined区别

Undefined类型只有一个值，即underfined.当变量声明但未被初始化时，变量的默认值即为underfined.
函数

用法：this

  • 变量被声明了，但没有赋值时，就等于underfined。
  • 调用函数时，应该提供的参数没有提供，该参数等于underfined。
  • 对象没有赋值的属性，该属性的值为underfined。
  • 函数没有返回值时，默认返回underfined.

Null类型也只有一个值，即null。null用来表示还没有存在的对象，经常使用来表示函数企图返回一个不存在的对象
用法：spa

  • 做为函数的参数，表示该函数的参数不是对象。
  • 表示原型链的终点。

1.3 定义函数的方法

1.函数声明

//ES5
function fntName(){};
function (){};//匿名函数
//es6
()=>{}

复制代码

2.函数表达式

//ES5 
var fntName = function () {};
//ES6
let fntName =()=>{};
复制代码

3.构造函数

const fntName = new Function()
复制代码

1.4 原生ajax

//如何建立ajax
XMLHttpRequest对象的工做流程
<!---兼容性写法----!>
var xmlHttp = null;
if(window.XMLHttpRequest){
    //IE7+,FireFox,Chrome,Safari,Opera
    xmlHttp = new XMLHttpRequest();
}else{
    //IE5 IE6
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
兼容性处理
事件的触发条件
复制代码

1.5 js做用域的理解

其实js做用域的内容仍是蛮多的，要单独写一篇长文才能讲的清楚。因此这边就简单的总结一下。

js中做用域通常分为全局做用域和局部做用域。一个变量是属于全局做用域仍是属于局部做用域主要看的是变量生命的位置。如果在函数内部生命的那么这个变量就是该函数的局部变量。如果在外部生成的那么这个变量就是全局变量。

全局做用域和局部做用域的区别

全局做用域：在任何地方都能访问 函数外定义的变量拥有全局做用域 不使用var定义的变量拥有全局做用域 全部window对象上的属性拥有全局做用域 没有声明在任何函数内部的函数拥有全局做用域

局部做用域：只能在函数内部访问 使用var在函数内部定义的变量,和使用function在函数内部声明的函数,拥有局部做用域

1.6 闭包的简单理解

简单来讲闭包就是在函数里面声明函数，本质上说就是在函数内部和函数外部搭建起一座桥梁，
子函数能够访问父函数中全部的局部变量，可是父函数不能访问子函数的局部变量另外一个做用
就是保护变量不受外界环境污染，使其一直存在内存中。可是闭包对内存消耗比较大
不建议常用。
复制代码

1.6 数组去重的几种方法

####（一）利用ES6中的Set 方法去重####

//Set 是Es6新增的一个对象，容许存储任何类型的（原始值或引用值）的惟一值。
    let arr = [1,0,0,2,8,8,7];
    function removal (arr){
        return [...new Set(arr)]    
    };
    console.log(removal(arr));
复制代码

(二) 使用for循环加indexOf判断去重

let arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
function removal (arr){
    let newArr=[];
    for(var i=0;i<arr.length;i++){
        if(newArr.indexOf(arr[i])===-1){
            newArr.push(arr[i])
        };
    };
    return newArr;
};
console.log(removal(arr));//[1, 5, 6, 0, 7, 3, 9]
复制代码

(三) 双重for循环去重####

let arr=[1,8,4,23,4,23,432,4,443,2,1,8];
function removal(arr){
    for(var i=0;i<arr.length;i++){
        
        for(var j=i+1,len=arr.length;j<len;j++){
           if(arr[i]===arr[j]){
               arr.splice(j,1);
               j--;
               len--;
           } 
        }
    };
    return arr;
};
console.log(removal(arr));//[1, 8, 4, 23, 432, 443, 2]
复制代码

1.7 call，apply和bind的区别

在JS中这三者都是为了改变函数中this的指向，下面我将介绍一下这三者的共同点和区别

（一）类似处

  • 都是用来改变函数的this对象的指向
  • 第一个参数都是this要指向的对象
  • 均可以利用后续参数传参

（二） 区别

例：

var xiaoW={
    name:"小王"，
    gender:"男"，
    age:"24",
    fnc:function(){
        console.log(`${this.name}${this.gender}今年${this.age}岁`)
    }
}；
var xiaoH={
    name:"小红",
    gender:'男',
    age:"24",
};
xiaoW.fnc();//小王男今年24
复制代码

如上代码，xiaoW.fnc 执行时打出的时'小王男今年24岁'，但咱们小执行xiaoW.fnc这个函数但输出的确实xiaoH这个资料那该怎么作呢？

//对于call:
xiaoW.fnc.call(xiaoH);
//
//对于apply:
xiaoW.fnc.apply(xiaoH);
//
//对于bind来讲
xiaoW.fnc.bind(xiaoH)();
//
复制代码

bind和apply call 的区别

如上所示，在代码书写中很明显的bind的书写形式和apply 和 call 是不同的。咱们写xiaoW.fnc.bind(xiaoH)是不会有任何结果的。由于call 和 apply 是直接对函数进行调用，而bind方法返回的仍然是一个函数，所以后面还要()来进行调用。

call 和 apply 的区别

列

var xiaoW={
    name:"小王"，
    gender:"男"，
    age:"24",
    fnc:function(school,grade){
        console.log(`${this.name}${this.gender}今年${this.age}岁在${school}上${grade}`)
    }
}；
var xiaoH={
    name:"小红",
    gender:'男',
    age:"24",
};
复制代码
//如上能够看到say方法多了两个参数，咱们能够经过call/apply的参数进行传参
//对于call:
xiaoW.fnv.call(xiaoH,"小学"，"六年级")
//对于apply
xiaoW.fnv.apply(xiaoH,["小学"，"六年级"]);
//call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是//二者最大的区别。

//那么bind如何传参呢
//bind有两种传参方法
xiaoW.fnv.bind(xiaoH,"小学"，"六年级")
xiaoW.fnv.bind(xiaoH)("小学"，"六年级")
复制代码

for...in 和 for...of

for...in for...of会遍历可遍历对象的全部属性 for...in

let arr = [1,2,3,4,5];
arr.name='name';
for(key in arr){
    console.log(key)//0,1,2,3,4,name;
    console.log(arr[key]//1,2,3,4,5,name;
};

复制代码

从上面能够看出来for...in中遍历的是数组的索引（键名），咱们在arr数组中给它加了一个name的属性也会被遍历出来。因此for...通常用于遍历对象，值是它的键值。 for...of

let arr=[1,2,3,4,5];
arr.name=name;
for(let key of arr){
    console.log(key);//1,2,3,4,5
}
复制代码

从上面能够看出for...of输出的是数组里面的每一个值，咱们新增的键值对并无被输出。

总结

  • for..in循环出的是key值，for..of循环出的是value值。
  • 推荐在循环对象属性的时候，使用for...in,在遍历数组的时候使用for...of
  • for..of不能循环普通对象，须要经过和object.keys()搭配使用。
联系我们 沪ICP备13005482号-10