ES6文档推荐：ES6 入门教程
声明变量let 与 const
1. ES5中声明变量var关键字特点
预解析: 变量提升
没有块级作用域: if和for大括号里面声明的变量不是局部的, 是全局的
2. ES6中声明变量let与const特点:
没有预解析: 变量必须要先声明,才能使用
有块级作用域: if和for大括号里面声明的变量是局部变量
3. let与const的区别:
let: 变量.可以修改变量中的数据
const: 常量.只能在声明的时候赋值一次,不可以修改
<script>
//1.1 没有预解析：变量必须要先声明，才能使用
// console.log( num )//报错 变量不允许在声明之前使用
let num = 10
console.log(num) //10
//1.2 有块级作用域： if和for大括号里面声明的变量是局部
if (true) {
let age = 30
console.log(age) //30
}
// console.log(age)//报错 age is not defined
for (let i = 1; i <= 5; i++) {
console.log(i)
}
// console.log( i )//报错 i is not defined
/* let与const区别 */
//const : 常量。 只能在声明的时候赋值一次,不可以修改
const aaa = '666'
console.log(aaa)
</script>变量的解构赋值
变量的解构赋值: 变量赋值简写语法
1. 重点掌握:对象解构:
(1)取出对象属性 赋值给 变量
语法: let {name, gender, age} = 对象名
场景: 如果函数参数是对象,就可以进行解构
(2)取出变量的值 赋值给 对象的属性
语法: let 对象名 = {name, gender, age}
场景: 获取多个表单的数据,装入对象中
2. 解构赋值其他用法
(1)解构默认值
let {name, gender, age = 18} = obj
(2)自定义解构变量名
let {gender:sex} = obj 相当于 let gender = obj.sex
对象解构
<script>
// (1)取出对象属性 赋值给 变量
let obj = {
name: '张三',
gender: '男',
age: 18
}
// ES5
// let name = obj.name
// let gender = obj.gender
// let age = obj.age
// console.log(name, gender, age)
// ES6解构赋值
let {name, gender, age, hobby} = obj
console.log(name, gender, age, bobby) // bobby is not defined
</script><script>
// (2)取出变量的值 赋值给 对象的属性
let name = '李四'
let gender = '女'
let age = 20
// ES5
// let obj = {
// name: name,
// gender: gender,
// age: age
// }
// console.log(obj)
// ES6
let obj = {
name, // name:name,
gender,
age,
eat(){ // eat:function(){}
console.log('吃东西')
}
}
console.log(obj)
</script>数组解构
<script>
// (1)取出数组的元素 赋值给 变量
let arr = [22,34,56,7]
// let n1 = arr[0]
// let n2 = arr[1]
// let n3 = arr[2]
// let n4 = arr[3]
let [n1, n2, n3, n4] = arr
console.log(n1, n2, n3, n4)
// 取出变量的值 赋值给 数组
let num1 = 11
let num2 = 23
let num3 = 77
let arr1 = [num1, num2, num3]
console.log(arr1)
</script>函数参数解构
<script>
// 今后的开发中,很多函数的参数是对象类型
function fn({uname, pword}){ // {uname, pword} = {{uname:'admin', pword:'123456'}}
// 函数参数进行解构赋值
// let {uname, pword} = obj
console.log(uname, pword)
}
fn({uname:'admin', pword:'123456'})箭头函数
箭头函数用法
1. 箭头函数: 就是function简写
语法: ()=>{}
(1)把function单词 替换成 =>
(2)把形参()移到 => 左边
2. 箭头函数其他用法:
(1)如果箭头函数只有一个形参,则可以省略小括号
a=>{return a*2}
(2)如果箭头函数的函数体只有一行代码,则可以省略大括号,此时必须省略return
a=>a*2
<script>
// 1.箭头函数语法:就是function简写
// function函数
let fn = function () {
console.log('111')
}
fn()
// 箭头函数
let fn1 = () => {
console.log('222')
}
fn1()
// 2.箭头函数其他用法:
// (1)如果箭头函数只有一个形参,则可以省略小括号
// let fn2 = (a) => {return a*2}
let fn2 = a => {return a * 2}
let res2 = fn2(10)
fn2(res2)
// (2)如果箭头函数的函数体只有一行代码,则可以省略大括号,此时必须省略return
let fn3 = a => a * 2
let res3 = fn3(10)
fn3(res3)
</script>箭头函数this指向
箭头函数与function的区别: this的指向不同
1. function函数this指向有三种情况
this环境对象: 谁"调用"我.我就指向谁
(1)全局函数: 函数名() this指向window
(2)对象方法: 对象名.方法名() this指向对象
(3)构造函数: new 函数名() this指向new创建的实例对象
2. 箭头函数this指向:箭头函数没有this
箭头函数中使用this,会访问上级作用域this(原因:作用域链)
<script>
let obj = {
eat: function () {
// eat是function函数,eat里面的this指向obj
let fn1 = function () {
console.log(this) // window
}
fn1()
let fn2 = () => {
console.log(this) // obj
}
fn2()
},
learn: () => {
// learn是箭头函数,learn里面的this没有this
let fn1 = function () {
console.log(this) // window
}
fn1()
let fn2 = () => {
console.log(this) // window
}
fn2()
}
}
obj.eat()
obj.learn()
</script> <script>
/*
箭头函数与function的区别: this的指向不同
1. function函数this指向有三种情况
this环境对象: 谁"调用"我.我就指向谁
(1)全局函数: 函数名() this指向window
(2)对象方法: 对象名.方法名() this指向对象
(3)构造函数: new 函数名() this指向new创建的实例对象
2. 箭头函数this指向:箭头函数没有this
箭头函数中使用this,会访问上级作用域this(原因:(作用域链))
*/
let obj = {
eat: function () {
// eat是function函数,eat里面的this指向obj
let fn1 = function () {
// fn1是function函数,fn1里面的this指向window(普通函数调用
console.log(this) // window
}
fn1()
let fn2 = () => {
// fn2是箭头函数,访问上级作用域(eat函数)中的this
console.log(this) // obj
}
fn2()
},
learn: () => {
// learn是箭头函数,this指向上级（全局）中的this:window
let fn1 = function () {
// fn1是function函数,fn1里面的this指向window(普通函数调用
console.log(this) // window
}
fn1()
let fn2 = () => {
// fn2是箭头函数,访问上级作用域(learn函数)中的this
console.log(this) // window
}
fn2()
}
}
obj.eat()
obj.learn()
</script>展开运算符
1. 展开运算符: ...
2. 作用: 相当于遍历对象简写
3. 应用场景:
(1)连接数组(上拉加载下一页): arr1.push(...arr2)
(2)求数组最大值: Math.max(...arr)
<script>
// 1. 连接数组: 页面上拉加载下一页的时候就需要连接数组
let arr1 = [11, 22, 33, 44]
let arr2 = [55, 66, 77, 88]
// ES5: arr1.push.apply(arr1,arr2)
// arr1.push(arr2[0],arr2[1],arr2[2],arr2[3])
// arr1.push.apply(arr1,arr2)
// ES5: arr1.push(...arr2)
arr1.push(...arr2)
console.log(arr1)
// 2. 求数组最大值
let arr = [12, 23, 44, 5, 67]
// ES5: Math.max.apply(Math, arr)
let max1 = Math.max.apply(Math, arr)
console.log(max1)
// ES6: Math.max(...arr)
let max2 = Math.max(...arr)
console.log(max2)
</script>数据结构Set
1. 数据结构Set (集合) : 类似于数组，与数组唯一的区别是 ： 不能存储重复元素
2. 应用: 数组去重
let newArr = Array.from( new Set(数组) )
<script>
let arr = [11, 22, 33, 44, 33, 56, 11]
// 1. 声明Set
let set = new Set(arr)
console.log(set)
// 2. 把set转成真数组
let newArr = Array.from(set)
console.log(newArr)
// 简写
let newArr = Array.from(new Set(arr))
console.log(newArr)
</script>数组迭代方法
Array: Array - JavaScript | MDN
| 数组几种遍历介绍(共同点：回调函数一样) | 应用场景 | 回调执行次数 | 函数返回值 | 回调是否需要return |
|---|---|---|---|---|
| map遍历 | 映射数组 | == 原数组长度 | 新数组(==) | 一定要return（当前元素） |
filter遍历 | 过滤数组 | == 原数组长度 | 新数组(!=) | return true(元素添加到新数组) |
| forEach遍历 | 遍历数组 | == 原数组长度 | 无 | 无 |
| some遍历 | 判断数组中是否有满足条件的元素 | != 原数组长度 | 布尔类型 | return true；循环结束 |
| every遍历 | 判断数组中所有的元素是否都符合条件 | != 原数组长度 | 布尔类型 | return true; 循环继续 |
| findIndex遍历 | 获取符合条件的第一个元素位置(下标) | != 原数组长度 | 数字 | return true; 循环结束 |
| includes方法(底层是遍历) | 判断数组/字符串是否包含某一个值 | 无回调 | 布尔类型 | 无回调 |
数组map遍历
1. map场景: 映射数组
对数组的每一个元素进行映射处理,得到一个全新数组 映射关系: 每一个元素 * 2
2. map方法特点:
(1)回调执行次数 === 数组长度
(2)本身返回值: 映射之后的新数组
(3)回调函数内部return return 新数组元素值 如果不写return,新数组每一个元素都变成undefined
<script>
let arr = [12, 34, 56, 77, 80]
let newArr = arr.map((value, index) => {
console.log(index, value) // 下标 元素
return value * 2
})
console.log(newArr)
// 简写
let r = arr.map(v => v * 2)
</script>数组filter遍历
1. filter场景: 筛选数组 举例: 找出数组中符合条件的元素
2. filter方法特点:
(1)回调执行次数 === 数组长度
(2)本身返回值:筛选之后的新数组
(3)回调函数内部return return true: 满足筛选条件,当前元素放入新数组中 return false: 不满足筛选条件,当前元素不放入新数组
<script>
let arr = [12, 34, 56, 77, 80]
// 需求: 找出数组中所有的偶数
let res = arr.filter((value, index) => {
if (value % 2 == 0) {
return true
} else {
return false
}
})
console.log(res)
// 简写
let r = arr.filter(v => v % 2 == 0)
console.log(r)
// 需求: 筛选5000-6000之间
let arr1 = [{
name: 'mac',
price: 9800
},
{
name: 'huawei',
price: 6800
},
{
name: 'lenovo',
price: 5800
},
{
name: 'mi',
price: 4800
}
]
let res1 = arr1.filter((value, index) => {
if (value.price > 5000 && value.price > 6000) {
return true
} else {
return false
}
})
// 简写
let r1 = arr.filter(v => v.price > 5000 && v.price < 6000)
console.log(r1)
</script>数组forEach遍历
1. forEach场景: 遍历数组
2. forEach方法特点:
(1)回调执行次数 === 数组长度
(2)本身返回值 无
(3)回调函数内部return 无
<script>
let arr = [12, 34, 56, 77, 80]
arr.forEach((value, index) => {
console.log(index, value)
})
</script>数组some遍历
1. some场景: 判断数组中是否有满足条件的元素 举例:判断数组中有没有负数
2. some方法特点:
(1)回调执行次数 != 数组长度
(2)本身返回值 true: 有满足条件的元素 false: 没有有满足条件的元素
(3)回调函数内部return true: 循环立即结束,并且some方法本身返回true false: 循环继续执行,如果全部遍历结束还是false,则some方法默认返回false
<script>
let arr = [12, 34, -56, 77, 80]
let res = arr.some((value, index) => {
if (value < 0) {
return true
} else {
return false
}
})
console.log(res)
// 简写
let r = arr.some(v => v < 0)
console.log(r)
</script>数组every遍历
1. every场景:判断数组中是否是所有的元素都满足条件 经典场景:开关法
2. every方法特点:
(1)回调执行次数 != 数组长度
(2)本身返回值 true: 全部满足条件 false: 有元素不满足条件
(3)回调函数内部return true: 循环继续,如果全部遍历结束还是true,则every方法默认返回值就是true false: 循环结束.并且every方法本身返回值是false
<script>
let arr = [12, 34, -56, 77, 80]
// 判断数组中是否所有元素都是正数
let res = arr.every((value, index) => {
if (value >= 0) {
return true
} else {
return false
}
})
console.log(res)
// 简写
let r = arr.every(v => v >= 0)
console.log(r)
</script>数组findIndex方法
1. findIndex场景: 获取某个元素下标
应用场景: 与 indexOf() 类似,但是findIndex一般用于对象数组
2. findIndex方法特点
(1)遍历次数 != 数组长度
(2)本身返回值
有元素: 元素下标
没有元素: 固定值-1
(3)回调函数内部return
return true: 找到了,循环立即结束.并且findIndex方法本身返回当前index
return false: 没找到,循环继续.如果全部遍历完还是没有找到,则得到默认返回值-1
<script>
let arr = [
{
name: '张三',
age: 16
},
{
name: '李四',
age: 17
},
{
name: '王五',
age: 18
}
]
let res = arr.findIndex((value, index) => {
if (value.name == '李四') {
return true
} else {
return false
}
})
console.log(res)
// 简写
let r = arr.findIndex(v => v.name == '李四')
console.log(r)
</script>数组reduce方法
1. 概念: 给每一个元素执行一次回调
2. 应用场景: 数组求和,求数组最大值
3. (sum,value,index)=>{sum:上一次的返回值 value:当前元素值 index:当前下标}
sum初始值: 一般给0,否则空数组reduce报错
return: 最后一次回调的结果
<script>
let arr = [12, 34, 56, 77, 80]
let sum = 0
for (let i = 0; i < arr.length; i++) {
if (arr[i] > sum) {
sum = arr[i]
}
}
console.log(sum)
/**
* @description:
* @param {callbackFn}回调函数
* (sum,value,index)=>{sum:上一次的返回值 value:当前元素值 index:当前下标}
* sum初始值: 一般给0,否则空数组reduce报错
* @return: 最后一次回调的结果
*/
// 数组求和
let res = arr.reduce((sum, value, index) => {
console.log(sum, value, index)
return sum + value
}, 0)
console.log(res)
// 求最大值
let res1 = arr.reduce((sum, value) => {
if (sum > value) {
return sum
} else {
return value
}
}, 0)
console.log(res1)
</script>