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);  // 295

 

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 -> 和模块化配合一起用