JavaScript 기본 데이터 정리

본 글은 자바스크립트의 기본 데이터를 정리한 내용으로, 참고할만한 가치가 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

ES6, Elevation, MDN을 결합한 몇 가지 정보를 읽은 후 JS의 핵심 지식 포인트를 정리했습니다. 지면의 제약으로 인해 여기서는 제가 중요하다고 생각하는 지식들만 소개하겠습니다. 상식적인 내용은 고도화를 참조하고, 핵심 지식 포인트를 확장하려면 내 다른 기사를 참조하면 됩니다. 이 기사는 JS 지식 포인트의 검토/서프라이즈 활용에 적합하며 프론트 엔드 인터뷰 가이드로도 사용할 수 있습니다.

7 데이터 유형

기본 데이터 유형: 스택 메모리에 저장되고 값에서 작동

null: null 포인터이므로 null 유형 ==> ;Object

undefine: 정의되지 않음이 정의됨

Number: 숫자

String: 문자열

기호: 인스턴스는 다음과 같습니다. 고유하고 변경할 수 없는 데이터 유형입니다.

Boolean: 부울 값

참조 데이터 유형: 힙 메모리에 저장되고 공간 주소에서 작동

Object: 구체적으로 배열, 함수일 수 있습니다. , RegExp, Date

Judge 데이터 유형(방법, 장단점)

typeof: 기본 유형에서 Null이 아닌 것만 판단할 수 있으며, 참조 데이터 유형은 판단할 수 없습니다. (모두 객체에 대한 것이기 때문에) 연산자입니다它是操作符

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

这些类型（构造函数）基本都重写了它们的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.+转化

            || 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'

instanceof 연산자의 문제점은 웹 페이지에 여러 프레임이 있는 경우 전역 실행 환경이 하나만 있다는 것입니다. 두 개 이상의 서로 다른 전역 실행 환경이 있으므로 Array 생성자에는 두 개 이상의 서로 다른 버전이 있습니다. 배열이 한 프레임에서 다른 프레임으로 전달되면 들어오는 배열과 두 번째 프레임에서 기본적으로 생성된 배열은 서로 다른 생성자를 갖습니다.---높이 페이지88(저자의 언어 번역: 위험은 프로토타입 체인)

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

var: 변수 승격, 블록 수준 범위 없음#🎜🎜##🎜🎜#var의 경우 변수 승격을 언급해야 합니다: 현재 범위, js(함수) 실행 전, 브라우저는 var나 함수를 미리 선언하고 정의합니다 #🎜🎜#

1. #🎜🎜#변수는 선언만 하고, 함수는 선언 + 할당, 자체 실행 함수 정의 및 함께 실행 완료#🎜🎜#
2. #🎜🎜#논리적 판단 조건에 영향을 받지 않음#🎜🎜#
3. #🎜🎜#return 다음도 개선되었지만, 그 대가로 개선되지 않았습니다 #🎜🎜#
4. #🎜🎜#중복 선언은 허용되고 재할당되지만 변수 및 메서드 이름은 충돌할 수 없습니다 #🎜🎜#

const : 상수, 주소는 변경되지 않지만 속성은 변경될 수 있습니다 #🎜🎜#

let: 블록 범위, 임시 데드 존(TDZ), 변수 승격 없음, 반복 선언은 허용되지 않습니다 #🎜🎜#rrreee

import: es6 모듈식 솔루션#🎜🎜#

class:es6 상속 솔루션#🎜🎜##🎜🎜#유형 변환#🎜🎜##🎜🎜#이 섹션에는 내용이 너무 많고 너무 복잡합니다. 사실 저는 그렇지 않습니다. 이런 코드를 작성할 수 있는 사람은 거의 없기 때문에 그것에 대해 많이 알지 못합니다. 그러나 이것은 매우 중요하므로 인터뷰에서 테스트해야 합니다. 모두가 이 영역의 핵심 내용과 원리를 숙지하고 이상한 속임수에 주의를 기울이지 않는 것이 좋습니다. #🎜🎜#

1. 자동 패키징 #🎜🎜##🎜🎜#세 가지 패키징 유형: Number, Boolean, String#🎜🎜#rrreee#🎜🎜#이러한 유형(생성자)은 기본적으로 tostring을 다시 작성했습니다. method#🎜🎜#

2. 강제로 숫자로 변환#🎜🎜#

• #🎜🎜#Number: 기타 데이터의 값 유형은 숫자 유형으로 강제 변환됩니다. #🎜🎜#

rrreee

• #🎜🎜#parseInt: 문자열에 자주 사용됩니다. 숫자 추출; 잘못된 숫자가 나타날 때까지 왼쪽에서 오른쪽으로 문자열을 인식하고 중지하고 찾은 숫자를 반환합니다. #🎜🎜#

rrreee

• #🎜🎜#toFixed: 소수점 이하 자릿수를 유지하는 방법 반환값은 문자열입니다 #🎜🎜#

rrreee

3 .-Conversion#🎜🎜##🎜🎜#은 먼저 문자열을 숫자(Number)로 변환한 다음 계산을 수행합니다. NaN과 관련된 계산에 주의하세요. 모두 NaN입니다. #🎜🎜#rrreee

4.+Conversion#🎜🎜##🎜🎜#문자열로 호출할지, 전화번호로 호출할지 아래 표를 참고해주세요#🎜🎜#

            || 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

위 내용은 JavaScript 기본 데이터 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!