es6 设置元素样式

ES6新增属性

因为node用的大部分是ES6的语法，所以要先学习一下ES6新语法

let-变量声明

在ES5中的变量声明为var，而ES6新增变量声明let

区别	var	let
变量提升	√	×
块级作用域	×(函数作用域)	√
重复声明	√	×
重新赋值	√	√

const-常量声明

• 没有变量提升
• 新增块级作用域
• 不可重复声明
• 不可以重新赋值
• 必须初始化

对象的解构赋值

就是把一个对象的属性对应的值赋值给了一个或多个变量

• 写法：

• 期中左边的为对象的键对应的值，右边的是要被赋值的变量

let { name: name1, age: age1 } =  {name: '名字',age: 18}
console.log(name1, age1)

• 简写：

• 如果对象的键和变量一个名就可以简写为:

let { name: name, age: age } =  {name: '名字',age: 18}
//上面的简写
let { name, age } = obj

• 默认值：

• 如果对象的属性值为undefined时触发默认值
• 否者就算有默认值还会赋值为对象的属性值

let { name, age, favor = '打游戏' } =  {name: '名字',age: 18}

数组的解构赋值

把数组的值依次赋值给变量

• 写法：

• 在一个中括号中写入要赋值的变量

let [num1, num2, num3] = [1, 2, 3]

• 默认值

• 如果数组的值为undefined时触发默认值
• 否者就算有默认值还会赋值为数组的值

let [nu1, nu2, nu3, nu4 = 100] = [1, 2, 3]

• 特殊写法:

• …变量（把后面的元素都装进一个数组中并赋值给变量）
• 不想赋值就写一个","就会略过对应元素

let [head, ...tail] = [1, 2, 3, 4];
console.log(x, tail)//1 [ 2, 3, 4 ]

let [x, , y] = [1, 2, 3];
console.log(x, y)//1 3

解构赋值配合函数声明

可以利用解构赋值来简化传参和可以设置默认值

function fun({ name, age, favor = '默认值' } = {}) {
    console.log(name, age, favor)
}
//相当于：{ name, age, favor = '默认值' }={name: 'zjl',age: 20}
fun({
    name: 'zjl',
    age: 20
})
//相当于指向默认值{}
fun()

箭头函数

箭头函数就是匿名函数的一个简写

• 箭头函数的简写规律

//test 1
var f = name => console.log(name)
f('zjl')

//test 2
var fu = () => true
console.log(fu())

//test 3
var fun = (name, age) => {
    console.log(name, age)
    return false
}
console.log(fun('zjl', 18))

对象成员的简写

如果有变量和对象中的键的名称一样时，对象就可以进行简写

• 除了属性可以简写，方法也可以简写

let name = 'zjl';
let age = 18;
let obj = {
    name,//name:name
    age,//age:age
    item: age,
    sayMe() {//sayMe:function(){console.log('hello world!')}
        console.log('hello world!')
    }
}

展开运算符

展开运算符分为，对象展开和数组展开

• 对象展开

就是把一个对象的所有元素赋值到另一个对象中

let boy = {
    name: '王刚',
    age: 20
}
let favor = {
    kill: '征服',
    sayHi() {
        console.log('滚！！')
    }
}
let obj = {
    ...boy,//就相当于boy对象的所有元素
    ...favor,//就相当于favor对象的所有元素
    name: 'zjl'//boy也有name属性，但是这个是后写的，所以要覆盖boy中的name属性
}

• 数组展开

把数组的每个值拎出来

/**
 * 数组展开主要应用于:
    * 数组拼接
    * Math.min()和Math.max()
*/

//数组拼接
let list1 = [1, 2, 3]
let list2 = [...list1, 4, 5, 6]
console.log(...list1)//1,2,3

//数组最大值，最小值
//以前做法
console.log(Math.max.apply(Math, list2))//6
//数组展开做法
console.log(Math.max(...list2))//6

Set数据类型

• 用途：数组去重
• 返回值：Set类型的对象

var arr = [10, 20, 30, 40, 10, 20, 50]

//方式1
var arrSet = new Set(arr)
//因为是个Set类型的对象。要转回成数组
var newArr = [...arrSet]

//方式2(简写)
let newarr = [...new Set(arr)]

模板字符串

用``表示，会保留原样字符串格式，以及可以占位

• ${}表示引入变量，和调用函数并返回值的符号

var fn = () => '我很好'
console.log(`你好吗,${fn()}`)//你好吗,我很好

ES6转成浏览器兼容的ES5

网址—>https://www.babeljs.cn/