前端ES6，HTML5，CSS3新特性总结

ES6

数据类型Symbol

新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名

//每一个都是独一无二的值
let sy = Symbol("KK");
let sy1 = Symbol("KK");
sy===sy1 //false 相同参数 Symbol() 返回的值不相等

//唯一性，保证每个属性的名字都是独一无二的，从根本上防止属性名的冲突；

let sy = Symbol("key1");
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
//Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性
syObject[sy];  // "kk"
syObject.sy;   // undefined

//不能被遍历 只能通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。
for (let i in syObject) {
  console.log(i);
}    // 无输出
 
Object.keys(syObject);    
                 // []
Object.getOwnPropertySymbols(syObject);    // [Symbol(key1)]  直接在给定对象上找到的所有符号属性的数组。
Reflect.ownKeys(syObject);// [Symbol(key1)]

知识点：

1. Object.keys() 方法返回一个数组，元素均为对象自有的可枚举属性
2. Object.getOwnPropertySymbols()一个给定对象自身的所有 Symbol 属性的数组
3. Reflect.ownKeys返回一个由目标对象自身的属性键组成的数组，包含可枚举，不可枚举，Symbol属性，不包含继承自原型的。

扩展运算符

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
//用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

• 数组

//合并数组
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
//将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
//如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
const [...rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错

简化对象写法

let name='ll'
let age=7
let sex='女
let scorpios = { 
    name, 
    age, 
    sex, 
    change() { 
        console.log('信息') 
    } 
};

变量声明

Es6新增 let const 变量声明

• const
  1.为常量不可以重复声明
  2.块级作用域
  3.声明时必须赋值且不能修改
  4.声明的数组内容可以被修改（对象所指向的地址没有变就行）

/	let	var
Es6	是	否
可以重复声明	否	是
存在块级作用域	是	否
变量提升	创建提升	创建和初始化提升

• 在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区。

小知识：什么是变量提升和函数提升？

ES6之前，函数没有块级作用域（一对{}即一个块级作用域），只有全局作用域和函数作用域。

console.log(list); 
console.log(list()); 
var list= 456;
function list() {
    console.log(123); 
}
console.log(list); 
list= 789;
console.log(list); 
console.log(list()) 

// 提升后结果
// 函数提升，函数提升优先级高于变量提升
var list= function() {
    console.log(123)
};
// 变量提升，变量提升不会覆盖（同名）函数提升，
//只有变量再次赋值时，才会被覆盖
var list;
console.log(list);
console.log(list());
list= 456;
// 变量赋值，覆盖同名函数字面量 函数变为变量
console.log(list);
// 再次赋值
list= 789
console.log(list);
console.log(list());

//结果
f list() { console.log(123) }
123  // 执行list()里的console.log
undefined // list()的返回值，如果函数没有返回值，默认为：undefined
456
789
[typeError]：list is not a function``

解构赋值

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.
如果解构不成功，值为undefined；
可以写默认值 变量 = 默认值
优先取要解构数据中的值，如果没有或为undefined那么取默认值，默认值不存在，那么就是undefined

• 数组解构
  数组是有次序的按照数组的顺序一一解构

 let [a, b, c] = [1, 2, 3];
 console.log(a,b,c) //1,2,3
//占位忽略
let [a, , b] = [1, 2, 3];
 console.log(a,c) //1,3
 //不完全解构
 let [a = 1, b] = []; 
 console.log(a,b) // 1,undefined
 //剩余运算符
 let [a, ...b] = [1, 2, 3];
  console.log(a,b) // 1,2,3
 //优先解构值
 let [a=4,b=5,c=6]=[,undefined,null];
 console.log(a,b,c) // 4,5,null
 

• 对象解构

let obj={
    name:'ll',
    age:18
}
let {name,age}=obj;
console.log(name,age) -> 'll' 18
//可以自定义变量值
let {name:n,age:a}=obj;
console.log(n,a) -> 'll' 18
console.log(name,age) ->打印报错 未声明
//其余忽略 占位 剩余与数组一致！

• 字符串解构

let str='hello World';
let [a,b,c]=str;
console.log(a,b,c) -> h e l 

promise

是ES6中异步编程的解决方案，解决了回调地狱问题，具有三种状态，pening,rejected,fulfilled,状态修改只能是pending=>rejected或pending=>fulfilled,状态不可逆。

缺点：一旦新建，无法取消或暂停
不设置回调函数抛出错误，外部将无法接收错误
无法精确捕捉错误，错误按顺序执行。

 //实例化 Promise 对象，成功是resolve，失败是reject
const p = new Promise(function(resolve, reject){
        // let data = '数据库中的用户数据';
        // resolve(data);
        let err = '数据读取失败';
        reject(err);
});

//调用 promise 对象的 then 方法  then 方法中有成功，失败回调，catch捕捉整个过程产生的错误
p.then(value=>{
    console.log(value);
},reason=>{
    console.error(reason);
}).catch(error=>{
 console.error(error);
})

• 原型方法
  1.Promise.prototype.then
  2.Promise.prototype.catch

• 构造函数的方法
  1.promise.resolve (value)=>{} 返回成功对象
  2.promise,reject (reason)=>{} 返回失败对象
  3.promise.all 将多个实例一起执行，其中一个失败，则进入catch方法，执行时间取决于执行最慢的那个实例

const p=Promise.all([p1,p2,p3])

6.promise.any() 多个实例一起执行，有一个成功，则显示成功，全部失败进入catch方法
4.peomise.racr() 将多个实例一起执行，谁执行的快，就先返回谁的状态，同时P的状态也改变。

const p=Promise.race([p1,p2,p3])

5.promise.allSettled() 所有实例返回结果后，状态变为fulfilled

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
 
const allSettledPromise = Promise.allSettled([resolved, rejected]);
 
allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

6.promise.prototype.finally()：promise实例无论状态是什么都会执行的函数。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
 
//在执行完then和catch后，仍然执行finally()

扩展知识点

• Promise 中reject 和 catch 处理上有什么区别？

reject 是用来抛出异常，catch 是用来处理异常
reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
网络异常（比如断网），会直接进入catch而不会进入then的第二个回调
如果是then的第一个参数函数 resolve 中抛出了异常，即成功回调函数出现异常后，then的第二个参数reject 捕获捕获不到，catch方法可以捕获到。

//如果是promise内部报错 reject 抛出错误后，then 的第二个参数就能捕获得到，如果then的第二个参数不存在，则catch方法会捕获到。
var p = new Promise(function (resolve, reject) {
          var flag = false;
          if(flag){
            resolve('这是数据2');
          }else{
            reject('这是数据2');
          }
        });
        p.then(function(data){//状态为fulfilled时执行
            console.log(data);
            console.log('这是成功操作');
        },function(reason){ //状态为rejected时执行
            console.log(reason);
            console.log('这是失败的操作');
        });
        
     var p = new Promise(function (resolve, reject) {
            var flag = false;
            if(flag){
              resolve('这是数据2');
            }else{
              reject('这是数据2');
            }
          });
          p.then(function(data){
              console.log(data);
              console.log('这是成功操作');
          }).catch(function(reason){
              console.log(reason);
              console.log('这是失败的操作');
          });

• Async/await与promise 区别

1 promise是ES6，async/await是ES7
2 async/await相对于promise来讲，写法更加优雅
3 reject状态：
1）promise错误可以通过catch来捕捉，建议尾部捕获错误，
2）async/await既可以用.then又可以用try-catch捕捉

async建议在promise之上，内部retrun返回的值，会成为then方法回调函数的参数。

asncy function fn(){
retrun 'haha'
}
fn().then(res=>console.log(res)) 'haha'

await只能在async中使用，await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完，不输出结果，要等最第二个接口执行完，才返回这两个的结果

function nvm(num){
　　return new Promise((resolve, reject)=>{
　　　　setTimeout(()=>{
　　　　　　resolve(num*2)
　　　　},2000)
　　})
}
function nvm2(num){
　　return new Promise((resolve, reject)=>{
　　　　setTimeout(()=>{
　　　　　　resolve(num*2)
　　　　},3000)
　　})
}
async function timi(res){
　　let a=await nvm2(2)    //这里执行3s //await后面可以跟任何方法，对象
　　let b=await 123 
　　let c=await nvm(2)  //这里再执行2s
　　console.log(a,b,c)  //你等5s，才打印出结果 4 123 4
}
timi() //执行async方法


//错误捕捉 try/catch
//捕获异步错误：
run();
async function run() {
  try {
    await Promise.reject(new Error('Oops!'));
  } catch (error) {
    error.message; // "Oops!"
  }
}
//捕获同步错误：
run();
async function run() {
  const v = null;
  try {
    await Promise.resolve('foo');
    v.thisWillThrow;
  } catch (error) {
    // "TypeError: Cannot read property 'thisWillThrow' of null"
    error.message;
  }
}

模块化

• export
• import

模板字符串

//${}结合(``)
 name="ll"
let newhtml=`

               
${name}
        `

函数扩展

• 箭头函数

1. 不需要 function 关键字来创建函数
2. 省略 return 关键字
3. 继承当前上下文的 this 关键字

//省小括号 有且仅有一个参数的时候
let fn2 = num => { 
    return num * 10; 
}; 
//省花括号 函数返回有且仅有一个表达式
let fn3 = score => score * 20; 

数组扩展

• set
  set是Es6引入的一种类似Array的新的数据结构，set的实例成员都是唯一不重复的。适用于数组去重

//创建一个空集合 
let s = new Set();
//创建一个非空集合，自动去重
let s1 = new Set([1,2,3,1,2,3]); 
//集合属性与方法 
console.log(s1.size); //返回集合的元素个数
console.log(s1.add(4)); //添加新元素 
console.log(s1.delete(1)); //删除元素 
console.log(s1.has(2)); //检测是否存在某个值 
console.log(s1.clear());//清空集合 

• map
  set是Es6引入的一种类似object的新的数据结构.

//创建一个空 map 
let m = new Map(); 
//创建一个非空 map 
let m2 = new Map([ 
    ['name','scorpios'], 
    ['slogon','向天再借300年'] 
]);

数值、对象扩展

/	用法
Number.isFinite()	一个数值是否为有限的
Number.isNaN()	检查一个值是否为 NaN
Math.trunc	去除一个数的小数，返回整数部分
Number.isInteger	判断一个数值是否为整数
Object.is	两个值是否严格相等，与『 ===』行为基本一致
Object.assign	对象的合并，将源对象的所有可枚举属性，复制到目标对象
proto、 setPrototypeOf、 setPrototypeOf	设置对象的原型

HTML5

语义化标签

header,main,footer,nav,aside,section（定义文档中的节（section、区段））,datalist，dialog等

语义化标签的优点
1、代码结构清晰，易于阅读，利于开发和维护
2、提高用户体验，在样式加载失败时，页面结构清晰
3、方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
4、有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

表单

• 表单元素

/	描述
datalist	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
keygen	规定用于表单的密钥对生成器字段
output	定义不同类型的输出，比如脚本的输出。

//
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>
// 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。
<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

• 表单属性

表单属性	描述
plachoder	在用户输入值前会显示在输入框的值
required	boolean属性。不能为空
pattern	用于验证input元素的值的正则表达式
min和max	设置元素最小值和最大值
step	为输入域规定合法的数字间隔
height和width	image类型的input标签的图像高和宽
autofocus	boolean.页面加载时，自动获取焦点
multiple	boolean。input元素中可选择多个值

 <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>

小知识
修改placeholder里面的字体的颜色

input::placeholder{
 color:red
}

• 表单类型增强 input 新增属性

input的type	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC时间）
email	包含e-mail地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL地址的输入域
week	选择周和年

新增事件

事件	描述
onresize	调整窗口大小时触发
ondrag	拖动元素时触发
onscroll	滚动元素滚动元素的滚动条时触发
onmousewheel	转动鼠标滚轮时触发
onerror	错误发生时触发
onplay	媒介数据要开始播放时触发
onpause	媒介数据暂停时触发

web存储

• localStorage 永久存储，保存的数据没有过期时间，直到手动去删除。
• sessionStorage 临时的会话存储，在关闭窗口或标签页之后将会删除这些数据

// 第一个参数是保存的变量名，第二个是赋给变量的值
localStorage.setItem('Author', 'local');

// 2、从本地存储获取数据
localStorage.getItem('Author');

// 3、从本地存储删除某个已保存的数据
localStorage.removeItem('Author');

// 4、清除所有保存的数据
localStorage.clear();

小知识
localStorage、sessionStorage和cookie异同点？
相同点：保存在浏览器端，且同源的。
不同点：

/	cookie	sessionStorage	localStorage
生命期	设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭（默认是关闭浏览器后失效）	仅在当前会话下有效，关闭页面或浏览器后被清除	除非被清除，否则永久保存
大小限制	不能超过4k	5MB及以上	5MB及以上
与服务器通信	每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题	仅在浏览器中保存，不与服务器通信	仅在浏览器中保存，不与服务器通信
是否可以跨域	一般不能，相同 domain(域名) 下可以允许接口请求携带 cookie	否	否
作用域	同源共享	不在不同的浏览器窗口中共享，即使是同一个页面	同源共享
应用场景	判断用户是否登陆过网站，以便下次登录时能够实现自动登录。	敏感账号一次性登录	常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据

canvas,svg

/	svg	canva
原理	使用XML描绘2D图像	利用DOM元素描绘
特点	矢量，可操作	像素，不可操作
性能	大面积，小数量（<10k)	适合小面积，大数量应用场景
处理	交互至图形元素	交互至像素点
特点	矢量，可操作	像素，不可操作
是否依赖分辨率	否	是
是否支持事件处理	是	否
应用场景	大面积渲染的谷歌地图	支持频繁重绘的游戏应用

