JS核心知识点梳理——变量篇

JS核心知识点梳理——数据篇

看了一些资料，结合ES六、高程和MDN,对JS核心知识点进行了梳理。因为篇幅有限，这里只对我认为重要的知识作了介绍。一些常识性的东西能够参考高程，另一些核心知识点的扩展能够参考我其余的文章。本文适合做JS知识点复习/突击用，亦可做为前端面试指导。

7种数据类型

• 基础数据类型：存储到栈内存中，操做的是值

  • null：空指针，因此typeof null ==>Object
  • undefined：定义了未赋值
  • Number：数字
  • String：字符串
  • Symbol：一种实例是惟一且不可改变的数据类型。
  • Boolean：布尔值

• 引用数据类型：储存在堆内存种，操做的是空间地址

  • Object：具体能够是Array，Function，RegExp，Date

判断数据类型（方法，优劣）

• typeof：只能判断基础类型中的非Null,不能判断引用数据类型（由于所有为object）它是操做符

typeof ''  // ==> string
typeof 1  //==> number
typeof true  //==>boolean
typeof undefined  //==>undefined
let b = Symbol() ; typeof b //==>symbol
-----------------下面的判断不了实际类型了-----------------------
typeof function fn(){} //==>function
typeof null //==>object
typeof [1,2,3] //==>object
typeof {} //==>object

• instanceof：用于测试构造函数的prototype属性是否出如今对象的原型链中的任何位置,能够用它来判断Array可是不够优雅且有必定风险

let arr = [1,2,3]
arr instanceof Array //==>true
arr instanceof Object //==>true

instanceof操做符的问题在于，它只有一个全局执行环境，若是网页有多个框架，那实际上就存在两个以上的不一样的全局执行环境，从而存在两个以上不一样版本的Array构造函数。若是从一个框架想另一个框架传入一个数组，那么传入的数组与在第二个框架中原生建立的数组分别具有各自不一样的构造函数 ----高程page88 （笔者白话问翻译一下： 风险来至原型链的重写）

• constructor：原理也是基于原型链，风险一样来之于原型链的重写，好比当你在多个frame中来回穿梭的时候，这两种方法就亚历山大了。因为每一个iframe都有一套本身的执行环境，跨frame实例化的对象彼此是不共享原型链的，所以致使上述检测代码失效!
• isNaN：这个方法会先调用Number，因此不是很好用

console.log(isNaN("1px"));   //先调用Number('1px')，返回NaN，而后再调用isNaN(NaN)返回true
   //燃鹅 '1px'客观并非NaN

[1,2,3,1].constructor === Array; // true

-----------------------------------------------比较好的方法--------------------------------

• Object.prototype.toString.call()

Object.prototype.toString.call(null) // ==> [object Null]
    Object.prototype.toString.call([]) // ==> [object Array]

-------------------------------------------------优雅的方法---------------------

• 若是须要单独判断Array

Array.isArray([]) //==>true

• 若是须要单独判断null

let a = null
Object.is(a , null) //==>true

6种声明变量的方法

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。因此，ES6 一共有 6 种声明变量的方法。 --es6

var：变量提高，没有块级做用域

说到var确定要提变量提高：当前做用域，js（函数）执行前，浏览器会把带var或者function进行提早声明和定义

1. 变量只声明，函数是声明+赋值，自执行函数定义和执行一块儿完成了
2. 不受逻辑判断条件影响
3. return 下面的也提高，可是return 里面的不提高
4. 重复的声明能够，从新赋值便可，可是变量和方法名字不能冲突

const: 常量，地址不变，可是属性能够变

let: 块做用域，暂时性死区(TDZ)，不进行变量提高，不容许重复声明

//只要块级做用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，再也不受外部的影响。因此下面代码不报错，外层做用域和里层做用域都有一个tmp
let tmp = 123;
    if (true) {
      let tmp =123;    
    }
//ES6 明确规定，若是区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就造成了封闭做用域。凡是在声明以前就使用这些变量，就会报错。
    let tmp = 123;
    if (true) {
      tmp = 'abc'; // ReferenceError
      let tmp;    
    }

import:es6模块化解决方案

class:es6继承解决方案

类型转化

这一块内容太多，太杂了，其实我不怎么想写，由于不多有人会这么写代码。可是这块过重要了，面试必考。建议你们掌握这块的核心内容以及原则，不要关注奇淫巧技。

1.自动装包

