JavaScript ES6语法-CSDN博客

JavaScript ES6

是一个官方发布的语法版本，ECMAScript2015，里面定义了新的语法规范

定义变量
定义函数
对象赋值
字符串
新增数据类型
…
出现的问题：不兼容，不用我们考虑，因为后期会学习一些把 ES6 的语法转换成 ES5 的语法工具

let / const 统一和 var 定义变量的区别

在 ES6 里面，有两个定义变量的关键字
- let：变量
- const：常量（特殊的变量）

区别

var 会进行预解析

let 和 const 不会进行预解析
如果使用 let 和 const 定义的变量，必须先声明后使用

	console.log(num) // undefined
    // 在预解析的时候, 会对 var 定义的变量进行提前声明
    // 告诉浏览器这个变量可以使用, 但是还没有进行赋值
    var num = 100
    console.log(num) // 100

    console.log(n1)
    // 因为 let 定义的变量不会进行预解析
    // 所以此时还没有 n1 这个变量出现, 这里使用 n1 就会报错了
    let n1 = 200 // 定义了一个变量, 叫做 n1, 赋值为 200
    console.log(n1) // 报错

	console.log(n2) // 报错
    const n2 = 300
    console.log(n2)

var 可以声明重复的变量名

let 和 const 不允许声明重复变量名
如果使用 let 和 const 定义的变量，必须保证变量名的唯一性

	// 因为 let 和 const 关键字不允许定义重复的变量名
    // 当你写完 定义变量 以后, 就直接报错给你看
    let n2 = 200
    let n2 = 300 // 报错：Identifier 'n2' has already been declared

	const n3 = 300
    const n3 = 400 // 报错：Identifier 'n3' has already been declared

var 没有块级作用域

let 和const 有块级作用域
块级作用域
- 只针对于 let 和 const 定义的变量
- 任何可以书写代码段的大括号 ({}) 都能限制变量的使用范围
- 比如：
  - if () {}
  - while () {}
  - do {} while ()
  - switch () {}
  - for () {}
  - function fn() {}
- 对象不是
  - var obj = { 不是代码段，是数据 }
使用 let 或者 const 定义在某一个代码段里面的变量
- 只能在这个代码段里面使用
- 在当前代码段外面不能使用

块级作用域也是一个作用域

