Some details of JavaScript data types

Pink 2020-11-07 20:55:53
details javascript data types


writing / Jing Chaoxia
Source company number / Zhaoxia's light and shadow notes
ID / zhaoxiajingjing
chart / Draw by yourself
**** Point a praise , Let me know you've been here ~****

0 / JS Some details of the data type in

(1)JS Data types in
Basic data type

1、 string , You can use double quotes 、 Single quotation marks 、 The quotation marks

2、 number , such as : Value has 123/1.2/NaN/Infinity/-Infinity...

3、 boolean, The value is true/false

4、 null, The value is null

5、 undefined, The value is undefined

6、 bigint

7、 symbol, Used to create unique values

Reference data type

1、 object for example :

{} Common object

[] Array objects

③ The date is right for

④ Regular , such as :/^\\d+$/

⑤ ......

2、 function

① Ordinary function

② Constructors

③ Arrow function

④ Generator function

⑤……

(2)number Some of the details of
number Values of type are :

1、 Positive numbers 、 negative 、 zero 、 decimal ......

2、NaN not a number Not a significant number , But it's number Type of

xxx, You're not alone . Not alone , It's all possible

NaN and NaN It's not equal in itself , It's not equal to any other value

isNaN(vlaue) Check the current value Is not a valid number , Not a valid number true; conversely , It's a valid number false

Object.is(NaN, NaN) The result is true, It has a special treatment inside

3、Infinity infinity -Infinity Infinitesimal

console.log(typeof NaN); //=> 'number'
console.log(typeof Infinity); //=> 'number'
console.log(NaN == NaN); //=> false
console.log(NaN === NaN); //=> false
console.log(Object.is(NaN, NaN)); //=> true

△ NaN

API Object.is

Convert other data type values to number type :

1、 Explicit conversion :Number(vlaue) perhaps parseInt(value)/parseFloat(value) The rules they deal with at the bottom are different

2、 Implicit conversion ( Logic uses Number(value) Of )

① Mathematical operations

② be based on == When comparing

isNaN(value)

④ ....

(3) Some details of the string

string character string : Single quotation marks 、 Double quotes 、 The quotation marks , It's all strings

Other values are converted to strings :

1、 Explicit conversion :String(value) perhaps (vlaue).toString() It's about data type detection , Later on

2、 Implicit conversion : The plus sign is in addition to mathematical operations , It also produces string concatenation

+ Plus sign is slash youth
let n = '10',
m = 10;
console.log(10 + n);
console.log(+n);
console.log(++n);
let obj = {};
console.log(10 + obj);
console.log(10 + new Number(10));
console.log(10 + {id:'zhaoxiajingjing'});

△ What's the result ?

+ As a slash youth , My job is mathematical operators , The slash also serves as the string concatenation work , When does it switch roles ?

+ Only when one side has content : such as +n, Convert a value to a number ;++n/n++ It also converts values to numbers , And then we can move on In front of / Post self increment Arithmetic

+ When there's content on both sides

1、"+" There's a string on one side , Will become String splicing

2、"+" One side is the object , It may also become string concatenation :

 official account : Zhaoxia's light and shadow notes

△ chart 1.1_"+" As a young man with a slash

among :①③ You get numbers 10, as a result of :{...} Not involved in the operation , The browser thinks it's a block of code , The calculation is +10

and :console.log({}+10) There is a bracket {}+10 Wrap it up. , It's going to think of it as a whole, and then it's going to do it

that , The underlying mechanism of objects in mathematical operations :

(1) Test the object's Symbol.toPrimitive 【primitive [ˈprɪmətɪv] n. The original 】 This property value , If so, the operation is based on this value , without , Take the next step

(2) Test the object's valueOf() This value 【 Original value / Base type value 】, If so, the operation is based on this value , If it's not the original value , Take the next step

(3) Get the object's toString() Turn it into a string => If it is " +" Handle , Then you see the string , To string concatenation

(4) If you end up with the number you want , Then convert the string into a number

let obj = {
[Symbol.toPrimitive]:function (){
return 10;
}
};
console.log(10 + obj); //=> 20

△ Objects get numbers

and , console.log(10 + new Number(10)) The result is numbers 20, Because new Number(10).valueOf() The raw value you get is a number 10

∴ The answer is :

let n = '10',
m = 10;
console.log(10 + n); //=> String splicing :'1010'
console.log(+n); //=> Convert a value to a number :10
console.log(++n); //=> Convert a value to a number , In front of the self increment :11
let obj = {};
console.log(10 + obj); //=> '10[object Object]'
console.log(10 + new Number(10)); //=> 20
console.log(10 + {id:'zhaoxiajingjing'}); //=> '10[object Object]'

