JavaScript变量、数据类型、类型转换

最新推荐文章于 2024-05-02 18:12:22 发布

自动花钱机

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量190

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html vscode css

本文链接：https://blog.csdn.net/hs_2017112123/article/details/127996159

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JavaScript介绍

1. JavaScript是什么

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2. 作用

网页特效（监听用户的一些行为让网页做出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端开发（Node.js）

3. JavaScript的组成

3.1 ECMAScript

ECMAScript规定了JS的编程语法和基础核心知识。

比如：变量、分支语句、循环语句、对象等等

3.2 Web APIs

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM（Browser Object Model，简称BOM），是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

ps：权威网站：MDN

4. JS书写位置

4.1 内部JS

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

拓展：alert(‘你好，js’)页面弹出警示对话框

<body>
    <h1>123</h1>
    <!-- 内部js -->
    <script>
        alert('你好，js')
    </script>
</body>

4.2 外部JS

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

<body>
    <!-- 通过src引入外部js文件 -->
    <script src="./my.js"></script>
</body>

注意：script标签中间无需写代码，否则会被忽略！

外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读。

4.3 内联JS

代码写在标签内部

语法：了解即可，但后面Vue框架会用这种模式

<body>
    <button onclick="alert('月薪过万')">点击我</button>
</body>

5. JS注释

单行注释：Ctrl+/

块注释：shift+alt+A

6. JS结束符

代表语句结束
英文分号 ;
可写可不写
换行符（回车）会被识别成结束符，所以一个完整的语句，不需要手动换行
在实际开发中很多人主张书写JavaScript代码时省略结束符
为了风格统一，要么每句都写结束符，要么都不写

7. JS输入输出语法

7.1 输出语法

document.write('要输出的内容')

向body内输出内容
如果输出的内容写的是标签，也会被解析成网页元素

alert('要输出的内容')

页面弹出警告对话框

console.log('控制台打印')

控制台输出语法，程序员调试使用

7.2 输入语法

prompt('请输入您的姓名：')

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

二、变量

变量是计算机用来存储数据的容器。

1. 变量的基本使用

1.1 变量的初始化

let age = 18

注意：let不允许多次声明一个变量。

1.2 同时声明多个变量

同时声明多个变量时，多个变量名之间使用英文逗号隔开。

let age = 10, name = 'hs', sez = 2;

2. 变量命名规则与规范

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

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

2.1 规则

不能用关键字：有特殊含义的字符，JavaScript内置的一些词汇，例如：let、var、if、for等

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

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

2.2 规范

起名要有意义

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

3. 变量拓展-let和var的区别

let为了解决var的一些问题

var声明：

可以先使用在声明（不合理）
var声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等

以后声明变量统一用let

4. 变量拓展-数组

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

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

三、数据类型

1. 基本数据类型

1.1 number数字型

整数、正数、负数、小数统一称为数字类型

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

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

1.2 string字符串型

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

// 外单内双，外双内单，转义符
console.log("我是'迪士尼在陶公主'吗？")
console.log('我是"迪士尼在陶公主"吗？')
console.log('我是\'迪士尼在陶公主\'吗？')

字符串拼接

    <script>
        // 利用 + 拼接
        console.log('我是' + '米奇')

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

        let age = 20
        console.log('我今年年龄是:' + age)

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

    <script>
        // 1. 用户输入年龄
        // 2. 页面输出 我今年xx岁啦
        let age = prompt('请输入你的年龄：')
        document.write('我今年' + age + '岁啦')
    </script>

模板字符串

拼接字符串和变量
``
内容拼接变量时，用${}包住变量

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

1.3 boolean布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）。

1.4 undefined未定义型

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

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

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

1.5 null空类型

null表示值为空

null和undefined的区别：

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

情况	说明	结果
`let age;console.log(age);`	只声明不赋值	undefined
`console.log(age);`	不声明不赋值，直接使用	报错
`age = 10;console.log(age);`	不声明只赋值	10(不提倡)

2. 引用数据类型

object对象

function函数

array数组

3. 检测数据类型

3.1 控制台输出语句

控制台语句经常用于测试结果来使用

可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

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

let age = 18
let uname = '米奇'
let flag = false
let buy
console.log(typeof age)    //number
console.log(typeof uname)  //string
console.log(typeof flag)   //boolean
console.log(typeof buy)    //undefined

四、类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

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

console.log('10000' + '2000')   //输出结果  100002000

此时需要转换变量的数据类型。

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

1. 隐式转换

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

规则：

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

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

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

2. 显式转换

2.1 转换为数字型

Number(数据)

转换成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
NaN也是number类型的数据，代表非数字

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

        // Number(数据)
        console.log(Number('10'))
        // 转换为数字型，只保留整数，没有四舍五入
        console.log(parseInt('10'))
        console.log(parseInt('10.111'))
        console.log(parseInt('10.999'))
        // 转换为数字型，会保留小数
        console.log(parseFloat('10.999'))
        // 区别：
        // Number(数据) 只能放数字类型的字符，不能放abc这种类型
        // 否则返回的是 NaN  not A number
        console.log(Number('10.01abc'))
        // parseFloat常用于过滤单位
        console.log(parseFloat('10.01abc'))
        console.log(parseFloat('100px'))

2.2 转换为字符型

String(数据)

变量.toString(进制)

        console.log(String(10))
        let age = 10
        console.log(age.toString())
        // 括号里面如果是2，转换为二进制
        console.log(age.toString(2))

五、实战案例

商品订单信息

<!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>综合案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

        table caption {
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <script>
        // 1. 输入price num address三个变量
        let name = prompt('请输入商品名称')
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        let total = price * num
        // 2. 渲染表格 填充数据
        document.write(`
        <table>
            <caption>
                <h2>订单付款确认</h2>
            </caption>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>${name}</td>
                <td>${price}元</td>
                <td>${num}</td>
                <td>${total}元</td>
                <td>${address}</td>
            </tr>
        </table>
        `)
    </script>
</body>
</html>

2022/11/23 Caroline finish

自动花钱机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript变量、数据类型、类型转换

一、JavaScript介绍：1. JavaScript是什么，是一种运行在客户端（浏览器）的编程语言，实现人机交互效果、2. 作用、3. JavaScript的组成、4. JS书写位置、5. JS注释、6. JS结束符、7. JS输入输出语法。二、变量：1. 变量的基本使用、2. 变量命名规则与规范、3. 变量拓展-let和var的区别、4. 变量拓展-数组。三、数据类型：1. 基本数据类型、2. 引用数据类型、3. 检测数据类型。四、类型转换：1. 隐式转换、2. 显式转换。
复制链接

扫一扫