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

2019年8月31日 180次阅读 来源: Runningfyy

JS中心学问点梳理——数据篇

《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举行提早声明和定义

  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’你须要封装一个通用要领的时刻，能够运用==来举行推断

总结

本期文章预计人人看的很烦，无法，我写起来也异常死板。由于不仅得讲划定规矩，还得写用例。照样那句话，发起人人控制中心学问点，细枝末节的东西就随便啦。这一期文章另有很多东西能够睁开来说，篇幅有限，我将会在背面的文章中逐一触及。谢谢人人的浏览，本人程度有限，假如有不对的处所请在批评区指出。

    原文作者：Runningfyy
    原文地址: https://segmentfault.com/a/1190000018328445
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