ES6进一步整理

内容：

1.变量及赋值

2.函数

3.数组及json

4.字符串

5.面向对象

6.Promise

7.generator

8.模块

 

 

1.变量及赋值

(1)ES5变量定义

var：     能够重复定义、不能限制修改、没有块级做用域  --> 再也不建议使用

 

(2)ES6新增变量定义

新时代的js建议使用如下来定义变量：

• let 不能重复定义、变量、块级做用域
• const 不能重复定义、常量、块级做用域

 

(3)赋值

1 解构赋值：
2   1.左右两边必须同样；右边得是个东西
3   2.必须定义和赋值同步完成

1 let [a, b, c] = [1, 2, 3];
2 // let {a, b, c} = {a: 1, b: 2, c: 3};  
3 alert(a+b+c);  // 输出6

1 let [n1, {a, b, c}, n2] = [12, {a: {n1: 5, n2:8}, b: 12, c: 88}, 55];
2 console.log(n1, a, b, c, n2);
3 // 输出: 12 {n1: 5, n2: 8} 12 88 55

 

 

2.函数

(1)箭头函数

箭头函数就是匿名函数定义的简化版, 宣称能使得代码更简洁，实际上就是纯粹的垃圾
箭头函数的 this 值是绑定了的，箭头函数没有 arguments 对象，若是要多参数, 必须用 ...

 1 // (参数1, 参数2) => { 语句 }
 2 // (参数1, 参数2) => 语句
 3 // 上面两行至关于下面这函数
 4 function(参数1, 参数2) {
 5     return 语句
 6 }
 7 
 8 // 若是只有一个参数，圆括号可省略的
 9 // (参数1) => { 语句 }
10 // 参数1 => { 语句 }
11 
12 // 可是若是没有参数, 必须须要使用圆括号
13 // () => { 语句 }
14 
15 // 例子
16 var a1 = [1, 2, 3]
17 // 下面两个等价
18 var a2 = a1.map(function(n){
19     return n * n
20 })
21 var a3 = a1.map( n => n * n )
22 
23 n => n * n
24 // 上面 1 行等价于下面 3 行
25 function(n) {
26     return n * n
27 }

 

(2)默认参数

 1 // 传统写法
 2 var test = function(a, b, c){
 3     b = b||5;
 4     c = c||12;
 5     console.log(a, b, c);  // 1, 5, 12
 6 }
 7 test(1);
 8 
 9 // ES6写法:
10 var test = function(a, b=5, c=12){
11     console.log(a, b, c);  // 1, 5, 12
12 }
13 test(1);

 

(3)参数展开(剩余参数)

接受剩余参数以下：

1 var test = function(a, b, ...args){
2     // 第一个和第二个参数传给a和b其余参数传给args
3     console.log(a, b, args);
4 }
5 
6 test(1, 3, 5, 7, 9);  // 1, 3, [5, 7, 9]

注：...args必须在参数最后面

 

展开一个数组：

1 let arr = [111, 222, 333];
2 let arr2 = [1, 3, 5, ...arr, 7, 9];
3 console.log(arr2);
4 // 输出: [1, 3, 5, 111, 222, 333, 7, 9]

 

 

3.数组及json

(1)数组 - 5种方法

map 映射：一个 -> 一个

 1 let arr=[62, 55, 82, 37, 26];
 2 
 3 let arr2=arr.map(function (item){
 4   if(item>=60){
 5     return true;
 6   }else{
 7     return false;
 8   }
 9 });
10 
11 alert(arr2);  // true,false,true,false,false

 

filter 过滤：

1 let arr=[12,5,88,37,21,91,17,24];
2 
3 let arr2=arr.filter(function(item){
4     if(item%2==0){
5         return item;
6     }
7 });
8 
9 alert(arr2);  // 12,88,24

 

forEach 遍历：

1 let arr=[12,5,88,37,21,91,17,24];
2 
3 let sum=0;
4 arr.forEach(function(item){
5   sum+=item;
6 });
7 
8 alert(sum);  // 295

 

reduce 汇总：一堆 -> 一个

