es6中let,const区别与其用法
2017-07-19 11:26
357 查看
ECMAScript 是什么?
首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM;
其中的ECMAScript是Javascript的语法规范。
ECMAScript定义了很多东西,如:
语法-----解析规则,关键字,语句,声明,操作等
类型-----布尔型,数字,字符串,对象等
原型和继承
内置对象,函数的标准库----------JSON, Math, 数组方法,对象方法等
浏览器兼容:
目前Google和Firefox浏览器对ES6新特性的兼容最友好。而IE9则有问题。对于不兼容的浏览器,我们可以只用转换工具如,babel。我们使用nodejs的包管理工具npm来安装babel。在我们的js文件前先引入 browser.min.js 。
(1)ES6中新增的let关键字
之前我们声明一个变量时,都是使用关键字var,那新增加的let和var有什么不同呢?
var的不足之处一:
var arr=[];
for (var i=0;i<10;i++){
arr[i]=function(){
console.log(i);
};
}
arr[8](); // console.log(i); 的结果为 10
同样的换成 let之后就没问题:
var arr=[];
for (let i=0;i<10;i++){
arr[i]=function(){
console.log(i);
};
}
arr[8](); // console.log(i); 的结果为 8
这是由于,本来的js是没有块级作用域的,用var定义i时,虽然在for循环中定义,但在执行时,依然会被提升。当执行arr[8]()时,循环已经完成,这时的i=10;所以再去执行 arr[8]()时,console.log(i),i=10;
而是用let定义i,i就只能存在与for循环的块级作用域,不会被提升。
(块,只的是 一组{}之间的部分。)
var的不足之处二:
也就是变量提升。var 会被提升定义;let不会。
var a=1;
(function(){
alert(a);
var a=2;
})(); //undefined 表示只声明,为赋值;
同样的换做let之后:
var a=1;
(function(){
alert(a);
let a=2;
})(); //报错: Uncaught ReferenceError: a is not defined(…)
这是因为,用let定义后,变量a的定义不会被提升。且在块级作用域内封闭,不会受到外界a的影响。在使用a(alert(a))时,a尚未定义,所以报错。因此,在使用let时,一定注意,变量要先声明后使用。
使用let时注意:
注意一: 在同一块级作用域下,不能重复声明同一个变量。
{
var a=1;
let a=2;
} //报错
{
let a=1;
let a=2;
} //报错
注意二:在函数内,不能用let重新声明函数的参数。
function say(word){
let word='hello';
alert(word);
}
say('hi'); //报错
(2)ES6中新增的const关键字
const是常量(contsant)的缩写,与let相比,const专门用来声明一个常量。
特点:
不可修改
const name='a';
name='b'; //报错
块级作用域
if(1){
const name='a';
}
alert(name); //报错
不存在变量提升,必须先声明后使用
if(1){
alert(name); //报错
const name='a';
}
不可重复声明同一个变量
var name='a';
const name='b'; //报错
声明后必须赋值
const name; //报错
注意:当常量为一个对象时:
const Person={'name':'a'};
Person.name='b';
Person.age='13';
console.log(Person) // {'name':b,'age':'13'}; 输出正常。
这是由于const声明了一个引用类型的常量,使用的是传址赋值。也就是不修改地址,只修改地址中的值。
首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM;
其中的ECMAScript是Javascript的语法规范。
ECMAScript定义了很多东西,如:
语法-----解析规则,关键字,语句,声明,操作等
类型-----布尔型,数字,字符串,对象等
原型和继承
内置对象,函数的标准库----------JSON, Math, 数组方法,对象方法等
浏览器兼容:
目前Google和Firefox浏览器对ES6新特性的兼容最友好。而IE9则有问题。对于不兼容的浏览器,我们可以只用转换工具如,babel。我们使用nodejs的包管理工具npm来安装babel。在我们的js文件前先引入 browser.min.js 。
(1)ES6中新增的let关键字
之前我们声明一个变量时,都是使用关键字var,那新增加的let和var有什么不同呢?
var的不足之处一:
var arr=[];
for (var i=0;i<10;i++){
arr[i]=function(){
console.log(i);
};
}
arr[8](); // console.log(i); 的结果为 10
同样的换成 let之后就没问题:
var arr=[];
for (let i=0;i<10;i++){
arr[i]=function(){
console.log(i);
};
}
arr[8](); // console.log(i); 的结果为 8
这是由于,本来的js是没有块级作用域的,用var定义i时,虽然在for循环中定义,但在执行时,依然会被提升。当执行arr[8]()时,循环已经完成,这时的i=10;所以再去执行 arr[8]()时,console.log(i),i=10;
而是用let定义i,i就只能存在与for循环的块级作用域,不会被提升。
(块,只的是 一组{}之间的部分。)
var的不足之处二:
也就是变量提升。var 会被提升定义;let不会。
var a=1;
(function(){
alert(a);
var a=2;
})(); //undefined 表示只声明,为赋值;
同样的换做let之后:
var a=1;
(function(){
alert(a);
let a=2;
})(); //报错: Uncaught ReferenceError: a is not defined(…)
这是因为,用let定义后,变量a的定义不会被提升。且在块级作用域内封闭,不会受到外界a的影响。在使用a(alert(a))时,a尚未定义,所以报错。因此,在使用let时,一定注意,变量要先声明后使用。
使用let时注意:
注意一: 在同一块级作用域下,不能重复声明同一个变量。
{
var a=1;
let a=2;
} //报错
{
let a=1;
let a=2;
} //报错
注意二:在函数内,不能用let重新声明函数的参数。
function say(word){
let word='hello';
alert(word);
}
say('hi'); //报错
(2)ES6中新增的const关键字
const是常量(contsant)的缩写,与let相比,const专门用来声明一个常量。
特点:
不可修改
const name='a';
name='b'; //报错
块级作用域
if(1){
const name='a';
}
alert(name); //报错
不存在变量提升,必须先声明后使用
if(1){
alert(name); //报错
const name='a';
}
不可重复声明同一个变量
var name='a';
const name='b'; //报错
声明后必须赋值
const name; //报错
注意:当常量为一个对象时:
const Person={'name':'a'};
Person.name='b';
Person.age='13';
console.log(Person) // {'name':b,'age':'13'}; 输出正常。
这是由于const声明了一个引用类型的常量,使用的是传址赋值。也就是不修改地址,只修改地址中的值。
相关文章推荐
- js变量中有var定义和无var定义的区别,es6中let命令和const命令
- ES6 var和let和const 的区别
- ES6中的变量 let 和const的区别
- ES6 let、var、const联系与区别
- Web端 es6(基础一) let var const 的区别
- JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
- ES6 中的let、const与var的区别
- ES5中的var与ES6中的let,const的区别
- ES6基础(一)——var let const的用法
- [Wondgirl]ECMAScript6(ES6)(二)变量let、var和常量const的定义和区别
- var与ES6中const、let声明的变量的区别
- javascript中var与let与const的区别
- JS中const、let、var之间的区别
- ES6入门——let和const命令
- 【黑马程序员】关于const的一些用法及区别
- const的用法,特别是用在函数前面与后面的区别!
- var、let、const的区别
- ES6的let和const命令(一)
- 有趣的JavaScript(一)---let、const与var命令的区别
- ES6知识整理(一)--- let/const/箭头函数