ES6

旧城等待， 2023-07-15 12:46 135阅读 0赞

Vue等框架与jQuery的区别：  
jQuery是基于操作dom的库  
Vue是以数据驱动和组件化开发为核心

template 只能有一个根节点

ES6:

1.  变量
2.  函数
3.  数组
4.  字符串
5.  面向对象
6.  Promise
7.  generator
8.  模块化

# 1.ES6怎么来的 #

ECMAScript 和 JavaScript

ECMA 是标准，JS 是实现  
ECMAScript 简称 ECMA 或 ES  
历史版本

1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现  
1999, ES3.0 被广泛支持  
2011, ES5.1 成为 ISO 国际标准  
2015, ES6.0 正式发布

# 2.ES6兼容性 #

ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS

解决不兼容办法，编译、转换

1.在线转换  
2.提前编译

babel=browser.js

# 3.变量 let 和 常量 const #

## var 的问题 ##

1.  可以重复声明，没有报错和警告
2.  无法限制修改
3.  没有块级作用域， \{ \}

## let 和 const ##

1.  不能重复声明
2.  都是块级作用域, \{ \} 块内声明的，块外无效 l
3.  let 是变量，可以修改； const 是常量，不能修改

# 4.函数-箭头函数 #

（）=>\{\}  
箭头函数，就是函数的简写  
如果只有一个参数，() 可以省  
如果语句只要一句话，只有一个return，\{\}可以省

function(){ 
    }
    
    ()=>{ 
    }

# 5.函数-参数 #

参数扩展／展开 …args

1.  收集剩余的参数，必须当到最后一个参数位置
2.  展开数组，简写，效果和直接把数组的内容写在这儿一样

默认参数

//args名字可以随便
    function show(a, b, ...args) { 
        console.log(a)
        console.log(b)
        console.log(args)
    }
    console.log(show(1, 2, 3, 4, 5))
    
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [...arr1, ...arr2]
    console.log(arr3)
    
    //默认参数 设置了就按自己的来，没有设置就按默认值来
    function show2(a, b=5, c=8) { 
        console.log(a, b, c)
    }
    show2(88, 12)//输出88，12，8

# 6.解构赋值 #

1.  左右两个边结构（例如数组）必须一样
2.  右边必须是个合法的东西
3.  声明和赋值赋值不能分开，必须在一句话里

let [a, b, c] = [1, 2, 3]
    console.log(a, b, c)
    
    let { x, y, z} = { x: 1, y: 2, z: 3}
    console.log(x, y, z)
    
    let [json, arr, num, str] = [{  a: 1, b: 2 }, [1, 2, 3], 8, 'str']
    console.log(json, arr, num, str)

# 7.数组 #

新增4个方法

1.  map 映射 一个对一个
2.  reduce 汇总 一堆出来一个
3.  filter 过滤器
4.  forEach 循环迭代

map 映射 一个对一个

let arr=[12,5,8];
    			arr.map(function(item){ 
    				alert(item);
    			})

reduce 汇总 一堆出来一个  
用于比如，算个总数，算个平均  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]

var arr = [1, 3, 5, 7]
    var result = arr.reduce(function (tmp, item, index) { 
        if (index != arr.length - 1) {  // 不是最后一次
            return tmp + item
        } else { 
            return (tmp + item)/arr.length
        }
    })
    console.log(result)  // 平均值

filter 过滤器

forEach 循环迭代

# 8.字符串 #

## 1. 多了两个新方法 ##

startsWith：判断字符串以什么开头  
endsWith ：判断字符串以什么结尾

let str='https://baidu.com';
    			if(str.startsWith('http://')){ 
    				alert('普通网址');
    			}

## 2. 字符串模版 ##

使用反引号，$\{变量\}，直接把东西塞到字符串里  
可以折行

let a=12;
    			let str=`a${ a}bc`
    			alert(str);//输出a12bc

# 9.面向对象-基础 #

1.  class关键字，构造器和类分开了
2.  class里直接加方法

