H5新增、CSS3以及ES5、ES6新增特性

1.H5新增

新增特性：语义化标签、音视频处理API、canvas、拖拽释放API、history API、地理位置API、webSocket、web存储的localStorage和SessionStorage、表单控件

表单控件：
color：颜色控件，触发时会打开取色盘 <input type="color">
date：时间控件，显示年月日 <input type="date">
datetime-local：时间控件，显示年月日+时间 <input type="datetime-local">
month：时间控件，显示年+月 <input type="month">
time：时间控件，显示时间 <input type="time">
week：星期控件，显示年+周期数 <input type="week">
email：验证邮箱格式的控件 <input type="email">
tel: 验证电话格式的控件（最后显示为这种0830-120-111）<input type="tel">
range：输入不确定的精度数，默认值为最中间的值，同时使用min和max来调节可接受的范围 <input type="range">
text：输入单行文本，回车时里面的空格会被自动清除 <input type="text">
search：搜索字符串所在文本的区域，回车时里面的空格会被自动清除 <input type="search">

2.CSS3新增特性

a)新增选择器 p:nth-child(n){color: rgba(255,O,0,0.75)};
b)弹性盒模型 display: flex;
c)多列布局 column-count: 5;
d)媒体查询 @media (max-width: 480px){.box: fcolumn-count: 1}}
e)个性化字体 @font-face{font-family: BorderWeb;
src:urI(BORDERWO.eot);}
f)颜色透明度 color: rgba(255,0,0,0.75);
g)圆角 border-radius: 5px;
h)背景渐变 background:linear-gradient (red, green, blue);
i)阴影 box-shadow:3px 3px 3px rgba (0,64,128,0.3);j)倒影box-reflect: below 2px;
k)文字装饰 text-stroke-color: red;
I)文字溢出 text-overflow：ellipsis;
m)背景效果 background-size: 100px 100px;
n)平滑过渡 transition: all .3s ease-in . 1s;
o)动画 @keyframes anim-1{50% (border-radius: 50%;j}animation:
anim-1 1s;
p)转换transform
1旋转transform: rotate(20deg);
2倾斜transform: skew (150deg, -10deg);
3位移transform: translate (20px, 20px);
4缩放transform: scale (.5);

3.ES5新增特性

1. ES5新增的语法 - 严格模式

①严格模式的开启：

在全局/局部的最上面，添加字符串: 'use strict'

②严格模式的特性：

1.不允许省略var定义变量、不允许函数的形参同名、不允许普通函数中的this代表window——是undefined

2.全局开启的严格模式，可以规范所有代码，局部开启的严格模式，只能规范局部代码

③this关键字：

1.全局this、普通函数的this 、 自调用函数的this都代表window

2.事件函数中的this代表事件源

3.对象方法中的this代表当前对象

2. ES5新增了一些数组的方法

1、indexOf : 在数组中查找某个元素第一次出现的下标

语法：数组.indexOf(指定的元素)
返回值：如果在数组中找到元素了，返回这个元素对应的下标，如果没有找到，返回-1

var arr = [1,2,3,4,5,6,7,8,9]
//查找数字5在数组中的位置
var index = arr.indexOf(5)
// console.log(index);
// 利用indexOf判断某个元素是否数组中

2、forEach : 用于遍历数组的——不会产生新数组

语法：数组.forEach(function(value,index,array){
value是每次遍历出来的元素
index是每个元素对应的下标
array是当前正在遍历的数组
})
index和array是可选参数，在遍历的时候，这两个参数可加可不加
这个遍历方法，跟使用for循环遍历效果是一样的，方法内部就封装了for循环
但和for循环也是有区别的：区别如下

forEach的实现原理与普通for循环的区别？

1、实现原理：foreach循环其实是一种加强的for循环，相较于for循环更加简洁，可以用来遍历数组或者集合，它的底层原理其实是实现了迭代器的功能，所以本质上来说foreach可以遍历任何实现了Iterable接口的对象。

2、区别：

1）性能区别：for > forEach

a、for循环最简单，它没有任何额外的函数调用和上下文；

b、forEach函数复杂，【array.forEach(function(currentValue, index, arr), thisValue)】，有诸多参数和上下文在执行时需考虑，性能可能减弱

2）循环设置与跳出区别：

a、for循环可以使用continue跳出当次循环，使用break跳出整个循环，forEach不行，需结合try catch操作，通过return跳出当次循环，通过throw Error()的方式抛出异常，跳出整个循环；

b、for循环可控制循环起点i,forEach只能默认从0开始；

c、for循环可在循环中修改i,forEach不行（底层隐式控制index 自增，无法操作）

3）对全局变量的影响区别 ：

forEach()传入的是一个回调函数，因而形成一个作用域，其内部所定义的变量不会像for 循环一样影响全局变量

