ES6语法
一.let与const
声明标量关键字
1.ES5声明变量 var
1.1 有变量预解析:声明提前
1.2 没有块级作用域:分支和循环大括号是全局
2.ES6声明变量 let 、const
2.1 没有变量预解析
2.2 有块级作用域
3.let与const区别
let:变量.可以修改
const:常量.不可以修改
*实际开发中,只要不修改的变量都用const,需要改的时候用let
二.对象解构赋值
解构赋值:变量赋值的简写(解构精髓:当变量名和对象属性值一致的时候,只需要写一个)
1.取出对象的属性 赋值 给变量
let{name,age,sex} = obj
2.取出变量的属性 赋值 给对象
let obj ={name,age,sex}
三.数组解构赋值
1.取出数组元素赋值给变量
let [n1,n2,n3......] = arr
2.取出变量的值赋值给数组元素
let num1 = 1
let num2 = 2
let arr = [num1,num2]
四.函数参数解构
当函数参数是对象类型,就可以对形参进行解构
//传参本质： 实参给形参赋值
function fn(obj){// let obj = {name:'张三',age:20,sex:'男'}
console.log( obj )
//对函数形参进行解构
let {name,sex,age} = obj
console.log( name,sex,age )
}
function fn1( {name,sex,age} ){// let {name,sex,age} = {name:'张三',age:20,sex:'男'}
console.log( name,sex,age )
}
fn( {name:'张三',age:20,sex:'男'} )
fn1( {name:'张三',age:20,sex:'男'} )
五.箭头函数
1.箭头函数相当于function函数的简写
(1)去掉function,改成箭头 =>
(2)形参小括号写到箭头左边
2.箭头函数语法注意点
2.1 如果箭头函数只有一个形参,则可以省略小括号
2.2 如果箭头函数的函数体只有一行代码,则可以省略大括号(此时必须省略return)
六.箭头函数this指向
1.function函数this有三种指向 : 谁 调用我 , 我就指向谁
普通函数: 函数名() this -> window
对象方法: 对象名.函数名() this -> 对象名
构造函数: new 函数名() this -> new创建实例
2.箭头函数this指向
箭头函数没有this
*箭头函数本质是访问上级作用域中的this
七.展开运算符...
1.展开运算符: ...
相当于对象遍历的简写
2.应用
2.1 连接数组/对象
let arr = [...arr1, ...arr2, 70]
2.2 求数组最大值
let max = Math.max(...arr1, ...arr2)
八.数据类型Set
数据类型Set:集合
*Set相当于是数组类型,和数组Array唯一的区别是不能存储重复元素
场景 : 数组去重
let newArr = [ ...new Set(需要去重的数组) ]
数组迭代方法
一.数组map方法
1.数组map方法作用: 映射数组(将数组每一个元素处理之后,得到一个新数组)
说人话：按照某种映射关系, 把数组的每一个元素给修改了
举例：全场8折: 数组的每一个元素 * 0.8
经典场景: 数据驱动渲染dom树(将数组直接渲染到页面)
- map方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
-
return 新数组的元素
-
如果没有return, 则map的返回值都是undefined
2.3 map方法的返回值
- 返回映射之后的新数组
let arr = [ 88,90,100,20,50 ]
//完整写法
let res = arr.map( (item,index) => {
return item*0.8
} )
//箭头函数如果形参只有一个可以省略小括号， 如果函数体只有一行可以省略大括号(必须省略return)
let res1 = arr.map( item=>item*0.8 )
console.log( res1 )
二.数组filter方法
1.数组filter方法作用: 筛选数组
-
应用场景: 筛选数组,将符合条件的元素放入新数组中
-
举例： 找出数组中所有大于10的元素
- filter方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
-
return true : 符合筛选条件，放入新数组中
-
return false : 不符合筛选条件，不放入新数组中
2.3 filter方法的返回值
- 返回筛选之后的新数组
let res = arr.filter(item=>item >= 50)
console.log( res )
三.数组forEach
1.数组forEach方法作用: 遍历数组
- 应用场景: 和 for(let i=0;i<arr.length;i++){} 功能一致
- forEach方法特点
2.1 回调函数执行次数 == 数组长度
2.2 回调函数内部的return
- 没有返回值
2.3 forEach方法的返回值
-
没有返回值 let arr = [45,60,88,90,20]
arr.forEach((item,index)=>{ console.log(item,index) })
四.数组some方法
1.数组some方法作用: 判断数组中是否有符合条件的元素
-
应用场景: 非空判断（判断多个表单元素，有没有空文本）
-
举例 ： 判断数组中有没有负数
- some方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
-
return true : 循环结束。 找到了满足条件的元素
-
return false : 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是false
2.3 some方法的返回值
-
true : 有符合条件的元素
-
false : 没有符合条件的元素
let res = arr.some(item=>item < 0)
console.log( res )
五.数组every方法
1.数组every方法作用: 判断数组中 是否所有的 元素都满足条件
-
应用场景: 开关思想 (购物车全选框)
-
举例 ： 判断数组中是不是都是正数
- every方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
-
return true : 循环继续, 满足条件,如果所有的元素全部遍历还是true,则最终的结果就是true
-
return false : 循环结束。 只要要到不满足条件的元素，循环结束。最终的结果false
2.3 every方法的返回值
-
true : 所有的元素 都符合条件
-
false : 有元素 不符合条件
let res = arr.every(item=>item>=0)
console.log(res)
六.数组findindex方法
1.数组findIndex方法作用: 查找元素的下标
- 数组的findIndex与indexOf异同点
相同点：功能一致，都是查找元素下标。 有则返回下标，无则返回固定值-1
不同点：应用场景不同
indexOf : 查找数组中的元素都是值类型
findIndex : 查找数组中的元素都是引用类型
- findIndex方法特点
2.1 回调函数执行次数 != 数组长度
2.2 回调函数内部的return
-
return true : 循环结束。 找到了,此时返回值就是下标
-
return false : 循环继续。 没找到，循环继续。 如果所有元素全部遍历还是没找到，最终结果就是-1
2.3 some方法的返回值
- 元素下标 或者 -1
let arr = [
{name:'张三',age:20},
{name:'李四',age:18},
{name:'王五',age:16},
]
let res = arr.findIndex(item=>item.name == '王五')
console.log(res)
七.数组reduce方法
1.数组reduce方法 : 数组累加器方法
- 对数组每一个元素执行一次回调函数,累加最后一次回调的结果
2.reduce场景: 数组元素求和、求数组元素最大值
第一个参数：回调 (上一次值,当前值,当前下标)=>{}
-
默认下标不是从0开始，而是从1开始。 开发中一般需要设置默认值
-
return 值 就是下一次 sum的值
第二个参数: 初始值
- 一般需要设置初始值为0, 如果不设置遇到空数组则会报错
reduce方法返回值是 ： 最后一次sum的结果
//求和
let res = arr.reduce( ( sum,item )=>sum + item , 0 )
console.log( res )
//找最大值
let res1 = arr.reduce((sum,item)=>sum>item?sum:item,0)
console.log(res1)
