初识ES6（一）

初识ES6

let

let是一种类型的声明有以下几个特性

let声明的变量不存在预解析
let声明的变量在一个作用域内不允许重复，但不同作用域之间没有影响

关于作用域问题

ES6声明了块级作用域特点为

块级作用域可以理解为被两个大括号括起来的语句块

在块级作用域内定义的变量，外部是无法访问的如for循环括号中let的变量只能在循环中使用

let存在暂时性死区，在let声明一个变量之前是不允许访问这个变量的（还是因为不存在预解析问题）

const

const也是一种类型声明，不过是声明常量的

const声明的常量不允许被重新赋值
const声明的常量必须初始化

解构赋值

传统的赋值方法是这样的

var a = 1,b = 2,c = 3

但ES6中提供了一种新的变量赋值方法

可以用数组来存储变量及其初始化的值，可进行解构赋值

数组的解构赋值

var [a,b,c] = [1,2,3]

对象的解构赋值

let {a,b} = {a:'hello',b:'world'}
//对象属性别名
let {a:c,b} = {a:'hello',b:'world'}
console.log(c,b)    //如果打印a会出错，因为a:c代表将a改名为c，此时a相当于未声明

如果有了别名，原来的名字就无效了

字符串的解构赋值

let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e)
//一个变量一个字符，一一对应

let {length} = 'hello'
console.log(length) //可输出字符串长度，大括号 + length是固定格式

字符串扩展

ES6中新增了一些字符串的扩展

includes

console.log("hello world".includes("hello"))
//会返回一个布尔值，以判断主串中是否含有子串

includes还可有第二个参数，决定从主串中第几个索引开始判断

startsWith

判断字符串是否以对应的子串开始

a = 'hello world%#d'
console.log(a.startsWith('hello'))
//返回一个布尔值

endsWith

判断字符串是否以对应的子串结束

模板字符串

如果要在html中加入字符串，以前需要这样做

let obj = {
    username:'xiaoming',
    age:'18'
    gender:'male'
}
let  tag = '<div><span>' + obj.username + '</span><span>' + obj.age + '</span><span>' + obj.gender + '</span></div>'

但在ES6中，我们可以使用模板字符串

let tpl = `
    <div>
        <span>${obj.username}</span>
        <span>${obj.age}</span>
        <span>${obj.gender}</span>
    </div>
`

函数扩展

参数默认值

一般来讲，如果我们需要一个函数存在默认值，我们可能会如下操作

function demo(param){
    let b = param || 'hello world'
    console.log(b)
}

在ES6中，我们可以这样做

function demo(param = 'hello world'){
    console.log(param)
}

参数解构赋值

在ES6中，我们给多个参数赋初值也是有方法的

function demo({uname = 'lisi',age:18} = {}){
    console.log(uname,age);
}

rest参数

function demo(a,...param){
    console.log(a,param);
}
//param是一个数组
demo(1,2,3)

...+一个变量，可以接收除前面的参数外剩余的参数

扩展运算符

它的功能与rest相反，它能将数组进行拆解

function demo(a,b,c,d){
    console.log(a + b + c + d)
}
let arr = [1,2,3,4]
demo(...arr)

合并数组：

扩展运算符可以合并数组

let arr1 = [1,4,5];
let arr2 = [2,6,8];
let arr3 = [...arr1,...arr2];

箭头函数

如果我们要声明一个函数，可能需要这样

function foo(){
    console.log(111);
}
foo();

但在ES6中，我们可以尝试箭头函数

let foo = () => console.log(111)
foo();

二者是等效的，那么可能有人会有疑问，这只是一条语句，如果有多条语句时该怎么办呢？

我们只需要加上一个花括号就可以完美解决了

let foo = (a,b) => {let c = a + b ;console.log(c) }
foo(1,2)

举例，打印数组的索引及其值

let arr = [121 , 232 , 343];
//正常情况
arr.forEach(function(element,index){
    console.log(element,index);
});
//应用箭头函数
arr.forEach((element,index) => {
    console.log(element,index);
});

注意事项：

箭头函数的this的指向取决于函数的定义，而不是调用
箭头函数不可以new
箭头函数不可使用arguments获取参数列表，可以使用rest参数代替