JS高级04-ES6语法新特性介绍,结构赋值语法,es6数组迭代方法

码少女壮士

已于 2022-01-24 20:18:43 修改

阅读量399

点赞数

文章标签： javascript 前端 typescript

于 2022-01-06 22:01:08 首次发布

本文链接：https://blog.csdn.net/weixin_40630195/article/details/122353862

版权

01-ES6语法新特性介绍

1.ES6全称：ECMAScript-2015, 是2015年推出的全新的js语法
2.一定要切记：语法的更新，其实就是在原有的语法基础上新增了几个新的语法。而不是说把我们之前学习的js语法给完全替换覆盖。
- 因此，我们学习ES6语法之后，相当于就是在之前的语法基础上，在额外多学几个js语法而已。现在几乎很少有人会把ES5与ES6分的非常清楚。基本上直接拿来用就可以了，哪个方便用哪个。
ES6文档推荐：https://es6.ruanyifeng.com/

1.1-变量声明let与const

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
    1.学习目标 ： 掌握ES6新增两个关键字 let 与 const
      * let 与 const的作用是声明变量，类似于ES5的let关键字
    2.学习路线（对比法学习）
      (1) 复习ES5的let关键字两个特点
      (2) 介绍ES6的let与const关键字的两个特点
      (3) 介绍let与const的区别 与 注意点
*/

      /* 1.ES5语法变量特点 */

      // 1.1 变量会提升
      console.log(num) //undefined
      var num = 10

      // 1.2 没有块级作用域
      for (var i = 1; i < 5; i++) {
        console.log('循环内' + i)
      }

      console.log('循环外' + i) //5

      /* 2.ES6新增两种变量声明方式（let与const），类似于let
     (1).不会提升
     (2).有块级作用域
*/

      // （1）如果打印undefined，说明提升了  （2）如果报错，说明没有提升
      // console.log(a);//报错
      // let a = 10;

      // (2)如果打印5，说明没有块级作用域  （2）如果报错，说明有块级作用域

      for (let j = 1; j < 5; j++) {
        console.log(j)
      }

      // console.log(j);

      /* 3.let与const区别
       * 注意点：ES6中变量不能重复声明，否则会报错
       */

      //let声明：变量，允许修改
      let a = 10
      a = 20
      // let a = 30;//程序报错，不允许重复声明
      console.log(a)

      //const声明:常量，只可以声明的时候赋值一次，之后无法修改
      const b = 100
      // b = 200;//程序报错
      console.log(b)
    </script>
  </body>
</html>

1.2-解构赋值语法

解构赋值语法：其实就是变量赋值语法的简写形式

1.2.1-对象的解构赋值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
    1.学习目标：掌握对象的解构赋值语法
        * 解构赋值本质 就是 变量赋值语法的简写形式
    2.学习路径 ： 对比法学习（ES5与ES6对比）
        （1）取出 对象的属性值 赋值给 变量
        （2）取出 变量的值 赋值给 对象的属性
        （3）设置 解构赋值语法 的默认值

