首页 前端开发 Web前端入门第 57 问:JavaScript 数据类型与类型转换

Web前端入门第 57 问:JavaScript 数据类型与类型转换

在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。

如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变化。

在 JS 中,数据类型可以分为 原始类型 和 对象类型。

原始类型
直接存储值,不可变(值的地址不可变),共 7 种:

1、number 数值类型,包括整数、浮点数、Infinity、NaN。

const num1 = 123;
const num2 = 123.456;
const num3 = Infinity;
const num4 = NaN;
const num5 = new Number(456); // 使用构造函数声明,获得一个 Number 对象
console.log(typeof num5); // object
const num6 = Number(456); // 函数式声明 Number 类型
console.log(typeof num6); // number
2、string 字符串类型。单双引号声明的字符串不允许换行,可使用反引号申明多行字符串和模版字符串。

const str1 = 'hello'; // JS 中声明字符串允许单引号和双引号
const str1_1 = '\'hello\''; // 单引号中还有单引号需要使用反斜线转义字符串
const str2 = " world";
const str3 = str1 + str2; // 字符串拼接,获得 hello world
const str4 = `前端路引
${str1}${str2}`; // 多行模版字符串声明,允许有换行和变量存在, ${str1}${str2} 表示拼接两个变量
const str5 = new String('前端路引');
console.log(typeof str5); // object
const str6 = String('前端路引');
console.log(typeof str6); // number
3、boolean 布尔值(true/false)。

const bool1 = true;
const bool2 = false;
const bool3 = new Boolean(true);
console.log(typeof bool3); // object
const bool4 = Boolean(true);
console.log(typeof bool4); // boolean
4、null 表示空值。

const empty = null;
console.log(typeof empty); // object
5、undefined 未定义的值。

let u1; // 未声明变量,默认为 undefined
const u2 = undefined; // 显示使用 undefined 声明变量
6、symbol 唯一且不可变的值(符号)。就算使用 Symbol 声明的内容一样,但是两个变量其实是不相等的!!

const sym1 = Symbol('前端路引'); // 带描述的符号
const sym2 = Symbol('前端路引');
console.log(sym1 === sym2); // false
const sym3 = Symbol.for('前端路引'); // 全局符号
const sym4 = Symbol.for('前端路引');
console.log(sym3 === sym4); // true
console.log(Symbol.keyFor(sym3)); // 前端路引
const sym5 = Symbol(); // 不带描述的符号
7、bigint 大整数(以 n 结尾,如 123n),一般用于表示大于 2^53 - 1 的整数,ES2020+ 引入的新的数据类型,使用时需注意兼容性。

const big1 = 123n;
const big2 = BigInt(123);
console.log(big1 === big2); // true
console.log(typeof big1); // bigint
console.log(big1 === 123) // false
console.log(big1 === 123n); // true
对象类型
存储引用(内存地址),可变,包含所有非原始类型的值:

1、普通对象

const obj1 = {}; // 创建一个空对象
const obj2 = { name: '前端路引', age: 1 }; // 带属性的对象
const obj3 = new Object(); // 使用构造函数创建对象
const obj4 = Object({name: '前端路引'});
2、数组

const arr1 = []; // 空数组
const arr2 = [1, 2, 3]; // 带元素的数组
const arr3 = new Array();
const arr4 = Array(10).fill('前端路引'); // 创建一个长度为 10 的数组,并填充内容
3、函数

function func1() {
console.log('Function 1');
}
const func2 = function() {
console.log('Function 2');
};
const func3 = () => {
console.log('Function 3');
};
除了基础的三种基础对象类型外,JS 还内置了很多其他对象,比如 Date、RegExp、Error、Map、Set、WeakMap、WeakSet、Promise、Proxy、ArrayBuffer 等。

类型转换
JS 的类型转换分为隐式转换(明确表明由 A 转为 B)和显式转换(自动发生的类型转换)。

显式转换
通过对象方法强制转换:

1、转字符串

String(123); // "123"
[1,2].toString(); // "1,2"
2、转数字

Number("123"); // 123
Number("abc"); // NaN
parseInt("12px");// 12
3、转布尔

Boolean(""); // false
Boolean({}); // true
隐式转换
一半多发生于运算符,比如:

1、字符串拼接

console.log('1' + 1); // 11
console.log(1 + '1'); // 11
2、数学运算

console.log('1' - 1); // 0
console.log(1 - '1'); // 0
console.log('1' * 1); // 1
console.log(1 * '1'); // 1
console.log('1' / 1); // 1
console.log(1 / '1'); // 1
3、逻辑运算

if (0) { // 0 为 false,将不会执行代码块
console.log('0');
}
常见转换规则
原始值 转字符串 转数字 转布尔值
true "true" 1 true
false "false" 0 false
0 "0" 0 false
"" "" 0 false
"123" "123" 123 true
null "null" 0 false
undefined "undefined" NaN false
NaN "NaN" NaN false
[] "" 0 true
[5] "5" 5 true
{} "[object Object]" NaN true
常见陷阱与最佳实践
1、== vs ===

