cometang前端技术博客 cometang前端技术博客
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • 微信小程序
  • react
  • react上手教程
  • 前端框架
  • 大神之路
  • 面试汇总
  • Node
  • PHP
  • Go语言
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

cometang

永远相信技术的力量
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • 微信小程序
  • react
  • react上手教程
  • 前端框架
  • 大神之路
  • 面试汇总
  • Node
  • PHP
  • Go语言
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • ES6

    • let与const
      • let & const 与 var 的区别
      • 变量声明 var
      • let 实现局部作用域
      • var 进行了变量提升
      • 暂存死区
      • const 变量声明
    • 解构赋值
    • 字符串模板
    • 箭头函数
    • 展开运算符
    • 数组的方法
    • 对象的方法
    • 类的继承
  • vue

  • h5

  • JavaScript

  • 前端框架

  • react

  • 大神之路

  • 微信小程序

  • 面试题汇总

  • react轻松上手教程

  • 前端
  • ES6
cometang
2021-01-19
目录

let与const

# 简述

  • ES6 是 2015 年发行的新的 js 标准,又名:ECMACScript 2015 标准
  • 部分低版本浏览器不支持 ES6 的直接解析
  • 通过 babel 可以将 ES6 代码转换为 ES5 实现所有浏览器的支持
  • ES6 提升编程效率以及代码的简洁度

# 浏览器兼容解决方案

  • chrome 浏览器 版本号 62+完全支持 ES6 (import export)
  • ES6 通过 babel 进行转换: http://babeljs.io/repl/

# let & const 与 var 的区别

# 变量声明 var

  • 通过 var 声明的变量会直接声明到全局(window)作用域 上
for (var i = 0; i < 3; i++) {
  console.log(i);
}
console.log(i);
console.log(window.i);
1
2
3
4
5
0
1
2
3
3
1
2
3
4
5
  • 问题:var 声明的变量如果想实现局部作用域只能通过函数作用域来实现
//这里的变量i 仍然是作为了全局变量在使用
(function() {
  for (var i = 0; i < 3; i++) {
    console.log(i);
  }
})();
console.log(i);
console.log(window.i);
1
2
3
4
5
6
7
8
0
1
2
i is not defined
1
2
3
4
  • 示例 异步打印出每次循环的键值(如果不使用匿名函数传递i的参数会输出3次:3)
for (var i = 0; i < 3; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, 1000);
  })(i);
}
1
2
3
4
5
6
7
0
1
2
1
2
3

# let 实现局部作用域

  • let 和 { } 配合可以产生一个新的作用域
for (let i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i)
    }, 1000)
}
1
2
3
4
5
0 
1
2
1
2
3

# var 进行了变量提升

通过var声明的变量会自动将声明语句默认提升到最前面进行执行,但是对于读代码和理解程序的自上而下运行的流程不太好,同时也会造成变量的全局污染。

console.log(a);
var a = 1;
console.log(a);
// unidefined
// 1
1
2
3
4
5
console.log(a);
let a = 1;
console.log(a);
// a is not defined
1
2
3
4

# 暂存死区

如果当前作用域内有定义这个变量就不会向上查找,如果没有定义会自动向上查找这个变量的值

let a =1;
{
    console.log(a)
}
// 1
1
2
3
4
5
//暂存死区
let a =1;
{
    console.log(a);
    let a = 2;
}
// Cannot access 'a' before initialization
1
2
3
4
5
6
7

# const 变量声明

const 拥有let 所有的特性,唯一的区别就是const声明的变量不可被修改引用空间

const b =1;
const b =2;
console.log(b);
// Identifier 'b' has already been declared
1
2
3
4
const children = {age:12};
children.age = 5;
children.sex = '女';
console.log(children);
// {age: 5, sex: "女"}
1
2
3
4
5
编辑 (opens new window)
上次更新: 2022/05/28, 19:34:46
解构赋值

解构赋值→

最近更新
01
go语言基础
07-13
02
《react上手教程》- 基础语法
07-13
03
redux-redux toolkit-状态管理
03-18
更多文章>
Theme by Vdoing | Copyright © 2019-2023

cometang | 唐世杰 渝ICP备18015657号-2

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式