es6特性用法

6. ES6

6.1 简介

是js5的升级版

新增了许多特性，比如：模块化、块级作用域、箭头函数等

需要使用严格模式，在js开始加上 use strict

6.2 let使用

6.2.1 注意

1）在相同的作用域内，let不能重复申明一个变量

2）let声明变量不会被预解析

3）暂时性死区（变量在let声明前都不能访问，为了防止先调用后申明这个现象）

6.2.2 let 和 for 的使用

1）let申明变量拥有块级作用域，块级作用域可以直接写一对大括号，以后就不能写自执行函数

6.3 const

6.3.1 const 申明一个常亮，一旦声明了之后就不能更改

6.3.2 注意：

1）如果声明后再去修改的话会报错
2）只声明不赋值会报错
3）只能先声明后使用
4）不能重复声明一个常量
5）但是const声明的对象中的属性是可以修改的

6.4.3 样例

const Person = {
name : "zhangsan",
age : 10
}
console.log(Person.name,Person.age)
Person.name = "lisi"
Person.age = 1
console.log(Person.name,Person.age)

6.4 数组的结构赋值

6.4.1 样例：

let [a1,b1,c1] = [1,2,3]
console.log(a1)
console.log(b1)
console.log(c1)

function flist() {
return [1,2,3]
}
let [a2,b2,c2] = flist()
console.log(a2)
console.log(b2)
console.log(c2)

6.5 对象的结构赋值

6.5.1 注意

等号左边和等号右边都要是对象，名字要一一对应，顺序没事

6.5.2 样例：

var obj = {
id : 1,
name : '张三',
age : 30,
language : ['1','2','3'],
study : function () {
console.log('wori')
}
}
let {id,name,age,language,study} = obj
console.log(name,language)

6.6 字符串拼接

6.6.1 注意

1）字符串需要用一对反引号进行包裹，可以定义多行

2）要拼进去的数据需要放在$()里面

3）大括号里面还可以进行运算或者调用函数

6.6.2 案例

'use strict' //定义严格模式
let obj1 = {
title : 'test',
content : '123123123'
}
let obj2 = {
title : 'test2',
content : '.............................'
}
let articleElement = document.getElementById('article')
// 以前的方式
articleElement.innerHTML = "<h1>"+obj2.title+"</h1><p>"+obj2.content+"</p>"
// 现在的字符串模板
articleElement.innerHTML = `<h1>${obj2.title}</h1><p>${obj2.content}</p><h2>${f123()+"123"}</h2>`

function f123() {
return '123123123'
}

6.7 箭头函数

6.7.1 注意

1）function 用 var/let/const 来表示
2）参数要写在第一个等号后面
  如果没有参数，需要写一堆空的小括号
  只有一个参数，那就直接写下去不需要加括号
  参数有多个，需要加上一个小括号，参数用逗号隔开
3）函数主题内容是放在箭头的后面，如果语句只有一条的话那就直接写，如果语句多条，就放在大括号中

6.7.2 案例

// 1. 没有形参，函数只有一行代码
var fn1 = function () {
console.log('1')
}
var fn1_new = () => console.log('1new')
fn1();
fn1_new();
// 有一个参数
var fn2_new = a => console.log(a)
fn2_new('2new')
// 有两个参数
var fn3_new = (a,b) => {console.log(a);console.log(b);}
fn3_new("new3","newnew3")
### 6.8 rest 函数
#### 6.8.1 案例
// 1. 用rest来代替argument
function sum() {
var sum = 0
for(var i=0;i<arguments.length;i++){
sum += arguments[i]
}
return sum
}
console.log(sum(0,1,2,3,4))
// 2. 将集合转化为数组
var str = 'abcd'
console.log(1,str);
console.log(2,[...str]);    // 转换为数组
// 3. 将数组转化为集合
var number = [1,2,3,4]
console.log(3,number)
console.log(4,...number)    // 将数组解压

本文demo