Es6常用语法

顾九七

已于 2023-04-18 10:24:51 修改

阅读量553

点赞数

分类专栏： js 文章标签： javascript

于 2020-12-18 18:37:54 首次发布

本文链接：https://blog.csdn.net/qq_44681872/article/details/111387375

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1、let const

let 定义与const 定义暂时性死区：只要当前作用域声明过某个变量，那么声明前使用该变量就会报错。

let 定义的变量可以改变，const 定义的为常量，不可改变，但const定义的对象可以添加属性

        const a = 10
        a=20
        console.log(a)   //报错

        const a = {
            name : "csdn"            
        }
        a.age = 18
        console.log(a)   //打印对象a{name:"csdn",age:18}

//ES5中的var在全局作用域下定义的变量等价于window对象的属性，let定义的不等价于window，属于global,但不可访问
		var a = 10
        function fn(){
            var a=b=20
            console.log(a)   //20
        }
        fn()
        console.log(a)   //10
        console.log(b)   //20

2、数组的解构赋值

        let [a,b] = [1,2]
        console.log(a)   // 1
        console.log(b)   // 2
        let [a,b,c] = [1,2]
        console.log(a)   // 1
        console.log(b)   // 2
        console.log(c)   //undefined
        let [a,b] = [1,[2,3]]
        console.log(a)   // 1
        console.log(b)   // [2,3]
        let [a,b] = [1,[2,3]][1]   //此处[1]为下标取值，取出[2,3],赋值给[a,b]
        console.log(a)   // 2
        console.log(b)   // 3
		let [a,b,c,d] = "baby"
        console.log(a,b,c,d)   // b a b y

3、对象的解构赋值

        let {n:xxx,m:yyy} = {n:"sky",m:"blue"}  //等价于 let {n,m} = {n:"sky",m:"blue"}
        console.log(xxx,yyy)   // sky  blue
 
		//对象只要属性对应，属性值改变顺序或者属性改变顺序都没有影响
		let obj = {m:yyy,n:xxx} = {n:"sky",m:"blue"}
        console.log(xxx,yyy)    // sky blue

		// 定义时，属性名和变量名相同，可简写，不一定都要简写
        let {n,m} = {n:"sky",m:"blue"}  // 等价于{n:n,m:m} = {n:"sky",m:"blue"}
        console.log(n,m)    // sky blue
		// 意为 将对象Math里面的random 函数、floor 函数赋值给变量random、floor
        let {random,floor} = Math
        random = Math.random
        floor = Math.floor
        console.log(random())   //任意一个随机数
        console.log(floor())   //NaN

		// 新手注意，此处的`不是单引号，是Esc下面的那个键
		function show(obj){
            console.log(`${obj.name}都${obj.age}岁了，还那么慢并且卡`)
        }
        show({name:"csdn",age:21})
		// 也可写成
		let {name,age} = obj
        console.log(`${name}都${age}岁了，还那么慢并且卡`)

4、函数参数的解构赋值

        function fn([a,b]){
            console.log(a+b)
        }
        fn([2,3])   //5
        fn([4,7])   //11

            function fn({name,age}){
                console.log(`${name}${age}岁了`)
            }
            fn({name:"csdn",age:21})  //csdn21岁了

4、解构的默认值

        function fn(arr){
            let [a,b=8,c = 6] = arr
            console.log(a,b,c)
        }
        fn([1])     //[1,8,6]
        fn([1,2])   //[1,2,6]
        fn([1,2,3])  //[1,2,3]

        let {n:name,a:age=16,s:sex="女"} = {n:"小花"}
        console.log(name,age,sex)   //小花  16  女
		//任何一个属性无赋值，都是undefinedi

        function fn({a=88,b=99}){
            console.log(a,b)
        }
        fn({a:10})    //10  99
        fn({})     //88  99
        fn()      //报错

        //有实参用实参，无实参用默认
        function fn({a,b} = {a:20,b:30}){
            console.log(a,b)
        }
        fn({a:10})    //10 undefined
        fn({})     //  undefined  undefined
        fn()     //20  30

        function fn({a=88,b=99} = {a:20,b:30}){
            console.log(a,b)
        }
        fn({a:10})    //10 99
        fn({})     //  88 99
        fn()     //20  30

        let [a=10,b=20,c=30] = [70,undefined,90]
        console.log(a,b,c)   //70  20  90
        let [a=10,b=20,c=30] = [70,null,90]
        console.log(a,b,c)   //70  null  90

