前端学习笔记-ES6基础(一)

一、新的变量声明方式 let/const

与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。

//es5
console.log(a)  --> undefined
var a = 10
 
//es6
console.log(a)  --> a is not defined
let a = 10

代码编译成es5的时候还是会有变量提升
我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量
当值为基础数据类型时,那么这里的值,就是指值本身。
基础数据类型包括(undefined、null、Number、String、Boolean、Symbol)
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,只需要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。
当我们试图改变const声明的变量时,则会报错。

const a = null
a = 10 //会报错
const b = []
b.push(1) //b = [1]不会报错
b = [] //因为[]不是基础数据类型,b只是[]在内存中的引用,实际上b是不能变的,但是[]是可以变的

二、箭头函数的使用

// es5 
var fn = function(a, b) { return a + b; } 
// es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号 
const fn = (a, b) => a + b; 
// es5 
var foo = function() { var a = 20; var b = 30; return a + b; } 
// es6 
const foo = () => { const a = 20; const b = 30; return a + b; }

箭头函数可以替换函数表达式,但是不能替换函数声明

其次还有一个至关重要的一点,那就是箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this。

//ES5
var person = {
    name: 'Tom',
    getName: function(){
        return this.name //Tom
    }
}
//ES6
var person = {
    name: 'Tom',
    getName: () => this.name  //undefined.name
}


在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined

可以用ES5中保存this的方式处理

//ES6
var person = {
    name: 'Tom',
    getName: (){
        return setTimeout(()=>this.name,1000)
    }
}
//编译成es5就变成了
var person = {
    name: 'Tom',
    getName: function(){
        let _this = this
        return setTime(function (){
            _this.name
        })
    }
}
//注意:箭头函数中无法访问arguments对象

三、模板字符串

//ES5
var name = 'Tom'
var age = 22
var s = name + '今年' + age + '岁' // Tom今年22岁
//ES6
var s = `${name}今年${age}岁`      // Tom今年22岁

使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式。

四、解析结构

//ES5
var arrary = ['Tom',22]
var object = {name: 'Tom', age: 22}
var name = object.name
var age = object.age
//或者
var name = array[0]
var age = array[1]
 
//ES6
var [name, age] = array //效果和var name = array[0],var age = array[1]一样
var {name, age} = object //效果和var name = object.name,var age = object.age一样

数组以序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。

五、展开运算符

var arr1 = [1,2,3]
var arr2 = [4,5,6]
var obj1 = {a:1, b:2, c:3}
var obj2 = {d:3, e:5, f:6}
1、连接arr1和arr2
var arr = [...arr1, ...arr2]  //[1,2,3,4,5,6]
2、连接obj1和obj2
var obj = {...obj1, ...obj2}  //{a:1, b:2, c:3, d:3, e:5, f:6}

六、函数参数默认值

//ES5
function add(x, y) {
    var x = x || 10
    var y = y || 20
    return x + y
}
//ES6
function add(x=10, y=20) return x+y





暂无评论