827（ES6）

总结

概述：
    Javascript :弱类型的运行在客户端的脚本语言  
    脚本语言：不需要编译，运行过程中由js解析器(js引擎) 逐行进行解释并执行

    现在 javascript 也可以基于Node.JS技术进行服务器端编程（让JavaScript运行在服务器端的环境）

浏览器
    渲染引擎和js引擎
    浏览器本身并不会执行js代码，通过内置JavaScript引擎(解析器)来执行js代码，逐行解释每一句源码（转换为机器语言），然后由计算机执行

JavaScript组成
   ECMAScript(语法)，BOM(浏览器对象模型),DOM(文档对象模型)
   
ECMAScript(语法)  
   ES5
   变量(存储一个值)，
   运算符(算术运算符+-*/%);赋值运算符(+=,-=,*=,/=,%=);关系运算符(>,<,>=,<=, !=,==,===,!==)
        (逻辑运算符&& ,|| ,!) ; 三目运算符(条件表达式?结果1：结果2)
   条件语句：   if，if...else,switch
   循环语句:while ,do-while,for  (break,continue)
   数组(存储多个值多条数据)
      每一个数组元素都是有下标的，下标从0开始
      创建数组方式
      读取数组的值  数组名[下标]，给数组赋值  数组名[下标]=值
      数组遍历 for   for-in
      数组内置方法，push splice，unshift，pop，.....forEach,map,reduce..
   函数function
     函数定义
     函数参数
     函数返回值  return
  对象
    js中对象有两个成员:属性，方法
    定义方式
    读取，赋值
    遍历对象
BOM 
    window
    setTimeout
    setInterval
DOM
    元素获取
    元素节点
    三大家族

ES6

https://es6.ruanyifeng.com/

ECMAScript是JavaScript的一套标准

ES6（JavaScript语言的下一个版本）

ES6的第一个版本是在2015年6月发布的----ECMAScript2015(ES2015)

let和const

let

  /* 
      let关键字就是用来声明变量的
      let声明的变量具有块级作用域
      在一个大括号中，使用let声明的变量才具有块级作用域 var是不具有这个特点的
      防止循环变量变成全局变量
      使用let声明的变量没有变量的提升
      使用let声明的变量具有暂时性死区的特性
      不能重复声明
      */

      let a = 9
      console.log(a)
      let str = 'hello'
      let flag = true
      let num = 10
      // ----------------let声明的变量具有块级作用域  {}
      if (3 > 2) {
        let aa = 34
        var bb = 23
      }
      console.log(bb) //23
      // console.log(aa) //aa is not defined
      // let声明的变量只在它所在的代码块内有效的

      for (var i = 1; i <= 100; i++) {}
      console.log(i) //10

      for (let j = 1; j <= 100; j++) {
        // j只在循环体内有效，
      }
      // 循环体外使用就会报错
      // console.log(j) //j is not defined

      var btns = document.querySelectorAll('button')

      // for (var k = 0; k < btns.length; k++) {
      //   btns[k].index = k
      //   btns[k].onclick = function () {
      //     console.log(this.index, '下标')
      //   }
      // }

      // for (var k = 0; k < btns.length; k++) {
      //   ;(function (k) {
      //     btns[k].onclick = function () {
      //       console.log(k, '下标')
      //     }
      //   })(k)
      // }
      /* 
       每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，
      */
      for (let k = 0; k < btns.length; k++) {
        // 此处就是点击事件的上一级作用域
        // 点击事件输出的是自己上一级(循环产生的块级作用域)作用域下的值
        btns[k].onclick = function () {
          console.log(k, '下标')
        }
      }

      // 使用let声明的变量没有变量的提升
      console.log('----------------------')

      // console.log(f) //Cannot access 'f' before initialization
      // let f = 4
      // 暂时性死区
      // 只有块级作用域内存在let命令，它所声明的变量就 绑定 这个区域，不受外部影响
      // let 声明变量之前，该变量都是不可用的，---暂时性死区
      console.log('----------------------')
      var t = 134
      if (true) {
        t = 'abc' //Cannot access 't' before initialization
        let t
      }
       // 不能重复声明
      // let l = 90
      // let l = 23

const

  /*
         const声明的变量是一个常量
         常量是不能重新进行赋值，如果是基本数据类型不能更改值，复杂数据类型 不能更改地址值
         声明const的时候必须要给定值
      */

      // const PI   //Missing initializer in const declaration
      const PI = 3.1415926
      console.log(PI)
      // PI = 222 //Assignment to constant variable

      const arr = []
      arr[0] = 23
      arr[1] = 2
      arr.push(123)
      console.log(arr)

      const obj = {
        name: '张叔叔',
      }

let ,const,var的区别

var 声明的变量，其作用域为该语句所在的函数内，存在变量提升

let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

const声明的常量，在后面出现的代码中不能再修改该常量的值

解构赋值

解构赋值就是把数据结构分解，然后给变量进行赋值

数组解构

  // var aa = 2
      // var bb = true
      // var cc = 'hello'
      // 从数组中提取值，按照位置，给变量赋值
      // // let [aa, bb, cc, dd] = [2, true, 'hello']
      // console.log(aa, bb, cc)
      // console.log(dd) //undefined

      // let [aa, bb, cc, dd] = [2, true, 'hello', 1, 34]
      // console.log(aa, bb, cc)

      // 嵌套数组进行解构
      // let [a, [b, c]] = [1, ['22', '33']]
      // console.log(a, b, c)

      // let [a, [[b], c]] = [1, [[2], 3]]
      // console.log(a, b, c) //1 2 3

      let [a] = []
      let [c, b] = [2]
      // 以上两种都属于解构不成功 a的值等于undefined   b的值为undefined

对象解构

  // let { name } = { name: '张三' }
      // console.log(name)

      // let obj = {
      //   name: 'ls',
      //   age: 23,
      //   sex: '男',
      //   score: 100,
      // }

      // // 变量名和对象的属性名要一一对象
      // let { name, sex, age, score, a } = obj
      // console.log(a) //undefined

      let obj = {
        name: 'ls',
        age: 23,
        sex: '男',
        score: 100,
        msg: {
          des: 'hello',
        },
      }

      let {
        name,
        age,
        sex,
        score,
        msg,
        msg: { des },
      } = obj

      console.log(des) //hello
      console.log(msg)