let和const语法

ES6基本语法之let和const

1、 let与const

常量const [常量声明的时候要赋值；常量是不能被修改的，但可以修改对象的值。因为对象是引用类型，const 指向的是对象引用地址，只要地址不变就符合 const 定义]

Es5写法

Object.defineProperty(window,”PI2”,{

value: 3.1415926,

writable: false

})

Es6写法: const PI = 3.1415926

变量let let a = 1 [let声明的变量只在块作用域有效；es6强制开启严格模式，变量未声明不能引用，否则会报引用错误；let不能重复定义变量]

functiontest(){for(leti=1;i<3;i++){console.log(i);//1 2}console.log(i);//uncaught ReferenceError: i is not defined//let a = 1;leta=2;}functionlast(){constPI=3.1415926;constk={a:1}k.b=3;console.log(PI,k);}test();last();

2、解构赋值

什么是解构赋值:语法上就是赋值的作用。

解构:左边一种结构，右边一种结构，左右一一对应进行赋值。

解构赋值的分类:

数组解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值

1）数组结构赋值

{leta,b,rest;[a,b]=[1,2];//let a=1,b=2;之前的写法console.log(a,b);//1  2}

... 可以把其它的归为一个数组

{leta,b,rest;[a,b,...rest]=[1,2,3,4,5,6];console.log(a,b,rest);//1 2 [3,4,5,6]}

延伸：可以给c赋值为默认值，防止没有成功配对赋值时候值为undefind情况

{leta,b,c,rest;//[a,b,c]=[1,2];[a,b,c=3]=[1,2];//console.log(a,b,c);//1 2 undefinedconsole.log(a,b,c);//1 2 3}

在es5中不好实现的代码，可以通过结构赋值轻松解决，如下

变量交换

{leta=1;letb=2;[a,b]=[b,a];console.log(a,b);//2 1}

取函数return回来的值

{functionf(){return[1,2]}leta,b;[a,b]=f();console.log(a,b);//1 2}

当函数返回多个值时，可以选择性的去接收某几个变量

{functionf(){return[1,2,3,4,5]}leta,b,c;[a,,,b]=f();console.log(a,b);//1 4}

不知道返回数组的长度时，后面的数可以接收为数组

{functionf(){return[1,2,3,4,5]}leta,b,c;[a,,...b]=f();console.log(a,b);//1 [2,3,4,5]}

2）对象解构赋值

{leta,b;({a,b}={a:1,b:2})console.log(a,b);//1 2}

{leto={p:42,q:true};let{p,q}=o;console.log(p,q);//42 true}

对象解构赋值的默认值处理

{let{a=10,b=5}={a:3};console.log(a,b);}

对象解构赋值场景:

{

  let metaData={

    title:'abc',

    test:[{

      title:'test',

      desc:'description'

    }]

  }

  let {title:esTitle,test:[{title:cnTitle}]}=metaData;

  console.log(esTitle,cnTitle);

}

1.var可以重复声明

var a = 12;

var a = 5;

alert(a) //5

2.var无法限制修改

如：PI = 3.1415；

3.var没有块级作用域

{

}

像：

if(){}for(){}

这都是块级作用域，在这里面定义的变量则在块级域外面是没法使用的。

4.let和const不能重复声明

let a =12;

let a=5;

alert(a)//报错

const a =12;

const a=5;

alert(a)//报错

5.let是可以重复修改的，但是const是常量，是不能重复修改的。

let a = 12;

a = 5;

alert(a); //5

const a = 12;

a = 5;

alert(a);//报错

6.块级作用域

if(true){

let a = 12;

}

alert(a);//报错，a is not defined

if(true){

const a = 12;

}

alert(a);//报错，a is not defined

语法快不仅仅是if，for等这些，如下面的也是块级作用域：

{

let a = 5;

console.log(a) //5

}

console.log(a); //报错，a is not defined

7.块级作用域的用法：

现在有三个button，分别点击，传统的写法是：

window.onload =function(){varaBtn =document.getElementByTagName("input");for(vari=0;i

结果每次弹出的都是3，然后我们采用函数作为块级作用域的方式在外边增加一层，如下：

window.onload =function(){varaBtn =document.getElementByTagName("input");for(vari=0;i

虽然问题解决了，但是如果用现在ES6的let，本身就是在块级作用域中有效，更加方便；

window.onload =function(){varaBtn =document.getElementByTagName("input");for(leti=0;i

最后总结如下：

名称            重复声明                    修改                         块级作用域

let               不能重复声明           变量可以修改             块级作用域

const          不能重复声明           常量不可以修改          块级作用域

一、let命令

基本用法

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

for循环的计数器，就很合适使用let命令。

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域

for(let i =0; i <3; i++) {

  let i ='abc';

  console.log(i);

}//abc//abc//abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域.

不存在变量提升

// var 的情况console.log(a);// 输出undefinedvara =2;// let 的情况console.log(a);// 报错ReferenceErrorlet a =2;

暂时性死区

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if(true) {

  // TDZ开始tmp ='abc';// ReferenceErrorconsole.log(tmp);// ReferenceError  let tmp; // TDZ结束console.log(tmp);// undefined  tmp =123;

  console.log(tmp); // 123}

错误实例：

//错误实例1　　vara1 ='123';　　　　if(true){

　　　　　　a1 ='456';//出现了let所以if内生成了一个单独的封闭作用域，而a1在还未let声明前使用会报错　　　　　　let a1;

　　　　};//错误实例2let x1 = y1, y1 =1;

　　function fn(){

　　　　console.log(x1,y1);//y1在let未声明前使用报错

　　};

　　fn();

注意：“暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

a是一个不存在的变量名，结果返回“undefined”。

console.log(typeofa);//undefined

不允许重复声明

let a =10;

let a =1;//报错

二、const命令

基本用法

const声明一个只读的常量。一旦声明，常量的值就不能改变。相同： 与let 作用域   块级作用域

constPI =3.1415;

PI // 3.1415PI =3;// TypeError: Assignment to constant variable.

实例：

consta =true;//字符串  数值  布尔//数组constarr =[];//arr指向的是一个内存地址

arr.push('123');

console.log(arr);//对象constobj = {};

obj.name ='abc';

console.log(obj);//注意  不能只申明不赋值  申明后一定要初始化，不能以后赋值const w;

console.log(w);  //错误

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343