*/

      //解构赋值语法 ： 其实就是变量赋值语法的简写形式

      //1：取出 对象的属性 赋值 给变量

      let obj = {
        name: '张三',
        age: 18,
        sex: '男'
      }

      /* ES5 */
      // let name = obj.name;
      // let age = obj.age;
      // let sex = obj.sex;
      // console.log(name,age,sex);

      /* ES6 */

      /* a.这行代码本质:声明三个变量 name，age，sex。取出右边obj对象对应的属性名赋值给左边的变量*/
      // let {name,age,sex} = obj;
      // console.log(name,age,sex);

      /* b.由于obj对象没有score属性，所以变量score的值为undefined。 */
      // let {name,score} = obj;
      // console.log(name,score);

      /* c. sex:gender 的含义 ： let gender = obj.sex */
      // let {name,sex:gender} = obj;
      // console.log(name,gender);

      //2：取出变量的值 赋值给对象的属性

      // let name = '李四';
      // let age = 20;
      // let sex = '男';
      // let sayHi = function(){
      //     console.log('你好');
      // };

      /* ES5  */
      // let person = {
      //     name : name,
      //     age : age,
      //     gender : sex,
      //     sayHi :sayHi
      // };
      // console.log(person);

      /* ES6 */
      // let person = {
      //     name,//等价于 name:name
      //     age,
      //     gender:sex,//如果属性名和变量名不一致，还是按照以前ES5的写法来赋值
      //     sayHi,
      //     play(){//等价于：play:function(){}
      //         console.log('学习使我快乐');
      //     }
      // };

      // console.log(person);

      //3. 设置 解构赋值语法 的默认值

      let student = {
        name: '班长',
        age: 38,
        sex: '女'
      }
      /* 
    （1）  name = 'kiki'   
        a. 声明变量name : let name;
        b. 取出student对象的name属性值赋值给name : student.name
        c. 如果student对象没有name属性则赋值kiki :   if(student.name){ name = student.name }else{ name = 'kiki' }
    
    (2) sex:gender = '男'
        a. 声明变量gender : let gender;
        b. 取出student对象的sex属性值赋值给gender : student.sex
        c. 如果student对象没有sex属性则赋值男 :   if(student.sex){ gender = student.sex }else{ gender = '男' }
    */
      let { name = 'kiki', score = 88, sex: gender = '男' } = student
      console.log(name, score, gender) //班长 88 女
    </script>
  </body>
</html>

1.2.2-数组解构赋值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //数组解构赋值

      let arr = [10, 20, 30]

      /* ES5 */
      // let n1 = arr[0];
      // let n2 = arr[1];
      // let n3 = arr[2];

      // console.log(n1,n2,n3);

      /* ES6 */
      let [n1, n2, n3 = 50, n4 = 100] = arr
      console.log(n1, n2, n3, n4) // 10 20 30 100
    </script>
  </body>
</html>

1.2.3-函数参数解构赋值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
    1.学习目标 ： 掌握函数参数的解构赋值
    2.学习路线
        （1）复习 函数 传参的本质是 实参给形参赋值的过程
        （2）使用解构赋值语法 给函数传参
        （3）使用解构赋值语法 设置 函数的默认参数
    */

      /* (1) ES5 :函数传参  */

      /**
       * @description:
       * @param {Object}  obj:对象类型  {name:名字 age:年龄 sex:性别}
       * @return:
       */
      // function fn(obj){
      //     console.log(obj);
      //     //声明三个变量接收对象的参数值
      //     let name = obj.name;
      //     let age = obj.age;
      //     let sex = obj.sex;
      //     console.log(name,age,sex);
      // };

      // fn({
      //     name:'kiki',
      //     age:32,
      //     sex:'男'
      // });

      /* (2) ES6 :函数传参  */

      // function fn1({name,age,sex}){
      //     //声明三个变量接收对象的参数值
      //     console.log(name,age,sex);
      // };

      // fn1({
      //     name:'黑马李宗盛',
      //     age:32,
      //     sex:'男'
      // });

      //添加解构语法默认值
      // function fn2({name = '班长',age = 38,sex:gender='女'}){
      //     //声明三个变量接收对象的参数值
      //     console.log(name,age,gender);
      // };

      // fn2({
      //     name:'kiki',
      // });

      /* (3)函数默认参数 */

      /* ES5:使用逻辑或短路运算实现 */
      // function fn(n1,n2,n3){
      //     n1 = n1 || 10;
      //     n2 = n2 || 20;
      //     n3 = n3 || 30;
      //     console.log(n1,n2,n3);
      // };

      // fn(5,8);
      // fn();

      /* ES6:使用解构赋值语法默认值实现 */
      function fn (n1 = 10, n2 = 20, n3 = 30) {
        console.log(n1, n2, n3)
      }

      fn(5, 8)
      fn()
    </script>
  </body>
