ES6基本语法

1.ES6的相关概念

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 是ES2015以后的泛称

2.ES6新增语法

2.1 let

ES6中新增的用于声明变量的关键字
它的语法和var是一样的
let 变量名 = 值

用let声明的变量只在其所处的块级有效

<script>

if (true) { 
     let a = 10;
     console.log(a)  //10
 }
console.log(a) // a is not defined

</script>

用let声明的变量不具有变量提升

<script>

  console.log(a); // a is not defined 
  let a = 20;

</script>

2.2 const

语法同let,var一样
const 变量 = 值
用const声明的变量只在其所处的块级有效

<script>

if (true) { 
     const a = 10;
     console.log(a)  //10
 }
console.log(a) // a is not defined

</script>

用const声明的变量不具有变量提升

<script>

  console.log(a); // a is not defined 
  const a = 20;

</script>

2.3 let 与 const 的差异

1. let 声明的叫做变量(后续可以修改内部的值);
   const 声明的叫做常量(后续不能修改内部的值, 也不能修改内部的引用地址)
2. 因为 let 后续可以修改变量的值, 所以他首次定义时, 可以不赋值;
   但是 const 声明的时常量, 后续不能重新修改他的值, 所以首次定义时, 必须赋值

2.4 let、const、var 的区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可以更改	值不可以更改	值不可以更改

2.5箭头函数

就是对 ES5 普通函数的 写法上的一个优化

箭头函数
普通写法: (书写形参) => {书写函数调用时执行的代码}

<script>
     // ES5 函数定义
        function fn() {}
        const fn1 = function () { }

        // ES6 箭头函数
        const fn2 = () => {
            console.log('我是 fn2 箭头函数')
        }
        fn2()
</script>

箭头函数的优化

1. 箭头函数如果只有一个形参的时候, 可以不写前边的小括号(除此之外, 必写)
2. 如果箭头函数的函数体, 只有一行代码, 那么可以省略 大括号(并且会默认将这行代码 return)

<script>
        // 1. 参数只有一个时, 可以不写参数的小括号
        // const fn3 = (a) => {
        //     console.log(a)
        // }
        const fn3 = a => {  //同上面的书写效果是一样的
            console.log(a)  //100
        }
        fn3(100)

        const fn4 = (a, b) => {  //参数两个以上必须写小括号
            console.log(a + b)  //30
        }
        fn4(10, 20)

        // 2. 函数体只有一行代码时, 可以省略掉大括号
        // const fn5 = (a, b) => {
        //     return a + b
        // }
        const fn5 = (a, b) => a + b
        let sum = fn5(100, 200)
        console.log(sum)  //300
</script>

2.6 箭头函数与普通函数的区别

1. 箭头函数内部没有 this; 所以他的 this 取决于书写的时候
2. 箭头函数内部没有 arguments 对象

<script>
       const fn1 = () => {
            // 箭头函数内部没有 arguments 所以这里打印会报错
            console.log(arguments)
        }
        fn1(999, 123, 456)

        function fn() {
            console.log(this)
         }
        fn()    // this === window

        console.log(this)    ===> this === window
        const fn = () => {
            console.log(this)
         }
         fn()

        var obj = {
            a: 1,
            b: '我是对象obj',
            fn: function () {
                console.log(this)
            }
           // console.log(this)    window
           fn1: () => {
              console.log('我是箭头函数的 this',this)
         }
         }

        obj.fn()    // this === obj
        obj.fn1()

</script>

2.7 解构赋值

数组解构

快速从数组或对象中取出成员的一种语法
数组解构赋值时，声明的变量使用 [ ] 包起来

<script>
        var arr = [1, 2]

        // ES5 拿到数组所有成员的方法
        var num1 = arr[0]
        var num2 = arr[1]
        var num3 = arr[2]
        console.log(num1, num2, num3)

        // ES6 解构赋值, 解构数组时, 赋值号左边必须写 中括号, 代表数组的解构赋值
        let [num1, num2, num3] = arr
        console.log(num1, num2, num3)
        
        //多出来的变量值为undefined
</script>

对象解构

数组解构赋值时，声明的变量使用 { } 包起来

<script>
       var obj = {
            a: 11,
            b: 21,
            c: 31
        }

        // ES5 拿到对象所有成员的方法
        var obj1 = obj.a
        var obj2 = obj.b
        var obj3 = obj.c

        console.log(obj1, obj2, obj3)


         *  ES6 解构赋值, 解构对象时, 赋值号左边 必须写大括号, 代表对象的解构赋值
         *  大括号内部必须书写对象的 key

        let { a, b, c } = obj
        console.log(a, b, c)
