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

8次阅读

共计 4683 个字符,预计需要花费 12 分钟才能阅读完成。

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

看了一些资料,结合 ES6、高程和 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 进行提前声明和定义

变量只声明,函数是声明 + 赋值,自执行函数定义和执行一起完成了
不受逻辑判断条件影响
return 下面的也提升,但是 return 里面的不提升
重复的声明可以,重新赋值即可,但是变量和方法名字不能冲突

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
这些类型(构造函数)基本都重写了它们的 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
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

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

正文完
 0