</html>

1.3-箭头函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
    1.学习目标：学会使用ES6的箭头函数
        * 箭头函数 => 其实是 function 关键字的简写形式
        * 写法： 将function关键字使用 => 符号代替
    2.学习路线
        (1)介绍箭头函数的常见用法 ： 重点
        (2)介绍箭头函数的其他用法 ： 了解
    */

      //1.箭头函数常见用法

      //1.1 无参无返回函数

      /* ES5 */

      let fn = function () {
        console.log('111')
      }
      fn()

      /* ES6
        箭头函数规则： （1）function变成 箭头符号 =>   (2)形参小括号写到箭头 => 左边
        */

      let fn1 = () => {
        console.log('222')
      }
      fn1()

      //1.2 有参有返回函数

      /* ES5 */
      let add = function (a, b) {
        return a + b
      }

      console.log(add(10, 20))

      /* ES6 */
      let add1 = (a, b) => {
        return a + b
      }

      console.log(add1(100, 200))

      //2.箭头函数其他用法

      //2.1 如果函数只有一个形参，则可以省略形参小括号
      let fn2 = a => {
        return a * 2
      }

      console.log(fn2(20)) //40

      //2.2 如果函数体只有一行代码，则可以省略函数体大括号
      //注意点： 如果省略函数体大括号，则返回值也要省略return
      //下面代码等价于：  let fn3 = function(a){ return a*2 }
      let fn3 = a => a * 2

      console.log(fn3(30)) //60
    </script>
  </body>
</html>

1.4-箭头函数中的this

