JavaScript之变量篇

1.变量是什么?

变量是编程过程中用户使用计算机储存数据的载体

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

2.变量的基本使用

1.声明变量

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量)

语法:

let 变量名 （局部变量）

var 变量名（有变量提升）

const 变量名(定义后值无法修改，一般作为定义常量时使用)

变量提升：

我们在全局作用域中或局部作用域中，使用var关键字声明的变量，都会被提升到该作用域的最顶部，这就是我们常说的变量提升

例如：

var a

console.log(a)  //值为undefined

a = 1

console.log(a) //值为1

注意：

声明变量有两部分构成:声明关键字、变量名（标识)
let即关键字(let:允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语
要想使用变量，首先需要创建变量（也称为声明变量或者定义变量)

2.变量赋值

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

语法：关键字(例如let const var等) 变量名 = 数字

示例：

声明多个变量同时赋值给变量时：

let a = 1

let b = 2

同时输出变量:

console.log(a,b)

注意：

声明变量时不能写成

let a = 1,let b = 2

这种行为会造成代码不规范，并影响代码可读性

3.变量更新

如果我们已经定义了一个变量，例如我的年龄是18岁，那么当明年19岁的时候我想要更新这个变量的时候该怎么办呢？

示例：

答案是：

4.交互变量

需求:

有2个变量:num1里面放的是10,num2里面放的是20

最后变为 num1里面放的是20,num2里面放的是10

目的:

1. 练习变量的使用

2. 为了后面冒泡排序做准备

实现：

5.变量本质

规则 : 必须遵守,不遵守报错(法律层面)
规范 : 建议,不遵守不会报错,但不符合业内通识(道德层面)

1.规则:

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

2.规范:

▶ 起名要有意义

▶ 遵守小驼峰命名法

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

课堂练习

变量练习-输出用户信息

需求:让用户输入自己的名字、年龄、性别,再输出到网页

分析:

1:弹出 输入框(prompt):请输入您的姓名(uname):
2:弹出输入框(prompt):请输入您的年龄(age):
3:弹出输入框(prompt):请输入您的性别(gender):
4:页面分别 输出(document.write)刚才的3个变量。

答案:

---

3.变量拓展-数组

1.数组的基本使用

声明数组

let 数组名 = [元素1，元素2，元素3，....] 

● 数组是按顺序保存,所以每个数据都有自己的编号

● 计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推

● 在数组中,数据的编号也叫索引或下标

● 数组可以存储任意类型的数据

---

一些术语

▶ 元素:数组中保存的每个数据都叫数组元素

> 下标:数组中数据的编号
▶ 长度:数组中数据的个数,通过数组的length属性获得

---

数组常用方法

顺序	方法名	功能	返回值	是否改变原数组	版本
1	push()	(在结尾)向数组添加一或多个元素	返回新数组长度	Y	ES5-
2	unshift()	（在开头)向数组添加一或多个元素	返回新数组长度	Y	ES5-
3	pop()	删除数组的最后一位	返回被删除的数据	Y	ES5-
4	shift()	移除数组的第一项	返回被删除的数据	Y	ES5-
5	reverse()	反转数组中的元素	返回反转后数组	Y	ES5-
6	sort()	以字母顺序(字符串Unicode码点)对数组进行排序	返回新数组	Y	ES5-
7	splice()	在指定位置删除指定个数元素再增加任意个数元素 （实现数组任意位置的增删改)	返回删除的数据所组成的数组	Y	ES5-
8	concat()	通过合并（连接）现有数组来创建一个新数组	返回合并之后的数组	N	ES5-
9	join()	用特定的字符,将数组拼接形成字符串 (默认",")	返回拼接后的新数组	N	ES5-
10	slice()	裁切指定位置的数组	被裁切的元素形成的新数组	N	ES5-
11	toString()	将数组转换为字符串	新数组	N	ES5-
12	valueOf()	查询数组原始值	数组的原始值	N	ES5-
13	indexOf()	查询某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在 返回 -1	N	ES5-
14	lastIdexOf()	反向查询数组某个元素在数组中第一次出现的位置	存在该元素,返回下标,不存在 返回 -1	N	ES5-
15	forEach()	(迭代) 遍历数组,每次循环中执行传入的回调函数	无/(undefined)	N	ES5-
16	map()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组	有/自定义	N	ES5-
17	filter()	(迭代) 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中	满足条件的元素组成的新数组	N	ES5-
18	every()	(迭代) 判断数组中所有的元素是否满足某个条件	全都满足返回true 只要有一个不满足 返回false	N	ES5-
19	some()	(迭代) 判断数组中是否存在,满足某个条件的元素	只要有一个元素满足条件就返回true,都不满足返回false	N	ES5-
20	reduce()	(归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中	最终操作的结果	N	ES5-
21	reduceRight()	(归并)用法同reduce,只不过是从右向左	同reduce	N	ES5-
22	includes()	判断一个数组是否包含一个指定的值.	是返回 true，否则false	N	ES6
23	Array.from()	接收伪数组,返回对应的真数组	对应的真数组	N	ES6
24	find()	遍历数组,执行回调函数,回调函数执行一个条件,返回满足条件的第一个元素,不存在返回undefined	满足条件第一个元素/否则返回undefined	N	ES6
25	findIndex()	遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1	满足条件第一个元素下标,不存在=>-1	N	ES6
26	fill()	用给定值填充一个数组	新数组	Y	ES6
27	flat()	用于将嵌套的数组“拉平”，变成一维的数组。	返回一个新数组	N	ES6
28	flatMap()	flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )	返回新数组	N	ES6