视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript基础数据的梳理
2020-11-27 19:27:19 责编:小采
文档


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

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

    下载本文
    显示全文
    专题