美文网首页ES6
es6笔记之一-var let const 的深入理解和对比

es6笔记之一-var let const 的深入理解和对比

作者: AizawaSayo | 来源:发表于2019-03-20 12:15 被阅读30次
  1. var有预解析,alert(a);var a=5;先使用,后定义也仍然不会报错,只是获取不到后面赋的值。因为变量提升(只要在同个作用域有定义就能预解析)。相当于 var a;alert(a); a=5;//undefined;因此如果先使用,后面赋值与否没有意义。
var a=12;
function fn() {
    alert(a);
    var a=5;
}
fn();//undefined,即a有定义了但后面才赋值

等同于

function fn() {
    var a; 
    alert(a);
    a=5;
}

let没有预解析,alert(b);let b;//b is not defined 先使用后定义会报错。另外在函数作用域外定义过同样的变量,在内部执行如上代码仍然无法获取值。var同样。

var b=12;
function fn() {
    alert(b);//TDZ 暂时性死区
    let b;
}
fn();////b is not defined,没有变量提升,因此报错提示b没有定义

在同个作用域,var 重复定义下一个的值会覆盖上一个,let会报错,提示已经定义过。

  1. var 定义的变量只有在全局和函数内有作用域,在块级作用域内定义仍然是全局变量。
for(var i=0;i<10;i++){
}
console.log(i);//10

一般{}即是快级作用域,如if(){}; for(){} ;while(){};

for(let i=0;i<10;i++){
    let i=abc;
    console.log(i);//abc abc 10个
}
console.log(i);//is not defined报错

for循环相当于父级作用域,里面的{}是子作用域,作用域可以无限嵌套,所以{}里的i不算重复定义。和函数一样若使用变量会向上寻找定义的地方,子作用域找不到定义会一层层去找父级作用域。若当前作用域定义了但未赋值,则提示undefined,而不会再去找父级作用域。若在当前作用域使用之后定义了,则会报is not defined的错,也不会再去父级找。

let j="888";
for(let i=0;i<10;i++){
    //let j;//定义在此输出undefined 10次
    console.log(j);//
    let j;//定义在此报is not defined,无法继续
}
  1. let相较于var的优势体现,类似选项卡功能,应用数个按钮切换。for循环若换成var则因为i是全局变量循环结果为按钮的数量而无法实现。
window.onload=function(){
    var myBtn=document.querySelectorAll("input");
    for(let i=0;i<myBtn.length;i++){
        myBtn[i].onclick=function () {
            console.log(i);//点击输出按钮的index,如0,1,2
        }
    }
}
  1. const特性和let一样,定义的是常量,不能修改。定义的时候必须赋值。即不能光定义不赋值,也不能先定义后赋值。并不是变量的值不能修改,而是指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
    但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,不管它指向的数据结构是否可变。因此,将一个对象声明为常量必须非常小心。
const d;
d=12;
console.log(d);//Missing initializer in const declaration 报错
const dblink = 5;
dblink=12;//Assignment to constant variable.报错
const arrB=['apple','banana'];
//arrB=[];//会报错
arrB.push('orange');//可以添加,因为是对arrB对象的引用,不是修改对象的本身
arrB[0]='strawberry';//可以修改
//配置文件演示
const config={
    host:'',
    username:'',
    password:'',
    version:''
}
config.username="vivi";//可以
config=false;//报错

//彻底无法修改的方法
const arrC=Object.freeze(['apple','banana']);
arrC.push('orange');
console.log(arrC);//Cannot add property 2, object is not extensible冻结引用后也无法修改
  1. 立即执行匿名函数。自执行函数
(function(){
//TODO
})()
//等同于
{
//TODO
}

相关文章

  • ES6学习笔记

    VSCode调试ES6:配置方法 一、let & const 关键字 1.1 let & var 对比 let 声...

  • 2018-12-20-周末学习

    ES6的深入认识(1) let&const 首先列出我对于let和cons起初粗浅的认识 let ≈ var,co...

  • 总结一下前端常见javascript基础面试题:

    1.var ,let 和const的区别: let和const是es6新增的语法, let和var都可以定义变量,...

  • (JS)

    ES6 let、const和var的区别 let和const声明变量不存在变量提升 let和const不能重复声明...

  • ES6特性学习(一)

    本篇对ES6的let、const进行了学习和整理,以及与var做一下简单的对比。 let命令 let是ES6中新增...

  • ES6 学习笔记

    ES6 var let const 的使用 var let const 声明变量 全局作用域 和 块级作用域的区...

  • javascript碎片知识000

    const let var 3者的区别。 const 和 let 为es6新增的定义变量的关键字。 var存在...

  • js常见知识点--第二篇

    一、var 、let 、const的区别 var是ES5提出的,let和const是ES6提出的。var不存在块级...

  • es6总结一

    es6基础 let和const命令 let和const用于声明变量let跟var的区别 1、let定义过的变量不能...

  • TS中 var 和 let 的区别

    let 和 const 是 ES6 中新增的声明对象的类型。与 var 相比,let 和 const 不存在...

网友评论

    本文标题:es6笔记之一-var let const 的深入理解和对比

    本文链接:https://www.haomeiwen.com/subject/mwmamqtx.html