var arr = ['李','白','马','章','亮','强']
// 遍历这个数组
arr.forEach(function(value,index,array){
    // console.log(value);
    // console.log(index);
    // console.log(array);
}

3、map：遍历数组，将每个元素都经过函数处理——处理成新的元素，将所有新的元素组成一个新的数组返回

语法：数组map(function(value,index,array){
return newValue
})
返回所有新元素组成的新数组

var arr = [10,20,30]
// 让每个元素都加10
var brr = arr.map(function(v){//这里的value是形参，我们可以自定义
    var newValue = v + 10
    return newValue
})
console.log(brr)

4、filter: 过滤数组 - 遍历数组，将数组中满足指定条件的元素——组成新的数组并返回

语法：数组.fitler(function(value,index,array){
return 条件 })
返回值：返回满足条件的所有元素组成的数组

var arr = [85,90,68,45,96,21,59]
// 将数组中不及格的所有成绩放在新的数组中
var brr = arr.filter(function(v){
    return v > 60
})
console.log(brr);

5、some：循环，一个判断方法，最终返回布尔值，只要有一个满足我们设置，就会返回true，全不满足才会返回false，和逻辑或很像

var arr=[0,5,6,7,8,2,1,3];
var res=arr.some(function(value) {
 return value>9;
});
console.log(res)；//这里没有大于9的值，所以打印false

6、every：循环，一个判断方法，必须全部满足条件才会返回true——some是或的处理，every就是并且处理

var arr=[0,5,6,7,8,2,1,3];
var res=arr.every(function(value) {
 return value>-1;
});
console.log(res)；//这里都大于9的值，所以打印true

总结：

forEach和map就是遍历的处理，forEach不会生成新数组，而map会生成一个新数组；

filter是遍历处理加返回值布尔类型判断，会返回项true的新数组；

some和every是逻辑判断方法，根据返回值设定，返回布尔值结果。

4.ES6新增特性

1、let 和 const

let 是 ES6 中新增加的用于声明变量的关键字，它具有如下特点：

不存在变量提升，只在块级作用域有效

const 也是 ES6 中新增加的用于声明变量的关键字，它主要用来声明常量。它具有如下特点：

声明常量时必须赋值、只在块级作用域有效、赋值后，值不能修改

var，let，const的区别：

1. var 声明的变量作用域在所处的函数内，let 和 const 声明的变量作用域在所处的大括号内。

2. var 声明的变量存在变量提升现象，let 和 const 声明的变量不存在变量提升现象。

3. const 声明变量时必须要赋值，一般情况下赋值之后不能再重新赋值。

2、箭头函数

( ) 代表函数、{ } 代表函数体、const ft = ()=>{} 代表把一个函数赋值给 ft、ft() 调用该函数

无参数，函数体只有一行代码；有参数，函数体只有一行代码；只有一个参数，可以去掉大括号

普通函数的 this 指向 window 而 ES6 箭头函数里面的 this 指向定义时的那个对象 而不是运行时的那个对象

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

普通函数存在着变量的提升，箭头函数没有

普通函数的this指向，谁调用指向谁，箭头函数是在哪定义就指向谁

普通函数可以当成构造函数，而箭头函数是不可以的

箭头函数没有arguments,要接受所有的参数用...rest

3、解构

解构就是把数据结构进行分解，然后为定义的变量赋值。

1. 数组解构

<script>
            let [a, b] = [0, 1, 2, 3];
            console.log(a + b);//1
</script>

2.对象解构

<script>
         let { name, age } = { name: "张三", age: 19 };
         console.log("姓名:" + name + ",年龄:" + age);
</script>

4、剩余参数

剩余参数允许我们将一个未知数量的参数表示为一个数组。

<script>
            const print = (num, ...args) => {
                console.log(num);
                console.log(args);
            }
            print(0, 1, 2);//[1,2]
   //与结构连用
            let users = ['张三', '李四', '王五'];
            let [u1, ...u2] = users;
            console.log(u1);
            console.log(u2); 
</script>

合并数组

<script>
            let u1 = ['张三', '李四', '王五'];
            let u2 = ['张无忌', '赵敏', '周芷若'];
            let u3 = [...u1,...u2];
            console.log(u3);
 </script>

5、Set—去重

Set 是 ES6 提供的一种数据结构，它和数组很像，但是它里面的数据是不可重复的。

<script>
            const set1 = new Set([1, 2, 3, 4, 5, 5]);
            const set2 = new Set(['苹果','橘子','橘子']);
            console.log(set1);//{1, 2, 3, 4, 5}
            console.log(set2);//{'苹果', '橘子'}
</script>

1. 添加数据---set1.add(9);

2. 删除数据---set1.delete(9);

3. 判断是否包含数据---set1.has(9);

4. 清除所有数据---set1.clear();

6、数组扩展的方法

1. 数组合并---剩余参数，如上剩余参数部分

2. includes()---用来判断数组是否包含某个值，返回布尔值

3. find用来找到第一个符合条件的成员

let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let user = users.find((item, index) =>   
 item.age > 18)
 console.log(user);

4. findIndex()---用来找到第一个符合条件的成员的索引，没有返回-1

5. filter---用来返回一个满足条件的新数组，不满足条件返回空数组

6. map---用来返回一个对成员进行加工之后的新数组

7. Array.from()---将类数组或可遍历的对象转为真正的数组

7、字符串扩展方法

• startsWith()表示该字符串参数是否在某个字符串头部

• endsWith()表示该字符串参数是否在某个字符串尾部

let message = "helloworld";
let res = message.startsWith("hello");
console.log(res);

• 模板字符串 ``

• repeat()方法表示将原字符串重复 n 次，返回一个新字符串

8、立即执行函数

（1）立即执行函数()():普通函数的封装分为定义封装函数和调用执行函数两个步骤。但是立即执行函数是在封装定义的同时就执行函数（一般为匿名函数）

9、this指向

（1）this指向：this的本质是一个对象，对象中存储内存地址，这个内存地址指向堆中的一个独立的存储空间，所谓的this指向就是this这个对象存储的内存地址，指向的存储空间

（2）改变this指向：call()、apply()、bind（）

10、js的数据类型

1. 基本数据类型：Number 、 String 、 Boolean 、 null 、undefined 、Symbol

2. 引用数据类型：Object 、Array、 Function、Date、RegExp

11、数据类型判断 （得准确的知道每一种数据类型判断缺点）

1.typeof 能判断基本的数据类型，返回基本数据类型，除了null，用typeof判断null 返回Object

2.instanceof 可以判断引用数据类型，正常的判断A是B的实例是没有问题的，但是所有引用数据类型的对象用instanceof判断都是Object的实例

1. constructor 构造函数可以判断除了undefined 和null之外的任何数据类型，也解决了instanceof的问题

12.模块化

根据功能封装模块 通过import导入，然后通过export导出，也可以使用export default导出

export 和 export defualt的区别

export 可以导出多个属性或者方法 ,需要用{ }括起来， 在用import接受的时候也得用{ }接受

export default是以整体的方式抛出，接受的时候只接一个

13.promise

1、promise是ES6处理异步的一种方式，它的本质是一个对象,promise的参数是一个回调，回调有两个参数： resolve 成功回调、 reject 失败回调。它有三种状态分别为：初始状态pending 、已完成fulfilled、 已失败rejected。状态改变只有两种结果：从pending——fulfilled完成或者pending——rejected失败。promise处理错误的方式有两种：第一种在then中传递两个回调、第二个是通过catch方式来实现错误回调。

2、Promise解决了回调地狱地狱的问题，解决多层回调嵌套的方案，提高代码可读性、更便于维护。

3、链式调用：每次 then 返回了新的 Promise。每次只输出第一次 resolve 的内容，reject 的内容没有输出，即 Promise 是有状态且状态只可以由pending -> fulfilled或 pending-> rejected,是不可逆的。then 中返回了新的 Promise,但是then中注册的回调仍然是属于上一个 Promise 的。 then 中新创建的 Promise，它的状态变为 fulfilled 的节点是在上一个 Promise的回调执行完毕的时候。也就是说当一个 Promise 的状态被 fulfilled 之后，会执行其回调函数，而回调函数返回的结果会被当作 value，返回给下一个 Promise(也就是then 中产生的 Promise)，同时下一个 Promise的状态也会被改变(执行 resolve 或 reject)，然后再去执行其回调,以此类推下去...链式调用的效应就出来了。

4、Promise对象的两个特点：

（1）对象的状态不受外界影响。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

5、promise常用的api有 then ()处理回调函数 catch()捕获异常 还有两个常用的静态方法

Promise.all()一块处理多个promise请求，所有的请求都成功才成功。

Promise.race()一块处理多个promise请求，有一个成功就成功

6、也可以使用async实现异步处理，还有一个关键字await可以实现异步函数同步化

promise和async的同性和区别在哪？

相同之处：Promise 和 async/await都是 JavaScript 中异步编程的两种常用方式。

不同之处：Promise 是 JavaScript 中一种支持链式调用的对象，用于描述一个异步操作的最终状态（成功或失败）。它提供了 then 方法和 catch 方法来处理异步操作的结果。

async/await 是 JavaScript 中的语法糖，是基于Promise实现的，它不能用于普通的回调函数，await 关键字用于等待一个 Promise 对象的返回结果，而 async 关键字用于定义一个异步函数。它在语法上更像同步代码，使得异步代码的编写更加简洁易懂。

简单来说 Promise 是对象，async/await 是对Promise对象的封装。

14.class类

相关介绍可以点击上面连接查看