JavaScript 基础

94 阅读3分钟

变量

  • 理解变量是计算机存储数据的“容器”,掌握变量的声明方式 变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子. 变量作用:用来存放数据.

1.1 声明变量

声明(定义)变量有两部分构成:声明关键字、变量名(标识) Snipaste_2022-05-23_09-59-24.png 关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let 的含义是声明变量的,看到 let 后就可想到这行代码的意思是在声明变量,如 let age;

letvar 都是 JavaScript 中的声明变量的关键字,推荐使用 let 声明变量

1.2变量赋值

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。 Snipaste_2022-05-23_10-03-01.png

变量的基本使用

  • 更新变量 变量赋值后,还可以通过简单地给它一个不同的值来更新它。 Snipaste_2022-05-23_10-04-51.png
  • 声明多个变量 多个变量中间使用逗号隔开 Snipaste_2022-05-23_10-06-43.png

变量案例

  • 用户输入 浏览器中弹出对话框: 请输入姓名, 页面中输出:刚才输入的姓名 Snipaste_2022-05-23_10-09-12.png
  • 交换变量 有2个变量: num1 里面放的是 10, num2 里面放的是20

最后变为 num1里面放的是 20 ,num2里面放的是 10 Snipaste_2022-05-23_10-11-06.png

变量命名规范

关于变量的名称(标识符)有一系列的规则需要遵守:

  1. 只能是字母、数字、下划线、$,且不能能数字开头
  2. 字母区分大小写,如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词(关键字或保留字)不允许使用
  4. 尽量保证变量具有一定的语义,见字知义

注:所谓关键字是指 JavaScript 内部使用的词语,如 letvar,保留字是指 JavaScript 内部目前没有使用的词语,但是将来可能会使用词语。

规范:

  • 起名要有意义
  • 遵守小驼峰命名法
  • 第一个单词首字母小写,后面每个单词首字母大写。例:userName

let与var的区别

在较旧的JavaScript,使用关键字 var 来声明变量 ,而不是 let

var 现在的开发中一般不会在使用它,但是在比较老的项目里面还存在.

let为了解决var的一些问题

var 声明:

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

变量扩展-数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

数组是一种复杂数据类型

数组可以在容器中 存储多个数据

数组三要素: 元素 下标 数组长度

数组声明语法:let arr = [数据1,数据2,数据3,...,数据n] Snipaste_2022-05-23_10-17-54.png

常量

概念:使用 const 声明的变量称为“常量”。

使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。

命名规范:和变量一致 Snipaste_2022-05-23_10-20-26.png 注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)

数据类型

基本数据类型:number(数字型) . string(字符串型). boolean(布尔型) . undefined(未定义型) . null(空类型)

引用数据类型: object对象

数字型

即我们数学中学习到的数字,可以是整数、小数、正数、负数 Snipaste_2022-05-23_10-25-06.png

  1. 算术运算符 数学运算符也叫算术运算符,主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)(取模) Snipaste_2022-05-23_10-24-05.png
  2. NaN NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN :not a number Snipaste_2022-05-23_10-26-56.png 3. 计算圆的面积 面积的数学公式: π*r² Snipaste_2022-05-23_10-27-53.png

字符串型

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

注意事项:

  • 无论单引号或是双引号必须成对使用
  • 单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单 或者外单内双)
  • 必要时可以使用转义符 ``,输出单引号或双引号 Snipaste_2022-05-23_10-33-56.png 字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

Snipaste_2022-05-23_10-34-38.png

字符串拼接

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

口诀:数字相加,字符相连

Snipaste_2022-05-23_10-35-23.png

模板字符串

模板字符串 外面用`` 里面 ${变量名}

Snipaste_2022-05-23_10-35-54.png

布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据,它有两个固定的值 truefalse,表示肯定的数据用 true,表示否定的数据用 falseSnipaste_2022-05-23_10-36-42.png

未定义

未定义是比较特殊的类型,只有一个值 undefined,只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。 Snipaste_2022-05-23_10-37-18.png

空类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

Snipaste_2022-05-23_10-38-14.png undefined与null的区别

undefined 表示没有赋值

null 表示赋值了,但是内容为空

数据类型检测

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

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

2.函数形式: typeof(x)

有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。

Snipaste_2022-05-23_10-39-03.png

类型转换

理解弱类型语言的特征,掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型,如数值、字符串、布尔值、undefined,在实际编程的过程中,不同数据类型之间存在着转换的关系。

隐式转换

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

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

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

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

Snipaste_2022-05-23_10-41-06.png

显式转换

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

  1. 转换为数字型

Snipaste_2022-05-23_10-42-29.png 2. 转换为字符型

Snipaste_2022-05-23_10-43-17.png

求和案例

Snipaste_2022-05-23_10-44-21.png

综合案例

Snipaste_2022-05-23_10-45-38.png Snipaste_2022-05-23_10-45-55.png