可以再不同作用域定义相同变量名
变量的声明赋值和使用依旧遵循变量访问、使用、定义规则

	if (true) {
      var n1 = 100
      console.log(n1) // 100
    // }
    // 因为 if 并不是一个私有作用域, 所以不会限制 var 的使用范围
    // 此时这个 n1 就是一个全局变量
    console.log(n1) // 100

	if (true) {
      // 因为 let 有块级作用域
      // 所以 此时定义的 n2 只能在当前这个 if 的 {} 里面使用
      // 当离开这个大括号以后, 就不能使用了
      let n2 = 200
      console.log(n2) // 200
    }
    console.log(n2) // 报错：n2 is not defined

if (true) {
      // 因为 const 有块级作用域
      // 所以此时定义的 n3 变量只能在当前这个 if 的 {} 里面使用
      // 离开这个 {} 以后就不能使用了
      const n3 = 300
      console.log(n3) // 300
    }
    console.log(n3) // 报错：n3 is not defined

	let n1 = 100
    if (true) {
      let n1 = 200
      // 这里使用的是 if 的 {} 里面这个块级作用域里的 n1
      console.log(n1) // 200
    }
    // 这里使用的是全局作用域的 n1 变量
    console.log(n1) // 100

let 和 const 的区别

区别	let	const
赋值	let 定义变量的时候可以不赋值	const 定义变量的时候必须赋值
修改	let 定义的变量可以被修改	const 定义的常量不允许被修改
名称	let 叫做变量	const 叫做常量

	let n1
    let n2
    console.log(n1, n2) // undefined undefined

    n1 = 100
    n2 = 200
    console.log(n1, n2) // 100 200

	// const 定义变量的时候如果不赋值, 直接报错
    const n3 // 报错：Missing initializer in const declaration

	// let 定义的变量可以被修改
    let n1 = 100
    console.log(n1) // 100
    n1 = 200 // 给 n1 变量重新赋值, 因为是 let 定义的, 所以可以重新赋值
    console.log(n1) // 200

    const n2 = 200
    console.log(n2) // 200
    n2 = 300 // 给 n2 变量重新赋值, 因为是 const 定义的, 所以不允许被修改, 直接报错

	// const 定义了一个 obj 变量
    // 存储的内容是一个对象的地址
    const obj = {
      name: 'Jack'
    }

    // 根据地址修改得对象空间内部的数据
    // 我并没有给 obj 重新赋值
    obj.name = 'Rose'
    console.log(obj.name) // Rose

    // 现在是使用一个新对象的地址赋值给了 obj
    // 相当于修改了 obj 这个变量存储的内容, 报错：Assignment to constant variable.
    obj = {
      name: 'Jack'
    }
    console.log(obj.name)

let 在代码中的使用

在代码中的使用
- 因为块级作用域的存在，有时候能帮我们解决很多问题
- 比如：循环绑定事件

我们之前在做选项卡的时候

因为使用 var 定义变量
所以在事件里面不能使用 i
因为我们在点击的时候循环已经结束了
所以我们单独把索引保存在了元素身上

<!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>

  <button>1</button>
  <button>2</button>
  <button>3</button>

  <script>
    /*
      需求: 三个按钮, 点击每一个的时候给我对应的索引
    */

    var btns = document.querySelectorAll('button')

    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        // 之所以每次都能打印出对应的索引
        // 是因为 let 的 块级作用域
        // 在循环的过程中相当于有三个 {} 出现
        // 每一个 {} 里面有一个 let 定义的变量 i
        console.log(i)
      })
    }

    /*
      当循环开始的时候
      {
        let i = 0
        btns[0].addEventListener('click', function () { console.log(i) })
      }
      {
        let i = 1
        btns[1].addEventListener('click', function () { console.log(i) })
      }
      {
        let i = 2
        btns[2].addEventListener('click', function () { console.log(i) })
      }
      {
        let i = 3
        结束循环
      }
    */
  </script>
</body>
</html>

<!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>

  <button>1</button>
  <button>2</button>
  <button>3</button>

  <script>
    /*
      需求: 三个按钮, 点击每一个的时候给我对应的索引
    */
    var btns = document.querySelectorAll('button')

    for (var i = 0; i < btns.length; i++) {
      btns[i].setAttribute('index', i)
      btns[i].addEventListener('click', function () {
        // 我需要做的就是点击每一个按钮的时候, 打印出这个按钮对应的索引
        // 因为你点击的时候, 循环已经结束
        // var 又没有块级作用域, 所以其实每次循环的时候 i 都是全局变量
        // 所以打印出来的都是 3
        console.log(i)

        // 要想拿到索引, 需要提前保存一下这个索引在元素身上
        // 使用的时候, 直接拿到当前这个元素身上的 index 自定义属性
        console.log(this.getAttribute('index'))
      })
    }

    /*
      当循环开始的时候
      var i = 3
      {
        btns[0].addEventListener('click', function () { console.log(i) })
      }
      {
        btns[1].addEventListener('click', function () { console.log(i) })
      }
      {
        btns[2].addEventListener('click', function () { console.log(i) })
      }
      {
        结束循环
      }
    */
  </script>
</body>
</html>

箭头函数

在 ES6 的语法里面，箭头函数是对函数表达式的简写

函数表达式 - 也叫作匿名函数

 var fn = function () {  }
 div.onclick = function () {  }
 div.addEventListener('click', function () {  })
 arr.forEach(function () {  })
 setTimeout(function () {  }, 1000)
 setInterval(function () {  }, 1000)
 var obj = {
 fn: function () {  }
 }
 ...

