本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
ES6新语法
let与const
- ES5声明变量 var
1.1 有变量预解析 (变量提升,会将var变量声明提升到最顶级,所以可以先使用在定义....)
1.2 没有块级作用域
- ES6声明变量 let const
1.1 没有变量预解析
1.2 有块级作用域
- let与const区别
let : 变量。 可以修改
const : 常量。 不可以修改
- 实际开发中, 只要不修改的变量都用const,需要改的时候用let
解构赋值
解构赋值 ： 变量赋值的简写 使用let {} = 对象/数组
// 我们想将obj里面的值取出来
let obj = {
name:'张三',
age:20,
sex:'男',
}
//以前
// let name = obj.name let .......
//使用解构赋值
let {name,age,sex} = obj;
//使用{} 会将obj的属性名与大括号里面的值对比,找到了了就赋值到对应的变量上
//如果我们想找sex,但是我们想把它赋值给变量 gender怎么办
//答:我们可以使用冒号 : 将想要赋值的变量写在寻找的属性名后边
let {name,age,sex : gender } = obj;
//这样就会在obj里面找到sex的值 '男' ,然后赋值给 gender
复制代码其实上述let {name,age,sex : gender } = obj中,name和age其实是间写 其实他们是 name:name
在ES6新语法中,如果属性名和属性值一致,那么可以只写一个就可以
在函数内部的方法名,也可以省略function,直接写 方法名(){}
let username = 'admin';
let password = '123456';
let user = {
username,//username : username
password,
eat(){
}
}
复制代码数组解构
和上述一样 只不过{}换成了 [] 其中,如果数量小于数组数量,就按个数赋值,剩余的就不赋值了,如果多了,多出的变量会被赋值undefined
let arr = [10,415,11,51,1];
let [n1.n2,n3] = arr;
复制代码函数解构
函数参数解构: 当函数参数是对象类型,就可以对形参进行解构
function fn( {name,age} ){// let { name,age } = {name:'张三',age:20}
console.log(name,age);
}
fn( {name:'张三',age:20} );
复制代码箭头函数
箭头函数是函数的简写,可以省略function
(1) 将function换成 => (2)将形参的小括号移动到左边
let fn = ()=>{}箭头函数注意点
- 如果箭头函数只有一个形参,则可以省略形参小括号
- 如果函数体只有一行,则可以省略大括号(此时return也要省略)
- 箭头函数没有this指向!!!,在箭头函数打印this会显示window,其实本质是访问上级作用域的this
//(1)箭头函数标准写法
let fn1 = (a,b)=>{
return a+b;
}
console.log( fn1(1,2) );
//(2)如果箭头函数只有一个形参,则可以省略形参小括号
let fn2 = a=>{ return a*2 }
console.log( fn2(8) );
//(3)如果函数体只有一行,则可以省略大括号(此时return也要省略)
let fn3 = a=> a*2 ;
console.log( fn3(66) );
复制代码展开运算符 ...
类似于apply,会自动遍历数组/对象,进行传值
应用:
(1)求数组最大值
(2)真实场景 : 连接数组 （移动端上拉加载更多，服务器会返回下一页数据，需要连接到数组中）
(3)真实场景 : 连接对象 (两个盒子里面的数据,需要合并到一个对象发给服务器)
let obj1 = {
username:'admin',
password:'123456'
}
//把obj1连接到obj2
let obj2 = {
name:'张三',
age:20,
...obj1
// username:'admin',
// password:'123456'
}
复制代码数据类型 集合Set
类似于数组,与数组最大的区别是set不能存储重复元素
场景 : 数组去重
let arr = [10,20,30,50,60,88,20,50,60,90]
console.log(arr)
// //(1)创建Set : 参数是数组,会自动对数组进行去重
// let set = new Set(arr)
// //(2)set转成数组
// let newArr = [...set]
// console.log(newArr)
//一行代码实现数组去重
let arr1 = [ ...new Set(arr) ]
console.log(arr1)
复制代码数组迭代方法
1.map方法 (遍历,返回新数组)
map方法特点
- 回调函数执行次数 == 数组长度
回调函数内部的return
return 新元素
map方法的返回值
- 映射之后的新数组
let arr = [90, 88, 50, 60, 35];
//全场8折： 数组元素 * 0.8
//(1)标准写法
// let res = arr.map((item,index)=>{
// console.log(item,index)//元素 下标
// return item * 0.8
// })
//(2)简洁写法
let res = arr.map( item => item * 0.8 );
console.log(res);
//[72, 70.4, 40, 48, 28]
复制代码2.filter方法 (遍历筛选,返回满足条件的值组成的新数组)
filter方法特点
- 回调函数执行次数 === 数组长度
回调函数内部的return
return true : 当前元素‘满足’筛选条件，会放入新数组中
return false : 当前元素‘不满足’筛选条件，不会放入新数组中
filter方法的返回值
- 筛选之后的新数组
let arr = [90, 88, 50, 60, -35];
//筛选出来小于0的数据
//(1)标准写法
// let res = arr.filter((item,index)=>{
// console.log(item,index)
// if( item < 300 ){
// return true
// }else{
// return false
// }
// })
//(2)简洁写法 ： 比较表达式的运算结果一定是布尔类型
let res = arr.filter(item=>item<300)
console.log( res )
复制代码forEach方法 (遍历数组,无返回值)
数组 forEach 方法作用: 遍历数组
- 类似于for循环遍历
forEach 方法特点
回调函数执行次数 === 数组长度
回调函数内部的return
- 没有
forEach 方法的返回值
- 没有
//就是for循环的简单写法
let arr = [90,88,60,70,50]
arr.forEach( (item,index) =>{
console.log(item,index);
} )
复制代码some方法 (一真则真) 与 every方法(一假则假)
some方法
数组 some 方法作用: 判断数组中有没有元素满足条件 (逻辑或: 一真则真,全假为假)
案例：判断数组中有没有 负数
案例： 非空判断（只要有一个是空,就提示用户）
some 方法特点
- 回调函数执行次数 != 数组长度
回调函数内部的return
return true : 满足条件,循环结束, 此时some自身返回值就是true
return false : 不满足条件,循环继续,如果遍历结束还是false,最终some结果就是false
some 方法的返回值
retur true : 有满足条件元素
retur false : 没有满足条件元素
every方法
数组 every 方法作用: 判断数组是否所有的元素都满足条件（逻辑与：一假则假，全真为真）
- 案例：购物车全选 （所有的商品都要选中）
every 方法特点
- 回调函数执行次数 != 数组长度
回调函数内部的return
return false : 不满足,循环结束,此时every结果为false
return true : 满足,循环继续,如果所有都返回true,最终every结果为true
every 方法的返回值
return true : 所有元素都满足条件
return false : 不是所有元素都满足条件
//需求：判断数组中有没有 负数
//使用some
let arr = [50, 60, -5, 88, 15]
let res = arr.some(item=>item<0);
console.log(res)
//需求：判断数组是否所有元素都是'正数'
//使用every
let arr = [50, 60, 5, 88, 15];
let res = arr.every(item=>item>0);
console.log(res)
复制代码findIndex方法 (获取元素下标)
数组 findIndex 方法作用: 获取元素下标
findIndex()和indexOf() 作用一致都是查询元素下标,应用场景不同
数组.indexOf() : 数组的元素都是‘值类型’
数组.findIndex() : 数组的元素都是‘引用类型’
findIndex 方法特点
- 回调函数执行次数 != 数组长度
回调函数内部的return
return true : 找到了, 循环结束, findIndex得到当前下标
return false : 没找到, 循环继续,如果全部遍历还是false,此时findIndex得到固定值-1
findIndex 方法的返回值
有:下标
没有:-1
let arr = [
{name:'张三',age:18},
{name:'李四',age:20},
{name:'王五',age:22},
]
let res = arr.findIndex(item=>item.name === '李四');
console.log(res) //1
复制代码reduce方法 (每一个元素都执行一次回调函数)
数组reduce方法作用 : 为每一个元素执行一次回调函数,并返回最终结果
场景 : 数组求和
reduce方法特点
- 回调函数执行次数 = 数组长度
- 回调retun : 下一次的sum的值
- reduce方法的返回值 最后一次sum的值
let arr = [20,50,70,60]
//(1)标准写法
// let res = arr.reduce( (sum,item,index)=>{
// console.log( sum,item,index);
// return sum + item
// } , 0 )
//(2)简写
let res = arr.reduce( (sum,item)=>sum+item , 0);
console.log(res);
复制代码注意
其中回调函数后的参数是给回调函数第一个参数赋初值,如果给初值,则回调函数第一个值默认为数组的第一个值