ECMAScript6学习笔记 ——let、const、变量解构赋值
2016-11-27 18:20
796 查看
let
不存在变量提升通过let声明的变量仅在块级作用域内有效
不允许在同一个作用域内重复声明一个变量
防止值公用
var oUl = document.querySelectorAll('ul>li'); for(let i=0,len=oUl.length;i<len;i+=1){ oUl[i].onclick = function(){ console.log(`text:${this.innerText} index:${i}`); }; }
不用再使用自执行函数了,兴奋。
typeof不再安全
直接typeof一个不存在的变量
console.log(typeof x); //undefined
而如果typeof一个后定义的let变量,则会报错
console.log(typeof x); //Uncaught ReferenceError: x is not defined let x = 1;
解决方法:
try{ console.log(x); }catch(err){ console.log(err); } let x = 1;
注意点
尽管通过let声明的变量不存在变量名提升,但只要在一个块级作用域中使用了let,那么就算这个let在定义之前使用,也不会到外部查找同名的变量。
var a = 10; if(true){ console.log(a); let a = 12; }
不能在定义之前使用
a = 10; console.log(a); //Uncaught ReferenceError: a is not defined let a = 15;
块级作用域
在大括号中通过let或函数声明的变量不存在变量名提升,但因为一些历史原因,函数可能还是会存在变量提升的问题。const
定义一个常量,不可更改,并且在初始化时就得赋值,不然报错。只在当前作用域内有效
不存在变量提升
在同一个作用域中,不可重复声明
当值是一个对象时,对象的值还是可以改变的,只是说引用不可改变
只在当前作用域内有效
const a = 10; { const a = 15; console.log(a); //15 } console.log(a); //10
当值是一个对象时
const obj = { name:'zmz', love:[1,2,3] }; console.log(obj.name); //zmz obj.name = 'o-o'; console.log(obj.name); //o-o
如果不想让其进行修改,可以使用Object.freeze方法
const obj = Object.freeze({ name:'zmz', love:[1,2,3] }); console.log(obj.name); //zmz obj.name = 'o-o'; console.log(obj.name); //zmz
从es6开始新增的一些声明命令,其变量名不再属于顶级对象window
变量解构赋值
按照一定的模式进行赋值数组解构赋值
var [a,b] = [1,2]; console.log(a,b); // 1 2
左边变量,右边值,一一对应
var [a,...b] = [1,2,3,4,5]; console.log(a,b); // 1 [2,3,4,5]
...会将后面剩余的所有参数当作一个数组,但为了方便阅读,也可以用一个括号将值阔起来,如下代码
var [a,[...b]] = [1,[2,3,4,5]]; console.log(a,b); // 1 [2,3,4,5]
直接用...和使用[]还是有区别的,如下
var [a,[...b],c] = [1,[2,3,4,5],6]; console.log(a,b,c); // 1 [2,3,4,5] 6
而直接用...的
var [a,...b,c] = [1,2,3,4,5,6]; console.log(a,b,c); // Uncaught SyntaxError: Rest element must be last element in array
报错了。
...的真正目的
var [a,...b] = [1,[2],3,4]; console.log(a,b); //1 [Array[1], 3, 4]
...所做的两件事,将剩余的所有参数归为所有,并且其自身是一个数组。
解构不成功的值
当解构不成功值为undefined
var [a,b] = [1]; console.log(a,b); //1 undefined
当值多余时
属于不完全解构,只解构需要的。
默认值
只有当值全等与undefined时才会起作用
var [a,b = 2] = [1]; console.log(a,b); //1 2 var [a,b = 2] = [1,null]; console.log(a,b); //1 null
默认值也可以引用解构赋值中的其他变量,但是这个变量必须已经声明
let [a,b = a] = [1]; console.log(a,b); //1 1 let [a = b,b = 1] = []; console.log(a,b); //Uncaught ReferenceError: b is not defined
对象解构赋值
对象的解构,变量和属性名对应即可,跟顺序无关。var {a} = {haha:'haha',a:'hello'}; console.log(a); //hello
也可以起一个别名
var {haha:a} = {haha:'haha',a:'hello'}; console.log(a); //haha
最后被赋值的是a,而不是haha
对象解构也可以使用默认值。
字符串解构
var [a,b,c] = 'haa'; console.log(a,b,c); //h a a
解构的用途
1、简写var {log,info,time,timeEnd} = console; time('time'); log('Hello'); timeEnd('time');
2、使接口更友好,并且与顺序无关
function fn({name,age,hello}){ hello(name,age); } fn({ name:'老王', age:23, hello:function(name,age){ console.log('This is ' + name + ' ' + age); // This is 老王 23 } });
3、交换变量
var a = 1; var b = 2; [a,b] = [b,a]; console.log(a,b); //2 1
4、函数默认值
function fn({a = 1,b}){ console.log(a,b); // 1 2 } fn({b:2});
5、只取需要的值
var arr = [ { title:1111, love:{ one:'one_1', two:'two_1' } }, { title:2222, love:{ one:'one_2', two:'two_2' } } ]; for(let {title,love:{two}} of arr){ console.log(title,two); }
完。
相关文章推荐
- ECMAScript 6笔记(let,const 和 变量的解构赋值)
- ECMAScript6简介和学习笔记(一) let const 解构
- ECMAScript 6学习笔记(一)let、const、变量的结构赋值
- es6学习篇之 let和const命令 、变量的解构赋值
- ECMAScript6笔记:变量的解构赋值
- react native 语法ECMAScript 6 学习笔记----变量的解构赋值
- ES6学习笔记(let、const、变量的解构赋值、字符串扩展)
- ECMAScript6-学习笔记(let和const命令)
- es6 学习笔记 之 变量声明 和 变量的 解构赋值
- ECMAScript6学习笔记-解构赋值
- ES6新特性 let、const、变量对象的解构赋值
- 《ES6入门(第二版)》学习笔记【精华】(2)-变量的解构赋值
- 【ES6学习】— (1)ES6简介、let与const命令以及变量的解构赋值
- ES6基本语法学习笔记--let与const
- php——学习笔记,变量声明以及3种赋值方式
- shell脚本的作用,shell脚本变量的定义和三种赋值方式【shell脚本的学习笔记一】
- java基础学习笔记原始类型变量赋值与非原始变量赋值
- Shell学习笔记---变量赋值与运算---待完善
- ECMAScript6笔记:let和const命令
- ES6-个人学习笔记一--let和const