箭头函数的语法
- () => {}
  - ()：表示书写形参的位置
  - =>：表示箭头函数的规定符合
  - {}：表示这个箭头函数的代码段

	// 原先的赋值时函数定义
    let fn = function (a, b) {
      console.log('我是 fn 函数') // 我是 fn 函数
      console.log(a) // 10
      console.log(b) // 20
    }

    fn(10, 20)
    console.log('===========================')

    // 箭头函数赋值时函数定义
    let fun = (a, b) => {
      console.log('我是 fun 箭头函数') // 我是 fun 箭头函数
      console.log(a) // 100
      console.log(b) // 200
    }

    fun(100, 200)

箭头函数的特点

箭头函数 有且仅有一个形参 的时候，可以省略小括号 () 不写

没有形参或者有多个形参时，必须写小括号
当形参有且仅有一个，但是是默认值的时候，小括号不可以省略

 	let fn = (a) => {
      console.log('我是 fn 箭头函数') // 我是 fn 箭头函数
      console.log(a) // 10
    }
    fn(10)

    console.log('============================')

    // 这个 a 就是当前这个函数内部的一个形参
    // 只是因为只有一个形参, 所以把小括号省略了
    let fun = a => {
      console.log('我是 fun 箭头函数') // 我是 fun 箭头函数
      console.log(a) // 100
    }
    fun(100)

箭头函数 只有一句函数执行体 的时候，可以省略大括号 {} 不写，并且会自动把这句函数执行体的结果返回（因此不能加 return）

	// 我的函数的作用就是传递一个数字进来
    // 我给你返回一个这个数字加上 10 的结果
    // 如果你传递一个 20, 那么你能得到一个 30 的结果
    let fn = (a) => {
      return a + 10
    }
    var res = fn(20)
    console.log(res) // 30
    console.log('===================')

    // 当前这个函数只有一句话, 就是 a + 10
    // 并且会在执行函数的时候, 自动把 a + 10 的结果当作这个函数的返回值
    // 当你调用这个函数的时候, 传递进来一个 20
    // 会得到一个 20 + 10 的结果
    let fun = a => a + 10  // => let fun = function (a) { return a + 10 }
    var res2 = fun(20)
    console.log(res2) // 30

