JavaScript变量与数据类型

变量是计算机中用来存储数据的“容器”,用户输入的数据可以通过变量储存,它可以让计算机变得有记忆。变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

变量的使用

使用变量,首先声明变量、然后赋值变量、最后打印变量。

  <script>
    let age //1. 声明一个变量
    age = 18 // 2. 给变量一个值
    console.log(age) // 3. 控制台打印年龄

    let age = 18 // 或者声明的时候直接给值
  </script>

let (允许) 是声明关键字,后面跟一个变量名(标识)。

你可以直接赋值,也可以再起一行。let name = 后面如果是字符串,值是需要加""

更新变量

let不允许多次声明一个变量,一旦赋值后,我们再起一行赋值变量即可。

  <script>
    let age
    age = 18
    age = 19
    console.log(age) 
  </script>

声明多个变量

let 声明多变量可以并排书写,用英文逗号隔开,打印也是同理。不提倡这么使用

  <script>
    let age = 18, uname = '迪丽热巴'
    console.log(age, uname);
  </script>

用户输入变量

用户输入存储到变量中,并打印。

  <script>
    let uname = prompt('请输入名字')
    document.write(uname)
  </script>

交换变量的值

可使用一个 临时变量temp ,用来做中间存储。

JavaScript变量与数据类型
  <script>
    let num1 = 10
    let num2 = 20
    let temp

    temp = num1
    num1 = num2
    num2 = temp
    document.write(num1, num2)
  </script>

计算机中存储数据的地方是内存,变量本质是程序在内存中申请的一块用来存放数据的小空间。

变量命名

规则

不能用JavaScript 内置的一些英语词汇。例如:let、var、if、for等

只能用下划线、字母、数字、$组成,且数字不能开头

字母严格区分大小写,如 Age 和 age 是不同的变量

规范

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写,后面每个单词首字母大写。例:userName

let和var区别

在较旧的JavaScript, 使用关键字 var 来声明变量,而不是 letvar 现在开发中一般不再使用它,只是我们可能再老版程序中看到它。let 为了解决var 的一些问题。

var 的问题

可以先使用 在声明(不合理)

var 声明过的变量可以重复声明(不合理)

比如变量提升、全局变量、没有块级作用域等。

数组

数组(Array)是一种将一组数据存储在单个变量名下的优雅方式。数组编号是从0开始的

在数组中,数据的编号也叫索引或下标。数组放任何类型数据都可以:数字和字符串。

  <script>
    let arr = [12, 18, 25, 35, 45, 60]
    let name = ['刘德华', '张学友', '黎明', '郭富城', '霍欣标']
    console.log(arr[1])
    console.log(name[0])
  </script>

数组长度

数组中数据的个数,通过数组的length属性获得。

  <script>
    let arr = [12, 18, 25, 35, 45, 60]
    console.log(arr.length)
  </script>

常量

当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。常量不允许重新赋值,声明的时候必须赋值。

  <script>
    const PI = 3.14
    console.log(PI)
  </script>

数据类型

JS中基本数据类型分类两大类:基本数据类型和引用数据类型。

基本数据类型

number(数字型)
string(字符串型)
boolean(布尔型)
undefined(未定义型)
null(空类型)

引用数据类型

object(对象)

数字类型

即我们数学中学习到的数字,可以是整数、小数、正数、负数。js是弱数据类型的语言,只有当我们赋值了,才知道是什么数据类型。

算术运算符

数字可以有很多操作,所以经常和算术运算符一起。

+(求和)-(求差)*(求积)/(求商)%(取模,取余数,开发中经常作为某个数字是否被整除)

如果取余数,前面数字比后面的小,则得出的结果就是前面的数字,如下面实例:

  <script>
    console.log(2 % 5)
  </script>

同时使用多个运算符编写程序时,会按着某种顺序先后执行:Javascript中优先级越高越先被执行,优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用()可以提升优先级
总结:先乘除后加减,有括号先算括号里面的

公式转换为js写法

计算圆的面积,对话框中输入圆的半径,算出圆的面积并显示到页面。

① 面积的数学公式:π * r2

换算成js的写法:变量 * r * r

  <script>
    let r = prompt('请输入圆的半径')
    let re = 3.14 * r * r
    document.write(re)
  </script>

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

  <script>
    console.log('霍欣标' - 2)
  </script>

字符串类型

通过单引号"、双引号""或反引号()包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

  <script>
    let str = '霍欣标'
    let str1 = "霍欣标"
    let str2 = `霍欣标`
    document.write(str2)
  </script>

注意事项

无论单引号或是双引号必须成对使用

单引号和双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)

必要时可以使用转义符\,输出单引号或双引号

  <script>
    console.log('霍欣标今天很"开心"')
    console.log("霍欣标今天很'开心'")
    console.log('霍欣标今天很\'开心\'');
  </script>

字符串拼接