1 let arr=[12,5,88,37,21,91,17,24];
2 
3 let sum=arr.reduce(function(tmp,item,index){
4   console.log(tmp, item, index);
5 
6   return tmp+item;
7 });
8 
9 console.log(sum);  // 结果: 295

 

array-like对象转换成Array：

在DOM操做中，有时候有一些array-like对象(没法使用forEach方法)，能够这样将其转换成真正的Array：

Array.from([array-like]) -> [xxx, xxx, xxx]，而后就可使用forEach方法了

 

(2)json - 2变化

简写：名字和值同样的，能够省

1 let a=12;
2 let b=5;
3 
4 let json={a, b};
5 // 上面一句等价于:
6 // let json={a: a, b: b};
7 
8 console.log(json);  // {a: 12, b: 5}

 

function能够不写：

 1 /*let json={
 2   a: 12,
 3   b: 5,
 4   show: function (){
 5     alert(this.a+this.b);
 6   }
 7 };*/
 8 
 9 // 下面的和上面的同理
10 let json={
11   a: 12,
12   b: 5,
13   show(){
14     alert(this.a+this.b);
15   }
16 };
17 
18 json.show();

 

 

4.字符串

字符串模板：

1 let json={name: 'wyb', age: 21};
2 
3 //alert('我叫：'+json.name+'，我今年'+json.age+'岁');
4 alert(`我叫：${json.name}，我今年${json.age}岁`);

 

多行字符串：

1 let msg = `sf
2 sdf
3 dkj
4 `;
5 
6 alert(msg);

 

startsWith和endsWith：

 1 if(sNum.startsWith('135')){
 2   alert('移动');
 3 }else{
 4   alert('联通 or 电信');
 5 }
 6 
 7 if(filename.endsWith('.txt')){
 8   alert('文本文件');
 9 }else{
10   alert('其余文件');
11 }

 

 

5.面向对象

(1)基础 构造函数和继承

• class/constructor
• extends/super

 1 // 类的定义:
 2 class Person{
 3   constructor(name, age){
 4     this.name = name;
 5     this.age = age;
 6   }
 7 
 8   showName(){
 9     alert('我叫' + this.name);
10   }
11   showAge(){
12     alert('我' + this.age + '岁');
13   }
14 }
15 
16 let p = new Person('wyb', 21);
17 
18 p.showName();
19 p.showAge();

 1 // 类的继承
 2 class Person{
 3   constructor(name, age){
 4     this.name = name;
 5     this.age = age;
 6   }
 7 
 8   showName(){
 9     alert('我叫' + this.name);
10   }
11   showAge(){
12     alert('我' + this.age + '岁');
13   }
14 }
15 
16 
17 class Worker extends Person{
18   constructor(name, age, job){
19     //super-超类(父类)
20     super(name, age);
21     this.job = job;
22   }
23 
24   showJob(){
25     alert('我是作：' + this.job);
26   }
27 }
28 
29 let w = new Worker('wyb', 21, '打杂的');
30 
31 w.showName();
32 w.showAge();
33 w.showJob();

 

(2)this

• 普通函数：根据调用个人人 this老变
• 箭头函数：根据所在的环境 this恒定
• bind——给函数定死一个this

 

 

6.Promise

Promise - 异步、同步化  ->  用同步的方式去写异步

• promise：解决异步操做
• 同步——串行 简单、方便
• 异步——并发 性能高、体验好

Promise用法：

1 let p=new Promise((resolve, reject)=>{
2     resolve();
3 
4     reject();
5 });
6 
7 p.then(()=>{}, ()=>{});  // 第一个函数为resolve  第二个函数为reject

Promise使用实例：

• Promise.all(); 与：全部的都成功
• Promise.race(); 或：只要有一个完成

 1 //Promise -> 用同步的方式实现异步
 2 Promise.all([
 3   $.ajax('/banner_data'),
 4   $.ajax('/item_data'),
 5   $.ajax('/user_data'),
 6   $.ajax('/news_data'),
 7 ]).then(function(arr){
 8   let [banners, items, user, news]=arr;
 9 }, function(){});
10 // then方法第一个函数为resolve函数(成功)  第二个函数为reject函数(失败)

