1. 作用域
1.1垃圾回收机制
1.2闭包
内部函数使用了外部变量 作用：防止全局变量污染
浏览器查看:在对应代码行打断点，然后查看作用域
2.提升
2.1 声明提升(仅做了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(a);//undefined
//注意：变量提升只有var可用 let和const不提升
var a = 1;
console.log(a);//1 （a被赋值了，此时才被提升）
</script>
</body>
</html>
2.2 函数提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//因为用函数声明的方式创建的一个函数，所以js在运行的时候会将这个函数提到作用域的最前面
//即实际运行时会先执行函数声明，再执行函数调用
a()
//函数提升只存在函数声明中
//1.函数声明创建函数（能使用函数声明）
function a() {
console.log('我是函数声明创建的函数')
}
//2.函数表达式创建函数（不能使用函数声明）
//因为函数表达式被储值在b中，且用const定义，所以不能使用函数声明
b()
const b = function () {
console.log('我是函数表达式创建的函数')
}
</script>
</body>
</html>
3.函数
3.1 函数参数(获取的是伪数组)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getsum() {
//函数调用
//arguments是伪数组形式，能够保存所有的实参
//可以循环遍历获取每一个实参
let i
console.log(arguments); //得到所有实参，对象（伪数组）
for (i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
console.log("一共传入了" + i + "个实参");
}
//调用函数，传入实参
getsum(1, 2, 3, 4, 5);
</script>
</body>
</html>
结果：
3.2 剩余参数（获取的是真数组）
3.2.1 一般用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//剩余函数
//使用arr（形参）接受全部实参
function sum(...arr) {
console.log(arr); //真数组
}
sum(1, 2, 3, 4, 5)
</script>
</body>
</html>
3.2.2 剩余参数解决形参和实参个数不匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//剩余函数:实参与形参不一致
//使用arr（形参）接受全部实参
function sum(a, b, ...c) {
console.log(a, b, c); //真数组
}
sum(1, 2, 3, 4, 5)
</script>
</body>
</html>
3 展开运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//展开运算符基本用法
const arr = [1, 2, 3]
console.log(...arr)//1 2 3
const obj = {
uname: 'tony',
age: 18
}
console.log({ ...obj })//注意：此处的obj与对象字面量{}不是同一个对象，而是两个对象，二者并不相等
// {uname: 'tony', age: 18}
//应用：数组的展开=>求最大最小值
const max = Math.max(...arr)
console.log(max)//3
const arr1 = [1, 2, 3]
const arr2 = ['aa', 'bb', 'cc']
// 数组的展开（合并两个数组）
const arr3 = [...arr1, ...arr2]
const obj1 = {
uname: 'kai',
}
const obj2 = {
age: 18
}
//拼接对象
const obj3 = { ...obj1, ...obj2 }
console.log(obj3)//{uname: 'jennie', age: 18}
</script>
</body>
</html>
4 箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const fn = () => {
console.log('hello')
}
fn()
//1.1 如果只有一个形参，可以省略小括号：
const fn1 =(name) => {
console.log(name)
}
fn1('hi')
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const fn = () => {
console.log('hello')
}
fn()
//1.1 如果只有一个形参，可以省略小括号：
const fn1 = (name) => {
console.log(name)
}
fn1('hi')
//1.2 如果函数体只有一条语句，可以省略大括号和return：
// const fn2 = (name) => {return name}
const fn2 = (name) => name
console.log(fn2('hi'))
//1.3 如果箭头函数想返回一个对象，则需要使用（）包含,因为对象的{}会被认为是函数的{}
// const fn3 = () => {
// return {
// name: 'hi',
// age: 19
// }
// }
const fn3=()=>({uname:'hi',age:17})
const res = fn3()
console.log(res)
// 1.4 箭头函数中是没有动态参数arguments的，但是可以用剩余参数...
const fn4=()=>{
console.log(arr)z
}
fn4(1,2,3,4,5)
</script>
</body>
</html>
尤其需注意：在箭头函数中 this指向的是window，所以开发过程中this关键字需要谨慎使用
5 属性和方法的简写
6 解构赋值
6.1 数组的解构赋值
6.1.1 应用1：
<script>
const arr = ['csq', 18, '168']
//数组的解构赋值
const [name, age, height] = arr
console.log(name, age, height)
</script>
6.1.2 应用2（交换两个变量值）:
<script>
let a = 10
let b = 30;
[b, a] = [a, b]
console.log(a, b)
</script>
注意：在js中，除了解构赋值要加分号，当小括号开头和中括号开头时，也要加分号
6.1.3 数组结构的注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.值多-会被忽略掉
const pc = ['小米', '三星', '苹果', '华为']
consle.log(a, b, c)//只输出了前三项
//解决方法：使用剩余参数
console.log(...pc)
//2.变量多，值少
const [a, b, c] = pc
console.log(a, b, c, d, f)//控制台会把多出的几项默认输出为undefined
//3.尽量避免出现undefined
const [a, b, c, d, f = 0] = pc
console.log(a, b, c, d, f)//意思为：如果f有值，就输出f，如果f没有值，就输出0
</script>
</body>
</html>
6.2 对象的解构赋值
注意：1.变量名和属性名必须一直，否则得到undefined
2.变量名不要和外面的冲突，否则会冲突
<script>
const obj = {
name: 'zhangsan',
age: 18,
gender: "male"
}
//对象解构赋值=>对象和顺序无关
const { age, name, gender } = obj;
console.log(name, age, gender);
</script>
6.2.1 解决变量名冲突：
<body>
<script>
const name = 'nihao'
const obj = {
name: 'zhangsan',
age: 18,
gender: "male"
}
//对象解构赋值=>对象和顺序无关
//解决方法：起别名,将name的变量名再命名为uname,防止变量名冲突
const { age, name: uname, gender } = obj;
console.log(uname, age, gender);
</script>
6.2.2 多级对象解构
<body>
<script>
const pig = {
name: '佩奇',
family: {
mother: '猪妈妈',
father: "猪爸爸",
sisiter: '乔治'
}
}
//多级对象解构=>和改名相似
const { family: { mother, father, sisiter } } = pig
console.log(mother, father, sisiter)
</script>
</body>
6.2.3 多级数组对象解构(常用)
<body>
<script>
const pig = [
{
name: '佩奇',
family: {
mother: '猪妈妈',
father: "猪爸爸",
sisiter: '乔治',
},
age:6
}
]
//多级对象解构=>和改名相似
const { name,family: { mother, father, sisiter } } = pig
console.log(mother, father, sisiter)
</script>
</body>
6.3 对象数组的解构
<body>
<script>
const arr = [
{
uname: 'jennie',
age: 26,
gender: "female"
},
{
uname: 'kai',
age: 35,
gender: "male"
}
]
//因为重复使用两个变量名会变量冲突，所以需要将其中一个变量的变量名更改
const [{ uname, age, gender }, { uname: name, age: yearsold, gender: sex }] = arr;
console.log(uname, age, gender, name, yearsold, sex)
</script>
</body>
7.筛选数组filter方法：
<body>
<script>
const arr = [1, 2, 3, 40, 50, 60, 70]
//使用筛选数组将40以上的数值筛选出来
// const newArr = arr.filter(function (ele, item) {
// return ele > 40
// })
//使用箭头函数筛选
const newArr = arr.filter(ele => ele > 40)
console.log(newArr)
console.log(arr)
</script>
</body>
