基础//HTML5/CSS3/ES6新特性

基础//HTML5/CSS3/ES6新特性

1 HTML5

链接

html5 有哪些新特性？移除了哪些元素？如何处理 html5 兼容性问题？如何区分 html 和 html5？
1、新增元素：
内容元素：article、header、footer、section、nav、aside
表单元素：time、number、date、url、search、calendar
多媒体：video、audio
控件元素：websockt、webwork
绘画：canvas
存储：localStorage、sessionStorage
2、移除元素
big font basefont s tt u frame iframe
3、处理兼容性问题
通过 document.createElement 方法，让浏览器支持 HTML5 新标签
4、html5 的标签语义化更强

2 CSS3

链接

CSS3 新特性：
一、选择器
二、盒模型
三、背景和边框
① 背景：background、Gradients渐变
② 边框：border-radius圆角、box-shadow盒阴影、border-image边界图片
四、文字特效
五、2D/3D转换
（translate移动、rotate旋转、scale缩放、skew倾斜、matrix合并）
六、过渡 transition
七、动画
（@keyframes、animation、animation-name、animation-duration…）
八、多列布局
（column-count、column-gap、column-rule-style…）
九、用户界面 resize、box-sizing、outline-offset

3 ES6

链接

ES6 新特性：
一、let const
二、解构赋值
三、symbol——数据类型，表示独一无二的值，用来定义对象唯一属性名
四、Map、Set
五、Class 类
六、箭头函数
七、Promise对象

3.1 var、let、const 之间的区别

var 定义的变量可以重复声明、修改，不初始化会输出 undefined
let 定义的变量不可以修改，是块级作用域，函数内部使用 let 后，对函数外部没有影响
const 定义常量，不可修改，且必须要初始化

3.2 解构赋值

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)

function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {
  console.log(name, age, address, gender)
}
saveInfo()

3.3 forEach、for in、for of 三者区别

forEach 用来遍历 数组。
for in 用来遍历 对象。
for of 用来遍历 数组、对象。
for in —— 对象的key值。相当于 Object.keys（）
for of —— 对象的value值。相当于 Object.values（）

3.4 使用箭头函数应注意什么？

1、用了箭头函数，this 指向 父级；
2、不能使用 aguments 对象；
3、不能使用 构造函数，就是不能使用 new 命令，否则会跑出一个错误；
4、不能用作 Generator 函数

3.5 箭头函数和普通函数的区别

① 箭头函数是匿名函数，用完后会释放
② 箭头函数不是构造函数，没有原型、不可以new出来
③ 普通函数的 this 指向是动态可变的，箭头函数的 this 指向在声明的时候就确定了【一般是全局，被普通函数包含后指向上一层】
④ 普通函数的 this 指向不仅跟调用的源有关，还可以通过 apply、call、bind 改变，箭头函数不可以被改变

3.6 什么情况下不能使用箭头函数？

① 定义类的方法

（对象不能构成单独的作用域）
② 绑定动态的this

// button class=“btn”>点击我 /button>

// Window{…}
③ 代码复杂

3.7 Set、Get 的区别

Set 用于数据重组
Get 用于数据储存

3.8手写一个 promise

var promise = new Promise（（resolve，reject）=> {
	if（操作成功）{
		resolve（value）
	} else {
		reject（error）
	}
})
promise.then（function（value）{
	// success
}，function（value）{
	// faluire
}