ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(一)

简介: ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map

根据视频进行整理

【https://www.bilibili.com/video/BV1uK411H7on?p=1】

视频资源(百度网盘):

链接:【https://pan.baidu.com/s/1VBnPHafId30dWLhkI1DojA】

提取码:1234

ES6

1. let 关键字

let 关键字用来声明变量,使用 let 声明的变量有几个特点:

  1. 不允许重复声明
  2. 块儿级作用域
  3. 不存在变量提升
  4. 不影响作用域链

1.1 声明变量

// 可以使用let声明单个变量
      let a;
      // 可以在声明变量的同时赋值
      let b = 100;
      // 可以一次同时声明多个变量
      let c,d,e;
      // 可以声明多个变量同时赋值
      let f = 'abc', g = 123, h = {}, i = [];
      // 变量不能重复声明
      // let a = 100;

var 可以重复声明变量:

var j = 100;
      var j = [];
      console.log(j)

1.2 块级作用域

{
        let age = 12;
      }
      console.log(age)

var 不具有块级作用域

{
        var username = 'zs'
      }
      console.log(username)

1.3 不存在变量提升

var 声明变量,相当于在最前面声明一个变量。

console.log(myage)
      var myage = 20

上面代码相当于:

var myage
      console.log(myage)
      myage = 20

由于声明了没有赋值,所以输出为undefined

而 let 声明变量不会存在变量提升,会直接报错

console.log(myage)
      let myage = 20

1.4 不影响作用域链

{
        let myname = '张三'
        {
          // 在该作用域下没有 myname,会向上一级作用域寻找 myname
          // 找到输出
          console.log(myname)
          // 没有找到报错
          console.log(myage)
        }
      }

1.5 案例实践 – 点击 DIV 换色

使用 var 声明变量 i ,并且使用 items[i] 修改样式会报错

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 100px;
        height: 50px;
        border: solid 1px rgb(42, 156, 156);
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <script>
      // 获取元素
      let items = document.querySelectorAll('.item')
      // console.log(items)
      // 给元素绑定事件
      for( var i=0; i<items.length; i++ ) {
        items[i].onclick = function() {
          //修改当前元素的背景颜色
          // 使用 items[i] 进行修改
          items[i].style.background = 'pink'
        }
      }
    </script>
  </body>
</html>

原因使用 var 声明 i 相当于在全局声明了一个变量 i 每次 i++,相当于对全局的 i ++,事件绑定完成后 i 为3,当点击元素触发事件会导致数组下标越界。

使用 let 则不会,因为 let 存在块级作用域

// 获取元素
      let items = document.querySelectorAll('.item')
      // console.log(items)
      // 给元素绑定事件
      for( let i=0; i<items.length; i++ ) {
        items[i].onclick = function() {
          //修改当前元素的背景颜色
          // 使用 items[i] 进行修改
          items[i].style.background = 'pink'
        }
      }

2. const 关键字

const 关键字用来声明常量,const 声明有以下特点

  1. 声明必须赋初始值
  2. 标识符一般为大写
  3. 不允许重复声明
  4. 值不允许修改
  5. 块儿级作用域

2.1 声明常量

// 声明常量
    // 声明必须赋初始值
    // 标识符一般为大写(潜规则), 不大写也不报错, 只是常量习惯性大写
    const PI = 3.14
    console.log(3.14)

声明常量不赋初始值会报错

const A

2.2 不允许重复声明

const PI = 3.14
    const PI = 3.1415

2.3 值不允许修改

const PI = 3.14
    PI = 3.1415

2.4 块儿级作用域

const PI = 3.14
    {
      // 在该作用域下没有声明PI, 会向上一级作用域寻找
      console.log(PI)
    }

2.5 对于数组和对象的元素修改, 不算做对常量的修改

数组和对象变量中保存的为数组和对象的地址,改变对象和数组中的元素没有修改其地址,所以相当于没有修改数组和对象变量,不会报错

const ARR = ['a', 1, 2, 3, 45]
    ARR[0] = 0
    console.log(ARR)

声明对象类型使用 const,非对象类型声明选择 let

相关文章
|
1月前
|
存储 JavaScript
ES6+新特性-Symbol与Set/Map数据结构
ES6 引入了三种新的数据结构:Symbol、Set和Map。Symbol是唯一且不可变的值,常用于定义对象的独特属性;Set存储不重复值,适合数组去重;Map则是键值对集合,键可为任意类型,提供了更灵活的存储方式。这些新数据结构提供了更高效的操作手段,分别解决了属性命名冲突、数据去重和复杂键值对存储的问题。示例展示了如何使用Symbol、Set和Map进行基本操作。
|
1月前
|
C++ 容器
set容器-构造和赋值讲解
set容器-构造和赋值讲解
28 0
|
10月前
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
8月前
|
SQL 分布式计算 DataWorks
使用`SET`语句来定义变量并为其赋值
使用`SET`语句来定义变量并为其赋值
165 4
|
8月前
|
SQL 分布式计算 DataWorks
可以使用SET语句来定义变量并为其赋值
可以使用SET语句来定义变量并为其赋值
46 2
|
10月前
|
前端开发 API 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(六)
|
10月前
|
前端开发 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(四)
|
1月前
|
JavaScript 前端开发
ES6:什么是Symbol?
ES6:什么是Symbol?
25 1
|
1月前
ES6之Symbol
ES6之Symbol
|
1月前
|
JavaScript 前端开发