(1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this
(2)箭头函数中的this指向：访问上一个作用域的this
- 说人话：函数在哪个作用域声明，this就是谁 (本质是通过作用域链访问上一个作用域中的this)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /*ES6箭头函数中的this
        (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this
        (2)箭头函数中的this指向 ：访问上一个作用域的this
            说人话：函数在哪个作用域声明，this就是谁 (本质是通过作用域链访问上一个作用域中的this)
        
        */

        //1.全局函数 ： window
        let fn = () => {
            console.log(this);

        };

        fn();//window
        fn.call({ a: 11 });//window   箭头函数中的this无法修改，因为箭头函数没有this

        //2.对象方法： window  (因为对象无法开辟作用域，obj所在作用域还是window)
        let obj = {
            sayHi: () => {
                console.log('学习使我快乐');

                console.log(this);
            }
        };
        obj.sayHi();//window

        //3.局部函数

        let person = {
            play: function () {
                console.log('play中的this');
                console.log(this);//person
                
                //在局部作用域声明一个箭头函数
                let fn2 = () => {
                    console.log('fn2在一级链中被声明，我的this就是一级链中的this');
                    console.log(this);//person
                };
                fn2();
            }
        };
        person.play();
    </script>
</body>

</html>

1.5-展开运算符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 学习目标
1.拓展运算符：   ...
2.作用：类似于  对象遍历的一种简写形式
3.应用场景介绍
*/

      //1.基本使用
      let person = {
        name: '班长',
        age: 38,
        sex: '男'
      }

      let student = {
        score: 99,
        girlFriend: '代码'
      }

      let banzhang = {
        ...person, //相当于遍历person的属性名和属性值  赋值给班长对象
        ...student,
        hobby: '学习'
      }

      console.log(banzhang) //{ name: '班长',age: 38,sex: '男',score: 99,girlFriend: '代码',hobby: '学习' }

      //2.应用场景

      //2.1 连接两个数组
      let arr1 = [10, 20, 30]
      let arr2 = [40, 50, 60]

      /* ES5写法 */
      //concat:连接数组
      // let arr3 = arr1.concat(arr2);
      //连接之后 想要继续添加元素 需要继续调用push
      // arr3.push(70);
      // console.log(arr3);

      /* ES6写法 */
      let arr3 = [...arr1, ...arr2, 70]
      console.log(arr3)

      //2.2 求数组最大值和最小值

      let arr = [88, 25, 60, 90, 100]

      /*  ES5写法 */
      //利用apply传参特点 : 自动遍历arr，逐个传参
      // let max = Math.max.apply(Math,arr);
      // console.log(max);

      /* ES6写法 */
      let max = Math.max(...arr)
      console.log(max)
    </script>
  </body>
</html>

1.6-数据类型Set

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        1. Set :集合。 ES6新增的数据类型，类似于ES5的数组
        2. Set与Array最大的区别 ： Set不支持重复元素
        3. Set经典应用场景 ： 数组去重
      */

      //1.基本使用
      let set1 = new Set([10, 20, 30, 40, 10, 40])
      console.log(set1) //Set(4) {10, 20, 30, 40}

      //2.经典场景：数组去重
      // let arr = [...set1];
      // console.log(arr);//[ 10, 20, 30, 40 ]

      //经典面试题：请使用一行代码实现数组去重
      let arr = [20, 60, 88, 50, 20, 66, 100]

      let arr1 = [...new Set(arr)]
      console.log(arr1) //[ 20, 60, 88, 50, 66, 100 ]
    </script>
  </body>
</html>

02-数组迭代方法

官网文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

以下所有的方法，都可以使用传统的for循环来代替，只是语法不同而已

数组几种遍历介绍(共同点：回调函数一样)	应用场景	回调执行次数	函数返回值	回调是否需要return
map遍历	映射数组	== 原数组长度	新数组(==)	一定要return（当前元素）
`filter遍历`	过滤数组	== 原数组长度	新数组(!=)	return true(元素添加到新数组)
forEach遍历	遍历数组	== 原数组长度	无	无
some遍历	找出符合条件的数	!= 原数组长度	布尔类型	return true；循环结束
every遍历	判断所有元素是否符合条件	!= 原数组长度	布尔类型	return true; 循环继续
findIndex遍历	获取符合条件的第一个元素位置(下标)	!= 原数组长度	数字	return true; 循环结束
includes方法(底层是遍历)	判断数组/字符串是否包含某一个值	无回调	布尔类型	无回调

1.1-数组map遍历

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.map应用场景：利用某种规则映射得到一个新数组
            说人话：遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组
            例如：将数组中的每一个元素+1
            例如：将数组中每一个元素 * 2
            例如：100以上的商品打八折
        2.注意点：
            a. 回调函数执行次数  == 数组长度
                * 数组中有多少个元素，回调函数就会执行几次
            b. map函数返回的新数组长度  ==  原数组长度
            c. 回调函数中一定要return，返回的是当前遍历的元素值
                * 如果不return，新数组中每一个元素都变成了undefined
         */

        let arr = [23, 31, 60, 88, 90, 108, 260];
        //(1)需求：数组中每一个元素+1
        /**
        * @description: 数组map遍历
        * @param {Function}:回调函数 (元素,下标)=>{ return 新元素 }
        * @return: 返回一个新数组
        */
        let arr1 = arr.map((value, index) => {
            return value + 1;//让每一个元素的值+1
        });

        console.log(arr1);

        //(2)需求：数组中每一个元素*2
        let arr2 = arr.map((value, index) => {
            return value * 2;//让每一个元素的值 * 2
        });

        console.log(arr2);

        //(3)需求3： 超过100的商品打八折
        let arr3 = arr.map((value, index) => {
            if(value > 100){
                return value*0.8;
            }else{
                return value;
            }
        });

        console.log(arr3);

    </script>
</body>

</html>

1.2-数组filter遍历

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.filter应用场景：用于筛选数组中满足条件的元素，返回筛选后的新数组
            例如：找出数组中的偶数
        2.注意点：
            a. 回调函数执行次数  == 数组长度
                * 数组中有多少个元素，回调函数就会执行几次
            b. filter函数返回的新数组长度  !=  原数组长度
            c. 回调函数一定要return, 返回一个布尔类型值
                结果为true: 当前遍历元素就会添加到新数组中
                结果为false：当前遍历元素不会添加到新数组中
         */

        let arr = [23, 31, 60, 88, 90, 108, 260];
        //(1)需求：找出数组中的偶数
        /**
        * @description: 数组filter遍历
        * @param {Function}:回调函数 (元素,下标)=>{}
        * @return: 返回一个新数组
        */
        let arr1 = arr.filter((item) => {
            return item %2 == 0;
        });

        console.log(arr1);//[60, 88, 90, 108, 260]]

    </script>
</body>

</html>

1.3-数组forEach遍历

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.forEach应用场景：用于遍历数组，相当于for循环另一种写法
        2.注意点：
            a. 回调函数执行次数  == 数组长度
                * 数组中有多少个元素，回调函数就会执行几次
            b. forEach函数没有返回值
            c. 回调函数不需要return
            	* 就算手动return，也不会结束循环
         */

        let arr = [23, 31, 60, 88, 90, 108, 260];
        /**
        * @description: 数组forEach遍历
        * @param {Function}:回调函数 (元素,下标)=>{}
        * @return: 无
        */
        arr.forEach((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            
        });

    </script>
</body>

</html>

1.4-数组some遍历

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.some应用场景：用于判断数组中是否存在满足条件的元素
        2.注意点：
            a. 回调函数执行次数  != 数组长度
                * some函数在遍历的时候可以中途结束
            b. some函数返回一个布尔类型值
            c. 回调函数返回布尔类型值用于结束遍历
                return true; //遍历结束，且some函数返回值为true
               (默认) return false; //遍历继续，且some函数返回值为false
         */

        //需求：判断数组中没有负数
        let arr = [23, 31, 60, 88,-50, 90, 108, 260];
        /**
        * @description: 数组some遍历
        * @param {Function}:回调函数 (元素,下标)=>{}
        * @return: 布尔类型值
        */
        let arr1 = arr.some((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            // if(item < 0){
            //     return true;//循环结束
            // };
            //简写成
            return item<0;
        });
        console.log(arr1);
        

    </script>
</body>

</html>

1.5-数组every遍历

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.every应用场景：用于判断数组中是否所有元素都满足条件
            * every与some功能类似，只是写法不同
        2.注意点：
            a. 回调函数执行次数  != 数组长度
            b. every函数返回一个布尔类型值
            c. 回调函数返回布尔类型值用于结束遍历
                return true; //遍历继续，且every函数返回值为true
                (默认)return false; //遍历结束，且every函数返回值为false
         */

        //需求：判断数组中没有负数
        let arr = [23, 31, 60, 88,-50, 90, 108, 260];
        /**
        * @description: 数组every遍历
        * @param {Function}:回调函数 (元素,下标)=>{}
        * @return: 布尔类型值
        */
        let arr1 = arr.every((item,index) => {
            console.log(`下标为${index}的元素是${item}`);
            // if(item > 0){
            //     return true;//如果是正数，循环继续
            // }
            //简写成
            return item>0;
            
        });
        console.log(arr1);
        

    </script>
</body>

</html>

1.6-数组findindex方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.数组findIndex方法
            1.1 作用 : 获取符合条件的第一个元素位置(下标)
            1.2 语法 ： arr.findIndex( (item,index)=>{ return true/false } )
                返回值： 符合则返回元素下标，不符合则返回-1
            1.3 应用场景 ： 适用于数组中元素为对象类型，比传统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
             */
            // if(item.age<18){
            //     return true;
            // }else{
            //     return false;
            // };
            return item.age < 18;
        });
        console.log(res1);
    </script>
</body>

</html>

1.7-数组reduce方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

        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 );
        

    </script>
</body>

</html>