每天3小时学前端之JS-第2天-变量基础与变量类型简介

零寂前端
790 阅读6分钟

每天3小时学前端之JS-第2天-变量基础与变量类型简介

theme: channing-cyan highlight: agate

配套视频教程

点击观看：哔哩哔哩

变量基础

关键字

关键字可用于控制执行流程，代码循环，获取异常等操作，是语法的一部分。

break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。

保留字

保留字在将来要被用作关键字

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private 、transient、debugger、implements、protected 、volatile、double、import、public。

标识符

所谓标识符，就是变量、函数、属性或函数参数的名称。

命名规范

  • 第一个字符必须是字母、下划线、美元符号
  • 其他字符可以是字母、下划线、美元符号、数字
  • 关键字 和 保留字 不能用来作为标识符
  • 区分大小写

命名习惯

  • 小驼峰：firstName。一般用在变量名、函数名等
  • 大驼峰：Array、RegExp。一般用在类库、构造函数等

字面量与变量

  • 字面量：123、'abc'、56.79这些字面上的量的本身
  • 变量：用来保存这些字面量的，以便使用的时候直接调用变量。

变量就像“盒子”一样保存了真实的数据。变量是为了操作真实数据的方便而存在的

变量与常量

  • 变量：变化的量，可以重新赋值的量。 关键字：var、let(es6)
  • 常量：固定的量，一旦定义必须赋值，且不可再次更改 关键字：const(es6)

变量的声明

var a;

使用逗号隔开声明多个变量

var name,
    age,
    sex;

变量的赋值

js的变量是松散类型的，意思是变量可以用于保存任何类型的数据，也被称为：js变量的动态弱类型

var msg = 'Hello JavaScript';
msg = 123

变量的声明提升

通过关键字var声明一个变量，并且赋值，则变量的声明会提升到当前作用域的顶部，而赋值会保持位置不变，所以叫做声明提升

console.log(a) // undefined
var a = 'a'

以上代码相当于

var a
console.log(a) // undefined
a = 'a'

多次声明同一变量也不会报错

var a = 'a'
var a = 'aa'
var a = 'aaa'
console.log(a); // aaa

练习

1、prompt接收变量

// prompt(提示文字、默认值)  返回输入值
var msg = prompt('请输入值：', '123')
console.log(msg);

2、交换两个变量的值

var a = 123
var b = 321

// 交换a和b的值
var temp
temp = a
a = b
b = temp
console.log(a, b);

变量类型简介

简单数据类型(基本数据类型)

数值(Number)

所有数字都是以浮点数形式储存，即使整数也是如此。

js语言的底层根本没有整数，所有数字都是小数

字符串(String)

用于表示由零或多个字符组成的字符序列，即字符串

  • 需要单引号或者双引号包裹字符串
  • 字符串字面量可以通过连接符+和变量进行拼接

布尔值(Boolean)

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。

  • 注意：是区分大小写的

未定义(undefined)

  • 未初始化的变量即为undefined，没必要显式赋值为undefined
  • 为了区分空对象null与未初始化的变量的

空对象(Null)

  • 将要保存为对象的变量，最好初始化为null

复杂数据类型(引用类型)

数组(Array)

是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

狭义的对象(Object)

对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

对象的所有键名都是字符串，所以可以省略引号(不要把省略引号的键名字符串看成变量)。

如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），且也不是数字，则必须加上引号，否则会报错。

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。

函数(Function)

保存了可执行的代码数据，函数需要调用才能执行函数内部的代码

三种声明方式

  • function 命令
  • 函数表达式
  • Function构造函数(了解 后面再讲)

typeof

  • 是一个判断变量类型的操作符
    • typeof(a)
    • typeof a
  • 返回结果：
    • "undefined"——如果这个值未声明或未赋值；
    • "boolean"——如果这个值是布尔值；
    • "string"——如果这个值是字符串；
    • "number"——如果这个值是数值；
    • "object"——如果这个值是对象或null(空对象)；
    • "function"——如果这个值是函数。

栈和堆

  • 简单数据直接保存在栈内存中
  • 复杂数据保存在堆内存中，再将堆内存中的地址保存在栈内存中
graph RL
  subgraph stack [ 栈 ]
    G[#101]
    F[#100]
    C[true]
    B['hello']
    A[123]
  end

  subgraph heap [ 堆 ]
    E["#101 —— {name: 'xiaoming'}"] --> G
    D["#100 —— ['a', 'b', 'c']"] --> F
  end

变量的嵌套

在对象中如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

练习

打印用户信息

  1. 在弹出的输入框上输入姓名和年龄
  2. 分别用变量接收
  3. 用数组保存若干爱好
  4. 用函数打印某个行为
  5. 将用户信息再放到一个对象上
  6. 通过对象找到各个属性，并打印如下： xxx今年x岁了。喜欢看书、敲代码、听音乐，x正在吃东西！
var name = prompt('请问你叫什么名字？')
var age = prompt('请问你的年龄是？')
var likes = ['看书', '敲代码', '听音乐']
var eat = function () {
  console.log(name + '正在吃东西！');
}
var info = {
  name: name,
  age: age,
  likes: likes,
  eat: eat
}
console.log(info.name + '今年' + age + '岁了。喜欢' + info.likes[0] + '、' + info.likes[1] + '、' + info.likes[2] + '，')
info.eat()

总结

  • 变量的声明提升要重点掌握
  • 参考较权威资料，JS中包括5种简单数据类型：Undefined、Null、Boolean、Number和String和1种复杂数据类型：Object。
    • Null虽然是简单数据类型，可是typeof的返回值却为"object"
    • 并没有把Array算作一种类型，因为本质上也输入Object类型
    • Function其实本质也是Object类型，但是typeof的返回值又是"fuction"
  • typeof不是函数，是操作符，所以有typeof(a)和typeof a两种使用形式
  • typeof(只声明为赋值的变量)的结果为"undefined"
  • typeof(从未声明的变量)的结果也为"undefined"，唯一在使用一个未声明过的变量的时候不报错的情况
  • 变量嵌套中的元素可以是各种类型
avatar
文章
阅读
粉丝