当前位置： 首页 > news >正文

JS高级学习笔记（1）- 基本数据类型 和 强制类型转换

news 来源：原创 2024/5/8 20:31:38

必读：Javascript对象Oject的强制类型转换

1.原始数据

基本数据类型是一种即非对象也无方法的数据。JS中有6中基本类型：string、number、boolean、undefined、symbol。

多数情况下，基本类型直接代表了最底层的语言实现。

基本类型的值都是不可变的。注意，基本类型本身和被赋值为基本类型的变量区别，变量可以被赋予一个新值，二原值不能像数组、对象以及函数那样被改变。

1.1示例1

// 使用字符串的方法不会改变一个字符串
let bar = 'abcd';
console.log(bar); // abcd
// 赋值行为可以给一个基本类型一个新值，而不是改变原来的值
let bar1 = bar.toUpperCase()
console.log(bar1); // ABCD
console.log(bar); // abcd

// 使用一个数组的方法可以改变数组
let foo = []
console.log(foo); // []
foo.push('plugh')
console.log(foo); // [ 'plugh' ]

1.2示例2

// 定义基本类型
let foo = 5;

// 定义一个方法
function addTwo(num) {
  // 本地num参数
  num += 2;
}

function addTwo_v2(foo) {
  // 本地foo参数
  foo += 2
}

// 调用第一个函数，并传入基本类型作为参数
addTwo(foo)
console.log(foo); // 5

// 调用第二个方法
addTwo_v2(foo)
console.log(foo); // 5

将基本数据作为方法的入参，并没有将这个原始数据作为入参，而是将这个原始数据复制了一份，创建一个本地副本作为每个方法的入参。

并且，这个复制的副本只存在于该函数的作用域中，我们能够通过指定在函数中的标识符访问到它（addTwo中的num，addTwo_v2中的foo）。

综上所述，函数中的任何操作都不会影响到最初的foo，我们操作的只不过是它的副本。

2.JavaScript 中的基本类型包装对象

除了 null 和 undefined之外，所有基本类型都有其对应的包装对象：

  • String 为字符串基本类型。

  • Number 为数值基本类型。

  • Boolean 为布尔基本类型。

  • Symbol 为字面量基本类型。

这个包裹对象的valueOf()方法返回基本类型值。

3.Object.prototype.valueOf()

valueOf() 方法返回指定对象的原始值。

3.1MDN对 valueOf() 的描述

JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法；当遇到要预期的原始值的对象时，JavaScript会自动调用它。

默认情况下，valueOf方法由Object后面的每个对象继承。 每个内置的核心对象都会覆盖此方法以返回适当的值。如果对象没有原始值，则valueOf将返回对象本身。

JavaScript的许多内置对象都重写了该函数，以实现更适合自身的功能需要。因此，不同类型对象的valueOf()方法的返回值和返回值类型均可能不同。

 

3.2 示例

// Array：返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array);   // true

// Date：当前时间距1970年1月1日午夜的毫秒数
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
console.log(date.valueOf());   // 1376838719230

// Number：返回数字值
var num =  15.26540;
console.log(num.valueOf());   // 15.2654

// 布尔：返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool);   // true

// new一个Boolean对象
var newBool = new Boolean(true);
// valueOf()返回的是true，两者的值相等
console.log(newBool.valueOf() == newBool);   // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
console.log(newBool.valueOf() === newBool);   // false

// Function：返回函数本身
function foo(){}
console.log( foo.valueOf() === foo );   // true
var foo2 =  new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() );
/*
ƒ anonymous(x,y
) {
return x + y;
}
*/

// Object：返回对象本身
var obj = {name: "张三", age: 18};
console.log( obj.valueOf() === obj );   // true

// String：返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str );   // true

// new一个字符串对象
var str2 = new String("http://www.xyz.com");
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
console.log( str2.valueOf() === str2 );   // false

 

4.toString()

4.1 Boolean.prototype.toString()

toString() 方法返回指定的布尔对象的字符串形式。

let flag = new Boolean(true);
console.log(flag.toString()) // true

let flag1 = new Boolean(1);
console.log(flag1.toString()) // true

4.2 Array.prototype.toString()

toString()返回一个字符串，表示指定的数组及其元素。

let array = ['abc', true, 12, undefined, 'ok']
console.log(array.toString()); // abc,true,12,,ok

4.3 Function.prototype.toString()

toString() 方法返回一个表示当前函数源代码的字符串。

function fun(num) {
  num += 5
}

console.log(fun.toString());
/**
 * function fun(num) {  num += 5 }
 */

4.4 Object.prototype.toString()

toString() 方法返回一个表示该对象的字符串。

let obj = { name: 'houfee'}
console.log(obj.toString()); // [object Object]

 

5. 强制类型转换

5.1 Number强制转换对象

