JS基础复习总结
JavaScript是一种运行在**客户端(互联网)**的一种编程语言,实现人机交互。它可以动态地改变网页内容、添加动画效果,甚至与服务器进行通信。它由ECMAScript(基础语法)和web APIS(BOM、DOM)组成。
基础语法
JS简介
引入方式
- 通过
script
标签包裹 JavaScript 代码
<body>
<!-- 内部js -->
<script>
// 页面弹出警示框
alert('你好,js~')
</script>
</body>
- 将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过
script
标签的src
属性引入
<body>
<script src="./js/my.js">
// 中间不要写内容
// 如果 script 标签使用 src 属性引入了某 .js 文件,那么此处标签的代码会被忽略!!
alert(666);
</script>
</body>
注释
-
单行注释:ctrl + /
-
多行注释:shift + alt + a
输入输出
-
输出:
alert()
、document.wirte()
、console.log('')
-
输入:
prompt()
<script>
// 1. 文档输出内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')
// 2. 控制台打印输出 给 程序员
console.log('看看对不对')
console.log('日志')
// 3. 输入语句
prompt('请输入您的年龄:')
</script>
变量
变量就是一个装东西的盒子,是计算机用来存储数据的容器
注意:变量不是数据本身,它只是存储数据的容器
let
和var
来声明(定义)变量
<script>
// 1. 声明一个年龄变量
// let age
// // 2. 赋值 = 赋值
// age = 18
// console.log(age)
// 3. 声明的同时直接赋值 变量的初始化
// let age = 18
// 小案例
let num = 20
let uname = '橙子'
console.log(num)
console.log(uname)
// 也可以声明和赋值同时进行
let str = 'hello world!'
alert(str);
</script>
常量
当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let
<script>
// 1.常量 不允许更改值
// const PI = 3.14
// console.log(PI)
// PI = 3.15
// console.log(PI)
// 2. 常量声明的时候必须赋值
// const PI
</script>
数据类型
JS数据类型主要分为两大类:基本数据类型和引用数据类型
基本数据类型
- 数字类型:分为小数、正数、负数等
<script>
let score = 100 // 正整数
let price = 12.345 // 小数
let temperature = -40 // 负数
document.write(typeof score) // 结果为 number
document.write(typeof price) // 结果为 number
document.write(typeof temperature) // 结果为 number
</script>
- 字符串类型:通过单引号(
''
) 、双引号(""
)或反引号包裹的数据都叫字符串,一般使用单引号
<script>
let user_name = '小明' // 使用单引号
let gender = "男" // 使用双引号
let str = '123' // 看上去是数字,但是用引号包裹了就成了字符串了
let str1 = '' // 这种情况叫空字符串
documeent.write(typeof user_name) // 结果为 string
documeent.write(typeof gender) // 结果为 string
documeent.write(typeof str) // 结果为 string
</script>
- 布尔类型:它有两个固定的值
true
和false
,表示肯定的数据用true
,表示否定的数据用false
let isCool = false
console.log(isCool)
- 未定义类型(undefined):只声明,未定义
<script>
// 只声明了变量,并末赋值
let tmp;
document.write(typeof tmp) // 结果为 undefined
</script>
- null:通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为
object
引用数据类型
对象(object),是一种无序的数据集合。它由属性和方法两部分构成
语法:
<script>
// 通过对象描述一个人的数据信息
// person 是一个对象,它包含了一个属性 name
// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
let person = {
name: '小明', // 描述人的姓名
age: 18, // 描述人的年龄
stature: 185, // 描述人的身高
gender: '男', // 描述人的性别
};
// 访问人的名字
console.log(person.name) // 结果为 小明
// 访问人性别
console.log(person.gender) // 结果为 男
// 访问人的身高
console.log(person['stature']) // 结果为 185
// 或者
console.log(person.stature) // 结果同为 185
</script>
方法和调用
<script>
let obj = {
uname: '刘德华',
// 方法
song: function (x, y) {
// console.log('冰雨')
console.log(x + y)
},
dance: function () { }
}
// 方法调用 对象名.方法名
// console.log(obj.song(1, 2))
obj.song(1, 2)
// document.write('123')
</script>
遍历对象
let obj = {
uname: 'orange'
}
for(let k in obj) {
// k 属性名 字符串 带引号 obj.'uname' k === 'uname'
// obj[k] 属性值 obj['uname'] obj[k]
}
内置对象
1.Math是 JavaScript 中内置的对象,称为数学对象,这个对象既包含了属性,也包含了许多方法
2.各种方法
- Math.random,生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
- Math.ceil,数字向上取整
// 舍弃小数部分,整数部分加1
Math.ceil(3.4)
- Math.floor,数字向下取整
// 舍弃小数部分,整数部分不变
Math.floor(4.68)
- Math.round,四舍五入取整
// 取整,四舍五入原则
Math.round(5.46539)
Math.round(4.849)
- Math.max,在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13)
- Math.min,在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21)
- Math.pow,幂方法
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
- Math.sqrt,平方根
// 求某数的平方根
Math.sqrt(16)
数据类型的转换
隐式转换:
- 两侧主要有一个字符串,都会把另一个转换成字符串
- 除了+以外的算术运算符,如- * / 等都会把数据转为数字类型
- +作为正号解析可以转换为数字型
<script>
console.log(1 + 1)
console.log('pink' + 1)
console.log(2 + 2)
console.log(2 + '2') // 22
console.log(2 - 2)
console.log(2 - '2') // 0
console.log(+12)
console.log(+'123') // 转换为数字型
</script>
显示转换
- 自己写代码告诉系统转换为什么类型
<script>
let str = '123'
console.log(Number(str))
console.log(parseInt('12px'))//12
console.log(parseInt('12.34px'))//
console.log(parseInt('abc12.94px'))//NaN
// -------------------
console.log(parseFloat('12px')) // 12
console.log(parseFloat('12.34px')) // 12.34
console.log(parseFloat('12.94px')) // 12.94
console.log(parseFloat('abc12.94px')) // NaN
</script>
流程控制
运算符
算数运算符
- 主要包括加、减、乘、除、取余(%)等
// 算术运算符
console.log(1 + 2 * 3 / 2) // 4
let num = 10
console.log(num + 10) // 20
console.log(num + num) // 20
// 1. 取模(取余数) 使用场景: 用来判断某个数是否能够被整除
console.log(6 % 3) // 0
console.log(5 % 3) // 2
console.log(3 % 5) // 3
// 2. 注意事项 : 如果我们计算失败,则返回的结果是 NaN (not a number)
console.log('橙子' - 2)
console.log('橙子' * 2)
console.log('橙子' + 2) // 橙子2
赋值运算符
- 对变量进行赋值的运算符
<script>
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)
</script>
一元运算符
***只有变量能够使用自增和自减运算符
<script>
// let num = 10
// num = num + 1
// num += 1
// // 1. 前置自增
// let i = 1
// ++i
// console.log(i)
// let i = 1
// console.log(++i + 1)
// 2. 后置自增
// let i = 1
// i++
// console.log(i)
// let i = 1
// console.log(i++ + 1)
// 了解
let i = 1
console.log(i++ + ++i + i)
</script>
比较运算符
比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)
<script>
console.log(3 > 5)
console.log(3 >= 3)
console.log(2 == 2)
// 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值
console.log(2 == '2') // true
// console.log(undefined === null)
// === 全等 判断 值 和 数据类型都一样才行
// 以后判断是否相等 请用 ===
console.log(2 === '2')
console.log(NaN === NaN) // NaN 不等于任何人,包括他自己
console.log(2 !== '2') // true
console.log(2 != '2') // false
console.log('-------------------------')
console.log('a' < 'b') // true
console.log('aa' < 'ab') // true
console.log('aa' < 'aac') // true
console.log('-------------------------')
</script>
逻辑运算符
- 可以把多个布尔值放到一起运算,最终返回一个布尔值
<script>
// 逻辑与 一假则假
console.log(true && true)
console.log(false && true)
console.log(3 < 5 && 3 > 2)
console.log(3 < 5 && 3 < 2)
console.log('-----------------')
// 逻辑或 一真则真
console.log(true || true)
console.log(false || true)
console.log(false || false)
console.log('-----------------')
// 逻辑非 取反
console.log(!true)
console.log(!false)
console.log('-----------------')
let num = 6
console.log(num > 5 && num < 10)
console.log('-----------------')
</script>
运算符优先级
语句
一段可以执行的代码,是一个行为,例如分支语句、循环语句
分支语句
- 可以根据条件判定真假,来选择性的执行想要的代码
包括:if分支语句、三元运算符
if分支语句
<script>
//单分支
// 1. 用户输入
let uname = prompt('请输入用户名:')
let pwd = prompt('请输入密码:')
// 2. 判断输出
if (uname === 'pink' && pwd === '123456') {
alert('恭喜登录成功')
} else {
alert('用户名或者密码错误')
}
</script>
<script>
//多分支
// 1. 用户输入
let score = +prompt('请输入成绩:')
// 2. 判断输出
if (score >= 90) {
alert('成绩优秀,宝贝,你是我的骄傲')
} else if (score >= 70) {
alert('成绩良好,宝贝,你要加油哦~~')
} else if (score >= 60) {
alert('成绩及格,宝贝,你很危险~')
} else {
alert('成绩不及格,宝贝,我不想和你说话,我只想用鞭子和你说话~')
}
</script>
三元运算符
-
写起来比 if else双分支 更简单
-
符号:? 与 : 配合使用
-
语法:
条件 ? 表达式1 : 表达式2
- 举例:
<script>
// 三元运算符
// 条件 ? 代码1 : 代码2
// console.log(3 > 5 ? 3 : 5)
// if (3 < 5) {
// alert('真的')
// } else {
// alert('假的')
// }
// 3 < 5 ? alert('真的') : alert('假的')
let sum = 3 < 5 ? 3 : 5
console.log(sum)
</script>
循环语句
while循环
<script>
// // 1. 变量的起始值
// let i = 1
// // 2. 终止条件
// while (i <= 3) {
// document.write('我要循环三次 <br>')
// // 3. 变量的变化量
// i++
// }
// 1. 变量的起始值
let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {
document.write('我要循环三次 <br>')
// 3. 变量的变化量
i++
}
</script>
- 中止循环
break
中止整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用(提高效率)
continue
中止本次循环,一般用于排除或者跳过某一个选项的时候
<script>
// let i = 1
// while (i <= 5) {
// console.log(i)
// if (i === 3) {
// break // 退出循环
// }
// i++
// }
let i = 1
while (i <= 5) {
if (i === 3) {
i++
continue
}
console.log(i)
i++
}
</script>
- 无限循环
<script>
while (true) {
let str = prompt('你喜欢晴天吗')
// 退出条件 喜欢
if (str === '喜欢') {
break
}
}
</script>
for循环
1.实现循环的三要素
<script>
// 利用for循环输出三句话 爱吃水果
for (let i = 1; i <= 3; i++) {
document.write('爱吃水果<br>')
}
</script>
2.跳出和终止循环
<script>
// for (let i = 1; i <= 5; i++) {
// if (i === 3) {
// continue // 退出本次循环,本次循环中 continue下面的语句不在执行
// }
// console.log(i)
// document.write(i)
// }
// for (let i = 1; i <= 5; i++) {
// if (i === 3) {
// break // 退出整个循环 结束循环
// }
// console.log(i)
// document.write(i)
// }
// 无限循环
for (; ;) {
console.log(11)
}
</script>
3.循环嵌套
<script>
// 外层循环打印 第 n 天
for (let i = 1; i <= 3; i++) {
document.write(`第${i}天<br>`)
// 里层循环打印 第几个单词
for (let j = 1; j <= 5; j++) {
document.write(`记住了第${j}个单词<br>`)
}
}
</script>
数组
数组:(Array)是一种可以按顺序保存数据的数据类型
定义数组
- 通过[]来定义数组,数组中可以存放真正的数据,用英文逗号间隔开
<script>
// 1. 字面量声明数组
// let arr = [1, 2, 'pink', true]
// 2. 使用new Array 构造函数声明 了解
// let arr = new Array(1, 2, 3, 4)
// console.log(arr)
</script>
访问和数组索引
<script>
let classes = ['小明', '小刚', '小红', '小丽', '小米']
// 1. 访问数组,语法格式为:变量名[索引值]
document.write(classes[0]) // 结果为:小明
document.write(classes[1]) // 结果为:小刚
document.write(classes[4]) // 结果为:小米
// 2. 通过索引值还可以为数组单重新赋值
document.write(classes[3]) // 结果为:小丽
// 重新为索引值为 3 的单元赋值
classes[3] = '小小丽'
document.wirte(classes[3]); // 结果为: 小小丽
</script>
操作数组
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 1. push 动态向数组的尾部添加一个单元
arr.push('Nodejs')
console.log(arr)
arr.push('Vue')
// 2. unshit 动态向数组头部添加一个单元
arr.unshift('VS Code')
console.log(arr)
// 3. splice 动态删除任意单元
arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
console.log(arr)
// 4. pop 删除最后一个单元
arr.pop()
console.log(arr)
// 5. shift 删除第一个单元
arr.shift()
console.log(arr)
</script>
函数
函数就是被设计为执行特定任务的代码块,即把具有相同或相似逻辑的代码包裹起来,通过函数来调用执行这些代码逻辑。
函数声明和调用
声明
- 一个完整函数包括关键字、函数名、形式参数、函数体、返回值
函数调用
<script>
// 声明(定义)了最简单的函数,既没有形式参数,也没有返回值
function sayHi() {
console.log('嗨~')
}
// 函数调用,这些函数体内的代码逻辑会被执行
// 函数名()
sayHi()
// 可以重复被调用,多少次都可以
sayHi()
</script>
函数传参
- 通过向函数传递参数,使函数更加灵活多变
<script>
// 2. 求 1~100 累加和
// function getSum(end) { // end = 50
// // console.log(end)
// let sum = 0
// for (let i = 1; i <= end; i++) {
// sum += i
// }
// console.log(sum)
// }
// getSum(50) // 1~50
// getSum(100) // 1~100
function getSum(start, end) { // end = 50
// 形参 形式上的参数
// console.log(end)
let sum = 0
for (let i = start; i <= end; i++) {
sum += i
}
console.log(sum)
}
getSum(1, 50) // 调用的小括号里面 实参 - 实际的参数
getSum(100, 200) // 实参 - 实际的参数
</script>
函数返回值
-
在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
-
函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行,所以return 后面的数据不要换行写
-
return会立即结束当前函数
-
函数可以没有return,这种情况默认返回值为 undefined
<script> // // 函数的返回值 // function fn() { // return 20 // } // // fn() 调用者 相当于执行了 fn() = 20 // // return 的值返回给调用者 // // console.log(fn()) // // let num = prompt('请输入数字') // let re = fn() // console.log(re) // 求和函数的写法 function getTotalPrice(x, y) { return x + y // return 后面的代码不会被执行 } // console.log(getTotalPrice(1, 2)) // console.log(getTotalPrice(1, 2)) let sum = getTotalPrice(1, 2) console.log(sum) console.log(sum) function fn() { } let re = fn() console.log(re) // undefined </script>
作用域
全局作用域
全局有效→作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
局部作用域
局部有效→作用于函数内的代码环境,就是局部作用域
<script>
let num = 10 // 1. 全局变量
console.log(num)
function fn() {
console.log(num)
}
fn()
// 2. 局部变量
function fun() {
let str = 'pink'
}
console.log(str) // 错误
</script>
匿名函数
-
没有名字的函数,无法直接使用;
-
需要将匿名函数赋值给一个变量,并通过变量名进行调用
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()
- 立即执行函数:为了防止变量污染;无需调用,立即执行
(function(){ xxx })();
(function(){xxxx}());