字符串还可以使用+运算符 可以实现字符串的拼接。

  <script>
    console.log('霍欣标' + '同志')
    console.log(1 + 1);
  </script>
  <script>
    let age = prompt("请输入年龄:")
    document.write('霍欣标今年' + age + '岁了')
  </script>

模板字符串

模版字符串必须是反引号`` ,内容拼接变量时,用${}包住变量。

  <script>
    let age = prompt("请输入年龄:")
    document.write(`我今年${age}岁了`)
  </script>

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 truefalse,表示肯定的数据用 true(真),表示否定的数据用false(假)。

  <script>
    console.log(3 > 4)
    
    let isCool = true
    console.log(isCool)
  </script>

未定义类型

未定义是比较特殊的类型,只有一个值 undefined。只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少直接为某个变量赋值为 undefined。NaN

  <script>
    let mum
    console.log(mum);
  </script>

工作中的使用场景:

我们开发中经常声明一个变量,等待传送过来的数据。

如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是 undefined,就判断用户是否有数据传递过来。

空类型

Javascript 中的 null仅仅是一个代表“无”、“空”或“值未知”的特殊值。就是赋值了,内容为空。

  <script>
    let obj = null
    console.log(obj);
  </script>

null 开发中的使用场景:

官方解释:把null 作为尚未创建的对象
大白话:将来有个变量里面存放的是一个对象,但是对象还没创建好,可以先给个null

检测数据类型

通过 typeof 关键字检测数据类型,

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:

作运算符: typeof x (常用的写法)

函数形式:typeofx()

有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法
  <script>
    let num = 10
    console.log(typeof num)
    console.log(typeof (num))

    let str = '霍欣标'
    console.log(typeof str)

    let flag = true
    console.log(typeof flag)

    let un
    console.log(typeof un)

    let obj = null
    console.log(typeof obj)
  </script>

类型转换

Javascript也不知道变量到底属于那种数据类型,只有赋值了才清楚。

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。

通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。

规则

+号两边只要有一个是字符串,都会把另外一个转成字符串

除了+以外的算术运算符 比如- */ 等都会把数据转成数字类型

转换类型不明确,靠经验才能总结

小技巧

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

  <script>
    console.log(1 + 1)       // 数字类型
    console.log('霍欣标' + 1) // 字符串类型
    console.log(2 + 2)   // 22
    console.log(2 - '2') // 0
    console.log(+12)     // 12 自动转为数字类型
    console.log(+'123')  // 自动转为数字类型
  </script>

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。

转换为数字型

转换数字类型严格区分大小

<body>
  <script>
    let str = '123'
    console.log(Number(str))

    let num = prompt('请输入年薪:')
    console.log(Number(num))
  </script>
</body>

如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字。

NaN也是number类型的数据,代表非数字。

parselnt 只获取整数和小数

只保留整数

  <script>
    console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12px'));
  </script>

parseFloat(数据)

可以保留小数

  <script>
    console.log(parseFloat('12px'))
    console.log(parseFloat('12.34px'))
    console.log(parseFloat('12.95px'));
  </script>

案例:用户订单信息

输入2个数,计算两者的和,打印到页面中。

  <script>
    let num1 = +prompt('请输入第一个数字:')
    let num2 = +prompt('请输入第二个数字:')
    alert(`两个数相加的和是:${num1 + num2}`)
  </script>

需求:用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息

JavaScript变量与数据类型

分析:

① 需要输入3个数据,所以需要3个变量来存储 price num address
② 需要计算总的价格 total
③ 页面打印生成表格,里面填充数据即可
④ 记得最好使用模板字符串

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      border-collapse: collapse;
      /* 合并边框 */
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <script>
    let price = +prompt('请输入商品价格:')
    let num = +prompt('请输入商品数量:')
    let address = prompt('请输入收货地址:')

    let total = price * num

    document.write(`
      <table>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>总价</th>
          <th>收货地址</th>
        </tr>
        <tr>
          <td>小米青春版PLUS</td>
          <td>${price}</td>
          <td>${num}</td>
          <td>${total}元</td>
          <td>${address}</td>
        </tr>
      </table>
    `)
  </script>
</body>

</html>

数据常见的报错

uncaught SyntaxError: Missing initializer in const declaration

const声明中缺少初始化式

Uncaught ReferenceError: age is not defined

提示变量没有定义过
很可能变量没有声明和赋值
或者我们输出变量名和声明的变量不一致引起的(简单说写错变量名了)

Uncaught SyntaxError:Identifier’age’has already been declared

提示“age” 已经声明
很大概率是因为重复声明了一个变量。
注意let 或者const 不允许多次声明同一个变量

Uncaught TypeError: Assignment to constant variable.

常量被重新赋值了
常量不能被重新赋值

原创文章,作者:霍欣标,如若转载,请注明出处:https://www.bigengwu.cn/xue/69.html

霍欣标的头像霍欣标
上一篇 2024-07-01 10:37
下一篇 2024-07-02 23:53

相关推荐

博主人懒,应管局要求暂不开启站内私信和评论功能,如需帮助请发邮件。

邮箱账号:1969600480@qq.com