H5、C3及ES6新增特性。

淩亂°似流年 2023-02-23 08:41 28阅读 0赞

**H5新标签：**  
`header`，`footer`，`nav`，`article`，`section`，`datalist`（`input`里定义`list=id`，`datalist`定义`id`），`aside`，`fieldset`（加`legend`标签），`video`（ogg，mp4，webm），`audio`（ogg，mp3，wav）。  
`canvas`，`menu`，`figure`。  
**input**新`type`值：  
`email`，`tel`，`url`，`number`，`search`，`range`（滑块），`time`，`date`，`datetime`，`month`，`week`。  
**新属性：**  
`placeholder`，`autofocus`，multiple（可多选文件），autocomplete（必须加Name值），required（必填项），accesskey（加一个键盘字母定光标）。  
**H5删除标签：**  
frame，center，big，b，font。

**CSS3新特性。**  
`animation`，`transition`，`transform`。  
圆角：`border-radius`添加圆角边框。  
阴影：`box-shadow`，`inset`内阴影。  
渐变：线性（bgm-gradient(linear,左上到右上)）；径向（bgm-gradient(radial,圆到圆)）  
盒子模型：`box-sizing：content-box`，`border-box`。webkit兼容。

**ES6常用新特性。**

①`let`定义局部对象，`const`定义常量，原先var可以重复声明且无法限制修改，且是函数级变量。  
② 函数参数扩展`(a,b,...args)`；`...`还可以展开数组：`...arr2`，`let a = [...b,...c];`合并数组。  
③箭头操作符用于简化函数的写法，操作符左边为参数，右边为具体操作和返回值。可以直接调用父级this。箭头函数的this永远指向windows。  
④ 结构赋值：左右结构必须一致，声明和赋值`let b =[a,b,c] = [12,5,8];`  
⑤数组新增方法：`map,reduce,filter,forEach`  
Ⅰ，map：映射，一个对一个。  
Ⅱ，reduce，汇总，一堆出一个。  
`arr.reducet((tmp,item,index)=>{ //tmp为前面相加的结果 return tmp + item; })`  
Ⅲ，filter，过滤器。  
`arr.filter(item=>{ //返回false的项不显示 return item%3==0 });`  
Ⅳ，forEach，迭代。  
`arr.forEach((item,index)=>{//相当于for循环})`  
⑥字符串模板：``` `` ```，连接非常方便，你懂的，Json的值必须用双引号，key必须加双引号。  
⑦延展操作符：通过它可以将数组作为参数直接传入函数：  
⑧为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。

**ES6面向对象概念**  
① 新增类`class User{}`，可定义构造函数，方法无需用function，直接`clickBtn(){}`。  
②继承`extends`，使用：`class VipUser extends User{}`，在构造器中执行父类`super()`，

class VipUser extends User{ 
    	constructor(name,pass,level){  //...args
    		super(name,pass); //...args
    		this.level=level;
    }}

**异步**：可同时进行多个操作；同步：同时只能做一件事。  
`Promise`：用同步方式，写异步代码，定义及使用：

function createPromise(url){ 
    return new Promise(resolve,reject){ 
    //异步代码，resolve成功，reject失败。
    	$ajax({ 
    	url:url,
    		success(arr){ 
    		resolve(arr)
    	 }})
    }}

Promise.all([
    	createPromise('data/arr.txt'),
    	createPromise('data/arr.txt'),
    ]).then(function(arr){ 
    //成功
    },function(arr){ 
    //失败
    })

进一步简化：

Promise.all([
    	$.ajax({ url:url,dataType:'json'}),
    	$.ajax({ url:url,dataType:'json'})
    ]).then(function(result){ 
    	let [arr,json] = result; //此处arr和jsobn分别来自上面ajax的结果
    	//成功
    	},function(arr){ 
    	//失败
    })

**generator生成器：**  
①可以让函数在运行过程中停止。  
②`function *show(){ yield ajax(xxx) }`，yield暂停，\*表明函数是生成器。  
③走走停停，自行操控，`let genObj = show();` 继续：`genObj.next();`  
④yield可传参可返回，第二个next给yield传参，传前面的参数用`show(n,m)`，最后的next可获取show函数return 的值。