JavaScript 数据类型的一些细节点

Pink 2020-11-07 20:55:53
javascript 细节 数据 数据类型 类型


文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画
****点个赞,让我知道你来过~****

0 / JS 中的数据类型的一些细节点

(1)JS中的数据类型
基本数据类型

1、 string ,可以用双引号、单引号、反引号

2、 number ,比如:值有123/1.2/NaN/Infinity/-Infinity...

3、 boolean,值为true/false

4、 null,值为null

5、 undefined,值为undefined

6、 bigint

7、 symbol,用于创建唯一值

引用数据类型

1、 object 例如:

{}普通对象

[]数组对象

③ 日期对

④ 正则,比如:/^\\d+$/

⑤ ......

2、 function

① 普通函数

② 构造函数

③ 箭头函数

④ 生成器函数

⑤……

(2)number 的一些细节
number类型的值有:

1、正数、负数、零、小数......

2、NaN not a number 不是一个有效数字,但是它是number类型的

xxx,你不是一个人。不是一个人,那是什么都有可能了

NaNNaN 本身不相等,和其他值也不相等

isNaN(vlaue)检测当前值是否不是一个有效数字,不是有效数字返回true;反之,是有效数字返回false

Object.is(NaN, NaN)结果是true,它的内部做了特殊处理

3、Infinity无限大 -Infinity无限小

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

把其它数据类型值转换为number类型:

1、显式转换:Number(vlaue) 或者 parseInt(value)/parseFloat(value) 他们底层处理的规则不一样

2、隐式转换(逻辑用的是Number(value)的)

① 数学运算

② 基于==比较的时候

isNaN(value)

④ ....

(3)字符串的一些细节点

string字符串:单引号、双引号、反引号,里面的内容都是字符串

其它值转换为字符串:

1、显式转换:String(value)或者(vlaue).toString()涉及到数据类型检测,后面再说

2、隐式转换:加号除了数学运算,还会产生字符串拼接

+ 加号是斜杠青年
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'});

△ 结果是多少?

+ 作为斜杠青年,本职工作是数学运算符,还斜杠担任了字符串拼接的工作,那它什么时候切换角色呢?

+只有一边有内容时:比如+n,把值转换为数字;++n/n++也会把值转换为数字,然后再进行前置/后置自增的运算

+两边都有内容时

1、"+" 有一边出现了字符串,就会变成字符串拼接

2、"+" 有一边是对象,则也可能会成为字符串拼接:

公众号:朝霞的光影笔记

△ 图1.1_"+"作为一枚斜杠青年

其中:①③得到的是数字10,原因是:{...} 没有参与运算,浏览器认为这是一个代码块,计算的是+10

而:console.log({}+10) 有一个括号把{}+10包起来了,它会认为这是一个整体再进行运算

那么,对象在做数学运算时的底层机制:

(1)检测对象的Symbol.toPrimitive 【primitive [ˈprɪmətɪv] n.原始的】 这个属性值,如果有则基于这个值进行运算,如果没有,走下一步

(2)检测对象的valueOf()这个值【原始值/基本类型值】,如果有则基于这个值进行运算,如果不是原始值,走下一步

(3)获取对象的toString()把其变为字符串 => 如果是" +"处理,则看到字符串了,变为字符串拼接

(4)如果最后就是想要得到的数字,则再把字符串转换为数字即可

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

△ 对象获得的是数字

而, console.log(10 + new Number(10))的结果就是数字20,是因为new Number(10).valueOf()获得的原始值就是数字10

∴ 答案是:

let n = '10',
m = 10;
console.log(10 + n); //=> 字符串拼接:'1010'
console.log(+n); //=> 把值转换为数字:10
console.log(++n); //=> 把值转换为数字,在前置自增: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]'

△ + 是一枚斜杠青年

那么,请问:i=i+1 i+=1; ++i/i++ 这三个一样吗?

其中:i=i+1i+=1是一样的;++i/i++大部分情况是与前面的一样的。

如果i的值是字符串则不一样了:

i=i+1 i+=1会处理为字符串拼接

++i/i++先把值转为数字,再进行前置/后置累加

(4)symbol 唯一值

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

Symbol():创建唯一值

Symbol() 函数会返回symbol类型的值

new Symbol()报错:Uncaught TypeError: Symbol is not a constructor

ID:zhaoxiajingjing
△ 图1.2_symbol类型

Symbol.toPrimitive

API:Symbol.toPrimitive

Symbol.toPrimitive是一个内置的Symbol值,它是作为对象的函数值属性存在的,当一个对象转换为对应的原始值时,会调用次函数

let obj = {
[Symbol.toPrimitive]:function (hint){
console.log(hint); // hint 取值:"number/string/default"
return 10;
}
};
console.log(10 + obj); //=> 20 hint输出 'default'
Number(obj); //=> hint输出 'number' obj的原始值 10
String(obj); //=> hint输出 'string' obj的原始值 '10'

△ Symbol.toPrimitive

(5)BigInt 大数

API:BigInt

公众号:朝霞的光影笔记
△ 图1.3_bigint

2 / 栈内存 Stack & 堆内存 Heap

(1)题很简单
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);

△ 做题很简单,关键要了解里面的机制

(2)第一题

我们新建一个index.html文件,在里面引入1.js文件,然后打开浏览器访问index.html文件时,浏览器会渲染JS

那么JS可以执行的环境:

① 浏览器:浏览器的内核=>JS渲染引擎

② 移动端Hybrid混合APP => webview 基于 webkit内核

③ Node

④ ……

浏览器会专门开辟一块内存来执行JS代码 => 栈内存,执行环境栈ECStack(Execution Context Stack)

会有一个供全局代码执行的区域:全局执行上下文EC(G) (Execution Context Global)

形成上下文的目的:区分不同区域的代码执行

比如:全局执行上下文、函数执行上下文……

执行上下文会进入到执行环境栈中运行,当浏览器关闭时全局执行上下文就会出栈销毁

ID:zhaoxiajingjing
△图1.4_第一题简图

var a = 12;

第一步:创建值

① 基本值直接存到栈内存中

② 引用值是单独开辟一块新的内存来存储

第二步:声明变量 declare

第三步:变量和值关联在一起,定义defined

var c; 只进行变量声明declare,并未定义undefined,console.log(c);//=>undefined

(3)第二题

公众号:朝霞的光影笔记

△图1.5_第二题简图

创建值

1、 基本数据类型直接存储到栈里面

2、 引用数据类型:

(1)单独开辟一块内存heap 堆内存

(2)每一个堆内存都有一个16进制地址 JS中不能获取到这个地址,16进制以0x开头

(3)把键值对分别存储到堆中

(4)把16进制地址放到栈中存储:方便后期变量的关联

引用数据类型:变量操作的都是对 堆内存地址 的引用

b['n']=13;

① b 基于地址0x000001找到堆内存

② 把堆内存中属性名为n的属性值改为13

(4)第三题

ID:zhaoxiajingjing

△图1.6_第三题简图

(5)堆栈内存作用

栈内存or堆内存,都是浏览器从计算机中分配出来的内存,开辟的越多,电脑性能越慢 => 性能优化:内存优化

栈内存作用:代码执行和存储基本类型值

堆内存作用:存储引用数据类型

3 / 作业

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

△ 第一题

一般情况下:a=b=xxx的运算顺序是:

b=xxx

a=xxx

但是,当a.x=b=xxx时,a.x中的""是成员访问,它的运算符优先级很高:

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

△ 第二题

- end -

ID:zhaoxiajingjing

版权声明
本文为[Pink]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037758720

  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