初识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参数代替