箭头函数 没有 arguments 这个所有实参的集合，但是我们可以使用展开运算符 …agr 得到箭头函数的所有实参集合

	let fn = function () {
      console.log(arguments) // Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }
    fn(10, 20, 30)
    console.log('====================')

    let fun = (...agr) => {
      console.log(...agr) // 100 200 300
    }
    fun(100, 200, 300)
    console.log('====================')
    
    let fun2 = () => {
      console.log(arguments) // 报错：arguments is not defined
    }
    fun2(1000, 2000, 3000)

箭头函数里面 没有this关键字

官方：箭头函数里面的 this 是外部作用域的 this，学名叫做 上下文(context)

私人：箭头函数写在哪一行，上一行的 this 就是这个箭头函数里面的 this

	let fn = () => { 
      // 因为箭头函数里面的 this 是外部作用域的 this
      // 当前这个 fn 函数的外部作用域就是全局作用域
      // 又因为全局作用域的 this 就是 window
      // 所以这个函数里面的 this 就是 window
      console.log(this) // this -> window
    }
    fn()

<!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>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div></div>

  <script>
    var div = document.querySelector('div')
    div.onclick = function () {
      let fn = () => { 
        // 因为箭头函数里面的 this 是外部作用域的 this
        // 当前这个 fn 函数的外部作用域是 div 的事件处理函数
        // 又因为 div 的事件处理函数里面 this 指向 div
        // 所以这个 fn 函数里面的 this 指向 div
        console.log(this) // this -> <div></div>
      }
      fn()
    }
  </script>
</body>
</html>

<!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>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div></div>

  <script>
   	var div = document.querySelector('div')
    div.onclick = () => {
      // 这个函数虽然被当作了事件处理函数使用
      // 但是是一个箭头函数
      // 因为箭头函数里面没有 this, 使用的就是外部作用域的 this
      // 又因为当前这个箭头函数的外部作用域就是 全局
      // 全局作用域的 this 就是 window
      // 所以, 此时这个事件处理函数里面的 this 就是 window
      console.log(this) // window
    }
  </script>
</body>
</html>

函数的参数默认值

给函数的形参直接设置一个默认值
- 当你不传递实参的时候就使用默认值
- 当你传递实参的时候就使用你传递的值

书写方式

在直接书写形参的时候使用 等于号（=） 给其赋值（一个默认值）
如果给箭头函数设置形参默认值，那么不管几个形参，都必须写小括号

	// 以前定义参数的方式
	function fn(a, b) {
      console.log(a)
      console.log(b)
    }
    fn(10, 20) // 本次调用的时候 10 赋值给 a, 20 赋值给 b
    fn(30) // 本次调用的时候 30 赋值给 a, b 没有被赋值就是 undefined
    fn() // 本次调用的时候, 没有传递实参, 那么 a 和 b 都是 undefined

	// 带有参数默认值的函数
    function fun(a, b = 200) {
      // 给该函数的形参 b 设置了一个默认值
      // 如果你没有传递第二个实参, 那么 b 的值就是 200
      // 如果你传递了第二个实参, 那么 b 的值就是你传递的实参
      console.log(a)
      console.log(b)
    }

    fun(10, 20) // 本次调用的时候, 10 赋值给了 a, 20 赋值给了 b
    fun(100) // 本次调用的时候, 100 赋值给了 a, b 没有进行赋值, 那么就使用默认值 200
    fun() // 本次调用的时候, 一个参数也没有传递, a 没有默认是就是 undefined, b 使用默认值

 	// 箭头函数也可以使用参数默认值
    let f = (a = 100) => {
      console.log(a)
    }
    f(10) // 本次调用的时候, 10 赋值给了 a
    f() // 本次调用的时候, 没有实参赋值, 那么 a 就使用默认值就是 100

模板字符串

ES6 里面新规定的一种定义字符串的方式

定义
- 使用 反引号（``） 表示字符串
  - 反引号：英文输入模式，tab 的上边， 1的左边
- 和 单引号、双引号 的作用是一样的
- 能使用的字符串常用方法都是一样的

特点

可以直接换行书写

单引号和双引号不能换行

	let s1 = 'hello world' // 不能换行
    let s2 = `
      hello
      world
    `
    console.log(s1)
    console.log(s2)

	let s1 = 'hello world'
    let s2 = "hello world"
    let s3 = `hello world`
    console.log(s1, typeof s1) // hello world string
    console.log(s2, typeof s2) // hello world string
    console.log(s3, typeof s3) // hello world string

可以用 指定语法 在 模板字符串 里面直接解析变量

当你在模板字符串里面解析变量的时候，你就写 ${你要解析的变量}

<!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>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
  <div> </div>

  <script>
    /*
		小案例 - 每间隔固定时间让一个 div 改变一个随机的背景颜色
    */
    // 1. 准备一个随机数的函数
    let fn = (a = 0, b = 255) => Math.floor(Math.random() * (b - a + 1) + a)
    let div = document.querySelector('div')

    // 2. 使用定时器直接给元素的样式赋值
    setInterval(() => {
      let color = `rgb(${ fn() }, ${ fn() }, ${ fn() })`
      div.style.background = color
    }, 300)
  </script>
</body>
</html>

解构赋值

快速从对象或者数组中获取成员
就是把对象或者数组中的成员单独得到
目的：就是为了赋值

一、数组的解构赋值

快速从数组中获取成员
在定义变量的时候直接使用 [ ] 将变量包裹起来

等于号 左边的顺序 和 等于号右边 的顺序是 一一对应 的

	let arr = [10, 20, 30]
    // 当我想获取数组中的索引为 [0] 的数据
    let a = arr[0]
    // 当我想获取数组中的索引为 [1] 的数据
    let b = arr[1]
    // 当我想获取数组中的索引为 [2] 的数据
    let c = arr[2]
    console.log(a, b, c) // 10 20 30

    // 用解构赋值的方式
    let [n1, n2, n3] = arr
    // n1 变量获取的就是 arr[0]
    // n2 变量获取的就是 arr[1]
    // n3 变量获取的就是 arr[2]
    console.log(n1, n2, n3) // 10 20 30

	// 变量交换
	var num1 = 10
    var num2 = 20
    var [num1, num2] = [num2, num1]
    console.log(num1, num2) // 20 10

二、对象的解构赋值

快速从对象中获取成员
直接在定义变量的时候使用 {} 包裹起来
这个 {} 里面写的名字是你定义的变量名，也是对象内部的成员名称

 	let obj = {
      name: 'Jack',
      age: 18,
      gender: '男'
    }

    // 我定义一个变量, 从 obj 里面获取 name 成员作为我的值
    // name 即是变量名, 也是 obj 这个对象中的成员名
    let { name } = obj // => 等价于 let name = obj.name
    let { age } = obj // => 等价于 let age = obj.age
    let { gender } = obj // => 等价于 let gender = obj.gender
    let { score } = obj // => 等价于 let score = obj.score, 因为 obj 内部没有 score, 所以得到的就是 undefined
    console.log(name, age, gender, score) // Jack 18 男 undefined

问题一：一次解构多个

其实你可以一次解构多个
只要在定义变量时，{} 里面多写几个 obj 里面的成员名称就好了
多个名称之间使用逗号分隔

	let obj = {
      name: 'Jack',
      age: 18,
      gender: '男'
    }
    
     // 解构赋值, 从对象中获取多个成员
    let { gender, age, name } = obj
    // 他就等价于一次从对象中获取三个成员, 分别定义三个名称接收
    console.log(name, age, gender) // Jack 18 男

问题二：换一个名字

在结构的时候可以定义一个别的变量名
在定义变量的时候写 { 你要从对象中获取的成员: 你要自己起的变量名 } = 对象

	let obj = {
      name: 'Jack',
      age: 18,
      gender: '男'
    }
    
    // 我定义了一个 a 变量, 获取的是 obj 中的 name 成员
    // 又定义了一个 b 变量, 获取的是 obj 中的 age 成员
    let { name: a, age: b, gender } = obj
    console.log(a, b, gender) // Jack 18 男

展开运算符

也叫作扩展运算符
- 一个运算的符号，样子是：…
- 通常在展开数组、展开对象的时候使用
- 展开什么数据，就写在什么数据变量名的前面

展开数组

语法：…数组
- 相当于把 [ ] 干掉，其余不动
合并数组使用
- 多个数组组合成一个数组，取代了 concat 的作用

传参的时候使用

可以把数组展开传递到一个函数里面

	// 展开数组作用
    let arr2 = [6, 7, 8, 9, 10]
    let abc = ['hello', 'world', '你好', '世界']
    let arr = [1, 2, 3, 4, 5, ...arr2, ...abc]
    console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "hello", "world", "你好", "世界"]

	var arr = [1, 2, 3, 4, 5]
    console.log(arr)  // [1, 2, 3, 4, 5]
    console.log(...arr)  // 1 2 3 4 5
    console.log(1, 2, 3, 4, 5) // 1 2 3 4 5

	// 展开数组作用
    function fn(a, b, c) {
      console.log(a)
      console.log(b)
      console.log(c)
    }

    let arr = [100, 200, [300, 400]]

    fn(10, 20, 30)
    fn(arr) // 这个是只传递了一个参数, 就是 arr 给了形参 a
    fn(...arr) // 把 arr 展开放在参数的位置 fn(100, 200, 300)

    let res = Math.max(...arr) // 把 arr 里面的每一个传递到 Math.max 方法里面
    console.log(res) // NaN

