一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
一、let与const
声明变量关键字
1.ES5 : var
(1)有预解析 : 声明提前
(2)没有块级 : 分支和循环大括号是全局
2.ES6 : let、const
(1)没有预解析 : 变量先声明,后使用
(2)有块级 : 分支和循环大括号是局部
3. let和const区别
let : 变量。 可以修改
const : 常量。不可以修改
二、解构赋值
01-对象的解构赋值
把对象的属性值 赋值给 变量
let {变量名,变量名,变量名} = obj
2.把变量的值 赋值给 对象
let obj = {变量名,变量名,变量名}
02-数组解构赋值
1.把数组元素 赋值给 变量
let [n1,n2,n3,n4] = arr
2.把变量的值 赋值给 数组
let arr1 = [num1,num2,num3]
03-函数参数解构
console.log(name,age) }
fn({ name: '李四', age: 25 })
三、箭头函数
01-箭头函数 : 相当于function简写
02-箭头函数注意点
2.1 当形参只有一个的时候，可以省略形参小括号
2.2 如果函数体只有一行,则可以省略大括号.（此时必须省略return）
03-箭头函数this指向 : 箭头函数没有this
箭头函数中的this本质是 访问上级作用域this
四、展开运算符
展开运算符: ...
作用 : 类似于对象遍历
场景 :
(1)用于连接数组/对象
(2)用于求数组最大值
//连接对象
let student = {
score: 88,
sex: '男'
}
let obj = {
name: 'ikun',
age: 30,
...student
}
console.log(obj)
//求数组最大值
let newArr = [20,55,60,80,100,90]
console.log( Math.max(...newArr) )
五、数据类型Set
Set数据类型:集合。 （类似于数组）
Set和数组最大的区别是: Set无法存储重复数据
Set应用 : 数组去重
// let set = new Set(arr)
// console.log( set )
//(2)把set转为array
// let newArr = [...set]
// console.log( newArr )
一行代码实现数组去重： let newArr = [...new Set(arr)]
六、数组遍历方法 01-数组map遍历
- map作用与场景 : 映射数组(将数组每一个元素处理之后，得到一个新数组)
举例子: 商品打8折 (数组中每一个元素都要 乘以 0.8)
经典场景 : 数据驱动渲染dom树(将数组直接渲染到页面)
2.语法特点 :
2.1 循环执行次数 == 数组长度
2.2 回调函数内部return作用
(1)return 新元素值
(2)没有return,新元素都是undefined
2.3 map本身返回值作用
隐射之后的新数组
/完整写法
// let res = arr.map( (item,index)=>{
// return item*0.8
// })
//简写
let res = arr.map( item=>item*0.8 )
console.log( res )
02-数组filter遍历
- filter作用与场景 : 筛选数组
经典场景 : 筛选,根据条件筛选数组，将符合条件的元素放入新数组中
2.语法特点 :
2.1 循环执行次数 == 数组长度
2.2 回调函数内部return作用
(1)return true : 满足筛选条件，当前元素放入新数组中
(2)return false : 不满足筛选条件，当前元素不放入新数组中
2.3 map本身返回值作用
筛选之后的新数组
let arr = [20, 61, 80, 95, 100]
//需求：筛选出数组中的偶数
//完整写法
// let res = arr.filter((item, index) => {
// console.log(item, index)
// if(item % 2 == 0){
// return true
// }
// })
//简洁写法
let res = arr.filter(item=>item % 2 == 0)
console.log( res )
03-数组forEatch遍历
- forEach作用与场景 : 遍历数组
类似于for循环遍历数组
2.语法特点 :
2.1 循环执行次数 == 数组长度
2.2 回调函数内部return作用
无
2.3 forEach本身返回值作用
无
let arr = [20, 61, 80, 95, 100]
arr.forEach( (item,index) => {
console.log(item,index)
})
04-数组some遍历
- some作用与场景 : 判断数组中是否有满足条件的元素 ( 逻辑或|| )
经典场景 : 非空判断。 多个表单只要有一个是空的,就不能提交
2.语法特点 :
2.1 循环执行次数 != 数组长度
2.2 回调函数内部return作用
(1)return true : 循环结束。 找到满足条件的元素,此时some的返回值也是true
(2)return false : 循环继续。没有找到满足条件的元素,如果循环执行完毕还是false，最终some的返回值也是 false
2.3 some本身返回值作用
return true : 有满足条件的元素 return false : 没有满足条件的元素
//需求：判断数组中有没有负数
//完整写法
let res = arr.some((item, index) => {
if( item < 0 ){
return true
}
})
//简洁写法
// let res = arr.filter(item=>item % 2 == 0)
console.log( res )
05-数组every遍历
- every作用与场景 : 判断数组是否所有的元素都满足条件 ( 逻辑与&& )
经典场景 : 开关思想. 购物车全选
2.语法特点 :
2.1 循环执行次数 != 数组长度
2.2 回调函数内部return作用
(1)return true : 循环继续。 当前元素满足条件,继续判断. 如果循环执行完毕还是true,则every返回值就是true
(2)return false : 循环结束。当前元素不满足条件。 every的返回值也是false
2.3 every本身返回值作用
return true : 全部元素都满足条件
return false : 有元素不满足
//需求：判断数组中是否所有的元素都是正数
let arr = [20, 61, -80, 95, 100]
//需求：判断数组中有没有负数
//完整写法
// let res = arr.every((item, index) => {
// if(item>0){
// return true
// }
// })
//简洁写法
let res = arr.every(item=>item>0)
console.log( res )
06-数组findIndex
- findIndex作用与场景 : 找元素下标
数组中的元素是值类型: arr.indexOf()
数组中的元素是引用类型: arr.findIndex()
2.语法特点 :
2.1 循环执行次数 != 数组长度
2.2 回调函数内部return作用
(1)return true : 找到了,循环结束。 此时findIn是当前元素下标
(2)return false : 没找到，循环继续。 如果执行完毕还找不到，最终返回固定值-1
2.3 findIndex本身返回值作用
return -1 : 没有
return 下标 : 有
//需求：判断数组中是否所有的元素都是正数
let arr = [
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:30},
]
let res = arr.findIndex(item=>item.name=='李四')
console.log(res)//-1
07-数组reduce方法
数组reduce方法作用： 为每一个元素执行一次回调,并最终返回最后一次结果
经典应用： 求数组累加和
第一个参数:回调 (sum,value,index)=>{}
sum : 累加和变量
value:当前元素
index: 当前下标
return : 下一次回调sum的值
第二个参数: sum初始值
如果不传，sum默认是第一个元素值
一般要传0, 如果不传空数组的话reduce直接报错
标准写法
let res = arr.reduce( (sum,value,index)=>{
console.log(sum,value,index)
return sum+value
} , 0 )
简写
let res = arr.reduce( (sum,value)=>sum+value , 0 )
console.log( res )
