ES6语法总结

时间 2019-11-07

原文原文链接

ES6 语法讲解

ECMAScript是JavaScript的标准（语法规范），javascript用于遵循这个规范。javascript

ES6并非兼容全部浏览器，须要使用Babel转为ES5语法（ES5语法全部浏览器都兼容）。

Visual Studio Code下载插件：Bracket pair Colorizer(颜色高亮)、JavaScript（ES6）code（es6语法提示）、live server(vscode保存代码后，页面当即刷新，不须要手动刷新页面)

注: live server使用：vue

vscode编辑器页面中右击，选择 “Open with live server”，便可开启保存后就刷新页面的效果，在vscode编辑器最底部有“port:5500”，点击后便可关闭此功能。

一、数组方法

迭代器函数：

（1）、forEach

应用场景：java

//forEach使用姿式一：
var numbers = [1, 2, 3, 4, 5],
    sum = 0;
    numbers.forEach(function(item) {
    sum += item;
});
console.log(sum); //结果：15

//forEach使用姿式二：
var numbers = [1, 2, 3, 4, 5],
  sum = 0;
function adder(item) {
  sum += item;
}
//直接调用adder函数，注意不加括号
numbers.forEach(adder);
console.log(sum); //结果：15

注意：map和forEach区别是：map有返回值，而forEach没有返回值。jquery

（2）、map

注：map须要返回值，若是不给return，默认返回undefined，map返回的是一个新数组。

应用场景1：假定有一个数值数组A，将A数组的数值以双倍的形式放到B数组。es6

var numbers = [1, 2, 3];
var newNumbers1 = numbers.map(function(item) {
  return item * 2;
});
console.log(newNumbers1); // 结果：[2,4,6]

应用场景2：假定有一个对象数组A，将A数组中对象某个属性的值存储在B数组中。ajax

var cars = [
  {
    model: "mini",
    price: 200
  },
  {
    model: "nio",
    price: 300
  }
];
var prices = cars.map(function(item) {
  return item.price;
});
console.log(prices); //结果:[200, 300]

(3)、filter

应用场景1：假定有一个对象数组A，获取数组中指定类型的对象放到B数组中。json

var products = [
  {
    name: "cucumber",
    type: "vegetable"
  },
  {
    name: "apple",
    type: "fruit"
  },
  {
    name: "orange",
    type: "fruit"
  }
];
var filters = products.filter(function(item) {
  return item.type == "fruit";
});
console.log(filters); 
//结果：[{name: "apple", type: "fruit"},{name: "orange", type: "fruit"}]

应用场景2：假定有一个对象数组A，过滤掉不知足一下条件的对象，条件：水果，价格小于10，数量大于0。跨域

var products = [
  {
    name: "cucumber",
    type: "vegetable",
    quantity: 10,
    price: 5
  },
  {
    name: "apple",
    type: "fruit",
    quantity: 0,
    price: 5
  },
  {
    name: "orange",
    type: "fruit",
    quantity: 1,
    price: 2
  }
];
var filters = products.filter(function(item) {
  //使用&符号将条件连接起来
  return item.type === "fruit" && item.quantity > 0 && item.price < 10;
});
console.log(filters);
//结果：[{name: "orange", type: "fruit", quantity: 1, price: 2}]

应用场景3：假定有对象A和数组B，根据A中id值，过滤掉B中不符合的数据。数组

var post = { id: 1, title: "A" };
var comments = [
  { postId: 3, content: "CCC" },
  { postId: 2, content: "BBB" },
  { postId: 1, content: "AAA" }
];
function commentsPost(post, comments) {
  return comments.filter(function(item) {
    return item.postId == post.id;
  });
}
console.log(commentsPost(post, comments));
//结果:[{postId: 1, content: "AAA"}]，返回的是数组

注意：filter和find区别：filter返回的是数组，find返回的是对象。promise

（4）、 find

应用场景1：假定有一个对象数组A，找到符合条件的对象

var users = [
  { name: "jack", age: 12 },
  { name: "alex", age: 15 },
  { name: "eva", age: 20 }
];
var user = users.find(function(item) {
  return (item.name = "eva");
});
console.log(user);
//结果：{ name: "eva", age: 20 }

注：find()找到第一个元素后就不会在遍历其后面的元素,因此若是数组中有两个相同的元素，他只会找到第一个，第二个将不会再遍历了。

应用场景2：假定有一个对象数组A，根据指定对象的条件找到数组中符合条件的对象。