展开对象

语法：…对象
- 就是相当于把 {} 干掉，其余不动
合并对象使用
- 把一个对象里面的成员全部添加到另一个对象里面

	let o1 = {
      name: 'Jack',
      age: 18
    }

    let o2 = {
      ...o1, // 把 o1 对象里面的所有成员, 在这里再写一遍
      gender: '男'
    }

    let o3 = {
      ...o2,
      score: 99
    }

    console.log(o1) // {name: "Jack", age: 18}
    console.log(o2) // {name: "Jack", age: 18, gender: "男"}
    console.log(o3) // {name: "Jack", age: 18, gender: "男", score: 99}

合并运算符

一个运算符号，样子：…
和展开运算符长得一模一样，只是使用的位置不一样

一、展开运算符

使用在数组或者对象的变量前面
使用在 函数实参 位置的时候
叫做展开运算符

二、合并运算符

使用在数组的解构赋值位置
使用在 函数形参 位置的时候
叫做合并运算符

	let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    // a 接收数组里面索引 [0]
    // b 接收数组里面索引 [1]
    // c 变量接收的是从做因 [2] 到结尾的所有内容, 组合成一个新的数组给我
    // ... 是把剩下的所有内容给了变量 b
    let [a, b, ...c] = arr
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // [3, 4, 5, 6, 7, 8, 9]

	// 在函数的形参位置
    function fn(a, ...b) {
      // 从第二个实参开始, 到结尾的所有实参, 组合成一个新的数组给了变量 b
      console.log(a) // 10
      console.log(b) //  [20, 30, 40, 50, 60]
    }
    fn(10, 20, 30, 40, 50, 60)

