变量→数据类型→数据转换→实战案例

变量

1、变量：

白话：变量就是一个装东西的盒子。

通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

变量的基本使用

1. 声明变量：

要想使用变量，首先需要创建变量（专业说法：声明变量）

语法：

let = 变量名

声明变量有两部分构成：声明关键字、变量名（标识）

let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

举例：

let age；

age 即变量的名称，也叫标识符

2. 变量赋值：

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

//赋值，将18这个数据存入 age 这个"容器"中
let age 

age = 18

//这样 age 的值就成了 18 
document.write(age)
//输出页面显示

注意：是通过变量名来获得变量里面的数据

也可以声明变量的时候同时给变量初始化

//声明了一个age变量，同时里面存放了 18 这个数据
let age = 18

3. 更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

4. 声明多个变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

let age = 18, uname='pink'

变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量：是程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

规则：必须遵守，不遵守报错

规范：建议，不遵守不会报错，但不符合业内通识

1. 规则：

不能用关键字

√ 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

只能用下划线、字母、数字、$组成，且数字不能开头字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范：

遵守小驼峰命名法 √ 第一个单词首字母小写，后面每个单词首字母大写。例：userName

数组

数组(Array)是一种可以按顺序保存多个数据

let arr = []
// arr是变量  []是数组字面量

数组的基本使用

1. 声明语法

let 数组名 = [数据1，数据2，.....，数据n]

例：

let names = ['小明'，小刚'，"小红’，"小丽'，'小米']

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

2.取值语法

   数组名[下标]

let names = ['小明'，小刚'，"小红"，"小丽"，"小米']
names[0]  // 小明
names[1] // 小刚

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

3.一些术语：

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

let names - ['小明"，小刚"，，小红’，"小丽’，"小米']
console.log(names[e])// 小明
console.log(names[1]) // 人刚
console.log(names .length)//5

数据类型

计算机世界中的万事万物都是数据。

计算机程序可以处理大量的数据，为什么要给数据分类？

更加充分和高效的利用内存
也更加方便程序员的使用数据

JS 数据类型整体分为两大类：

基本数据类型
引用数据类型

数据类型 – 数字类型（number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

let score = 19; // 正整数
let price = 12.345; // 小数
let temperature = -40; // 负数

JavaScript 中的正数、负数、小数等统一称为数字类型。

注意事项

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

Java是强数据类型例如 int a = 3 必须是整数

数据类型 – 字符串类型（string）

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

let user name =小明'; // 使用单引号
let gender =“男"， // 使用双引号
let str =123 ，// 看上去是数字，但是用引号包裹了就成了字符串了
let str1 =;// 这种情况叫空字符串

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号

数据类型 – 字符串类型（string）

字符串拼接：

document.write('我叫’+刘德华')// 我叫刘德华
let uname =刘德华
let song =忘情水'
document.write(uname + song)// 刘德华忘情水

1. 作用

拼接字符串和变量
在没有它之前，要拼接变量比较麻烦

document.write('大家好，我叫’+ name +，今年’+ age + '岁')

2 符号

``
在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
内容拼接变量时，用 ${} 包住变量

document.write(`家好，我叫${name}，今年${age}岁`)

页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了

<script>
        // 利用+做拼接
        // console.log('我是' + 'pink老师')

        // console.log('我今年年龄是' + 18)

        // let age = 18
        // console.log('我今年年龄是' + age)

        // 用户输入名字
        // 页面输出的是：我的名字是XXX 
        let uname = prompt('请输入您的名字：')
        document.write('我的名字是:' + uname)
    </script>

数据类型 – 布尔类型（boolean）

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

// pink老师帅不帅? 回答 是 或 否
let isCool = true; // 是的，摔死了!
isCool = false; // 不，套马杆的汉子!

数据类型 – 未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。

什么情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为undefined。

let age// 声明变量但是未赋值
document.write(age) // 出 undefined

工作中的使用场景：

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

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

未定义是比较特殊的类型，只有一个值 undefined。总结使用：

数据类型 – null（空类型）

null 表示值为空

let obj= null

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

null 开发中的使用场景：

官方解释：把 null 作为尚未创建的对象

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

检测数据类型

控制台输出语句和检测数据类型

1. 控制台输出语句：

let age = 18
let uname =刘德华
let flag = false
let buy
console.log(age)
console.log(uname)
console.log(flag)
console.log(buy)

控制台语句经常用于测试结果来使用。可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

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

let age = 18
let uname =刘德华
let flag = false
let buy
console.log(age) //number
console.log(uname) //string
console.log(flag) //boolean
console.log(buy) //undefind

类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

console.log('10e0’+2088') // 输出结果 10082008

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

隐式转换

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

规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

缺点：

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

小技巧：

+号作为正号解析可以转换成Number

    <script>
        let unm = prompt('请输入一个数字：')
        console.log(unm, typeof unm)
        // 内部悄悄的吧 18 转换为了字符串的'18'
        console.log('pink老师' + 18)
        console.log(10 + '10')  //1010
        // - * / 把字符串的 '10' 转换为 数字型 10
        console.log(10 - '10')  //0
        // 小技巧
        let num = '10'
        console.log(+num)
        // console.log(-num)
        console.log(10 + +'10')
    </script>

显式转换

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

概念：

自己写代码告诉系统该转成什么类型

Number(数据)

转成数字类型

如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

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

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

<script>
        // let num = '10'
        // (Number(数据)
        console.log(Number('10.01'))
        // 转换为数字型 ，只保留整数 ， 没有四舍五入
        console.log(parseInt('10'))
        console.log(parseInt('10.111'))
        console.log(parseInt('10.999'))
        // 转换为数字型 ，会保留整数 
        console.log(parseFloat('10.999'))

        // 区别：
        // 1、Number() 只能放数字类型的字符，不能放abc这样的
        // 否则返回的事NaN  not a number
        console.log(Number('10.01abc'))
        // 2、parseFloat 经常用于过滤单位
        console.log(parseFloat('10.01abc'))
        console.log(parseFloat('100px'))
        // console.log(parseFloat('px100px'))

    </script>

String(数据)

变量.toString(进制)

实战案例

用户订单信息案例

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

分析：

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

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 0 auto;
            border-collapse: collapse;
            text-align: center;

        }

        table th,
        td {
            border: 1px solid #000;
            padding: 15px;
        }

        table caption {
            margin: 15px 0;
        }
    </style>