//老版本
    			function User(name,pass){ 
    				this.name=name;
    				this.pass=pass;
    			}
    			User.prototype.showName=function(){ 
    				alert(this.name);
    			};
    			User.prototype.showPass=function(){ 
    				alert(this.pass);
    			};
    			var u1=new User('blue','123456');
    			u1.showName();
    			u1.showPass();
    
    			//新版本
    			class User{ 
    				constructor(name,pass){ 
    					this.name=name;
    					this.pass=pass;
    				}
    				showName(){ 
    					alert(this.name);	
    				}
    				showPass(){ 
    					alert(this.pass);
    				}
    			}
    
    			var u1=new User('blue','123456');
    			u1.showName();
    			u1.showPass();

继承  
super 超类==父类

//ES6版本
    			function User(name,pass){ 
    				this.name=name;
    				this.pass=pass;
    			}
    			User.prototype.showName=function(){ 
    				alert(this.name);
    			};
    			User.prototype.showPass=function(){ 
    				alert(this.pass);
    			}
    			
    			class VipUser extends User{ 
    				constructor(name,pass,level){ 
    					super(name,pass,level);
    					this.level=level;
    				}
    				showLevel(){ 
    					alert(this.level);
    				}
    			}
    			var u1=new VipUser('blue','123456',3);
    			u1.showName();
    			u1.showPass();
    			u1.showLevel();

# 10.面向对象应用 #

React  
用于构建用户界面的 JavaScript 库  
组件化，一个组件就是一个 class  
JSX == bable == browser.js

# 11.json #

JSON 格式

*  JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式
 *  JSON 是 JS对象 的严格子集
 *  JSON 的标准写法
    
    只能用双引号  
    所有的key都必须用双引号包起来  
    JSON 对象
    
    \{“a”:12,“b”:5\}  
    \{“a”:“abc”,“b”:5\}
 *  JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法
    
    JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。  
    JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

JSON的简写  
key和value一样的 **留一个就行**  
方法 **：（冒号）和function一起删**  
老版本：show function ()\{…\}  
新版本：show()\{…\}

let a=12;
    			let b=5;
    			let json={ a,b,c:55};
    			console.log(json);

# 12.Promise #

异步和同步

异步：操作之间没有关系，同时执行多个操作， 代码复杂  
同步：同时只能做一件事，代码简单  
Promise 对象

用同步的方式来书写异步代码  
Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数  
改善了可读性，对于多层嵌套的回调函数很方便  
充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口  
Promise 也是一个构造函数  
//resolve—成功了  
//reject—失败了

Promise.all([$.ajax(),$.ajax()].then(result=>{ 
    				//对了
    	}),err=>{ 
    				//错了
    	});

# 13.generator-认识生成器函数 #

generator 生成器函数  
普通函数，一路到底  
generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权  
yield 有 放弃、退让、退位的意思  
需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步  
generator函数前面加一个 \* 两边可以有空格，或靠近函数或function  
背后实际生成多个小函数，实现走走停停

# 14.generator-yield是啥 #

yield

既可传参，又可以返回  
第一个next()传参无效，只用来启动  
如果函数前漏掉 \*

就是普通函数  
如果有yield会报错， ReferenceError: yield is not defined  
yield 只能在Generator函数内部使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]

# 15.generator-实例 #

Promise 适合一次读一组  
generator 适合逻辑性的

// 带逻辑-generator
    runner(function * () { 
        let userData = yield $.ajax({ url: 'getUserData'})
    
        if (userData.type == 'VIP') { 
            let items = yield $.ajax({ url: 'getVIPItems'})
        } else { 
            let items = yield $.ajax({ url: 'getItems'})
        }
    })

# ES7 草案 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 2]

*  幂 3\*\*8
 *  padStart padEnd
 *  数组容忍度
    
    ES6  
    \[2,5,7\] ==> \[2,5,7,\] ES6  
    ES7  
    function show(a,b,c,)\{  
    \}
 *  async await相较于generator yield  
    不依赖于外部的runner—统一性能  
    可以使用箭头函数

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: /images/20230528/67bf449ce31c4840b139f7ff1596cf41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]: /images/20230528/0e70f518f6474245ba0f43dd4b058cff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 2]: /images/20230528/a2d9798f2f554bae8a1e1d3bec31f018.png

ES6

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ES6

相关 ES6

相关 ES6

相关 es6

相关 es6？

相关 es6

相关 ES6

相关 es6

相关 ES6

相关 ES6基础-ES6 class