var post = { id: 1, title: "AAA" };
var comments = [
  { postId: 3, content: "CCC" },
  { postId: 2, content: "BBB" },
  { postId: 1, content: "AAA" }
];
function commentsPost(post, comments) {
  return comments.find(function(item) {
    return item.postId == post.id;
  });
}
console.log(commentsPost(post, comments));
//结果：{postId: 1, content: "AAA"}，返回的是对象

（5）、every

总结：一假即假，并且只要有一个元素是假，其后面的元素将再也不遍历。

（6）、some

总结：一真即真
使用场景：假定有几台电脑，判断其操做系统是否都大于16

var computers = [
  { name: "mac", ram: 32 },
  { name: "mac", ram: 8 },
  { name: "IBM", ram: 16 },
  { name: "IBM", ram: 64 }
];
var everyComputerCan;
var someComputerCan;
//判断每个元素的ram是否都大于16
var everyBoolan = computers.every(function(item) {
  return item.ram > 16;
});
//判断元素的ram是否都大于16
var someBoolean = computers.some(function(item) {
  return item.ram > 16;
});
console.log(everyBoolan); //结果：false
console.log(someBoolean);//结果: true

（7）、reduce

应用场景1：计算数组中全部值总和

var numbers = [1, 2, 3];
var sumVal = numbers.reduce(function(sum, number) {
  return sum + number;
  //0是sum的初始化值
}, 0);
console.log(sumVal);

应用场景2：将对象数组中对象的某个属性抽离到另一个数组中

var colors = [
  { color: "red" }, 
  { color: "green" }, 
  { color: "black" }
];
var colorsNew = colors.reduce(function(colorArr, colors) {
  colorArr.push(colors.color);
  return colorArr;
}, []);
console.log(colorsNew);
//结果:["red", "green", "black"]

应用场景3：判断字符串中括号是否对称

function balanceParents(string) {
  return !string.split("").reduce(function(previous, char) {
    if (char == "(") {
      return ++previous;
    }
    if (char == ")") {
      return --previous;
    }
    return previous;
  }, 0);
}
console.log(balanceParents("(())aaadsd))"));//结果:false

二、新语法

（1）、 const

const 定义的常量后不能更改其值，可是数组是能够建立后，添加元素的。

const arr = [];
arr[0] = 1;//不会报错
console.log(arr);

const str = "abc";
str = "ddd";//报错：Assignment to constant variable.

（2）、模板字符串

定义：模板字符串是指在js语句中使用``符号包含的字符串。

let age = 10;
function makeUppercase(item) {
  return item.toUpperCase();
}
 //模板字符串中语法：
//在模板字符串中使用${方法名()}调用某得方法
//在模板字符串中使用${}获取变量的值
var template = `<h1>内容</h1>
  <spn>${makeUppercase("hello")}</spn>
  <p>${age}</p>`;
document.getElementById("name").innerHTML = template;

页面结果显示：

**内容**
HELLO
10

（3）、箭头函数

const team = {
  merbers: ["heny", "jack"],
  teamName: "A组",
  //箭头函数(ES6语法)
  teamSummary: function() {
    return this.merbers.map(item => {
      //this指向team对象
      return `${item}隶属于${this.teamName}小组`;
    });
  },
  //self保存this(ES5语法)
  teamSummary1: function() {
    let self = this;
    return this.merbers.map(function(item) {
      return `${item}隶属于${self.teamName}小组`;
    });
  },
  //bind绑定this(ES5语法)
  teamSummary2: function() {
    return this.merbers.map(
      function(item) {
        return `${item}隶属于${this.teamName}小组`;
      }.bind(this)
    );
  }
};
console.log(team.teamSummary());
console.log(team.teamSummary1());
console.log(team.teamSummary2());

（4）、加强对象字面量

目的：减小没必要要的代码，好比咱们使用vue开发时：

new Vue({
  el: "#app",
  //此处的router就是一种简写形式(即加强对象字面量)，其完整写法为："router：router"
  router,
  components: { App },
  template: "<App/>"
});

同理，对于jquery中的ajax请求：

$.ajax({
 //此处的url和data就是简写形式(即加强对象字面量)，完整的为"url:url,data:data"
 url,
 data,
 methods:"POST"
});

（5）、扩展运算符

应用场景1：将单独的数值组成数组返回