注意：

• Proimse有用——解除异步操做
• Promise有局限——带逻辑的异步操做麻烦

 

 

7.generator

generator - 生成器  --》 能暂停

简单实例 ：

 1 // 生成器函数
 2 function *show(){
 3   alert('aaa');
 4   yield;  // 暂停 
 5   alert('bbb');
 6 }
 7 
 8 let gen = show();
 9 
10 gen.next();   // aaa
11 
12 setTimeout(function (){
13   gen.next();   // bbb
14 }, 5000);

yield实例：

 1 // yield：
 2 // 1.能够传参数      function (a, b, c)
 3 // 2.能够返回         return
 4 
 5 // yield返回值
 6 function *show(){
 7   alert('aaa');
 8   let a=yield;
 9   alert('bbb'+a);
10 }
11 
12 let gen=show();
13 
14 gen.next();      // aaa
15 gen.next(12);  // bbb12
16 
17 
18 // yield传值:
19 function *show(){
20   alert('aaa');
21   yield 55;
22 
23   alert('bbb');
24   return 89;
25 }
26 
27 let gen=show();
28 
29 let res1=gen.next(); 
30 console.log(res1);    //{value: 55, done: false}
31 
32 let res2=gen.next(); 
33 console.log(res2);    //{value: 89, done: true}

generator+promise配合(并不经常使用)：

1.外来的runner辅助执行——不统1、不标准、性能低
2.generator函数不能写成箭头函数

 

补充 - async/await - 经常使用：

大体写法：

1 // async写法:
2 async function xxx(){
3     ....
4     let res=await xx;
5     ....
6     let res2=await xxx;
7     // let 结果=await 异步操做;(异步操做能够是promise、generator、另外一个async函数其中的任意一个)  
8     ....
9 }

实例(async使用及错误处理)：

 1 async function show(){
 2   try{
 3     let data1=await $.ajax({url: '1.txt', dataType: 'json'});
 4     let data2=await $.ajax({url: '33.txt', dataType: 'json'});
 5     let data3=await $.ajax({url: '3.txt', dataType: 'json'});
 6 
 7     console.log(data1, data2, data3);
 8   }catch(e){
 9     alert('有问题');
10 
11     throw new Error('错了....');
12   }
13 }
14 
15 show();

 

 

8.模块化ES6

打包、编译：

• 编译：ES6 -> ES5  使用babel
• 打包： browserify

(1)babel

最初做为一个polyfill工具使用，只是用来扩充浏览器的功能，能够用来将ES6编译成ES5

babel官网：http://babeljs.io/，babel须要node.js，使用babel以前要先安装node，node官网：https://nodejs.org/en

 

node：语言、环境、平台    node的npm：包管理(相似python的pip)

安装使用babel：

• 替换源：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 项目初始化：cnpm init
• 在项目中下载babel：cnpm install --save-dev babel-cli
• 安装以后，改写package.json包(配置文件)以下：

 1 {
 2   //...略去了其余的内容
 3   "devDependencies": {
 4     "babel-cli": "^6.0.0"  //这里的版本号为安装的时候的版本号，通常安装的时候就会自动写入
 5   },
 6   "scripts": {
 7     "build": "babel src -d lib" 
 8     //编译整个 src 目录并将其输出到 lib 目录。这里的src指的是须要转换的目录，lib指的是输出的内容的存放目录
 9   },
10 }

而后在项目中新建.babelrc而后配置babelrc：

1 {
2     "presets": ["env"]
3 }

而后执行：cnpm i babel-preset-env -D

最后编译：npm run build

 1 // 编译前的代码:
 2 let a=12;
 3 let [b,c]=[5,8];
 4 
 5 const show=()=>{
 6   alert(a+b+c);
 7 };
 8 
 9 show();
10 
11 // 编译后的代码:
12 "use strict";
13 
14 var a = 12;
15 var b = 5,
16     c = 8;
17 
18 
19 var show = function show() {
20   alert(a + b + c);
21 };
22 
23 show();

 

(2)browserify

browesrify -> 和模块化配合一块儿用