</script>

3.ES6的内置对象扩展

3.1 展开运算符(扩展运算符)

语法: …数组(对象)
作用: 展开数组或者对象
相当于把数组两侧包裹的中括号去掉

数组

<script>
     var arr = [1, 2, 3]
     console.log(arr)  //[1,2,3]
     console.log(...arr)  //1 2 3

</script>

<script>
      var arr = [1, 2, 3]
      var arr1 = [...arr, 100, 200, 300]
      console.log(arr)  //[1, 2, 3]
      console.log(arr1)  //[1, 2, 3, 100, 200, 300]
</script>

对象

<script>
       var obj = {
            a: 1,
            b: 2
        }
        console.log(obj)  //{a:1,b:2}
        console.log(...obj)  //报错,JS 不支持这样的写法

        var obj1 = {
            ...obj,
            c: 3,
            d: 4
        }
        console.log(obj1)  //{a: 1, b: 2, c: 3, d: 4}

</script>

3.2 Set 和 Map

Set 和 Map都是es6新推出的两种数据结构

Set
Set 类似于数组的一种数据结构
内部按照索引排序(但是不能通过索引取值)
语法 : let s = new Set([数据1, 数据2, 数据3])
特点: 天生不支持重复数据

<script>
        var arr = [1, 2, 3, 4, 5]
        console.log(arr)
        console.log(arr[0]) // 数组允许使用索引获取到对应的值, set 不允许

        let s = new Set([3, 4, 5, 5, 5, 4, 4, 3])
        console.log('原始数据结构', s)
        console.log(s[0])  //undefined


        // 1. size (类似数组的 length); 作用: 获取到当前数据结构中数据的数量
        console.log(s.size)

        // 2. add 方法; 作用: 向当前数据结构中 新增数据
        s.add(100)
        s.add(5)
        console.log('add 后的数据结构', s)

        // 3. has() 作用: 查询当前数据结构中是否拥有该数据; 找到的时候, 返回 true, 否则返回false
        console.log(s.has(100))
        console.log(s.has(5))

        // 4. delete(数据)   作用: 将当前数据结构中的 这个数据删掉
        s.delete(5)
        console.log(s)

        // 5. clear()   作用: 清空当前数据结构
        s.clear()
        console.log('清空后的数据结构 ', s)

        // 6. forEach   作用: 遍历数据结构, 拿到数据结构的每一项
        s.forEach(function (item, key, origin) {
            // set 数据结构是没有 key 所以 item 和 key 打印出来的值都一样
            console.log(item, key, origin)
        })

</script>

Map
和 set 一样, 也不支持重复数据
类似于 对象的 一种数据结构
但是 map 的 key 可以是任意类型的值
语法: var m = new Map([key, value])
在实际开发中, 我们使用 map 的场景一般为 想要将对象的 key 用于字符串之外的数据时使用

<script>
        var obj = {
           a: 1,
           b: 2
         }
        console.log(obj)
        console.log(obj.a)  // 点语法, 将 a 当成一个字符串去对象中查找
        console.log(obj["a"])   // 中括号语法, 去对象的key中查找一个 'a' 

        var m = new Map([key, value])

        var arr = [1, 2, 3]
        var arr1 = [4, 5, 6]
        var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
        console.log('原始数据结构: ', m)


        // 1. size  作用: 返回当前数据结构的 数据长度(多少个)
        console.log(m.size)

        // 2. set() 作用: 向当前数据结构中, 新增数据
        m.set('newKey', [1, 2, 3, 4, 5])
        console.log('set 新增数据后 的数据结构: ', m)

        // 3. get(key) 作用: 获取到指定key 对应的 value
        console.log(m.get(arr))
        console.log(m.get('newKey'))

        // 4. has(key)  作用: 查询数据结构中是否存在当前 key; 存在返回一个 true ,否则返回一个 false
        console.log(m.has('12345'))
        console.log(m.has('newKey'))

        // 5. delete    作用: 删除当前数据结构对应的 key
        m.delete('newKey')
        console.log(m)

        // 6. clear 作用: 清空当前数据结构
        m.clear()
        console.log(m)

        // 7. forEach
        m.forEach(function (item, key, origin) {

             *  item: 对应的 value
             *  key: 对应的 key
             *  origin: 对应的原始数据结构

            console.log(item, key, origin)
        })

</script>