三、常用的位置

在箭头函数里面使用
为了自己把所有实参搞一个集合

	// 在箭头函数里面使用
	let fn = (...arg) => {
      // ...arg 就相当于把所有的实参, 都拿到一起
      // 放在一个数组里面, 赋值给 arg 这个形参
      // 就相当于我们自己制作了一个所有实参的集合
      console.log(arg) //  [10, 20, 30, 40, 50, 60]
    }

    fn(10, 20, 30, 40, 50, 60)

对象的简单书写方式

当书写一个对象的时候，可以有一些简写的形式
满足某些条件的时候可以简写
条件
- 当给一个对象里面书写成员的时候
  - 如果对象的键名和键值是一模一样的，并且键值使用的是一个变量，那么可以只写一个
- 当给一个对象里面的某一个成员赋值为一个函数的时候
  - 赋值的函数不能是箭头函数
  - 必须是标准的写有 function 关键字的函数
  - 可以直接省略：冒号和 function 关键字

	let age = 18

    let obj = {
      name: 'Jack',
      // age: age // 把全局 age 变量的值赋值给 obj 的 age 成员
      age, // 等价于 age: age
      abc: 'abc' // 不能简写, 因为后面的值位置使用的不是变量
      // abc, // 等价于 abc: abc
    }

    console.log(obj)

	let age = 18

    let obj = {
      name: 'Jack',
      age, // 等价于 age: age
      // fn: function () { console.log('我是 obj 里面的 fn 函数') }, // 可以简写, 里面是有 this 的
      fn () {
        console.log('我是 obj 里面的 fn 函数')
        console.log(this)
      },
      f: () => {
        console.log('我是 obj 里面的 f 箭头函数')
        console.log(this)
      } // 不可以简写, 里面没有 this
    }

    console.log(obj)

    obj.fn() // obj 对象
    obj.f() // window

Set 加强版的数组

Set 是一个没有重复的数组
可以遍历，但是不可以单独访问
有长度，长度是：size
判断有没有用 has，结果是布尔值

