JavaScript变量和数据类型

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量374 收藏 10
点赞数 7
分类专栏： JavaScript入门 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42535142/article/details/135355382
版权

目录

一、程序中变量的数据​编辑

二、变化数据的记录 – 变量​编辑

三、变量的命名格式 ​编辑

四、 变量的命名规范​编辑

 五、变量的练习​编辑

 六、变量的使用注意​编辑

七、 JavaScript的数据类型​编辑

八、typeof操作符​编辑

九、Number类型（一）​编辑

十、Number类型（二） ​编辑

十一、String类型（一）​编辑

十二、字符串中的转义字符​编辑

十三、字符串的属性和方法​编辑

十四、Boolean类型​编辑

十五、Undefined类型​编辑

十六、Object类型​编辑

十七、Null类型​编辑

十八、数据类型总结​编辑

十九、数据类型的转换​编辑

二十、字符串String的转换​编辑

二十一、数字类型Number的转换​编辑

 二十二、布尔类型Boolean的转换​编辑

一、程序中变量的数据

二、变化数据的记录 – 变量

三、变量的命名格式

四、 变量的命名规范

MDN文档查看关键字和保留字 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>

    // 定义一个变量
    // 第一步： 变量的声明（高级js引擎接下来我要定义一个变量）
    // var关键字
    // 第二步: 变量的赋值(使用=赋值即可)
    // var currentTime = "16:00"

    // 其他的写法一:
    // var currentTime;
    // currentTime = "16:02";
    // currentTime = "17:00";

    // 其他的写法二: 同时声明多个变量(不推荐, 阅读性比较差)
    // var name, age, height
    // name = "why"
    // age = 18
    // height = 1.88
    var name = "why", age = 18, height = 1.88;

    // 补充:
    // 1.当我们打印变量时, 实际上是在打印变量中保存的值
    // 2.console.log(参数1, 参数2, 参数3...........)
    console.log(name, age, height);

  </script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 规则: 必须遵守

      // 规范: 建议遵守
      // 1.多个单词, 建议使用驼峰标识(小驼峰)
      // 小驼峰(currentTime)/大驼峰(CurrentTime)
      // 2.推荐=的左右两边加上空格
      var currentTime = "16:18";
      var currentPrice = "¥100";
    </script>
  </body>
</html>

 五、变量的练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  
  <script>
    // 练习一: 定义变量保存个人信息
    var name = "why"
    var age = 18
    var height = 1.88
    var weight = 160
    var address = "广州市"

    // 修改变量的值(重新赋值)
    age = 19
    height = 1.90
    weight = 165
    address = "深圳市"

    // 练习二: 将一个变量的值, 赋值给另外一个变量
    var nickname = "coderwhy"
    var admin = nickname
    console.log(nickname, admin) // coderwhy coderwhy


    // 练习三: 定义两个变量保存两个数字, 对两个变量中的数字进行交换
    var num1 = 10
    var num2 = 20
    // 方法一: 借助第三个变量
    // console.log("交换前, num1, num2:", num1, num2)
    // var temp = num1
    // num1 = num2
    // num2 = temp
    // console.log("交换后, num1, num2:", num1, num2)

    // 方法二: 不借助于第三个变量完成交换(了解, 笔试面试题)
    console.log("交换前, num1, num2:", num1, num2)
    num1 = num1 + num2 // num1: 30, num2: 20
    num2 = num1 - num2 // num1: 30, num2: 10
    num1 = num1 - num2 // num1: 20, num2: 10
    console.log("交换后, num1, num2:", num1, num2)

    
    // 练习四: 接受用户输入一个值, 并且使用一个变量来保存
    var inputInfo = prompt("请输入一个值吧!")
    console.log(inputInfo)

  </script>