</head>

<body>


    <script>
        // 1. 输入 price  num address 三个变量
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入购买的数量：')
        let address = prompt('请输入收货的地址：')
        let total = price * num
        // 2. 渲染表格 填充数字
        document.write(`
        <table>
        <caption>
            <h1>订单付款确认页面</h1>
        </caption>
        <thead>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小米青春PLUS</td>
                <td>${price}元</td>
                <td>${num}</td>
                <td>${total}元</td>
                <td>${address}</td>
            </tr>
        </tbody>
    </table>
    `)

    </script>
</body>

</html>

获取用户信息

<script>
//依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。
    let name = prompt('请您输入您的姓名：')
    let age = prompt('请您输入您的年龄：')
    let sex = prompt('请您输入您的性别')
    console.log(name)
    console.log(age)
    console.log(sex)
</script>

增加年龄

通过prompt来弹出提示框，收集用户信息
通过变量保存数据

询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁
增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了”

<script>
    let age = +prompt('请输入您的年龄：')
    alert(`据我估计，五年后，您可能${age + 5}`)
</script>

计算银行卡余额案例

题目描述

用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。
页面打印一个表格，计算出本月银行卡还剩下的余额

 <!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            margin: 10px auto;
        }

        table {
            text-align: center;
            border-collapse: collapse;
        }

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

<body>
    <script>
        let yhk = +prompt('请输入您的银行卡金额')
        let dianFei = +prompt('请输入您的电费')
        let shuiFei = +prompt('请输入您的水费')
        let wangFei = +prompt('请输入您的网费')
        let yue = yhk - (dianFei + shuiFei + wangFei)
        document.write(`
        <table>
        <caption>2020年12月消费支出</caption>
        <thead>
            <tr>
                <th>银行卡</th>
                <th>水费 </th>
                <th>电费</th>
                <th>网费</th>
                <th>银行卡余额</th>
            </tr>
        <tbody>
            <tr>
                <td>${yhk}</td>
                <td>${dianFei}</td>
                <td>${shuiFei}</td>
                <td>${wangFei}</td>
                <td>${yue}</td>
            </tr>
        </tbody>
        </thead>
    </table>
        `)
    </script>
</body>

</html>

JavaScript-小白日记- 第二天

变量→数据类型→数据转换→实战案例

变量

1、变量：

变量的基本使用

1. 声明变量：

2. 变量赋值：

3. 更新变量：

4. 声明多个变量：

变量的本质

变量命名规则与规范

1. 规则：

2. 规范：

数组

数组的基本使用

1. 声明语法

2.取值语法

3.一些术语：

数据类型

数据类型 – 数字类型（number）

注意事项

数据类型 – 字符串类型（string）

注意事项：

数据类型 – 字符串类型（string）

1. 作用

2 符号

页面输出用户信息案例

数据类型 – 布尔类型（boolean）

数据类型 – 未定义类型（undefined）

工作中的使用场景：

数据类型 – null（空类型）

null 开发中的使用场景：

检测数据类型

控制台输出语句和检测数据类型

1. 控制台输出语句：

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

类型转换

隐式转换

显式转换

实战案例

用户订单信息案例

获取用户信息

增加年龄

计算银行卡余额案例