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

层叠样式表广东分表
168 阅读4分钟

一、JavaScript

运行在客户端(浏览器)的编程语言, 实现人机交互效果

作用:

  • 网页特效 (监听用户的一些行为让网页作出对应的反馈

  • 表单验证 (针对表单数据的合法性进行判断

  • 数据转换 (获取后台的数据, 渲染到前端

  • 服务器编程 (node.js)

组成:

  • ECMAScript

    • JavaScript语言基础
    • 规定了js基础语法基础知识 (如:变量 分支语句 循环语句 对象等

  • Web APIs

    • DOM

      • 页面文档对象模型
      • 操作文档, 比如对页面元素进行移动, 大小, 添加删除等操作

    • BOM

      • 浏览器对象类型
      • 操作浏览器, 比如页面弹窗, 检测窗口宽度, 存储数据到浏览器等等

书写位置

  • 内联JavaScript

    • 代码写在标签内部 (了解即可)

  • 内部JavaScript

    • 直接写在HTML文件里, 用script标签包住
    • script标签写在body标签里面, 上面

  • 外部JavaScript

    • 代码写在以 .js结尾的文件里面
    • 通过script标签引用到html页面中

注释

  • 单行注释

    • Ctrl + /
    • 开发人员看

  • 块注释(多行注释)

    • ctrl + Alt + a

结束符

  • 代表语句结束
  • 英语分号 " ; "
  • 可写可不写, 要么都写 要么都不写
  • 换行(enter) 会被识别成结束符, 所以一个完整的语句不能手动换行
  • so, 平时写js代码时可不写分号, 记得换行就行

输入和输出语法

  • 输出语法

    • document.write('页面内容');

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

    • alert('警示框弹出内容');

      • 页面弹出警示对话框

    • console.log('控制台输出内容');

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

  • 输入语法

    • prompt('提示内容');

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

字面量(literal)

  • 在计算机中描述的 事 / 物
  • 看到它就知道是什么类型, 如 123 是数字

二、变量

计算机存储数据的 "容器" (装东西的盒子)

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

变量的使用

  • 声明变量

    • let 变量名

  • 变量赋值

    • 变量名 = 变量值

  • 变量初始化

    • let age = 18;

  • 声明多个变量

    • 统一声明, 用逗号隔开
    • let a=1, b=2, c=3

  • 更新变量

    • 重新给变量赋值, 不能重新定义变量
    • let 不允许多次声明一个变量

案例

  • 结合输出语句的简单案例
- <script>
        // 需求：浏览器中弹出对话框：请输入姓名
        // 然后在HTML文档中输出刚才用户输入的姓名

        /*
            步骤：
            1. 先声明一个变量存储用户输入的数据
            2. 利用输出语句在文档中输出已经存储了数据的变量
        */

        let username = prompt("请输入姓名")
        document.write(username)
    </script>

image.png

image.png

  • 交换变量
 <script>
        let user1 = '用户1'
        let user2 = '用户2'
        console.log('交换前user1:' + user1 + '\n交换前user2:' + user2);

        // 临时变量
        let temp

        // 交换
        temp = user1
        user1 = user2
        user2 = temp
        console.log('交换后user1:' + user1 + '\n交换后user2:' + user2);
 </script>

image.png

变量的本质

  • 内存

    • 计算机中存储数据的地方, 相当于一个空间

  • 变量

    • 是程序中内存中申请的一块用来存放数据的空间

变量命名规则与规范

  • 规则

    • 必须遵守, 不遵守报错

      1. 不能用关键字,

      • 关键字: 有特殊含义的字符, JavaScript内置的一些英语词汇 例如: let、var、if、for等
      1. 只能用下划线、字母.、$组成, 且不能以数字开头
      1. 字母严格区分大小写, 如Age和age不是一个变量

  • 规范

    • 建议 不遵守不会报错, 但不符合业内通识
      1. 起名要有意义

      1. 遵守小驼峰命名法

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

  • 简单案例

<script>
        // 需求：让用户输入自己的名字、年龄、性别，再输出到网页
        let userName = prompt('请输入姓名')
        let userAge = prompt('请输入年龄')
        let userSex = prompt('请输入性别')
        document.write(userName)
        document.write(userAge)
        document.write(userSex)
</script>

image.png

image.png

let和var的区别

  • let为了解决var的一些区别

  • var声明

      1. 可以先使用. 再声明 ( 不合理 )
      1. var声明过的变量可以重复声明 ( 不合理 )
      1. 比如变量提升、全局变量、没有块级作用域等等

  • 结论：以后声明变量统一使用let

变量拓展: 数组 [ ]

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

    image.png

  • 声明数组

    image.png

    let arr = ['李狗蛋', '张翠花', '赵铁柱']

  • 注意

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

  • 使用数组

    • 取值语法

      image.png

      1. 通过下标取数据
      1. 取出来是什么类型的, 就根据这种类型特点来访问
      1. 输出数组长度: arr.length

  • 小案例

    <script>
        let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期日', '星期日']
        console.log(arr[6]);
        console.log(arr[arr.length - 1]);
    </script>

image.png

三、数据类型

数据类型为何要分类?

  • 计算机世界中的万事万物都是数据
    1. 更加充分和高效的利用内存
    1. 也更加方便程序员的使用数据

基本数据类型

  • number 数字类型

    • 整数
    • 小数
    • 整数
    • 负数
    • e 科学计数法
    • Infinity 无穷大
      • infinity 无穷小

  • string 字符串类型

      1. 单引号包裹 "李狗蛋"
      1. 双引号包裹 '李狗蛋'
      1. 反引号包裹 李狗蛋

    • 字符串里面可以嵌套引号, 但是要区分开 外单内双或外双内单 不怕麻烦的话用转义字符\

    • 字符串拼接

      • ' 字符串1 ' + ' 字符串2 '

        image.png

      • 模板字符串 $ { let }

        image.png

      • 案例

 <script>
        let name = prompt('请输入您的姓名')
        let age = prompt('请输入您的年龄')
        document.write(`大家好我是${name},今年${age}岁`)
 </script>

image.png

image.png

  • boolean 布尔型

    • 表示肯定或否定时在计算机中对应的是布尔类型数据
    • true 真
    • false 假

  • undefined 未定义型

    • 只声明了变量 未赋值
    • 只有一个值 undefined

  • null 空类型

    • 变量赋值了 但是内容为空
    • 将来有个变量里面存放了一个对象, 但是对象还没创建好, 可以先给个null
    • 例: let object = null;

  • 检测数据类型

    • typeof

      • 后面空格跟上数据或变量

        image.png

引用数据类型

  • object 对象
  • function 函数
  • array 数组

四、类型转换

image.png

隐式转换

image.png

显示转换

  • 转换为数字型

    • Number ( 数据 )

      • 如果内容有非数字 , 则转换失败的结果为NaN
      • NaN也是number类型的数据, 代表非数字

    • parseInt ( 数据 )

      • 只保留整数
      • 数字前面有非数字, 则返回NaN
      • 数字后面有非数字则自动删除掉 ( 过滤单位 )

    • parseInt ( 数据 )

      • 可以保留小数
      • 数字前面有非数字, 则返回NaN
      • 数字后面有非数字则自动删除掉 ( 过滤单位 )

  • 转换为字符串型

    • String ( 数据 )
    • 数据.toString( 进制 )
avatar
文章
阅读
粉丝