</body>
</html>

 六、变量的使用注意

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 注意事项一: 如果一个变量未声明就直接使用, 那么会直接报错
    // var currentAge = age
    // var name = "why"
    // console.log(message)

    // 注意事项二: 如果一个变量有声明, 但是没有赋值操作
    // var info
    // console.log(info)

    // 注意事项三: 在JavaScript中也可以不使用var在全局声明一个变量(不推荐)
    // 如果不使用var来声明一个变量, 也是可以声明成功的, 并且这个变量会被加入window对象
    address = "广州市"
    console.log(address)

  </script>

</body>
</html>

七、 JavaScript的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 一串文本组成, 称之为是一个字符串
    var description = "了解真相, 你才能获得真正的自由!"
    description = 123
    console.log(description)

    // 其他语言中声明一个变量如何指定类型
    // java
    // String description = "了解真相, 你才能获得真正的自由!";
    // description = 123
    // swift: 自动类型推导
    // var description = "了解真相, 你才能获得真正的自由!"
    // description = 123
  </script>

</body>
</html>

八、typeof操作符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>
    // 1.typeof基本演练
    var info = "why"
    // info = 18
    // info = {}
    console.log( typeof info )

    // 2.typeof的其他类型
    var age
    console.log(typeof age)

    // 3.null的操作
    var address = null
    console.log(typeof address)


    // 4.()的作用
    // ()表示的是调用函数
    // alert()

    // ()将某一个表达式当做一个真题
    var result = (2 + 3) * 4

    console.log(typeof(info))
    
    console.log(typeof(String))
  </script>

</body>
</html>

九、Number类型（一）

十、Number类型（二）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.Number类型的基本使用
    var age = 18
    var height = 1.88

    // 2.特殊的数值
    // Infinity
    var num1 = Infinity
    var num2 = 1 / 0
    console.log(num1, num2)

    // NaN: not a number(不是一个数字)
    var result = 3 * "abc"
    console.log(result)
    console.log(isNaN(result))

    // 3.进制表示
    var num3 = 100 // 十进制
    // 了解
    var num4 = 0x100 // 十六进制
    var num5 = 0o100 // 八进制
    var num6 = 0b100 // 二进制
    console.log(num4, num5, num6)

    // 5.数字可以表示的范围
    var max = Number.MAX_VALUE
    var min = Number.MIN_VALUE
    console.log(max, min)

  </script>

</body>
</html>

十一、String类型（一）

十二、字符串中的转义字符

十三、字符串的属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 1.String基本使用
    var name = "coderwhy"
    var address = "广州市"
    var intro = "认真是一种可怕的力量!"

    // 2.别的引号的使用
    // 单引号
    var message1 = 'Hello World'
    // 双引号
    var message2 = "Hello World"
    // 反引号(ES6新增语法)
    // ${变量/表达式}
    var message3 = `Hello World, ${name}, ${2 + 3}`

    // 3.转义字符: 字符串本身中包含引号
    var message4 = 'my name is "coderwhy"'
    console.log(message4)

    var message5 = 'my name \\ \'\' is "coderwhy"'
    console.log(message5)

    // 4.<字符串>本身有的方法和属性
    var message = "Hello World"
    console.log(message.length)

    // 字符串操作
    var nickname = "coderwhy"
    var info = "my name is "
    var infoStr = `my name is ${nickname}` // 推荐(babel)
    var infoStr2 = info + nickname
    console.log(infoStr, infoStr2)

  </script>

</body>
</html>

十四、Boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.Boolean基本使用
    var isLogin = false
    var isAdmin = true

  </script>

</body>
</html>

十五、Undefined类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    var message
    var info = undefined // 不推荐

    console.log(message, info)
  </script>

</body>
</html>

十六、Object类型

