JavaScript
1. JS简介
1.1 js基础简介
1.1.1 是什么？
js是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
1.1.2 做什么？
网页特效、表单验证、数据交互、服务端编程(node.js)
1.1.3 有什么？
ECMAScrpit：规定了js基础语法的规范。
Web APIs：DOM ：操作文档 BOM：操作浏览器
权威网站：MDN
1.2 JavaScript书写位置
1.2.1 内部JavaScript
直接写在html文件里面，用script标签包住
规范：script标签写在</body>上面
拓展：alert（'你好 ，js'）页面弹出警告对话框
<body>
• <h1>123</h1>
• <!-- 内部 js -->
<script>
• alert('你好,js')
• </script>
</body>
1.2.2 外部JavaScript
代码写在以 .js结尾的文件里
语法：通过script标签的src，引入到html页码中
<body> • <h1>456</h1> • <!-- 通过src引入外部 js --> <script src="./my.js"></script> </body>
引入外部js之后，标签内无需在写代码，否则会被忽略。
1.2.3 内联JavaScript
代码写在标签内部，与vue框架书写类似
<button οnclick="alert('月薪过万')">点击我月薪过万</button>
1.3 JavaScript注释
单行注释 ：//
多行注释 ：/* */
1.4 JavaScript结束符
代表语句结束，英文分号 ; ，可写可不写，换行符（回车）会被识别成结束符，所以一个完整的语句，不要手动换行。
为了统一书写格式，要么每句都不写，要么每句都写（按照团队要求）。
1.5 JavaScript输入输出语法
1.5.1 输出语法：
document.write('要输出的内容'); 向文档中输出，在body（页面）中打印输出的内容。
document可以识别标签
<script>
document.write('好的')
document.write('<h1>haode</h1>')
</script>
alert('要输出的内容')；
页面弹出警告对话框
alert('好的')
console.log('控制台打印')；
控制台输出语法，程序员调试使用。（网页F12下的控制台）
1.5.2输入语句：
prompt('你是什么方向的开发')
页面弹出输入框
1.6字面量
字面量（literal）是在计算机中描述 事/物
2. 变量
2.1 介绍
是个容器，是程序在内存中申请的一块用来存储数据的小空间。
2.2 变量的基本使用
声明变量：let 变量名；
给变量赋值：
let name name = ‘昂’
可以直接初始化变量
let name = ‘昂’
let不允许多次声明一个变量，但是可以一次声明多个变量。
2.3 变量的命名规则与规范
1.规则：
必须遵守，不遵守就会报错
-
不能使用关键字（let if for...）
-
只能用下划线_，字母，数字，$组成，且数字不能开头
-
字母严格区分大小写，如Age和age是不同的变量
2.规范：
建议，不遵守不会报错，但不符合通识
-
起名要有意义
-
遵守小驼峰命名法
变量拓展-var
let为了解决var的一些问题
var声明：
-
可以先声明在使用（不合理）
-
var声明过的变量可以重复声明（不合理）
-
比如变量提升，全局变量，没有块级作用域等等
结论：以后声明变量我们统一使用let
变量拓展-数组
数组（Array）是一种可以按顺序保存多个数据的数据类型
声明：let 数组名 = [] 可以存储不同类型的数据
let arr = ['刘','关','张', 18]
取值：数组名[下标]
console.log(arr[1])
3. 数据类型
3.1 JS中的基本数据类型
3.1.1 number 数字型
JS中的正数、负数、小数等 统一称为数字类型。JS是弱数据类型，变量到底属于那种类型，当赋值之后，我们才能确认。Java是强数据类型 例如int a = 3；就必须是整数。
3.1.2 string 字符串型
通过单引号（''）、双引号("")或反引号（``）包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
字符串拼接：使用 + 号拼接（比较麻烦）
console.log('大家好，我叫'+str+'，今年'+age+"岁")
模板字符串：作用 也是拼接字符串，简化之前的+号拼接字符串
``反引号包裹整个语句（英文模式下的波浪号），拼接变量时用${}包裹变量。
console.log(`大家好，我叫${name}，今年${age}岁`)
3.1.3 boolean 布尔型
只有两个值true 和 false
3.1.4 undefined 未定义型
只声明，不赋值，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。
开发场景：如果检测变量是undefined就说明没有值传过来。
3.1.5 null 空类型
null表示值为空
null和undefined的区别：
undefined表示没有赋值
null表示赋值了，但是内容为空
开发场景：如果一个变量里面确定存放的是对象，如果还没准备好对象，可以先放个null。
typeof 关键字检测数据类型
let age = 18 let name = 'aaa' let boo = true let un let nu = null console.log(typeof age) //number console.log(typeof name) //string console.log(typeof boo) //boolean console.log(typeof un) //undefined console.log(typeof nu) //object
3.2 JS中的引用数据类型
-
object 对象
-
function 函数
-
array 数组
4. 类型转换
JS是弱类型数据语言：JS也不知道变量到底属于那种数据类型，只有赋值了才清楚。
注意：使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
4.1 隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：
-
+号两边只要有一个是字符串，都会把另外一个转成字符串
-
除了+以外的算术运算符 比如- * / 等都会把数据转成数字类型
缺点：
-
转换类型不明确，靠经验才能总结
小技巧：
-
+号作为正号解析可以转换成Number
4.2 显式转换
自己写代码告诉系统该转成什么类型
转为数字型：
-
Number（数据）
转成数字类型
如果数据中有其他类型的数据比如字母就会返回NaN（Not A Number）即不是一个数字
NaN也是Number类型的数据，代表非数字
-
parseInt（数据）
只保留整数
-
parseFloat（数据）
可以保留小数
5. 运算符
5.1 算术运算符
+：加
-： 减
*：乘
/：除
%： 取余（前面的数比后面的数小，余数就是前面的数）
先乘除，后加减，从左到右，有括号先算括号。
5.2 赋值运算符
=：将等号右边的值赋给左边，要求昨边必须是一个容器
其他赋值运算符：
+=：加等
-=：减等
*=:乘等
/=:除等
%=：模等
5.3 一元运算符
自增：++ 让变量的值+1
自减：-- 让变量的值-1
i++和++i单独使用没有区别，参与运算就有区别了
i++是先赋值在自增
++i是先自增在赋值
5.3 比较运算符
<：小于
<=：小于等于
==：左右两边是否相等，只要值一样就行，不管数据类型
===：左右两边是否类型和值都相等
!==：左右两边是否不全等
比较结果为boolean，只有true或者false
比较运算符的细节：
-
字符串比较，是比较的字符相对应的ASCII码
从左往右依次比较，如果第一位一样在比较第二位，以此类推，用得少，了解即可
-
NaN不等于任何值，包括他本身
-
尽量不要比较小数，因为小数有精度问题
-
不同类型之间比较会发生隐式转换
5.4 逻辑运算符
逻辑运算符用来解决多重条件判断
&& 逻辑与 一假则假
|| 逻辑或 一真则真
！ 逻辑非 真假取反
逻辑运算符中的短路
&& 左边为false就不在执行，直接返回false
|| 左边为true就不在执行，直接返回true
有五个值是当false来看的
1.false 2.数字0 3.'' 4.undefined 5.null
5.5 运算符优先级
优先级 运算符 顺序
1 小括号 （）
2 一元运算符 ++ -- ！
3 算数运算符 先* / %后+ -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&& 后| |
7 赋值运算符 =
8 逗号 ，
6. 语句
6.1 表达式和语句
-
表达式：表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果 比如；3+4 i+1
-
语句：比如 if语句 for循环语句 alter（）弹出警示框
6.2 分支语句
程序三大流程控制语句
1.顺序结构 2.分支结构 3.循环结构
if分支语句
单分支：
if（表达式）{
...
}
多分支：
if（表达式1）{
...
} else if（表达式2）{
...
}else if（表达式3）{
...
}
三元运算符
条件？条件为真返回：条件为假返回
switch语句
switch（表达式）{
case 值1：（找到和小括号里数据全等的case值，执行他的代码）
代码1
break
......
default:（所有case走完没有符合的“===”就执行default）
代码n
break
}
-
switch case语句一般用于等值判断，不适合与区间判断
-
switch case一般需要配合break关键字使用，没有break会造成case穿透
6.3 循环语句
6.3.1 while循环
while(循环条件){
要重复执行的代码（循环体）
}
例：
let i = 1
while(i<=3){
document.write('我会循环三次<br>')
i++
}
循环三要素
-
变量起始值
-
终止条件（没有终止条件，循环就会一直执行，造成死循环）
-
变量变化量（用自增或者自减 ++ --）
循环退出
-
continue ：结束本次循环，进入下一个循环
-
break：跳出整个循环，不在执行循环
6.3.2 do while循环（了解即可）
6.3.4 for循环
for(起始条件;退出条件;变化量){
循环语句
}
for(let i = 0; i <= 10; i++){
document.write('月薪过万<br>')
}
for循环和while循环的区别
当如果明确了循环的次数的时候推荐使用for循环 （遍历数组）
当不明确循环的次数的时候推荐使用while循环
循环退出
-
continue ：结束本次循环，进入下一个循环
-
break：跳出整个循环，不在执行循环
循环嵌套
for循环中在嵌套一个循环
//外面执行一次，里面执行所有,外面跑一个，里面跑一圈
//外面控制行，里面控制列
for(let w = 0 ; w < 5 ; w++){
for(let n = 0; n < 5 ; n++){
document.write("*")
}
//每行的**打印完要换行
document.write("<br>")
}
6.4 数组
数组（Array）是一种可以按顺序保存多个数据的数据类型
-
元素：数组中保存的每个数据都叫数组元素
-
下标：数组中的数据的编号
-
长度：数组中数据的个数，通过数组的length属性获得
操作数组：
数组本质数据集合，操作数据无非就是 增 删 改 查，语法：
6.4.1 查：
数组[下标]
//1.访问 查
document.write(str[0])
6.4.2 改：
数组[下标] = 新值
//2.改
str[0] = 'cba'
6.4.3 增：
1. arr.push(新增的内容)：将一个或多个元素添加到数组的末尾，并返回该数组的新长度
2. arr.unshift(新增的内容)：将一个或多个元素添加到数组的开头，并返回该数组的新长度
//数组.push(元素)会将元素添加到末尾,并返回数组长度
document.write(str.push('nba'))
//数组.unshift(元素)会将元素添加到开头,并返回数组长度
document.write(str.unshift('nba'))
6.4.4 删：
1. arr.pop()
数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
2. arr.shift()
数组. shift()方法删除数组中的第一个元素，并返回该元素的值
3. arr.splice(操作的下标，删除的个数)
//4.删
//数组.pop()删除最后一个元素，并返回该元素的值
document.write(str.pop())
//数组. shift()方法删除数组中的第一个元素，并返回该元素的值
document.write(str.shift())
// 数组.splice(操作的下标，删除的个数) 删除指定元素
str.splice(1,2)
6.5 冒泡排序
let arr = [6,4,8,2,1,9]
//将数组从小到大排序
//外层循环控制趟数，一共循环几次 arr.length - 1
for(let i = 0; i< arr.length-1;i++){
//内层循环控制对比的次数，每一趟要对比几次 arr.length-i-1
for(let j =0 ;j< arr.length-i-1;j++){
//交换变量
if(arr[j]>arr[j+1]){
let temp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = temp
}
}
}
document.write(arr)
7. 函数
7.1 函数简介
函数：function，是被设计为执行特定任务的代码块
说明：函数可以把具有相同或相似逻辑的代码"包裹"起来，通过函数调用执行这些被"包裹"的代码的逻辑，这么做的优势是有利于精简代码方便复用。
7.2 函数使用
function 函数名(){
方法体
}
函数名命名规范：
-
和变量名基本一致
-
尽量小驼峰式命名法
-
前缀应该为动词
-
命名建议：常用动词约定
函数调用语法：
函数名() 函数一次声明可以多次调用
7.3 函数传参
-
有参函数的声明和调用
调用语法：函数名(传递的参数列表) （多个参数中间用逗号隔开）
-
形参和实参
形参：声明函数时写在函数名右边括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量，实参就是在给变量赋值，开发中尽量保持形参和实参个数一致。
7.4 函数返回值
用return返回数据
语法：return 数据
function fn(){
return 666
}
document.write(fn())
注意事项：
-
return后面不接数据或者函数内不写return，函数的返回值是undefined。
-
return能立即结束当前函数，所以return后面的数据不要换行写，return之后也不要在写代码了，不会被执行。
-
return只能返回一个值，需要返回多个值时，要返回数组。
function hh(a,b){ jia = a+b jian = a-b return[jia,jian] } let ab = hh(1,2) document.write(ab)
7.5 作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
全局作用域：全局有效
局部作用域：函数内有效，因为跟函数有关，所以也称作为函数作用域
块级作用域：{}内有效，比如if()}{} 、for(){}中的{}
全局变量：<script>标签内都可以用
局部变量：函数内可以用
块级变量：{}大括号内可以用
注意：1. 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐。
2. 函数内部的形参可以看做是局部变量
7.6 匿名函数
-
就是没有名字的函数，将匿名函数赋值给一个变量，并且通过这个变量名称进行调用，我们将这个称为函数表达式
语法：
let fn = function(){
//函数体
}
调用：
fn()
-
立即执行函数（避免全局变量之间的污染）
语法：
//方式1
(function(){函数体})();
//方式2
(function(){函数体}());
//不需要调用，立即执行，function()后的小括号放形参，最后面的放实参。
//方式1
(function(){
document.write("立即执行1")
})()
//方式2
(function(){
document.write("立即执行2")
}())
注意：多个立即执行函数之间要用; 分隔开。也就是前一个立即执行函数要以；结尾或者第二个立即执行函数以; 开头。
//方式1
(function(){
document.write("立即执行1")
})();
(function(){
document.write("立即执行11")
})()
//方式2
(function(){
document.write("立即执行2")
}())
;(function(){
document.write("立即执行22")
}())
8. 对象
8.1 对象简介
-
对象（object）：JavaScript里的一种数据类型
-
可以理解为是一种无序的数据集合
-
用来详细的描述某个事物，比如人（姓名，年龄，身高...）
8.2 对象使用
-
对象声明语法
let 对象名 = {} //声明一个person的对象 let person = {} -
对象有属性和方法组成
-
属性：信息或叫特征（名词）
-
方法：功能或叫行为（动词）
-
-
属性
let person = { uname: '张三', age: 18, sex: '男' }-
属性都是成对出现的，包括属性名和值，他们之间使用英文：分隔
-
多个属性之间使用英文，分隔
-
属性就是依附在对象上的变量（外面是变量，对象内是属性）
-
属性名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格，中横线等。
-
-
属性访问
声明对象，并添加了若干属性后，可以使用.或[]获得对象中属性对应的值，称之为属性访问。简单理解就是获得对象里面的属性值。
//对象.属性名 document.write(person.uname) //对象['属性名'] document.write(person['age']) -
对象中的方法
数据行为性的信息称为方法，如跑步，唱歌等，一般是动词性的，其本质是函数。
-
方法是由方法名和函数两部分组成，他们之间使用：分隔
-
方法是依附在对象中的函数
-
方法名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格，中横线等。
//声明人对象 let person = { uname: '张三', age: 18, sex: '男', //方法名：function(){} paoBu: function(){ document.write("跑步啦") } } -
-
对象中方法的访问
在对象中声明方法后我们可以调用它
//调用方法：对象名.方法名() person.paoBu()
8.3 操作对象
8.3.1 查
对象.属性 或者 对象['属性']
对象.方法()
8.3.2 改
对象.属性 = 值
对象.方法 = function(){}
//改 obj.age = 16
8.3.3 增
对象名.新属性名 = 新值
//增 对象.新属性 = 值 obj.sex = '男' //会去对象里面找是否有sex这个属性，如果有则更新值，没有就添加这个属性
8.3.4 删
delete 对象名.属性名
//删 对象. 属性 delete obj.name
8.4 遍历对象
对象没有像数组一样的lebgth属性，所以一无法确定长度。对象里面是无序的键值对，没有规律，不像数组里面有规律的下标。
for in 类似于java的for each
//遍历对象 for in
let it = {
one: 'java',
two: 'php',
tree: 'python'
}
//for(let 变量 in 对象名){}
for(let str in it){
//str现在是对象中的属性名，并没有值
console.log(str)
//这两个都是去找对象中的str属性，并没有会返回undefined
// console.log(it.str)
// console.log(it['str'])
//console.log(it['str'])[]里面的单引号去掉,得到属性值
console.log(it[str])
}
str：得到的是属性名
it[str]：得到的是属性值
8.5 内置对象
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
内置对象Math
方法有：
-
random：生成0-1之间的随机数（包含0不包括1）
-
ceil：向上取整
-
floor：向下取整
-
round：就近取整
-
max：找最大数
-
min：找最小数
-
pow：幂运算
-
abs：绝对值
-
......
//圆周率
console.log(Math.PI) // 3.141592653589793
//0-1之间的随机数，不包含1
console.log(Math.random()) // 0.10872614067085173
//向上取整
console.log(Math.ceil(1.6)) // 2
//向下取整
console.log(Math.floor(1.6)) // 1
//就近取整(负数时往大取整 例如-1.5 就是-1)
console.log(Math.round(1.6)) // 2
//找最大数
console.log(Math.max(1,5,3,4,6,8,94)) // 94
//找最小数
console.log(Math.min(6,5,7,788,55,4)) // 4
//幂运算
console.log(Math.pow(2,2)) // 4
//绝对值
console.log(Math.abs(-5)) // 5
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
