作为网站三剑客（HTML、CSS、JavaScript）之一，JavaScript用于控制网页行为，是一种运行在客户端（浏览器）的编程语言，由ECMAScript（基础语法）、web APIs（DOM、BOM）组成。
<body>
<script>
...
</script>
</body>
<script>
//单行注释
</script>
<script>
/*多行注释
多行注释*/
</script>
prompt('请输入您的姓名：')
//显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
document.write('要输出的内容')
//向body内输出内容，如果输入的内容写的是标签，也会被解析成网页元素
alert('要输出的内容')
//页面弹出警告对话框
console.log('控制台打印')
//控制台输出语法，程序员调试使用
计算机中用来存储数据的容器
let 变量名 //let关键字（允许、许可）
变量名 = 数值
变量名 = 新值 //注意：同一个变量不能重复声明
let age = 18,uname = 'abc' //多个变量中间用逗号隔开
1.必须遵守的准则，不遵守会报错
2.不能使用关键字
3.只能用下划线、字母、数字、$组成，且不能数字开头
4.字母严格区分大小写
1.建议采用，不遵守不会报错，但不符合业内通识
2.起名要有意义
3.遵守小驼峰命名法——第一个字母首字母小写，后面每个单词首字母大写，如：userName
在较旧的JavaScript中，使用关键字var来声明变量，而非let。var现在开发中一般不再使用，只是我们可能在老版程序中看到它。let解决了var的一些问题
1.可以先使用后声明（不合理）
2.var声明过的变量可以重复声明（不合理）
3.比如变量提升、全局变量、没有块级作用域等等
1.元素：数组中保存的每个数据都叫数组元素
2.下标：数组中数据的编号（从0开始）
3.长度：数组中数据的个数，通过数组的length属性获得
let 数组名 = [数据1, 数据2, ..., 数据n]
数组名[下标] //数组下标从0开始
const 常量名 = 数值 //常量不允许重新赋值，因此声明时必须赋值
1.数学中的数字，可以是整数、小数、正数、负数
2.算术运算符：加 +、减 -、乘 *、除 /、取模 %
3.NaN：代表一个计算错误，它是一个不正确的或一个未定义的数学操作所得的结果，比如用一个字符串与数字做算术运算
4.NaN是粘性的，任何对NaN的操作都会返回NaN
1.通过单引号、双引号或反引号包裹的数据都叫字符串
2.字符串拼接
let newString = '字符串1' + '字符串2'
let newString = `***${变量名}***`
//模板字符串，用于拼接字符串和变量，类似于其它编程语言中的格式化字符串
let abc //声明变量但未赋值
console.log(abc) //此时打印结果就为undefined
let abc = null
let abc = 123
console.log(typeof abc) //typeof作为运算符 常用写法
console.log(typeof(abc)) //typeof函数形式
使用表单、prompt获取的数据默认是字符串类型，因此不能直接进行算术运算
某些运算符被执行时，系统内部自动将数据类型进行转换
1.+号两边只要有一个是字符串，就会把另一个转换成字符串
2.除了+以外的算术运算符，比如 - * / 等都会把数据转成数字类型
let str = 10 + '20'
console.log(str) //输出结果为字符串1020，而非数字30
let str = 30 * '10'
console.log(str) //输出结果为数字300
let str1 = 30 * 'abc'
console.log(str1) //会报错，因为字符串abc无法转换成数字类型
1.+号作为正号解析可以转换成数字型
2.任何数字和字符串相加结果都是字符串
let str = +'123' //将字符串'123'转换成数字123
console.log(typeof str) //此时str存储的是数字类型
自己写代码告诉系统该转成哪种类型
Number(数据) //转换为数字类型，如果内容有非数字，则结果为NaN
parseInt(数据) //只保留整数部分
parseFloat(数据) //可以保留小数部分
let str = 10
str += 10 //str = str +10
str -= 10 //str = str - 10
str *= 10 //str = str * 10
str /= 10 //str = str / 10
str %= 10 //str = str % 10
1.正负号：+、-
2.自增自减：++、–
let str = 10
str = str++ //str = str + 1
str = str-- //str = str - 1
比较运算符
>、<、>=、<=、==、!==、===
===：两边是否类型和值都相等，推荐使用
逻辑运算符
与 &&、或 ||、非 !
运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ - - ! |
| 3 | 算术运算符 | 先 * / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
表达式：可被求值，可以写在赋值语句的右侧
语句：不一定有值，比如alert() for 和 break 等语句就不能被用于赋值
单分支语法:if (条件) { 满足条件执行代码 }
if (10 > 5) {
console.log('10>5')
}
双分支语法:if (条件) { 满足条件执行代码 } else { 不满足条件执行代码 }
if (10 > 20) {
console.log('10>20')
}
else {
console.log('10<=20')
}
多分支语法:if (条件1) { 满足条件1执行代码 } else if (条件2) { 满足条件2执行代码 } else if (条件n) { 满足条件n执行代码 } else {所有条件都不满足执行代码}
if (10 > 20) {
console.log('10>20')
}
else if (10 > 15) {
console.log('10>15')
}
else if (10 > 10) {
console.log('10>10')
}
else {
console.log('都不满足')
}
使用场景：比if双分支更简单的写法
语法：条件 ? 满足条件执行代码 : 不满足条件执行代码
10 > 20 ? console.log('10>20') : console.log('10<=20')
switch(数据) {
case 值1:
代码1
break
case 值2:
代码3
break
default:
代码n
break
}
注意：在switch中只有遇到break语句才会跳出，否则会一直执行下面的代码，直到遇到break为止
语法：while (循环条件) { 要重复执行的代码(循环体) }
三要素：变量起始值、终止条件（没有终止条件会造成死循环）、变量变化量（用自增或自减）
let i = 0
while (i < 5) {
console.log(i)
i++
}
构造无限循环：while (true) { 循环体 }
while(true) {
console.log('无限循环')
}
break：退出整个循环
continue：结束本次循环，继续下次循环
let i = 1
while (i < 5) {
i++
if(i % 2 === 0) {
break //做个判断，当i是偶数时，退出整个循环
}
console.log(i)
}
let i = 1
while (i < 5) {
i++
if(i % 2 === 0) {
continue //做个判断，当i是偶数时，退出当次循环，开始下一次循环
}
console.log(i)
}
语法：for (变量起始值; 终止条件; 变量变化量) { 循环体 }
for (let i = 0; i < 5; i++) {
console.log(i)
}
构造无限循环：for ( ;; ) { 循环体 }
for (;;) {
console.log('无限循环')
}
循环嵌套：一个循环里面再套一个循环，一般用在for循环里
for (外部声明记录循环次数的变量; 循环条件; 变化值) {
for (内部声明记录循环次数的变量; 循环条件; 变化值) {
循环体
}
}
数组（Array）：一种可以按顺序保存数据的数据类型
声明语法：
let 数组名 = [数据1, 数据2, …, 数据n]
let arr = new Array(数据1, 数据2, … 数据n)
let arr = [1, 2, 4, 55, 342]
let arr1 = new Array(1, 2, 4, 55, 342) //作为了解即可，不常用
取值语法：数组名[下标]
let arr = [1, 2, 4, 55, 342]
console.log(arr[0]) //数组下标从0开始
遍历数组：for (let i = 0; i < 数组名.length; i++) { 数组名[i]}
let arr = [1, 2, 4, 55, 342]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
数组操作-改：数组名[下标] = 新值
arr[1] = 15
数组操作-增：
1.数组.push(元素1, …, 元素n)
将一个或多个元素添加倒数组的末尾，并返回该数组的新长度（重点）
2.数组.unshift(新增的内容)
将一个或多个元素添加到数组的开头，并返回该数组的新长度
arr.push(32, 324,9, 2)
arr.unshift(25, 65, 10)
数组操作-删
1.数组.pop()
删除数组最后一个元素，并返回该元素值
2.数组.shift()
删除数组第一个元素，并返回该元素值
3.数组.splice(起始位置, 删除几个元素)
删除指定元素
arr.pop() //删除数组最后一个元素
arr.shift() //删除数组第一个元素
arr.splice(0,2) //从索引号0的位置开始，删除2个元素
数组操作-排序
数组.sort()
arr.sort() //升序排列数组
map可以遍历数组处理数据，并且返回新的数组
map也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值，forEach没有返回值
const arr = ['red', 'blue', 'green']
const newArr = arr.map(function (ele, index) {
console.log(ele) //数组元素
console.log(index) //数组索引号
return ele + '颜色'
})
console.log(newArr) //输出['red颜色', 'blue颜色', 'green颜色']
forEach()方法用于调用数组的每个元素，并将元素传递给回调函数，不会返回新的数组
适合于遍历数组对象
被遍历的数组.forEach(function (当前数组元素, 当前元素索引号) {
//函数体
})
function，是被设计为执行特定任务的代码块
function 函数名() { 函数体 }
函数名命名规范:和变量名基本一致；尽量小驼峰式命名法；前缀应该为动词
function func() {
console.log('函数体')
}
函数名()
func()
function 函数名(参数列表) { 函数体 }
参数列表中，多个数据用逗号隔开
function func(x, y) {
console.log(x + y)
}
函数名(参数1, 参数2, …)
func(1, 2)
函数调用时实际传入函数中的参数
函数声明时写在函数名括号内的参数
如果用户不输入实参，则变量值为undefined
可以给形参默认值，这样程序更严谨
默认值只会在缺失实参参数传递时才会被执行
语法：function 函数名(x = 1, y = 2) { 函数体 }
function func(x = 1, y = 2) {
console.log(x + y)
}
语法：return 数据
返回多个数据（返回一个数组）：return [数据1, 数据2]
function func() {
return 2
}
console.log(func())
1.两个相同的函数，后面的会覆盖前面的函数
2.在JavaScript中实参的个数和形参的个数可以不一致；如果形参过多，会自动填上undefined；如果实参过多，那么多余的实参会被忽略
3.函数一旦碰到return就不会再往下执行了
限定一个变量名的可用的范围
作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件
作用于函数内的代码环境，也称函数作用域
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
函数内部的形参，可以看作是局部变量
没有名字的函数
function () {}
函数表达式：将匿名函数赋值给一个变量，并且通过变量名进行调用
let fn = function () {}
立即执行函数：无需额外调用，立即执行，防止变量污染
(function (x, y) { 函数体 })(1, 2); //多个立即执行函数之间必须用分号 ‘;’ 隔开
(function (x, y) { 函数体 }(1, 2));
function getSum(x, y) {
x = x || 0
y = y || 0
console.log(x + y)
}
getSum(1, 2)
x && y
左边为false则中断，右边不会再执行
两边都为真，返回后面一个值
x || y
左边为true则中断，右边不会再执行
两边都为真，返回前面一个值
‘’、0、undefined、null、false、NaN 转换为布尔值后都是false，其余则为true
object：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合（数组是有序的数据集合）
//let 对象名 = {}
let person = {}
对象由属性和方法组成
属性：信息或特征（名词）
方法：功能或行为（动词）
//let 对象名 = { 属性名: 属性值, 方法名: 函数 }
let person = {
name: 'andy',
sayHi: function () {
document.write('hi~~')
}
}
属性和值之间用冒号隔开，多个属性之间用逗号隔开
属性-查
属性访问：获得对象中属性对应的值
语法：
对象名.属性
对象名[‘属性’]——适合于属性名中有短横线之类的字符串情况
console.log(person.name)
console.log(person['name'])
属性-改
语法：对象名.属性 = 新值
person.name = 'jack'
属性-增
语法：对象名.新属性 = 新值
person.age = 18
属性-删（了解）
语法：delete 对象名.属性
delete person.age
对象中的方法
本质就是函数
let person = {
name: 'andy',
sayHi: function () {
document.write('hi~~')
}
}
// 对象名.方法名()
person.sayHi()
对象里面是无序的键值对，没有规律，不像数组里面有规律的下标
let obj = {
uname: 'andy',
age: 18,
sex: '男'
}
for (let k in obj) {
console.log(k) //打印属性名
console.log(obj[k]) //打印属性值
}
注意：遍历对象时，不能使用（对象名.k）这种方式，只能使用（对象名[k]）方法；因为 k 实际上等于 ‘uname’，是带引号的属性名
JavaScript内部提供的对象，包含各种属性和方法给开发者使用
例如：
document.write()
console.log()
Math对象
提供了一系列做数学运算的方法
| 方法名 | 作用 |
|---|---|
| Math.random() | 生成0-1之间的随机数（包含0不含1） |
| Math.ceil() | 向上取整 |
| Math.floor() | 向下取整 |
| Math.max() | 找最大数 |
| Math.min() | 找最小数 |
| Math.pow() | 幂运算 |
| Math.abs() | 绝对值 |
Math.random()
//生成0-1之间的随机数（包含0不含1）
Math.floor(Math.random() * (10 + 1))
//生成0-10的随机数
Math.floor(Math.random() * (M - N + 1)) + N
//生成N-M之间的随机数
本文仅仅简单介绍了JavaScript的基本使用。