十七、Null类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.Object类型的基本使用
    // var name = "why"
    // var age = 18
    // var height = 1.88
    var person = {
      name: "why",
      age: 18,
      height: 1.88
    }
    console.log(person)

    // 2.对象类型中某一个属性
    console.log(person.name)

    // 3.Null类型
    // 3.1. 其他类型的初始化
    var age = 0
    var num = 0
    var message = "" // 空字符串
    var isAdmin = false

    // Null存在的意义就是对 对象进行初始化的, 并且在转成Boolean类型时, 会转成false
    var book = null
    console.log(typeof book) // object

  </script>

</body>
</html>

十八、数据类型总结

十九、数据类型的转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 什么是数据类型的转换
    // var numStr = "1234"
    // var result = numStr
    // console.log(typeof result)

    var isAdmin = true
    var result2 = 10 + isAdmin // isAdmin -> 1
    console.log(result2)
    console.log(String(true))

  </script>

</body>
</html>

二十、字符串String的转换

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    var num1 = 123
    var age = 18
    var isAdmin = true

    // 1.转换方式一: 隐式转换(用的非常多)
    var num1Str = num1 + ""
    var ageStr = age + ""
    var isAdminStr = isAdmin + ""
    console.log(typeof num1Str, typeof ageStr, typeof isAdminStr)

    // 2.转换方式一: 显示转换
    var num1Str2 = String(num1)
    console.log(typeof num1Str2)

  </script>

</body>
</html>

二十一、数字类型Number的转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 方式一: 隐式转换(用的很少)
    var num1 = "8"
    var num2 = "4"
    var result1 = num1 + num2 // 84
    console.log(typeof result1)

    var result2 = num1 * num2
    console.log(result2)

    // 方式二: 显示转换(Number())
    var result3 = Number(num1)
    console.log(typeof result3)

    // 其他类型转成数字类型的规则:
    console.log(Number(undefined)) // NaN
    console.log(Number(true)) // 1
    console.log(Number(false)) // 0
    console.log(Number(null)) // 0
    console.log(Number("abc123")) // NaN
    console.log(Number("         123       ")) // 123
    console.log(Number("")) // 0


  </script>

</body>
</html>

 二十二、布尔类型Boolean的转换

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 方式一: 隐式转换
    // 分支语句
    var isAdmin = true
    var num1 = 123 // true

    // 方式二: 显示转换
    console.log(Boolean(num1), Boolean(undefined))

    // 转换有如下的规则: 
    // 直观上为空的值, 转成Boolean类型都是false
    // 直观上为空的值: 0/""/undefined/null/NaN -> false

    // 注意事项
    console.log(Boolean("")) // false
    console.log(Boolean("0")) // true

  </script>

</body>
</html>