== 会进行类型转换: 0 == false 为 true。
=== 严格比较类型和值,推荐使用。
2、NaN的判断

NaN === NaN 为 false,使用 Number.isNaN(value) 或 Object.is(value, NaN)。
3、对象转换

对象转原始值时,优先调用 valueOf(),再 toString()。
{} + [] 可能被解析为代码块,导致结果意外。
4、parseInt基数

总是指定基数:parseInt("08", 10) 避免八进制误解。
写在最后
由于 JavaScript 属于弱类型语言,所以在编码时候特别需要注意类型转换问题。特常见问题:后端返回的数据类型是字符串 '1',在前端当做数字 1 使用,这时候分分钟踩雷。

站星网

在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起,那么数据..

为您推荐

Web前端入门第 79 问:JavaScript async & await 的异步任务进化之路

JS 中异步任务随处可见,比如:1、用户交互的点击、输入2、网络请求的 fetch、ajax、WebSocket3、资源中的图片、脚本加载4、定时任务 setTimeout、setInterval、动画5、Web Worker 中的后台任务以上这些地方都能见到..

Web前端入门第 78 问:JavaScript 比较少见的模版字符串用法

在 ES6 之前,JS 的多行字符串一直是开发难题,在处理多行字符串时,各种各样的方案都有~~在 JS 中,如果直接这样写多行字符串:const str1 = '第一行第二行';那浏览器转过来就打脸,分分钟报错:Uncaught S..

Web前端入门第 76 问:JavaScript 鼠标事件(mouse) enter/leave 和 over/out 区别

题外话在考察事件基础的时候,会经常被问及 click、mousedown、mouseup 它们三者执行的先后顺序是怎样的?如果平时没太注意,这细节可能就会忽略,毕竟很少会在同一个元素上面同时绑定这三个事件~~直接上示例:<div ..

Web前端入门第 67 问:JavaScript 中的面向对象编程

此 对象 非彼对象啊,不要理解错了哦~~面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如:Vue 中的 组合式API ..

JavaScript实现图片上传预览及获取图片尺寸和大小的完整指南

在现代Web开发中,提供图片上传的预览功能以及获取图片的尺寸和大小信息,已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能,帮助你在用户上传图片前进行有效的验证和优化。一、实现图..

Web前端入门第 60 问:JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。数组的定义JS 的数组花样很多..

Web前端入门第 55 问:JavaScript 严格模式与非严格模式区别

JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。启用严格模式1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声..

Web前端入门第 53 问:JavaScript 的各种调试方法

任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类!程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢?如何排..

Web前端入门第 54 问:JavaScript 3 种书写位置及 script 标签的正确存放位置

JS 的代码并没有强制规定放在 HTML 中的某个位置,如果您有使用过开发者工具查看过网页源码,那么您会看到很多 JS 代码都以 .js 文件的形式存放,并且放在了 HTML 文件最后,也就是 </body> 结束标签之前。但如果仔..

Web前端入门第 52 问:JavaScript 的应用领域

截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。那么咱们接下来看看 Java..

.NET C# 过滤从富文本编辑器html里的Javascript脚本

富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..

轻松学习 JavaScript函数中的默认参数

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..

JavaScript API 设计原则详解

前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..

JavaScript 中精度问题以及解决方案

JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在ES5 规范中指出了指数位E的取值范围是[-1074, 971]。精度问题汇总想用有限..

JavaScript 六种继承方式

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。原型链首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细..

JavaScript 事件委托详解

基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、focus……)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应..

JavaScript 中的遍历详解

编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象obj。测试对象// 为 Object 设置三个自定义属性(可枚举)Object.p..

web前端开发2018年12月找工作总结

2018年的冬天额外的冷,由内致外...作为一名刚刚踏入社会的实习生,可谓是狠狠的体验了一把什么叫社会(同时也感叹父母赚钱真的很不容易)前几天看见这样一句话"如果你不知道社会的辛苦,要么是有人替你扛了,要么是还没轮..

值得探索的 8 个机器学习 JavaScript 框架

JavaScript开发人员倾向于寻找可用于机器学习模型训练的JavaScript框架。下面是一些机器学习算法,基于这些算法可以使用本文中列出的不同JavaScript框架来模型训练:简单的线性回归多变量线性回归逻辑回归朴素贝叶斯..

JavaScript 保留两位小数

以下我们将为大家介绍 JavaScript 保留两位小数的实现方法:四舍五入以下处理结果会四舍五入:var num =2.446242342;num = num.toFixed(2); // 输出结果为 2.45不四舍五入以下处理结果不会四舍五入:第一种,先把小数边..

发表回复

返回顶部

微信分享

微信分享二维码

扫描二维码分享到微信或朋友圈

链接已复制