5、扩展运算符

…可拆解拥有iterator接口的数组、对象

        console.log(Math.max([4,5,6]))   // NaN
        console.log(Math.max(...[4,5,6]))   // 6  其等价于 Math.max(4,5,6)
        console.log(..."fortune")    // 等价于 f o r t u n e

        let arr1 = [1,2,3]
        let arr2 = [4,5,6]
        console.log(arr1.concat(arr2))   // [1,2,3,4,5,6]  等价于 [...arr1,...arr2]

6、函数rest参数-参数不确定

        function sum(){
            let result = 0
            for(let i=0; i<arguments.length;i++){
                result  += arguments[i]
            }
            console.log(result)
        }
        sum(1,2)   //3
        sum(4,6,5)   //15
        sum(3,7,9,2)   //21

    // 上面代码可写为如下，...c代表一个数组，存储着不确定的参数    
		function sum(...c){
            console.log(c.reduce((a,b) => a+b))   // reduce，与迭代函数map/filter差不多，都可遍历数组中的每一项。a为previewData,b为current。
        }
        sum(1,2)   //3
        sum(4,6,5)   //15
        sum(3,7,9,2)   //21

这里的rest函数要比用arguments好，arguments是一个类数组，有些方法是没有的。打印arguments，是一个对象，arguments.forEach是undefined，c.forEach是一个函数。

7、forin循环–Es5

        let arr = [3,5,8,1,9]
        for(let key in arr){
            console.log(key, arr[key])  //key为数组下标
        }                               //0  3  /  1  5  /  2  8  /  3  1  /  4  9
		// 实际是提供一个接口让我们去遍历对象，数组直接用for就可以。forin可以遍历出原型上面的属性，比如：对象是由构造函数构造出来的，它的原型就是构造函数。
        let obj = {
            name : "csdn",
            age : 18,
            sex : "男"
        }
        for(let key in obj){
            console.log(key,obj[key]) // name  csdn  /  age  18  /  sex  男
        }

8、forof遍历–Es

        let arr = [55,66,77,88]
        for(let number of arr){
            console.log(number)    // 55 66 77 88
        }

       let obj = {
            name:"csdn",
            age:21
        }
        for(let objElement of obj){
            console.log(objElement)   //此时会报错
        }


		let obj = {
            name : "csdn",
            age : 18,
            sex : "男"
        }
        for(let objElement of Object.keys(obj)){    // obj.keys  属性  固定写法
            console.log(objElement)          // name  age  sex
        }
        for(let objElement of Object.values(obj)){     // obj.values  属性值  固定写法
            console.log(objElement)          // csdn  18  男
        }
        for(let objElement of Object.entries(obj)){     // obj.entries   属性、属性值组成的数组  固定写法
            console.log(objElement)          // ["name","csdn"] ["age",18] ["sex","男"]
        }
        for(let [key, values] of Object.entries(obj)){   // 解构赋值5 
            console.log(key,values)          // name csdn / age 18 / sex 男
        }

9、symbol

数据类型：number、string、boolean、undefined、null、object(引用/复杂数据类型)

ES6新增：symbol(基础数据类型),当对象中属性太多并且我们想要添加新属性，又怕万一有重复，造成数据错误，就可以用symbol，且具有”独一无二“的属性，每个都是唯一的

