JavaScript入门第七章(数据类型转换 )

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: JavaScript入门第七章(数据类型转换 )

1.显式数据类型转换


显式转换:程序员主动调用语法去转换数据类型,语义更加明确


  • 注意:数据类型的转变并不会改变原来变量的值,而是会产生一个新的值
  • 例如:(1) let num = '10';
  • parseInt(num) :


  • 为什么要有数据类型转换?
  • 有时候想要进行某种计算的时候,由于数据类型不同往往会产生一些错误的结果,为了避免这种结果,我们需要将某种数据类型转化为其他数据类型
  • 例如:prompt()输入框得到的数据的类型是string,如果想要进行数学计算则需要转成number类型,否则会计算出错


  • 什么是显示类型转换:程序员主动转换(可以理解为使用关键字来转换)
  • 这种方式代码易读性更高


1.其他类型转换成number类型


  /**转换成number
     * 第一种方式:`parseInt()`
     *          * 作用:转换整数
     *          * 从左往右解析,遇到非数字结束(停止解析),将解析好的整数返回
     *          * 如果第一个字符不是数字或者符号就返回NaN
     * 第二种方式:`parseFloat()`
     *          * 作用:转换小数
     *          * 与parseInt()最大的区别就是可以解析字符串的第一个小数点
     * 第三种方式: `Number()`
               * 作用:布尔类型转换成数字 
     *         * 可以把任意值转换成数值,如果要转换的字符串只要有一个不是数字,返回NaN
     */
    console.log ( Number ( "123" ) );//123
    console.log ( Number ( "123.1.1abc" ) );  //NaN  只要有一个字符不是数字,得到就是NaN
    console.log ( parseInt ( "123.1.1abc" ) );  //123  从左往右解析,遇到非数字结束
    console.log ( parseFloat ( "123.1.1abc" ) );//123.1  与parseInt唯一的区别就是可以识别第一个小数点
    //一般数字字符串使用parseInt和parseFloat,其他数据类型转数字使用Number()
    console.log ( Number ( true ) );  //1布尔类型转换number会得到数字0(false)和1(true)
    console.log ( Number ( "" ) );    //0  空字符串转number会得到0
  //js基础面试题
  console.log(Number(undefined));   //NaN
    console.log(Number(null));      //0


2.其他类型转换成string类型


  • 1.第一种方式:变量名.toString()
  • 如果变量的值为undefined或者null,则会报错


  • 2.第二种方式:String(变量名)
  • 与第一种方式的唯一区别就是如果变量的值为undefined或者null不会报错,会得到undefined或者null


   let a = null;
    //1.常用: String (  )
    //特点:可以识别undefined与null
    console.log ( String ( null ) );
    console.log ( typeof String ( a ) );
    // //2.   变量名.toString ()
    //特点:无法识别undefined与null,程序会报错
    console.log ( a.toString () );


3.其他类型转换成boolean类型


只有一种方式: Boolean(变量名)


  • 官网文档中有八种情况得到的false:0、-0、null、false、NaN、undefined、或者空字符串("")、 document.all()
  • 其他一切均为true


console.log ( Boolean ( 0 ) );        //false
console.log ( Boolean ( -0 ) );       //false
console.log ( Boolean ( null ) );     //false
console.log ( Boolean ( false ) );      //false
console.log ( Boolean ( undefined ) );    //false
console.log ( Boolean ( '' ) );       //false
console.log ( Boolean ( NaN ) );      //false


2.隐式数据类型转换


隐式转换:运算符两边数据类型不一致,编译器自动帮我们转换一致在计算,这是js的语法特点


隐式转换


  • 1.转成string类型:+号两边如果有一边是字符串,则会把另一边转换成字符串,然后进行拼接


  • 2.转成number类型:以下几种运算符会将任何数据转换成number类型再运算,如果无法转换则为NaN
  • 数学正号 : +num
  • 当 +/-号写在一个变量名的前面,此时表示数学的正/负数
  • 自增自减(++ --)
  • 算术运算符(+ - * / %)
  • 比较运算符(> < >= <= == != \=\=\= !==)
  • 说明:全等与不全等会先比较值(此时会隐式转换再比较),然后再比较数据类型


  • 3.转成boolean类型:逻辑非(!)会将任何数据转为boolean类型再运算


  • 4.+号有三种含义:数学正负号(转成number)、算术运算符(转成number)、字符串连接符(转成string)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1. 显式转换 : 程序员主动使用语法来转换(阅读性最高)
        2. 隐式转换 : 如果运算符两边数据类型不一致,编译器偷偷的帮我们转成一致再计算。
            (1)其他数据类型转number :
                数学正号 : +num
                自增自减: ++ --  
                算术运算符: + - * / %
                关系运算符 : > < >= <=
            (2)其他数据类型转string : +
            (3)其他数据类型转boolean : !
         */
        console.log('100' - 1);     // Number('100') - 1 = 100 - 1 = 99
            //1.其他数据类型转number :
            //    数学正号 : +num
            //    自增自减: ++ --  
            //    算术运算符: + - * / %
            console.log(+'10');     // Number('10')
            console.log('海海' - 100);  // Number('海海') - 100 = NaN - 100 = NaN
            console.log(10 - '1');    // 10 - Number('1') = 10 - 1 = 9
            //2. 其他数据类型转string : +
            console.log('1' + 1);   //'1' + String(1) = '1' + '1' = '11'
            /* 
            注意点 : 算术运算符 + 转换规则  与 连接符 + 转换规则
             */
            console.log('1' + true);  //1true 连接符 ‘1’ + String(true) = '1' + 'true' = '1true'
            console.log(1 + true);    //2 算术运算符  1 + Number(true) = 1 + 1 = 2
            console.log(1 + undefined); //NaN 算术 1 + Number(undefined) = 1 + NaN = NaN
            console.log(1 + null);    //1 算术 1 + Number(null) = 1+ 0 = 1
            console.log('1' + null);  //1null 连接 '1' + String(null) = '1' + 'null' = '1null'
            //其他数据类型转boolean : !
            //取反 : true变false false变true
            console.log(!1);      //(1)!Boolean(1) = !true = false
            console.log(!!'');      //(1)!!Boolean('') (2)!!false (3)!true = false
    </script>
</body>
</html>
相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
514 2
|
2天前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
14 3
|
26天前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
21 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
103 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
33 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
84 10
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
103 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
31 1