//使用"..."(扩展运算符)自动将传入的参数组成数组:numbers
function addNumber(...numbers) {
  return numbers.reduce((sum, item) => {
    return sum + item;
  }, 0);
}
console.log(addNumber(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));
//结果：55

应用场景2：组合多个数组

var defaultNum = [1, 2, 3, 4, 5];
var myNum = [10, 20];
var yourNum = [9, 8, 7];
console.log([11, 22, 33, ...defaultNum, ...myNum, ...yourNum]);
//结果： [11, 22, 33, 1, 2, 3, 4, 5, 10, 20, 9, 8, 7]

（6）、解构

应用场景1：对象属性解构

var obj = {
  name: "Zhangfei",
  age: 26
};
//注意：结构的变量的名字要和对象中的名字保持一致，找不到的将会返回undefined
const { name, age, data } = obj;
console.log(name, age, data);
//结果：Zhangfei  26  undefined

应用场景2：函数参数解构

var obj = {
  name: "zhangsan",
  age: 12
};
function myObj({ name, age }) {
  return `${name}，年龄：${age}岁`;
}
console.log(myObj(obj));
//结果：zhangsan，年龄：12岁

应用场景3:数组元素的解构

const names = ["hery", "bucky", "emily"];
const [name1, name2, name3] = names;
console.log(name1, name2, name3);
//结果：demo.js:3 hery bucky emily

应用场景4:数组长度的解构

const names = ["hery", "bucky", "emily"];
//使用{}解析数组获得数组长度
const { length } = names;
console.log(length);

应用场景5：结构和展开运算符搭配使用

const names = ["herry", "emliy", "buky"];
const [name1, name2, ...rest] = names;
console.log(name1);  //herry
console.log(name2);  //emliy
console.log(rest);  //['buky']

应用场景6：将数组转为对象

const points = [[1, 2], [3, 4], [5, 6]];
var newPoints = points.map(function(item) {
  const [x, y] = item;
  return { x, y };
});
console.log(newPoints);
//结果：[{x: 1, y: 2},{x: 3, y: 4},{x: 5, y: 6}]

三、新语法

（1）、面向对象class(万事皆对象)

class Car {
  constructor(options) {
    this.title = options.title;
  }
  drive() {
    return "vromm";
  }
}
//这里须要继承Car类，拿到构造函数中的title属性
class Toyota extends Car {
  constructor(options) {
    //使用super继承父类的构造函数中的属性，这样toyota.title才不会是undefined
    super(options);
    this.color = options.color;
  }
}
const toyota = new Toyota({ color: "red", title: "MINI" });
console.log(toyota.title); //MINI

(2)、 generator生成器(能够返回屡次的函数)

//斐波那契数列
//生成器函数是：在function后面加上*的函数
function* fib(max) {
  var a = 0,
    b = 1,
    n = 0;
  while (n < max) {
    yield a;//yield关键字
    [a, b] = [b, a + b];
    n++;
  }
  return;
}
for (var x of fib(5)) {
  console.log(x);
}
//结果：0 1 1 2 3

（3）、数据结构：map (与上面所讲的数组的map方法不是一回事)

注：与对象不一样的是，键和值可使任意类型的。

应用场景1: 建立map数据结构

const map1 = new Map();
//设置key键
const key1 = "name",
  key2 = {},
  key3 = function() {};
//设置value
map1.set(key1, "key1‘s value");
map1.set(key2, "key2’s value");
map1.set(key3, "key3‘s value");
console.log(map1.get("name"));  //key1‘s value
console.log(map1.get(key2));   //key2’s value
console.log(map1.get(key3));  //key3‘s value

应用场景2：获取map数据结构的长度

console.log(map1.size); //3

应用场景3：遍历map数据结构的key和value

for(var [key,value] of map1){
    console.log(`${key} = ${value}`);
}
//结果：name = key1‘s value
        [object Object] = key2’s value
        function () {} = key3‘s value

for (let item of map1.keys()) {
  console.log(item);
}
//结果：name         {}           ƒ () {}

for (let item of map1.values()) {
  console.log(item);
}
//结果：key1’s value         key2’s value          key3‘s value

应用场景4：将map数据结构的key和value转为数组

const keyArr = Array.from(map1.keys());
console.log(keyArr);
//结果：["name", {…}, ƒ]

const valueArr = Array.from(map1.values());
console.log(valueArr);
//结果：["key1‘s value", "key2’s value", "key3‘s value"]

（4）、数据结构：set

set即集合：能够存储任何类型数据，而且是惟一的。

