三分钟带你了解ES6新特性！

最新推荐文章于 2024-08-15 10:17:29 发布

Echo H

最新推荐文章于 2024-08-15 10:17:29 发布

阅读量443

点赞数

文章标签： javascript ecmascript6 前端

本文链接：https://blog.csdn.net/weixin_52999343/article/details/110244959

版权

三分钟带你了解ES6新特性

变量和常量

解构赋值

箭头函数

新增方法

前言

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

一、变量和常量

定义变量：Let

定义常量：Const

代码如下（示例）：

<script>
        //1.常量不可以被更改
        const a = 100
        // a = 200;
        console.log(a)

        //2.定义的时候必须赋值
        let str;//先定义
        str = 'abc'// 再赋值
        const STR;
        STR = 'xyz'//常量STR不解析当前行
        console.log(STR)

        //3.命名：如果是一个大自然存在的常量，我们习惯用大写
        const PI = 3.14
    </script>

二、解构赋值

1.数组的解构赋值

代码如下（示例）：

 <script>
        let arr = ['a','b','c']
        let arr2 = [1,2,3]
        //解构数组
        // let [a,b,c] = arr
        //只解构第一个
        let [a] = arr
        //解构第二个 要用,隔开区分
        // let [,b,] = arr

        // alert(a)

        //合并数据：解构的反向使用
        // let longArr = [...arr,...arr2]
        // console.log(longArr)


         //解构2个并把剩余的放在一起：剩余参数rest
          let [a,b,...newArr] = arr
          //alert(b)
          //alert(newArr[0])

          //默认值
          let [n1,n2,n3,n4 = 6] = arr2
          alert(n4)
    </script>

2.对象的解构赋值

代码如下（示例）：

<script>
        //js的数据类型有哪些？
        //Number、String undefined null boolean array object
        //es新增的symbol 计算机认识数据的范围：-2的53次方到2的53次方
        let dlrb = {
              name: '迪丽热巴',
              age:18,
              sex:'女'
        }
        //基本解构：重命名属性-如果重命名，原属性将失效
        //let {name:dlrbNmae,age,sex} = dlrb
        //对象的默认值
       // let {name:dlrbNmae,age,sex,salary:money = 6300} = dlrb
       // alert(money)

       function selfIntroduction({name:dlrbNmae,age,sex,salary:money = 6300}){//形参
      //  alert('我叫'+dlrbNmae+'今年'+age+ '是一个'+sex+'演员')
      //模板字符串 ： `` ${}
      alert(`我叫${dlrbNmae}今年${age}是一个${sex}演员`)
       }
       //调用函数
       selfIntroduction(dlrb)//传入的实参
    </script>

三、箭头函数

代码如下（示例）：

 <script>
        /**
        计算两个数组的和  
        */
        // function sum(a,b) {
        //     let c = a + b
        //     console.log(c)
        // }
        //
        // sum(12 ,13)
        // 使用箭头函数 ： 参数 箭头 语句
        // let numSum = (a, b) => a + b
        // console.log(numSum(1,2))
         
  //箭头函数一、一个参数【可以省略小括号】，一个语句【省略{}，省略了return】
    //let result = n => n*2

    // 箭头函数二： 大于一个参数必须使用小括号括起来，一个语句【省略{}，省略return】
    //   let numSum - (a,b) -> a+b

    // 箭头函数三 ： 没有参数必须写小括号，多语句必须使用大括号，括起来执行语句，必须使用return手动返回结果
        //  let Sayhi = () => {
        //      console.log('你好')
        //      console.log('吃狗粮吗')
        //      console.log('再见')
        //  } 
        //  Sayhi()


    //如果函数有返回值
    let result = n => n*2 //单语句箭头函数默认返回结果

    let rs = function (n) {//有返回值的函数
        return n*2
    }
    console.log(rs(3))
    console.log(result(8))
    </script>