H5、CSS3和ES6新特性

CSS3 新特性

01 新增语义化标签

: 头部标签

: 导航标签

: 内容标签

: 定义文档某个区域

: 侧边栏区域

: 尾部标签

02 新增多媒体标签

03 新增 input 类型

type=“email url date time month week number tel search color”

04 新增表单属性

HTML5 新特性

01 新增选择器

属性选择器可以根据元素的特定属性来选择元素，可以不借助于类或者 id 选择器。

根据文档结构来选择元素，常用于根据父级选择器选择里面的子元素。

• E:first-child 父元素中第一个子元素 E
• E:last-child 父元素中最后一个 E 元素
• E:nth-child(n) 父元素中第 n 个子元素 E
• E:first-of-type 指定类型 E 的第一个
• E:last-of-type 指定类型 E 的最后一个
• E:nth-of-type(n) 指定类型 E 的第 n 个

对于 E:nth-child(n)，n 可以是数字或者是关键字，公式。

关键字：even 偶数 odd 奇数

当括号中是 n 时，n 会进行计算，从 0 开始一直加到最后，所以写 n 时就等价于选择了所有孩子。

注意必须是 n 不能是其他的字母。

伪元素选择器可以利用 CSS 创建新标签，不需要 HTML 标签，从而简化 HTML 结构。

伪元素清除浮动

// 1、额外标签法（隔墙法），要求新的空标签必须是块级元素
// 2、父级添加 overflow 属性
// 3、父级添加 after 伪元素
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
// 4、父级添加双伪元素
.clearfix::before,.clearfix::after {
    content:"";
    display:table; 
}
.clearfix::after{
    clear:both;
}

02 盒子模型 border-box

1. box-sizing: content-box 盒子大小为 width + padding + border（以前默认的）2. box-sizing: border-box 盒子大小为 width

03 图片变模糊 filter

filter：函数() 如：filter:blur(5px) // blur 模糊处理，数值越大越模糊

04 计算盒子宽度 width:calc 函数

width:calc(100%-80px); // 执行一些计算

05 过渡 transition

transition: 要过渡的属性 花费时间 运动曲线 何时开始； // 搭配 :hover 使用

属性：宽度高度 背景颜色 内外边距

运动曲线：linear、ease、ease-in、ease-out

06 2D 转换 transform

转换（transform）：位移变化要放在最前面

translate(50%,50%)中的百分比是相对于自身元素的。不会影响其它元素的位置。

rotate(45deg) 角度为正时，顺时针。

transform-origin:x y; 设置元素转换的中心点

07 动画 animation

1. 用 keyframes 定义动画
2. 元素使用动画

@keyframe 动画名称 {
	0%{
		width:100px;
	}
	100%{
		width:200px;
	}
}
div {
	width:200px;
	height:200px;
    background-color:aqua;
    margin:100px auto;
    // 调用动画
    animation-name: 动画名称;
    // 持续时间
    animation-duration: 持续时间;
    animation-timing-function:速度曲线;
    animation-delay:延时;
    animation-iteration-count:被播放次数如 infinite;
    animation-play-state:运行或者暂停;
}

08 3D 转换

transform:translate3d(x,y,z)

perspective// 指的是眼睛与屏幕的距离，值越小，看到的就越大；写在被观察元素的父盒子中

transform:rotate3d(x,y,z,deg)

transform-style:flat // 默认的，开启立体空间使用 preserve-3d，写在父元素

09 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

ES6 新特性

01 let 和 const

ES6 推荐使用 let 声明局部变量

• let 和 const 不存在变量提升，只能在块级作用域里访问，同一作用域下不能声明同一变量
• var 定义的变量，变量提升，没有块的概念，可以跨块访问
• const 用来定义常量，使用时必须初始化，而且不能修改

02 Symbol、BigInt

基本数据类型：undefined、null、Number（数值）、String（字符串）、Boolean（布尔值）、BigInt（大整数）
特殊的数据类型：Object（对象）

Symbol 是 ES6 中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算，主要用于防止第三方框架的同名属性被覆盖。
大整数（BigInt）：用于表示任意精度的整数。在传统的 JavaScript 中，数字类型被限制为 64 位双精度浮点数，因此无法精确表示超过 Number.MAX_SAFE_INTEGER（2^53 – 1）的整数。大整数解决了这个限制，可以表示任意大的整数。可以使用 n 后缀或 BigInt() 函数创建大整数。

03 模板字符串 & 字符串新方法

模板字符串

let html="
"+""+url+""+"
";

let html=`
${url}`

字符串新方法

• includes() 判断字符串是否包含参数字符串，返回 Boolean 值
• startsWith() 或 endsWith() 判断是否以参数字符串开头或结尾，返回 Boolean 值。可以有两个参数，用一个数字表示开始查找的位置。
• repeat() 按指定 重复 次数返回一个新的字符串
• padStart() 或 padEnd() 用参数字符串按给定长度从前面或者后面 补全 字符串，返回新字符串。

