ES6进一步整理

内容：

1.变量及赋值

2.函数

3.数组及json

4.字符串

5.面向对象

6.Promise

7.generator

8.模块

1.变量及赋值

(1)ES5变量定义

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

(2)ES6新增变量定义

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

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

(3)赋值

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

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

 let [n1, {a, b, c}, n2] = [12, {a: {n1: 5, n2:8}, b: 12, c: 88}, 55];
 console.log(n1, a, b, c, n2);
 // 输出: 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)默认参数

 // 传统写法
 var test = function(a, b, c){
     b = b||5;
     c = c||12;
     console.log(a, b, c);  // 1, 5, 12
 }
 test(1);

 // ES6写法:
 var test = function(a, b=5, c=12){
     console.log(a, b, c);  // 1, 5, 12
 }
 test(1);

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

接受剩余参数如下：

 var test = function(a, b, ...args){
     // 第一个和第二个参数传给a和b其他参数传给args
     console.log(a, b, args);
 }

 test(1, 3, 5, 7, 9);  // 1, 3, [5, 7, 9]

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

展开一个数组：

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

3.数组及json

(1)数组 - 5种方法

map 映射：一个 -> 一个

 let arr=[62, 55, 82, 37, 26];

 let arr2=arr.map(function (item){
   if(item>=60){
     return true;
   }else{
     return false;
   }
 });

 alert(arr2);  // true,false,true,false,false

filter 过滤：

 let arr=[12,5,88,37,21,91,17,24];

 let arr2=arr.filter(function(item){
     if(item%2==0){
         return item;
     }
 });

 alert(arr2);  // 12,88,24

forEach 遍历：

 let arr=[12,5,88,37,21,91,17,24];

 let sum=0;
 arr.forEach(function(item){
   sum+=item;
 });

 alert(sum);  //

reduce 汇总：一堆 -> 一个

 let arr=[12,5,88,37,21,91,17,24];

 let sum=arr.reduce(function(tmp,item,index){
   console.log(tmp, item, index);

   return tmp+item;
 });

 console.log(sum);  // 结果: 295

array-like对象转换成Array：

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

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

(2)json - 2变化

简写：名字和值一样的，可以省

 let a=12;
 let b=5;

 let json={a, b};
 // 上面一句等价于:
 // let json={a: a, b: b};

 console.log(json);  // {a: 12, b: 5}

function可以不写：

 /*let json={
   a: 12,
   b: 5,
   show: function (){
     alert(this.a+this.b);
   }
 };*/

 // 下面的和上面的同理
 let json={
   a: 12,
   b: 5,
   show(){
     alert(this.a+this.b);
   }
 };

 json.show();

4.字符串

字符串模板：

 let json={name: 'wyb', age: 21};

 //alert('我叫：'+json.name+'，我今年'+json.age+'岁');
 alert(`我叫：${json.name}，我今年${json.age}岁`);

多行字符串：

 let msg = `sf
 sdf
 dkj
 `;

 alert(msg);

startsWith和endsWith：

 if(sNum.startsWith('135')){
   alert('移动');
 }else{
   alert('联通 or 电信');
 }

 if(filename.endsWith('.txt')){
   alert('文本文件');
 }else{
   alert('其他文件');
 }

5.面向对象

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

• class/constructor
• extends/super

 // 类的定义:
 class Person{
   constructor(name, age){
     this.name = name;
     this.age = age;
   }

   showName(){
     alert('我叫' + this.name);
   }
   showAge(){
     alert('我' + this.age + '岁');
   }
 }

 let p = new Person('wyb', 21);

 p.showName();
 p.showAge();

 // 类的继承
 class Person{
   constructor(name, age){
     this.name = name;
     this.age = age;
   }

   showName(){
     alert('我叫' + this.name);
   }
   showAge(){
     alert('我' + this.age + '岁');
   }
 }

 class Worker extends Person{
   constructor(name, age, job){
     //super-超类(父类)
     super(name, age);
     this.job = job;
   }

   showJob(){
     alert('我是做：' + this.job);
   }
 }

 let w = new Worker('wyb', 21, '打杂的');

 w.showName();
 w.showAge();
 w.showJob();

(2)this

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

6.Promise

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

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

Promise用法：

 let p=new Promise((resolve, reject)=>{
     resolve();

     reject();
5 });

7 p.then(()=>{}, ()=>{});  // 第一个函数为resolve  第二个函数为reject

Promise使用实例：

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

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

注意：

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

7.generator

generator - 生成器  --》 能暂停

简单实例 ：

 // 生成器函数
 function *show(){
   alert('aaa');
   yield;  // 暂停
   alert('bbb');
 }

 let gen = show();

 gen.next();   // aaa

 setTimeout(function (){
   gen.next();   // bbb
 }, 5000);

yield实例：

 // yield：
 // 1.可以传参数      function (a, b, c)
 // 2.可以返回         return

 // yield返回值
 function *show(){
   alert('aaa');
   let a=yield;
   alert('bbb'+a);
 }

 let gen=show();

 gen.next();      // aaa
 gen.next(12);  // bbb12

 // yield传值:
 function *show(){
   alert('aaa');
   yield 55;

   alert('bbb');
   return 89;
 }

 let gen=show();

 let res1=gen.next();
 console.log(res1);    //{value: 55, done: false}

 let res2=gen.next();
 console.log(res2);    //{value: 89, done: true}

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

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

补充 - async/await - 常用：

大致写法：

 // async写法:
 async function xxx(){
     ....
     let res=await xx;
     ....
     let res2=await xxx;
     // let 结果=await 异步操作;(异步操作可以是promise、generator、另一个async函数其中的任意一个)
     ....
 }

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

 async function show(){
   try{
     let data1=await $.ajax({url: '1.txt', dataType: 'json'});
     let data2=await $.ajax({url: '33.txt', dataType: 'json'});
     let data3=await $.ajax({url: '3.txt', dataType: 'json'});

     console.log(data1, data2, data3);
   }catch(e){
     alert('有问题');

     throw new Error('错了....');
   }
 }

 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包(配置文件)如下：

 {
   //...略去了其他的内容
   "devDependencies": {
     "babel-cli": "^6.0.0"  //这里的版本号为安装的时候的版本号，一般安装的时候就会自动写入
   },
   "scripts": {
     "build": "babel src -d lib"
     //编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录，lib指的是输出的内容的存放目录
   },
 }

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

 {
     "presets": ["env"]
 }

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

最后编译：npm run build

 // 编译前的代码:
 let a=12;
 let [b,c]=[5,8];

 const show=()=>{
   alert(a+b+c);
 };

 show();

 // 编译后的代码:
 "use strict";

 var a = 12;
 var b = 5,
     c = 8;

 var show = function show() {
   alert(a + b + c);
 };

 show();

(2)browserify

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