小袁儿
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解JavaScript的变量和数据类型
10-23
主要介绍了详解JavaScript的变量和数据类型，需要的朋友可以参考下
简单介绍JavaScript的变量和数据类型
10-24
主要介绍了简单介绍JavaScript的变量和数据类型,是JS入门中的基础知识,需要的朋友可以参考下
JavaScript-变量数据类型
莫莫
06-09 123
变量 储存数据的一个容器 为什么要使用变量 简化操作 灵活程序 变量命名规则 必须是 字母 数字 _ $ 组成 不能以数字开头 不能是JavaScript的关键字 如：class，var 等 推荐的规则 尽量用英文 （拼音也行） 命名要有意义 c1 c2 c3 没有意义，money left 等这些就有意义 可以采用驼峰写法，下划线写法； 如：bestNumber best_number （尽量统一） 变量声明的方法 声明即赋值 var num = 100; 先声明后赋值 var nu
JavaScript的变量及数据类型
vivian_let的博客
12-10 224
一.变量 在计算机中，可以通过一些符号表示一些数据，这个符号就是变量(所谓变量，就是可以初始化后可以再次改变的量)。 变量需要定义才能使用。 var 变量名 ＝ 值； Js是弱类型语言，定义变量时无须指定类型。变量可以重复赋值，但不能重复定义。 变量名的命名规范 1）第一个字符不能是数字 2）变量名可以由字母，数字，下划线和$组成 3）不能使用关键字和保留字。 ...
JavaScript：数据类型 / 基本数据类型 / 引用数据类型 / 特殊类型 / ES6 提供的类型
snowball的博客
05-17 1181
掌握JavaScript数据类型非常重要，因为JavaScript是一种动态类型的编程语言，数据类型的正确使用对于开发人员来说至关重要。用于表示数值，可以是整数或浮点数。例如：10, 3.14。用于表示文本。由一系列字符组成，可以使用单引号（'）、双引号（"）或模板字符串（`）来定义。例如："Hello, world!用于表示真值（true）或假值（false）。主要用于条件判断和逻辑运算。例如：true, false。表示一个没有值的特殊类型。它是一个关键字，表示变量不引用任何对象。
JavaScript筑基篇——变量与数据类型
m0_59422814的博客
04-23 148
JavaScript 是一种具有函数优先特性的轻量级解释型或者说即时编译型的编程语言。
【Javascript】变量和数据类型
m0_64538862的博客
03-15 959
1.JavaScript介绍，内部JavaScript，外部JavaScript，内联JavaScript，JavaScript输入输出语法，定义变量，变量的命名规则和规范，let和var区别，数据类型，数字类型，字符串类型，字符串拼接，模板字符串，布尔类型（boolean），未定义数据类型，检测数据类型，类型转换，隐式转换，显式转换
JavaScript变量和数据类型总结
微风洋洋的博客
02-13 1850
管你变量怎么变，一篇文章搞定（霸气）！
JavaScript变量及数据类型
lh11223326的博客
04-22 1064
在JavaScript中我们可以使用变量来存储数据，而我们存储的数据又可以分为：字符串，数字，布尔值，数组等，并可以更改变量的值，因为变量如其名可变的量。数据类型，指的是对数据进行操作时数据的类型，不同的数据可以使用不同的类型来存储，如123这个数值，或者'字'文本等等。JavaScript简介-CSDN博客C语言操作符和数据类型的存储详解_f2(&b)运算的是主函数还是调用函数-CSDN博客。
JavaScript 变量类型
温染的笔记
01-05 3069
变量类型 JavaScript 中的变量类型分为值类型（又称为简单类型、基本数据类型）以及引用类型。 【值类型】： Number String Undefined Null Boolean 【引用类型】： Object Array Function 值类型和引用类型的区别 存储方式的不同：每声明一个值类型变量，都会在内存中单独分配出一块区域用以保存，变量之间不会相互影响；而引用类型返...
08 JavaScript学习：数据类型
热门推荐
百锦再的博客
04-20 7万+
由于 JavaScript 是动态类型的语言，变量的数据类型可以随时改变，这使得 JavaScript 在某些情况下更加灵活，但也可能导致一些类型错误。动态类型的特性使得 JavaScript 在编写代码时更加灵活，但也需要开发人员注意变量的数据类型，以避免潜在的类型错误。JavaScript 中的对象是非常灵活和强大的数据结构，可以用来表示复杂的数据关系和结构。通过对象的属性和方法，可以实现丰富的功能和逻辑。在 JavaScript 中，变量的数据类型是在运行时确定的，而不是在编译时确定的。
JavaScript：变量与数据类型
07-14
### JavaScript中的变量与数据类型 #### 一、变量的概念与作用 在JavaScript中，变量扮演着极其重要的角色，它是用于存储数据值的容器。通过变量，开发者能够在程序中引用和操作这些值，使得代码变得更加灵活和可...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 640
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1322
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 862
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 255
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 211
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 354
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
JavaScript入门：变量与数据类型详解
2. **变量和数据类型** - 变量是JavaScript中存储数据的“容器”，它们用来标识内存中的数据。 - 数据类型包括基本类型（如字符串、数字、布尔值、null和undefined）和引用类型（如数组、对象和函数）。 - 学习者...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值