不知Es几新增了bigInt，有兴趣可以了解下。

        let a = Symbol()
        let b = Symbol()
        console.log(a,b)   // Symbol() Symbol()
        console.log(a===b)   // false

        // 对象的属性不止可以用字符串来做，也可以用symbol
		let obj = {
            name : "csdn"
        }
        obj[Symbol()] = "1234"
        console.log(obj)    // {name : "csdn", Symbol():"1234"}  只能用forof来读取symbol,或者提前将它赋给一个变量

10、set 数据结构–Es6新增

        // set类似数组，里面要传的也是数组。
        let x = new Set([1,2,3,4,5,6]) 
        console.log(x)       // Set(6){1,2,3,4,5,6}

        //最大作用就是去重
        let arr = [1,2,3,2,1]
        let s = new Set(arr)
        console.log(s);      // Set(3){1,2,3}
		console.log([...s])   // [1,2,3]  Set是具有迭代器的

		// 可简写为
		let arr = [1,2,3,2,1]
        let newarr = [... new Set(arr)]
        console.log(newarr)    // [1,2,3]

		//Set也具有add、delete、clear，Set也有keys、values、entries
		console.log(Set)  // 可查看方法
		s.add(4)		// [1,2,3,4]
		s.delete(3)     // [1,2,4]
		s.clear()       // [],清空

11、map数据结构–Es6新增

        //对象用对象做属性，一个还好，会显示[object Object]:"属性值"，多个对象时，后者覆盖前者，数据丢失。所以键值只能用字符串或者symbol、数字，不能用对象，所以Es6推出map,map可以用任意类型做键值
        let a = "name"
        let b = "age"
        let c = {x:10}
        let d = {y:20}

        let m = new Map()
        m.set(a,"csdn")
        m.set(b, 21)
        m.set(c, "cccc")
        m.set(d, "dddd")
        console.log(m);  // Map(4){"name"=>"csdn","age"=>21,{...}=>"cccc",{...}=>"dddd"}
        console.log(m.get(c))    // cccc

12、数学方法

乘性运算

        console.log(2**3)   //2的3次方，8
        let b = 3
        b **=3
        console.log(b)  // 27 3的3次方

位运算

        //js中是以二进制的32位存储
        let a = 2
        let b = 3
        console.log(a|b)   // 3
        console.log(2.34 | 0)  // 2

在这里插入图片描述

13、parseInt 和 parseFloat

        // ParseInt从第一位非空格开始读数字
        let a = "100px"
        console.log(parseInt(a))                 //100
        console.log(parseInt(a) + 200 + "px")    //300px
        console.log(parseInt("a   300px"))       //NaN
        console.log(parseInt("+200px"))          //200
        console.log(parseInt("-200px"))          //-200
        console.log(parseInt("-300.2"))        //-300
        console.log(parseFloat("-300.2"))        //-300.2
      console.log(isNaN(NaN))                  //true

ES6建议调用parseInt、parseFloat、isNaN时通过Number来调用

        console.log(Number.parseInt("300px"))      //300
        console.log(Number.parseFloat("300.2px"))  //300.2
        console.log(Number.isNaN("300px"))         //false
        console.log(Number.parseInt("110",2))      // 6  将110当做二进制来看
		// parseInt(数值，进制)
        console.log(Number.parseInt(110,2))        // 6  将110当做二进制来看
      console.log(Number.parseInt(1,0))          //无0进制，当做10进制来看  1
        console.log(Number.parseInt(2,1))          //数字不可能比进制大，所以为NaN

  
  #### 13、ES6对象简写
  
  ```javascript
          let age = 16
          let obj = {
              name : "csdn",
              age : age,
              say : function(){
                  console.log("我是"+this.name+",年龄是"+this.age)
              }
          }
          obj.say()
          //简写为：
          let age = 16
          let obj = {
              name : "csdn",
              age,
              say(){
                  console.log("我是"+this.name+",年龄是"+this.age)
              }
        }
          obj.say()