let arr='hel'
console.log(arr.padEnd(6,'o')) 
console.log(arr.padEnd(6)) 		
console.log(arr.padStrat(5,'o')) 

04（数组 & 对象）解构表达式

解构赋值是对赋值运算符的扩展。针对数组或者对象进行模式匹配，对变量进行赋值。

字符串、以及 ES6 新增的 Map 和 Set 都可以使用。

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

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

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

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

let obj={
    name:"li",
    age:18
};
let {name,age}=obj;
console.log(name,age);	
let {name:myName,age:myAge}=obj;	 
console.log(myName,myAge);	

05 Map 和 Set

Map 和 Set 属于 es6 新增的对象

• Map 对象用于保存键值对，任何 JavaScript 支持的值都可以作为键、值。

区别：1、object 的键只能是字符串或者 Symbol 值；

2、Map 对象有一个 size()属性，为键值对的个数，而 object 没有。

let myMap=new Map([['name','li'],['age',18]]);
console.log(myMap);	
myMap.set('sex','male');
console.log(myMap.size);	
myMap.get('name');
myMap.delete('sex');
myMap.has('sex');

• Set 表示一组唯一的值，其中每个值只能出现一次。Set 提供了高效的查找和添加元素的操作。类似数组。

let mySet=new Set([1,2,3]);
console.log(mySet);	
mySet.add(4);	
mySet.delete(1);	
mySet.has(1);	

WeakMap：类似于 Map，但键只能是对象，并且对键的引用是弱引用。当键不再被引用时，它们可以被垃圾回收。

WeakSet：类似于 Set，但值只能是对象，并且对值的引用是弱引用。当值不再被引用时，它们可以被垃圾回收。
数组的去重

let arr=[1,1,2,4,4];
let mySet=new Set(arr);
let newArr=Array.from(mySet);
console.log(newArr);	

06 数组的新方法

• Array.from() 将可迭代对象转换为新的数组

let arr=[1,2,3];
let obj={
    double(n){
        return n*2;
    }
}


console.log(Array.from(arr, function(n){
    return this.double(n);
},obj));	

• includes() 查看数组中是否 存在 这个元素
• map() 原数组经过 运算 后的数组，或者从对象数组中拿某个属性
• filter() 筛选 满足条件的数据成为一个新数组，不会影响旧数组

let arr=[1,33,2,44];
let new1=arr.map((v)=>v>10);	
let new2=arr.map((v)=>v*2);	
let new3=arr.filter((v)=>v>10);	
let new4=arr.filter((v)=>v*2);	

• forEach() 循环 遍历 数组中的每一项，没有返回值
• find() 查找数组中符合条件的 第一个 元素，直接返回
• some() 找到 一个符合 条件的就返回 true
• every() 数组 所有值都符合 条件才返回 true

07 object 的新方法

• Object.is() // 判断两个值是否为同一个值
• Object.assign() // 将所有可枚举的属性的值从一个或多个源对象分配到目标对象，并返回目标对象。将对象合并到第一个对象，相同的属性会覆盖
• Object.keys() // 返回对象所有属性
• Object.values() // 返回对象所有属性值
• Object.entries() // 返回多个数组，每个数组是 key-value

08 对象声明简写 &…对象扩展符

声明对象时，属性名与引用的变量名相同时就可以省略。（k，v 一致省略 v）

let obj={
    name:"li",
    age:18
};
let obj2={...obj}
console.log(obj2==obj)
console.log(obj2)	

const p1={a:1}
const p2={b:2,a:5}
let newO={...p1,...p2}
console.log(newO);	

09 函数参数默认值

function add(a=0,b=0){
    return a+b;
}
let x=add()	
let y=add(2)	
let z=add(3,4)	

10 箭头函数

箭头函数实现了一种更加简洁地书写方式。箭头函数内部：

• 没有 arguments（无法在函数内部获取形参）
• 也没有 prototype 属性
• 不能用 new 关键字调用箭头函数
• 其内部 this 永远指向其父级对象的 this

let sum=(a,b) => a+b

11 class 类

class 关键字定义类，本质仍是一个函数。类的继承通过 extends 关键字实现，子类必须在 constructor 中调用super()

class Person {
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log(this.name+':'+this.age);
    }
}
class Student extends Person {
    constructor(name,age,sex) {
        super(name,age);
        this.sex=sex;
    }
}
var stu=new Student("muzi",18,"male")

12 promise&proxy

13 模块化

import '模块名称' from '路径'
import from '路径'

• 导出 export 和 export default

let name='muzi',age=18;
export {name,age};

• 优点：防止命名冲突；复用性强

14 运算符

• 扩展运算符 …
• 可选链 ?.
• 函数绑定运算符 ::