video audio

autoplay 自动播放（18年开始，谷歌浏览器不支持自动播放）
muted 静音播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度

webSocket

基于tcp协议的全双工通信

应用程序缓存

Applocation Cache

CSS3

元素选择器

:nth-child

边框

/	描述
border-radius	CSS3圆角边框。
box-shadow	CSS3边框阴影。
border-image	CSS3边框图片。

box-shadow:10px 10px 5px #888888 outset/inset
//水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 颜色 外部阴影 /内部阴影;
border-image:url(border.png) 30 30 round;
//路径  图片边框向内偏移。 图片边框的宽度 边框图像区域超出边框的量 图像边框平铺(repeated)/铺满(rounded)/拉伸(stretched)。

背景

/	描述
background-size	属性规定背景图片的尺寸。
background-origin	属性规定背景图片的定位区域。
background-clip	规定背景的绘制区域。

文字效果

/	描述
hanging-punctuation	规定标点字符是否位于线框之外。
punctuation-trim	规定是否对标点字符进行修剪。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline	规定文本的轮廓。
text-overflow	规定当文本溢出包含元素时发生的事情。
text-shadow	向文本添加阴影。
text-wrap	规定文本的换行规则。
word-break	规定非中日韩文本的换行规则。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。

元素转换

/	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

过滤

transition: property duration timing-function delay;
//设置过渡效果的 CSS 属性的名称
//过渡效果需要多少秒或毫秒
// 速度效果的速度曲线  linear(以相同速度开始至结束)/ease(慢速开始，然后变快，然后慢速结束)/ease-in(以慢速开始)/ease-out(以慢速结束)/ease-in-out(以慢速开始和结束)
//过渡效果何时开始

动画

animation: name duration timing-function delay iteration-count direction;
//绑定到选择器的 keyframe 名称
//完成动画所花费的时间，以秒或毫秒计
//动画的速度曲线(与上文过度一致)
//在动画开始之前的延迟。
//动画应该播放的次数。
//是否应该轮流反向播放动画。
div{animation:mymove 5s infinite;}
@keyframes mymove
{
  from/0%   {left:0px;}
  to /100%  {left:200px;}
}

多列

/	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	设置 column-width 和 column-count 的简写