前端ES6/7/8/9/10，CSS3，HTML5新特性总结

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

知识点：

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}
1
2
3
4
5

• 数组

//合并数组
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];
// 报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14

简化对象写法

let name='ll'
let age=7
let sex='女
let scorpios = { 
    name, 
    age, 
    sex, 
    change() { 
        console.log('信息') 
    } 
};
1
2
3
4
5
6
7
8
9
10
11

变量声明

Es6新增 let const 变量声明

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

• 在块作用域内，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``
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

解构赋值

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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 对象解构

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) ->打印报错 未声明
//其余忽略 占位 剩余与数组一致！
1
2
3
4
5
6
7
8
9
10
11

• 字符串解构

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 原型方法
  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])
1

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

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

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 }
// ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

扩展知识点

• 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('这是失败的操作');
          });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

• 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'
1
2
3
4

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;
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

模块化

• export
• import

模板字符串

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

               
${name}
        `
1
2
3
4
5

函数扩展

• 箭头函数

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

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

数组扩展

• 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());//清空集合 
1
2
3
4
5
6
7
8
9
10

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

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

1
2
3
4
5
6
7
8

数值、对象扩展

HTML5

语义化标签

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

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

表单

• 表单元素

//
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

• 表单属性

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

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

input::placeholder{
 color:red
}
1
2
3

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

新增事件

web存储

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

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

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

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

// 4、清除所有保存的数据
localStorage.clear();
1
2
3
4
5
6
7
8
9
10
11

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

canvas,svg

video audio

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

webSocket

基于tcp协议的全双工通信

应用程序缓存

Applocation Cache

CSS3

元素选择器

:nth-child

边框

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

背景

文字效果

元素转换

过滤

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

动画

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;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

多列