let a={name:123};
console.log(Number(a)); // NaN
    /* 
     * JS对象强制类型转换
     * 主要调用 object.valueOf() 和 object.toString() 方法
     * 1.先调用 object 的 valueOf() 方法
     * 2.判断返回值 是否为 基础数据类型？
     * 3.是！则转换规则按照相应数据类型的规则对其进行转换
     * 4.不是！在返回值的基础上继续调用 toString() 方法
     * 5.判断调用 toString() 方法返回值是否为 基础数据类型
     * 6.是！则转换规则按照相应数据类型的规则对其进行转换
     * 7.不是！报错：
     * */

 现在我们用自定义方法覆盖toString()方法：

a.toString = function () {return {name: 'newName'}} // 让toString方法返回值为 复杂数据类型
a.toString() // 调用覆盖的方法
Number(a) // 报错

现在验证让toString方法返回值为 基础数据类型

a.toString = function () {return '321'} // 让toString方法返回值为 复杂数据类型
a.toString() // 调用覆盖的方法
Number(a) // 321

所以Number强制转换对象的过程即为如上7步

5.2 String()强制转换对象

let b = {name: 'houfee'}
console.log(String(b)); // [object Object]
let c = []
console.log(String(c)); // 空字符串
let d = {}
console.log(String(d)); // [object Object]

1.先调用对象的toString方法

2.判断该方法的返回值是否为基础数据类型（Number，String，Boolean，Undefined，Null）

3.若返回值为基础数据类型，则转换规则按照相应数据类型的转换规则对其进行转换

4.若返回值不为基础数据类型，则在该返回值的基础上继续调用valueOf方法

5.判断valueOf的返回值是否为基础数据类型

6.判断是否为基础数据类型，若是基础数据类型则进行操作3

7.若仍旧不为基础数据类型则报错

String与Number的区别则在于

  • Number是先调用valueOf再调用toString

  • 而String是先调用toString再调用valueOf

 

5.3 Boolean强制转换对象

转换为false的有undefined、null、''、0、NaN

 

6.面试题

    console.log({}); // {}
    console.log(Number({})); // NaN、
    console.log(String({})); // [object Object]
    console.log(Boolean({})); // true

    console.log([]); // []
    console.log(Number([])); // 0
    console.log(String([])); // 空字符串
    console.log(Boolean([])); // true

    console.log({} + {}) // [object Object][object Object]
    console.log({} + []) // [object Object]
    console.log([] + {}) // [object Object]
    console.log([] + []) // 空字符串

 

转载于:https://www.cnblogs.com/houfee/p/10393843.html

相关文章：

  • 记账程序及GitHub学习记录
  • 尾调用和尾递归
  • AccessTokenValidation3 源码分析 jwttoken验证流程图
  • luogu P3312 [SDOI2014]数表
  • Cron表达式以及定时任务配置
  • android热修复--Tinker
  • csv文件读写处理
  • 友链
  • HTML5 File API 全介绍
  • Grafana 利用Grafana Variables变量配置快速切换不同主机的图表数据展示
  • 在Windos上安装Nginx
  • [UE4]VR手柄按键参考
  • 2019 GDUT Rating Contest II : Problem G. Snow Boots
  • ORACLE查看数据库已安装补丁
  • VueJs之自动打开浏览器配置
  • 【挥舞JS】JS实现继承，封装一个extends方法
  • axios 和 cookie 的那些事
  • JS字符串转数字方法总结
  • Leetcode 27 Remove Element
  • PHP变量
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • React-redux的原理以及使用
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 阿里云Kubernetes容器服务上体验Knative
  • 电商搜索引擎的架构设计和性能优化
  • 回流、重绘及其优化
  • 基于Javascript， Springboot的管理系统报表查询页面代码设计
  • 力扣(LeetCode)22
  • 前端学习笔记之观察者模式
  • 设计模式 开闭原则
  • 实现简单的正则表达式引擎
  • 使用 Node.js 的 nodemailer 模块发送邮件（支持 QQ、163 等、支持附件）
  • 算法-图和图算法
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 微信开放平台全网发布【失败】的几点排查方法
  • 一、python与pycharm的安装
  • 你对linux中grep命令知道多少？
  • 回归生活：清理微信公众号
  • ​【原创】基于SSM的酒店预约管理系统（酒店管理系统毕业设计）
  • #图像处理
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • （20050108）又读《平凡的世界》
  • （26）4.7 字符函数和字符串函数
  • （4）STL算法之比较
  • (done) NLP “bag-of-words“ 方法 （带有二元分类和多元分类两个例子）词袋模型、BoW
  • （Redis使用系列） Springboot 整合Redisson 实现分布式锁 七
  • (差分)胡桃爱原石
  • （附源码）springboot电竞专题网站 毕业设计 641314
  • （机器学习-深度学习快速入门）第一章第一节：Python环境和数据分析
  • （算法二）滑动窗口
  • （未解决）macOS matplotlib 中文是方框
  • （心得）获取一个数二进制序列中所有的偶数位和奇数位， 分别输出二进制序列。
  • (中等) HDU 4370 0 or 1，建模+Dijkstra。
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)从零实现3D图像引擎：(8)参数化直线与3D平面函数库