资讯专栏INFORMATION COLUMN

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

aristark / 2426人阅读

摘要:核心知识点梳理数据篇看了一些资料,结合高程和对核心知识点进行了梳理。所以,一共有种声明变量的方法。凡是在声明之前就使用这些变量,就会报错。还是那句话,建议大家掌握核心知识点,细枝末节的东西就随意啦。

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

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

7种数据类型

基础数据类型:存储到栈内存中,操作的是值

null:空指针,所以typeof null ==>Object

undefined:定义了未赋值

Number:数字

String:字符串

Symbol:一种实例是唯一且不可改变的数据类型。

Boolean:布尔值

引用数据类型:储存在堆内存种,操作的是空间地址

Object:具体可以是Array,Function,RegExp,Date

判断数据类型(方法,优劣)

typeof:只能判断基础类型中的非Null,不能判断引用数据类型(因为全部为object)它是操作符

</>复制代码

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

instanceof:用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置,可以用它来判断Array但是不够优雅且有一定风险

</>复制代码

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

</>复制代码

  1. instanceof操作符的问题在于,它只有一个全局执行环境,如果网页有多个框架,那实际上就存在两个以上的不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。如果从一个框架想另外一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具备各自不同的构造函数 ----高程page88 (笔者白话问翻译一下:风险来至原型链的重写

constructor:原理也是基于原型链,风险同样来之于原型链的重写,比如当你在多个frame中来回穿梭的时候,这两种方法就亚历山大了。由于每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的,因此导致上述检测代码失效!

isNaN:这个方法会先调用Number,所以不是很好用

</>复制代码

  1. console.log(isNaN("1px")); //先调用Number("1px"),返回NaN,然后再调用isNaN(NaN)返回true
  2. //燃鹅 "1px"客观并不是NaN

</>复制代码

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

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

Object.prototype.toString.call()

</>复制代码

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

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

如果需要多带带判断Array

</>复制代码

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

如果需要多带带判断null

</>复制代码

  1. let a = null
  2. Object.is(a , null) //==>true
6种声明变量的方法

</>复制代码

  1. ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。 --es6
var:变量提升,没有块级作用域

说到var肯定要提变量提升:当前作用域,js(函数)执行前,浏览器会把带var或者function进行提前声明和定义

变量只声明,函数是声明+赋值,自执行函数定义和执行一起完成了

不受逻辑判断条件影响

return 下面的也提升,但是return 里面的不提升

重复的声明可以,重新赋值即可,但是变量和方法名字不能冲突

const: 常量,地址不变,但是属性可以变 let: 块作用域,暂时性死区(TDZ),不进行变量提升,不允许重复声明

</>复制代码

  1. //只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。所以下面代码不报错,外层作用域和里层作用域都有一个tmp
  2. let tmp = 123;
  3. if (true) {
  4. let tmp =123;
  5. }
  6. //ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
  7. let tmp = 123;
  8. if (true) {
  9. tmp = "abc"; // ReferenceError
  10. let tmp;
  11. }
import:es6模块化解决方案 class:es6继承解决方案 类型转化

这一块内容太多,太杂了,其实我不怎么想写,因为很少有人会这么写代码。但是这块太重要了,面试必考。建议大家掌握这块的核心内容以及原则,不要关注奇淫巧技。

1.自动装包

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

</>复制代码

  1. let s1 = "123"
  2. let s2 = s1.slice(2) // a是基本类型,它是没有slice方法的这里实际上后台完成了一个自动装包
  3. ---下面是实际发生的事---------
  4. let s1 = new string("123")
  5. let s2 = s1.slice(2)
  6. s1 = null //注意这里用完就销毁了
  7. //所以如果添加某个属性后面是调用不出来的
  8. let s1 = "123"
  9. s1.color = "red"
  10. console.log(s1.color) // ==> undefind
  11. //这里特别说一下 为什么123.toString会报错 //Uncaught SyntaxError: Invalid or unexpected token
  12. //这个是语法错误,因为编译的时候没有办法判断是小数点还是调用方法

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

2.强行转化为数字

Number :将其他数据类型的值强制转换成number类型;

</>复制代码

  1. console.log(Number({}));//NaN
  2. console.log(Number(null));// 0
  3. console.log(Number(undefined));// NaN
  4. console.log(Number([]));// 0
  5. console.log(Number(""));// 0
  6. console.log(Number(true));// 1
  7. console.log(Number(false));

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

</>复制代码

  1. console.log(parseInt("12px12"));// 12
  2. console.log(parseInt("12.666.777px12"));// 12
  3. console.log(parseInt("px12.666px12"));// NaN
  4. console.log(parseInt(""));// NaN
  5. console.log(parseInt(true));// NaN
  6. console.log(parseInt({}));// NaN
  7. console.log(parseInt([]));// NaN
  8. console.log(parseInt(null));// NaN
  9. console.log(parseInt(undefined));// NaN

toFixed : 保留小数点位数的方法,返回值是一个字符串

几个需要特别的用法

</>复制代码

  1. console.log(Number("1px")); //==> NAN
  2. console.log(parseInt("1px")); //==> 1
  3. console.log(parseInt("p1px")); //==> NaN
  4. //转化整数
  5. ~~1.2 //1
  6. ~~"1.2" //1
  7. ~~"1.2px" //0 先调用Number()转换成数字,再调用~~转换成整数
  8. //转换成小数
  9. 1*‘1.1//1.1
  10. 1*"1.1px" //NaN
3.-转化

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

</>复制代码

  1. console.log("6" - 2);//==> 4
  2. console.log("5px"-"4")//==> NaN (NaN-4还是NaN)
4.+转化

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

</>复制代码

  1. || undefined | null | boolean | number | string | object |
  2. =========================================================================
  3. undefined || number | number | number | number | string | string |
  4. null || number | number | number | number | string | string |
  5. boolean || number | number | number | number | string | string |
  6. number || number | number | number | number | string | string |
  7. string || string | string | string | string | string | string |
  8. object || string | string | string | string | string | string |

</>复制代码

  1. //字符串和任何类型相加都是调用String
  2. var a = typeof 10 + true + [] + null + undefined+{};
  3. console.log(a); //==>numbertruenullundefined[object Object],{}
  4. console.log("6px"+undefined); ==> 6pxundefined
  5. console.log(NaN+"undefined");==> NaNundefined
  6. //经典面试题
  7. [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源码里面都用法)都时候其他情况下都用===

</>复制代码

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

这里再补充一个,判断数字和字符串相等的以后用==也非常好用。比如后台返回的数据一会是1一会儿是‘1’你需要封装一个通用方法的时候,可以使用==来进行判断

总结

本期文章估计大家看的很烦,无奈,我写起来也非常枯燥。因为不仅得讲规则,还得写用例。还是那句话,建议大家掌握核心知识点,细枝末节的东西就随意啦。这一期文章还有许多东西可以展开来讲,篇幅有限,我将会在后面的文章中一一涉及。感谢大家的阅读,本人水平有限,如果有不对的地方请在评论区指出。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102207.html

相关文章

  • JS核心识点梳理——上下文、作用域、闭包、this(中)

    摘要:引言满满的干货,面试必系列,参考大量资料,并集合自己的理解以及相关的面试题,对核心知识点中的作用域闭包上下文进行了梳理。本篇重点介绍闭包和。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 满满的干货,面试必bei系列,参考大量资料,并集...

    rottengeek 评论0 收藏0
  • JS核心识点梳理——正则(上)

    摘要:正则引言正则是一个前端必须掌握的知识。这里上篇先介绍正则的规则,下篇结合一些具体题目,带大家重新学习巩固一下正则,争取面试给自己加分。 正则 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 正则是一个前端必须掌握的知识。但是由于用的少,忘了记,记了忘,导致面试经常坐蜡。这里上篇先介绍正则的规则,下篇结合一些...

    happyhuangjinjin 评论0 收藏0
  • JS核心识点梳理——正则(下)

    摘要:正则引言正则是一个前端必须掌握的知识。但是由于用的少,忘了记,记了忘,导致面试经常坐蜡。这里上篇先介绍正则的规则,下篇结合一些具体题目,带大家重新学习巩固一下正则,争取面试给自己加分。 正则 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 正则是一个前端必须掌握的知识。但是由于用的少,忘了记,记了忘,导致面...

    jemygraw 评论0 收藏0
  • JS核心识点梳理——上下文、作用域、闭包、this(上)

    摘要:引言满满的干货,面试必系列,参考大量资料,并集合自己的理解以及相关的面试题,对核心知识点中的作用域闭包上下文进行了梳理。如果在小区这个作用域找到了张老师,我就会在张老师的辅导下学钢琴我张老师房间钢琴构成了学琴的上下文环境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 满满的干货,面试必bei系列,参考大...

    Andrman 评论0 收藏0
  • JS核心识点梳理——原型、继承(上)

    摘要:同理,原型链也是实现继承的主要方式的只是语法糖。原型对象也可能拥有原型,并从中继承方法和属性,一层一层以此类推。利用构造函数小明张三张三小明缺点每次实例化都需要复制一遍函数到实例里面。寄生构造函数模式只有被类出来的才能用。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 最近又攀登了一下JS三座大山中的第二...

    villainhr 评论0 收藏0

发表评论

0条评论

aristark

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<