△ + It's a slash youth

that , Excuse me, :i=i+1 i+=1; ++i/i++ Are these three the same ?

among :i=i+1 and i+=1 It's the same ;++i/i++ Most of the time it's the same as before .

If i The value of is a string :

i=i+1 i+=1 It will be processed as string concatenation

++i/i++ First turn the value into a number , And then we're going to go ahead / Post accumulation

(4)symbol The only value

API:https://developer.mozilla.org...

Symbol(): Create unique values

Symbol() Function will return symbol Type value

new Symbol() Report errors :Uncaught TypeError: Symbol is not a constructor

ID:zhaoxiajingjing
△ chart 1.2_symbol type

Symbol.toPrimitive

API:Symbol.toPrimitive

Symbol.toPrimitive It's a built-in Symbol value , It exists as a function value property of an object , When an object is converted to the corresponding original value , Will call the secondary function

let obj = {
[Symbol.toPrimitive]:function (hint){
console.log(hint); // hint Value :"number/string/default"
return 10;
}
};
console.log(10 + obj); //=> 20 hint Output 'default'
Number(obj); //=> hint Output 'number' obj Original value 10
String(obj); //=> hint Output 'string' obj Original value '10'

△ Symbol.toPrimitive

(5)BigInt Large number

API:BigInt

 official account : Zhaoxia's light and shadow notes
△ chart 1.3_bigint

2 / Stack memory Stack & Heap memory Heap

(1) The question is very simple.
var a = 12;
var b = a;
b = 13;
console.log(a);
-----------------
var a = {n: 12};
var b = a;
b['n'] = 13;
console.log(a.n);
-----------------
var a = {n: 12};
var b = a;
b = {n: 13};
console.log(a.n);

△ It's easy to do the problem , The key is to understand the mechanism

(2) The first question is

We build a new one index.html file , Introduce... Into it 1.js file , Then open the browser to access index.html When you file , The browser will render JS

that JS An executable environment :

① browser : Browser kernel =>JS Rendering engine

② Mobile Hybrid blend APP => webview be based on webkit kernel

③ Node

④ ……

The browser will open up a block of memory to execute JS Code => Stack memory , Execution environment stack ECStack(Execution Context Stack)

There will be an area for global code execution : Global execution context ,EC(G) (Execution Context Global)

The purpose of forming context : Distinguish code execution in different regions

such as : Global execution context 、 Function execution context ……

The execution context will enter the execution environment stack and run , When the browser is closed, the global execution context will be destroyed

ID:zhaoxiajingjing
△ chart 1.4_ A sketch of the first question

var a = 12;

First step : Create values

① The base values are stored directly in the stack memory

② A reference value is a separate new block of memory to store

The second step : Declare variables declare

The third step : Variables are associated with values , Definition defined

var c; Variable declaration only declare, There is no definition of undefined,console.log(c);//=>undefined

(3) The second question is

 official account : Zhaoxia's light and shadow notes

△ chart 1.5_ The second one is a sketch

Create values

1、 The basic data types are stored directly in the stack

2、 Reference data type :

(1) Open up a separate piece of memory heap Heap memory

(2) Every heap memory has one 16 Base address JS Cannot get this address in ,16 Base with 0x start

(3) Store key value pairs in the heap separately

(4) hold 16 The base address is stored in the stack : To facilitate the association of later variables

Reference data type : Variables operate on the right Heap memory address References to

b['n']=13;

① b Based on address 0x000001 Find heap memory

② Name the attribute in heap memory as n The attribute value of 13

(4) Third question

ID:zhaoxiajingjing

△ chart 1.6_ The third one is a sketch

(5) Stack memory function

Stack memory or Heap memory , It's all the memory that the browser allocates from the computer , The more you open up , The slower the performance of the computer => performance optimization : Memory optimization

Stack memory function : Code execution and storage of basic type values

Heap memory functions : Store reference data types

3 / Homework

var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b);

△ The first question is

In general :a=b=xxx The order of operations is :

b=xxx

a=xxx

however , When a.x=b=xxx when ,a.x Medium " spot " It's member visits , Its operators have a high priority :

a.x = xxx

b = xxx

var x = [12, 23];
function fn(y) {
y[0] = 100;
y = [100];
y[1] = 200;
console.log(y);
}
fn(x);
console.log(x);

△ The second question is

- end -

ID:zhaoxiajingjing

版权声明
本文为[Pink]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple