  今天闲来无事,复习了一下es6的新语法,翻了下笔记 做了以下总结:

1.箭头函数

箭头函数平时写项目中经常看到,用法也毋庸置疑就是普通函数function的简写, 但是我们常常会忽略掉箭头函数的注意点,注意点如下:

let fn = () => {
            console.log(this);

        };

如果箭头函数只有一个形参,则可以省略小括号
如果箭头函数的函数体只有一行代码,则可以省略大括号,(此时此刻,就必须省略return)
箭头函数没有this (箭头函数的本质就是访问上级作用域的this)

由于箭头函数没有this 所以箭头函数不能作为构造函数
箭头函数也无法修改this,所以不能使用call,apply,bind修改this指向
因为箭头函数没有this,所以箭头函数一般不能作用于事件处理函数

2.展开运算符

展开运算符我的理解就是三个点, 谁要展开就在谁前面加... 语法:

let person = {
        name: '班长',
        age: 38,
        sex: '男'
      }
 let banzhang = {
    ...person, //相当于遍历person的属性名和属性值  赋值给班长对象
      }

一般的应用场景就是连接两个数组和求数组的最大值

3.数组map迭代

一般用于遍历数组,修改每一个数组的值

特点: 回调函数执行次数==数组长度回调函数内部的return:

return更改后新数组的元素
如果没有return,则返回值都是undefined 举例:超过100的商品打八折

let arr = [23, 31, 60, 88, 90, 108, 260];
 //需求： 超过100的商品打八折
 let arr3 = arr.map((value, index) => {
            if(value > 100){
                return value*0.8;
            }else{
                return value;
            }
        });

        console.log(arr3);

4.数组filter遍历

注意点：回调函数执行次数 == 数组长度

数组中有多少个元素，回调函数就会执行几次
filter函数返回的新数组长度 != 原数组长度
回调函数一定要return, 返回一个布尔类型值

结果为true: 当前遍历元素就会添加到新数组中
结果为false：当前遍历元素不会添加到新数组中应用场景:用于筛选数组中满足条件的元素，返回筛选后的新数组

举例:找出数组中的偶数

 let arr = [23, 31, 60, 88, 90, 108, 260];
        let arr1 = arr.filter((item) => {
            return item %2 == 0;
        });

5.数组some遍历

some应用场景：用于判断数组中是否存在满足条件的元素

简单意义的讲,就是就是做非空判断(判断多个表单中有无空文本) 注意点：

回调函数执行次数 != 数组长度
some函数在遍历的时候可以中途结束
some函数返回一个布尔类型值
回调函数返回布尔类型值用于结束遍历

return true; //遍历结束，且some函数返回值为true
(默认) return false; //遍历继续，且some函数返回值为false
需求：判断数组中没有负数

        let arr = [23, 31, 60, 88,-50, 90, 108, 260];
        let arr1 = arr.some((item,index) => {//项目中一般省取index
            console.log(`下标为${index}的元素是${item}`);
            return item<0;
        });

6.数组every遍历

every应用场景：用于判断数组中是否所有元素都满足条件

every与some功能类似，只是写法不同开关思想(购物车的全选框) 注意点：

回调函数执行次数 != 数组长度
every函数返回一个布尔类型值
回调函数返回布尔类型值用于结束遍历

return true; //遍历继续，且every函数返回值为true
(默认)return false; //遍历结束，且every函数返回值为false 需求：判断数组中没有负数

  
        let arr = [23, 31, 60, 88,-50, 90, 108, 260];
 let arr1 = arr.every((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            return item>0;
            
        })

7.数组findindex方法

作用 : 获取符合条件的第一个元素位置(下标)
语法： arr.findIndex( (item,index)=>{ return true/false } )
返回值：符合则返回元素下标，不符合则返回-1
应用场景：适用于数组中元素为对象类型，比传统for循环要高效

  let arr1 = [
            { name: '张三', age: 20 },
            { name: '李四', age: 30 },
            { name: '王五', age: 25 },
            { name: '赵六', age: 33 },
            { name: '小七', age: 10 },
        ];
        
        //1.数组findIndex方法 : 获取符合条件的第一个元素位置(下标)
        //示例：查找arr1中第一个未成年在什么位置
        let res1 = arr1.findIndex((item,index)=>{
            /* 回调函数
            return true : 循环中断，findIndex方法返回值为当前index值
            return false： 循环继续，如果数组全部遍历完还是没有返回true，则finedIndex方法最终返回-1 */
            return item.age < 18;
        });

8-数组reduce方法(最不好理解的一点)

作用 : 遍历数组元素，为每一个元素执行一次回调函数
语法： arr.reduce( (sum,value)=>{ return sum + value } )
返回值：最终sum值
应用场景：数组求和/平均值/最大值/最小值
注意点：最好给一个初始值，避免空数组报错

let arr1 = [20, 55, 80, 70, 92, 35];

        //sum : 初始值，默认为数组第一个元素
        //value : 数组得每一个元素，默认为数组第二个元素
        //res1 : 
        let res1 = arr1.reduce((sum, value) => {
            //这里必须要return，相当于把本次计算得结果赋值给下一次得sum : sum = sum + value;
            return sum + value;
        },0);
        console.log(res1);
        //下面这种写法与上面等价，ES6箭头函数如果只有一行代码则可以省略大括号，且省略return
        console.log(arr1.reduce((sum, value) => sum + value),0);
        //求最大值
        let res2 = arr1.reduce((sum, value) => Math.max(sum, value),0);
        console.log( res2 )

src=http___wx1.sinaimg.cn_large_78b88159gy1g4d4yqmk8hg208c056e1h.gif&refer=http___wx1.sinaimg.gif

花半小时复习ES6语法