应用场景1：建立set

var set = new Set();
set.add(100);
set.add("asdf");
set.add({ name: "herry" });
set.add("fn");
set.add(100);
console.log(set);

//结果：{100, "asdf", {…}, "fn"}

应用场景2：set长度计算

console.log(set.size);
//结果： 4

应用场景3：判断set中是否包含某项

console.log(set.has(100));
console.log(set.has({ name: "herry" }));
//结果：true   
        false(由于对象在内存中存储的是地址，而不是值，因此是false)

应用场景4：删除set中某元素

set.delete("fn");
console.log(set);
//结果：{100, "asdf", {…}}

应用场景5：遍历set

for (let item of set) {
  console.log(item);
}
//结果：100              "asdf"             {…}

应用场景6：set转为数组

const arr = Array.from(set);
console.log(arr);
//结果：[100, "asdf", {…}]

四、数据请求（异步）

（1）、 promise

A[Promise] --> B(unresolved) 
    A[Promise] --> c(resolved) 
    A[Promise] --> d(rejected)
    c --> e[then]
    d --> f[catch]

应用场景1：

let promise = new Promise((resolve, reject) => {
  resolve();
  //   reject();
});
promise
  .then(() => {
    console.log("no problem");
  })  //resolve后走then()方法
  .then(() => {
    console.log("能够无限调用then");
  .catch(() => {
    console.log("uh oh,出问题啦");
  }); //reject后走catch()方法

(2) fetch

fetch方法定义：

①、option(参数选项)：

method：get | post 等方法

headers：任何你想加到请求中的头，能够是对象字面量的方式也能够是经过 Headers

body：发送给服务器的信息，能够是JSON, ufferSource, FormData, URLSearchParams, 或 USVString。注意get和HEAD请求没有body

mode：请求模式，可选值为 cors, no-cors, same-origin, 或 navigate，cors-with-forced-preflight。默认值应该为 cors。但在Chrome中，Chrome 47 以前的版本默认值为 no-cors ，自Chrome 47起，默认值为same-origin。--MDN Request

credentials：在请求中是否须要凭据。在请求数据中根据是否须要携带Cookie 来设置其值，可选值为omit（在请求中不懈怠认证凭据（Cookie））, same-origin（在同原站点下包含凭据）, 或 include（对全部网站包含认证凭据）

cache：如何处理缓存，可取值有 default | no-store | no-cache | reload | force-cache | only-if-cached

redirect：对重定向的处理，可取值 follow, error, redirect

referrer：一个指定了no-referrer, client, 或一个 URL的 USVString 。默认值是client.

integrity: 包括请求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

②、mode 参数便于CORS，设置不一样的值可使在不一样的请求方式下，使得请求有效。

cors：在同域和带有CORS响应头的跨域下能够请求成功

no-cors：经常使用于在跨域不带CORS场景下，此时请求发出而且会有响应，可是此时type为“opaque”， status为0 ，js获取不到返回数据。

same-origin：在同域下请求

cors-with-forced-preflight：在请求前进行preflight 检查

应用场景1：fetch实例

let url = "http://jsonplaceholder.typicode.com/posts";
fetch(url)
  .then(response => response.json())  //fetch方法中先获取response.json()
  .then(data => console.log(data))
  .catch(error => console.log(error));
//结果：返回的是接口详细数据

应用场景2：fetch的三种请求数据方式

document.getElementById("button1").addEventListener("click", getText);
document.getElementById("button2").addEventListener("click", getJson);
document.getElementById("button3").addEventListener("click", getInternet);

//获取本地文本数据
function getText() {
  fetch("test.txt")
    .then(res => res.text())
    .then(data => {
      document.getElementById("output").innerHTML = data;
    })
    .catch(error => {
      console.log(error);
    });
}
//获取本地json数据
function getJson() {
  fetch("data.json")
    .then(res => res.json())
    .then(data => {
      console.log(data);
      var str = "";
      data.forEach(function(item) {
        str += `<h2>${item.title}</h2><h3>${item.body}</h3>`;
      });
      document.getElementById("output").innerHTML = str;
    })
    .catch(error => {
      console.log(error);
    });
}
//获取接口数据
function getInternet() {
  fetch("http://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(data => {
      console.log(data);
      var str = "";
      data.forEach(function(item) {
        str += `<h2>${item.id}</h2><h3>${item.name}</h3>`;
      });
      document.getElementById("output").innerHTML = str;
    })
    .catch(error => {
      console.log(error);
    });
}
//data.json数据
[
  {
    "title": "es6",
    "body": "I am es6"
  },
  {
    "title": "es7",
    "body": "I am es7"
  },
  {
    "title": "es8",
    "body": "I am es8"
  }
]
//test.txt数据
这是本地文本数据测试的！！！

应用场景3：封装fetch(使用ES6语法promise，对照下面ES7语法封装)

//首先封装fetch 方法
class EasyHttp {
  //get方法
  get(url) {
    return new Promise((resolve, reject) => {
      fetch(url)
        .then(rsp => rsp.json())
        .then(data => resolve(data))
        .catch(error => reject(error));
    });
  }
  //post请求
  post(url, data) {
    return new Promise((resolve, reject) => {
      fetch(url, {
        method: "POST",
        headers: {
          "Content-type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(res => res.json())
        .then(data => resolve(data))
        .catch(error => reject(error));
    });
  }

  //put请求
  put(url, data) {
    return new Promise((resolve, reject) => {
      fetch(url, {
        method: "PUT",
        headers: {
          "Content-type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(res => res.json())
        .then(data => resolve(data))
        .catch(error => reject(error));
    });
  }

  //delete请求
  delete(url) {
    return new Promise((resolve, reject) => {
      fetch(url, {
        method: "DELETE",
        headers: { "Content-type": "application/json" }
      })
        .then(rsp => rsp.json())
        .then(data => resolve("数据删除成功！"))
        .catch(error => reject(error));
    });
  }
}
//main.js数据中调用封装好的fetch方法
const http = new EasyHttp();
//get请求（获取数据）
http
  .get("http://jsonplaceholder.typicode.com/users")
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

//post请求数据（增长数据）
const data = {
  name: "Herry",
  username: "恒瑞"
};
http
  .post("http://jsonplaceholder.typicode.com/users", data)
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });

//put请求（更新数据）
const data = {
  name: "Herry",
  username: "恒瑞"
};
http
  .put("http://jsonplaceholder.typicode.com/users/2", data)
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });

//delete请求（删除数据）
http
  .delete("http://jsonplaceholder.typicode.com/users/2")
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });

五、es7方法

（1）、 async 和 await

应用场景1：async 和 await基本使用

//使用async定义函数，返回的是一个promise对象
async function myFun() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Hello"), 1000);
  });
  const error = false;
  if (!error) {
    //这里await等待promise返回结果
    const rsp = await promise;
    return rsp;
  } else {
    await Promise.reject(new Error("error:报错了！"));
  }
}
myFun()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });
  //输出结果：Hello