数组去重

	var s = new Set([1,1,1,2,3,3,4,4,5,6])
    console.log(s) // {1, 2, 3, 4, 5, …}
    console.log(s.size) // 6
    console.log(s.has(1)) // true
    console.log(s.has(9)) // false

    var arr = [4,5,6,5,4,7,8,3,1,1]
    var s = Array.from(new Set(arr))
    console.log(s) // [4, 5, 6, 7, 8, 3, 1]

Map 加强版的对象

解决对象上的属性只能为字符串的情况
var map = new Map()

作用	语法
赋值 set	map.set(document.body, ‘body’)
取值 get	console.log(map.get(document.body))
删除 delete	map.delete(document.body)
键名：可以接收任何东西	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8zpESFMF-1596292500079)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200718153608537.png)]

	 var map = new Map()
    var obj = {}
    // 
    map.set('name', '李四')
    map.set(document.body, 'body')
    map.set(obj, 'obj')

    console.log(map) // {"name" => "李四", body => "body", {…} => "obj"}
    console.log(map.get(document.body)) // body
    console.log(map.get(obj)) // obj

    map.delete(document.body)
    console.log(map) // {"name" => "李四", {…} => "obj"}

    var map1 = new Map()
    var map1 = {
        body: 'body',
        [1]: 1,
        obj: obj
    }
    console.log(map1) // {1: 1, body: "body", obj: {…}}

JSON 数据

又叫做键值对
JSON 数据中所有的字符串必须使用 双引号，单引号不可以
JSON 中不可以出现注释

一、对象

	var json = {
       "name": "李四"
    }

二、数组

	var json = [
        {
        "name": "李四"
        },
        {
        "name": "李五"
        }
    ]

三、JSON.stringify

将一个 JSON 对象转成 字符串
console.log(JSON.stringify(obj))

四、JSON.parse

将一个 字符串 转成 JSON 对象
console.log(JSON.parse(str))

ES6 的模块化

我们的 script 标签其实省略了一个内容
- type 属性, 标准的 script 标签应该有一个 type 属性
- 就是 text/javascript
- ```
 <script type="text/javascript">< /script>
```
- 表示这个标签对里面的内容会被当作 js 代码来解析
页面的打开
- 在浏览器打开是一种方式
- file:///E:/NZ-2006/DAY17/03_%E4%BB%A3%E7%A0%81/14_ES6%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.html
- 表示是本地打开的文件
- 在服务器上打开页面也是一种方式
  - https://www.baidu.com/
  - 表示访问的是百度的服务器中的页面
- vscode 可以帮我们模拟一个本地服务器使用
  - 需要一个 live server 插件
  - 鼠标右键单击 open in live server
  - 你的页面就会在一个 vscode 给你模拟的本地服务器打开
  - http://127.0.0.1:5500/14_ES6%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.html
  - 快捷键 alt + l 然后 alt + o
- 两种打开方式
  - 本地打开, 直接 alt + b
  - 服务器打开, 直接 alt + l 然后 alt + o
在 JS 文件内引入另一个 JS 文件
- 模块化概念：把一类功能, 某一个功能单独书写在一个 JS 文件内
- 例子
  - a.js 负责操作时间的
  - b.js 负责渲染页面
  - c.js 负责添加事件
  - 当你需要一个倒计时的功能的时候
  - 我们准备一个整合的函数, 叫做 main.js
  - 在这个 main.js 里面分别调用 a.js 和 b.js 和 c.js
  - 就能完成倒计时一个功能了
  - 我们管 a.js 和 b.js 和 c.js 和 main.js 文件叫做一个一个的模块
  - 我们把一个一个的功能单独拆出来, 在整合在一起, 这个开发形式
  - 我们叫做模块化开发
模块化开发
- 浏览器不能直接支持模块化语法
- 如果你不写模块化语法, 只是单纯的开发写代码, 那么页面怎么打开都可以
- 如果你要写模块化语法, 需要模块整合, 那么你的页面需要在服务器上打开
  - 并且, script 标签需要有一个 type 属性, 就是 module