虽然如今还须要借助babel的气力但将来一定是属于ES6。(那ES7?-_-|||)
let
在ES6之前javascript只要两种作用域,即全局作用域和函数作用域,let的涌现填补JS了没有块作用域的痛点
let的块作用域
function cat(){
let mew = '喵'
let angry = true
console.log(mew)
if(angry){
let mew = '...' //外层{}成为块作用域
console.log(mew)
}
console.log(mew)
}
cat()
//喵
//...
//喵
让我们和var做一下对照
function cat(){
var mew = '喵'
var angry = true
console.log(mew)
if(angry){
var mew = '...' //外层 mew 被掩盖
console.log(mew)
}
console.log(mew)
}
cat()
//喵
//...
//...
而let因为发生了块作用域似的mew = ‘…’ 只在块作用域内被运用,所以第三次输出mew是’喵’
如上因为var不发生块作用域所以if语句中的var mew = ‘…’相当于掩盖了函数中第一个mew(即函数作用域中的)所以在次输出mew是’…’
运用
上述例子中,经由过程let的运用能够防止变量被没必要要地掩盖
让我们再看一个栗子:
var a = []
for (var i = 0; i < 5; i++) {
a[i] = function () {
console.log(i)
}
}
a[3]() // 5
为了输出3,通常会运用闭包来处置惩罚
var a = []
for (var i = 0; i < 5; i++) {
a[i] = (function(i){
var j = i
return function () {
console.log(j)
}
})(i)
}
a[3]() //3
这不仅使代码变得冗长了不少,而且的外层能够访问到i(说明i在运用完并未被消灭,内存走漏)
运用let声明只在块级作用域内有效
var a = []
for (let i = 0; i < 5; i++) {
a[i] = function () {
console.log(i)
}
}
a[3]() // 3
一些须要注重的点
暂时性死区
在var 声明前运用变量,会获得undefined
console.log(abc) //undefined
var abc
但在let 声明前运用变量,会报错
console.log(abc) //毛病
var abc
这是因为在let的作用域中,let说明之前会构成暂时性死区,在变量定义之前,使该变量都是不可用的。
反复声明
在块级作用域中反复声明会报错
{
var color = "black"
let color = "white"
}
// 报错
{
let color = "black"
var color = "white"
}
// 报错
{
let color = "black"
let color = "white"
}
// 报错
箭头函数
箭头函数的运用能够使誊写更加精练
盘算数组各项平方
let ary = [1,2,3,5]
let res = ary.map(function(item){return item*item}) //[1, 4, 9, 25]
运用箭头函数能够简化誊写
let ary = [1,2,3,5]
let res = ary.map((item) => {return item*item}) //[1, 4, 9, 25]
更进一步能够省略括号(多个参数不能省略括号)
let ary = [1,2,3,5]
let res = ary.map(item => {return item*item}) //[1, 4, 9, 25]
函数能够进一步简化成:
let ary = [1,2,3,5]
let res = ary.map(item => item * item ) //[1, 4, 9, 25]
模板字符串
模版字符串是对字符串拼接的革新,以往输出带有变量的语句时,我们采纳字符串拼接的体式格局,而模板字符串能够在字符串中直接运用变量,即简化誊写同时也下降失足的风险
let name = 'Yoda'
console.log('My name is ' + name) //
console.log(`My name is ${name}`) //模板字符串
模板字符串运用反引号 (
模板字符串运用包括特定语法(${expression})的占位符;
模板字符串能够不需换行符直接运用换行:
let name = 'Yoda'
console.log(`My name is ${name}
what‘s your name`)
// My name is Yoda
// what‘s your name
能够直接显现盘算结果
let a = 1
let b = 2
console.log(`${a} + ${b} = ${ a + b })
// 1 + 2 = 3
延展操作符
let cuboid = [2,3,4]
let cuboidVolume = (a,b,c) => {console.log(a*b*c)}
cuboidVolume(cuboid[0], cuboid[1], cuboid[2]) //24
//延展操作符
cuboidVolume(...cuboid)
// 24
延展操作符能够将数组拆分传作为参数入函数
延展操作符能够用于数组拼接:
let fruit = ['orange','apple','banana']
let meat = ['beef']
let breakfast = [...fruit, ...meat , 'bread']
// ["orange", "apple", "banana", "beef", "bread"]
Classes(类)与继续
总所周知,js的原型链继续一直以难以明白外加坑多著称
(组织函数,原型对象,实例对象它们之间剪不断理还乱的关联,假如再加上继续,prototype和[[prototype]]的指向@_@说多了都是泪啊)
因为JS中没有类的观点,很多初学者都掉坑原型链当中。
ES6将类引入了,大大简化了本来庞杂的事情(夙昔要完成继续很多贫苦:工场形式没法处理对象辨认,组织函数形式内存糟蹋,原型形式私有要领还要连系组织形式…)
定义
class Person {
constructor(name,age){
this.name = name
this.age = age
}
say(){
console.log(`Hello my name is ${this.name}`)
}
}
//person 实例
let person = new Person('Yoda',2000)
person.name //'Yoda'
person.say() //Hello my name is Yoda
完成类的继续,我要用到extend:
class Programmer extends Person{
constructor(name,age, language){
super(name,age)
this.language = language
}
}
let javaProgrammer = new Programmer('Jack',22,'java')
javaProgrammer.language //'java'
继续类能够重写父类的要领:
class Programmer extends Person{
constructor(name,age, language){
super(name,age)
this.language = language
}
say(){
console.log(`I am a programmer using ${this.language}`)
}
}
let javaProgrammer = new Programmer('Jack',22,'java')
javaProgrammer.say() //I am a programmer using java