应用场景2：async 和 await调用接口

async function getUsers() {
  //await等待接口调用成功
  const response = await fetch("http://jsonplaceholder.typicode.com/users");
  //await等待数据解析成功
  const rsp = await response.json();
  return rsp;
}

getUsers()
  .then(data => console.log(data))
  .catch(error => console.log(error));
//返回结果：users数据信息

应用场景3：ES7语法使用async 和 await从新封装fetch（对照上面的promise封装fetch）

//首先封装fetch方法：
class EasyHttp {
  //get方法
  async get(url) {
    const response = await fetch(url);
    const rspData = await response.json();
    return rspData;
  }
  //post请求
  async post(url, data) {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify(data)
    });
    const rspData = await response.json();
    return rspData;
  }

  //put请求
  async put(url, data) {
    const response = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify(data)
    });
    const rspData = await response.json();
    return rspData;
  }

  //delete请求
  async delete(url) {
    const response = await fetch(url, {
      method: "DELETE",
      headers: { "Content-type": "application/json" }
    });
    const rspData = await response.json();
    return rspData;
  }
}
//main.js数据中调用封装好的fetch方法
const http = new EasyHttp();
//get请求（获取数据）
http
  .get("http://jsonplaceholder.typicode.com/users")
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

//post请求数据（增长数据）
const data = {
  name: "Herry",
  username: "恒瑞"
};
http
  .post("http://jsonplaceholder.typicode.com/users", data)
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });

//put请求（更新数据）
const data = {
  name: "Herry",
  username: "恒瑞"
};
http
  .put("http://jsonplaceholder.typicode.com/users/2", data)
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });

//delete请求（删除数据）
http
  .delete("http://jsonplaceholder.typicode.com/users/2")
  .then(data => console.log(data))
  .catch(error => {
    console.log(error);
  });