三种包装类型：Number,Boolean,String

let s1 = '123'
let s2 = s1.slice(2)         // a是基本类型，它是没有slice方法的这里实际上后台完成了一个自动装包
---下面是实际发生的事---------
let s1 = new string('123')
let s2 = s1.slice(2)     
s1 = null      //注意这里用完就销毁了

//因此若是添加某个属性后面是调用不出来的
let s1 = '123'
s1.color = 'red'
console.log(s1.color) // ==> undefind

//这里特别说一下 为何123.toString会报错  //Uncaught SyntaxError: Invalid or unexpected token
//这个是语法错误，由于编译的时候没有办法判断是小数点仍是调用方法

这些类型（构造函数）基本都重写了它们的tostring方法

2.强行转化为数字

• Number :将其余数据类型的值强制转换成number类型；

console.log(Number({}));//NaN
    console.log(Number(null));// 0
    console.log(Number(undefined));// NaN
    console.log(Number([]));// 0
    console.log(Number(""));// 0
    console.log(Number(true));// 1
    console.log(Number(false));

• parseInt :常常用于字符串提取数字的方法； 把字符串中从左到右依次识别，直到遇到一个非有效数字，中止，把找到的数字返回；

console.log(parseInt("12px12"));// 12
  console.log(parseInt("12.666.777px12"));// 12
  console.log(parseInt("px12.666px12"));// NaN
  console.log(parseInt(""));// NaN
  console.log(parseInt(true));// NaN
  console.log(parseInt({}));// NaN
  console.log(parseInt([]));// NaN
  console.log(parseInt(null));// NaN
  console.log(parseInt(undefined));// NaN

• toFixed : 保留小数点位数的方法，返回值是一个字符串；
• 几个须要特别的用法

console.log(Number("1px"));   //==> NAN
 console.log(parseInt("1px"));   //==> 1
 console.log(parseInt("p1px"));   //==> NaN
 //转化整数
  ~~1.2  //1
  ~~'1.2' //1
  ~~'1.2px' //0 先调用Number()转换成数字，再调用~~转换成整数
 //转换成小数
  1*‘1.1’  //1.1
  1*'1.1px' //NaN

3.-转化

会先把字符串转换成数字(Number)，而后再进行计算，注意NaN,undifined参与的任何计算都是NaN

console.log("6" - 2);//==> 4
  console.log("5px"-"4")//==> NaN (NaN-4仍是NaN)

4.+转化

具体调用string仍是number请看下表

|| undefined | null   | boolean | number | string | object |
=========================================================================
 undefined  || number    | number | number  | number | string | string | 
 null       || number    | number | number  | number | string | string | 
 boolean    || number    | number | number  | number | string | string | 
 number     || number    | number | number  | number | string | string | 
 string     || string    | string | string  | string | string | string | 
 object     || string    | string | string  | string | string | string |

//字符串和任何类型相加都是调用String
    var  a = typeof 10 + true + [] + null + undefined+{};
    console.log(a); //==>numbertruenullundefined[object Object]，{}
    console.log("6px"+undefined); ==> 6pxundefined
    console.log(NaN+"undefined");==> NaNundefined
    //经典面试题
    [1,2]+[2,1]  //==>都调用toString '1,2'+'2,1'===>'1,22,1'

5.布尔值Boolean

其余数据类型转布尔类型是false有且只有五个值： 0 "" NaN null undefined
因此boolean({}) 或者boolean([]) 都是真

6.==和===

===是全等，==是类型转化后再判断，规则比较复杂。这里我认为除了准备面试须要看看，平时基本不会用，因此这个知识性价比很是低，学了用不到也会忘，你们本身把握，详细规则能够搜我其余文章
平时除了判断a是不是undefined或者是null(jq源码里面都用法)都时候其余状况下都用===

console.log(null==undefined) // true
console.log(undefined==undefined) // true

这里再补充一个，判断数字和字符串相等的之后用==也很是好用。好比后台返回的数据一会是1一下子是‘1’你须要封装一个通用方法的时候，可使用==来进行判断

总结

本期文章估计你们看的很烦，无奈，我写起来也很是枯燥。由于不只得讲规则，还得写用例。仍是那句话，建议你们掌握核心知识点，细枝末节的东西就随意啦。这一期文章还有许多东西能够展开来说，篇幅有限，我将会在后面的文章中一一涉及。感谢你们的阅读，本人水平有限，若是有不对的地方请在评论区指出。