Es6新语法（Vue基础必备）
数组遍历方法
map
1. 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 )
filter
1. 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 => item % 2 == 0)
console.log(res)
forEach
1. 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)
some
1. 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 arr = [20, 61, -80, 95, 100]
//需求：判断数组中有没有负数
//完整写法
// let res = arr.some((item, index) => {
// if( item < 0 ){
// return true
// }
// })
//简洁写法
let res = arr.filter(item => item < 0)
console.log(res)
every
1. 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)
findIndex
1. 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:18},
{name:'李四',age:20},
{name:'王五',age:23},
]
let res = arr.findIndex(item=>item.name=='李四')
console.log(res)//-1
reduce
1.数组reduce方法作用： 为每一个元素执行一次回调,并最终返回最后一次结果
经典应用： 求数组累加和
*代码演示*
let arr = [10,20,30]
//累加和
//(1)声明变量存储结果
let sum = 0
//(2)遍历数组
for(let i = 0;i<arr.length;i++){
//(3)累加
sum += arr[i]
}
// console.log( sum )
/*
第一个参数:回调 (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 )
arguments
1. arguments : 获取函数所有的实参
1.1 是一个伪数组：有数组三要素，不能调用数组方法
2. arguments应用 : 用于参数不确定的函数
例如： arr.push() Math.max() 这些方法参数不限数量的，他们的底层就会用arguments接 收实参
3. 剩余(rest)参数 : 获取函数剩余的参数
语法: function(...形参名){}
注意点: 是一个真数组,剩余参数必须写在末尾位置
4. rest应用 : 一般情况下, rest可以取代arguments
代码演示
function fn(a,b){
console.log( arguments )
console.log(a,b)
console.log(a+b)
}
fn()
fn(10)
fn(10,20)
fn(10,20,30,40)
//例子：写一个函数，求一组数字的和
function getSum(){
let sum = 0
for(let i = 0;i<arguments.length;i++){
sum += arguments[i]
}
return sum
}
console.log( getSum(10,20) )
console.log( getSum(10,20,55,80,90) )
