ES6语法特性（一）let const 解构赋值模板字符串箭头函数 rest 扩展运算符 Symbol

最新推荐文章于 2021-08-16 22:25:34 发布

sharp_wu

最新推荐文章于 2021-08-16 22:25:34 发布

阅读量389

点赞数

分类专栏： JavaScript 文章标签： javascript es6 node.js 前端

本文链接：https://blog.csdn.net/qq_38232003/article/details/109995054

版权

ES6

let

特性

变量不能重复声明
块级作用域（if else while for…）全局、函数、eval（严格模式）
不存在变量提示
不影响作用域链

{
   
  let name = 'wufeng';
  const fn = () => {
   
    console.log(name); // wufeng
  };
  fn();
}

案例

点击方块变色（var let）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
    
        width: 50px;
        height: 30px;
        border: 1px solid red;
        margin-right: 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <script>
      let items = document.querySelectorAll('.item');
      //使用var，循环结束此时i为3，items[3] undefined 报错
      // for (var i = 0; i < items.length; i++) {
    
      //   items[i].onclick = () => {
    
      //     items[i].style.background = 'pink';
      //   };
      // }
      //使用let 块级作用域互不影响
      for (let i = 0; i < items.length; i++) {
    
        items[i].onclick = () => {
    
          items[i].style.background = 'pink';
        };
      }
    </script>
  </body>
</html>

使用var 声明，报错
在这里插入图片描述

const 常量

特性

一定要赋初始值
值不能修改
变量名尽量使用大写
块级作用域
对对象、数组的元素修改，不算对常量的修改，不会报错（指向的地址没有变化）

      const ITEM = ['wufeng', 'wujie', 'sharp'

最低0.47元/天解锁文章

sharp_wu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6语法特性（一）let const 解构赋值模板字符串箭头函数 rest 扩展运算符 Symbol

ES6let特性变量不能重复声明块级作用域（if else while for…）全局、函数、eval（严格模式）不存在变量提示不影响作用域链{ let name = 'wufeng'; const fn = () => { console.log(name); // wufeng }; fn();}案例点击方块变色（var let）<!DOCTYPE html><html lang="en"> <head>
复制链接

扫一扫