ES6主要的新特性

前言

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。
ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

新特性

数组方法：forEach、map、filter、find、every、some、reduce
let和const
多行字符串
箭头函数
增强对象字面量
函数默认参数值
展开运算符
解构(数组和对象)
面向对象(class)
generator生成器
新的数据解构：map和set
promise
fetch

1.数组方法

forEach

//输出数组colors的内容
var colors = ["green","yellow","blue"];

//ES5遍历方法
for(var i=0; i <= colors.length; i++){
//
}

//ES6之forEach
colors.forEach(function(color){
//
})

map

map()和forEach()的区别在于：forEach()会修改原来的数组但没有返回值，而map()方法会得到一个新的数组并返回。

//使一个数组的值翻倍
var numbers = [1,2,3];
var doubleNumbers = numbers.map(function(number){
 		return number*2;
})

find和filter

find和filter都是一种用于筛选过滤符合条件的元素，且不改变原数组的方法。
区别在于：find只查找到第一个符合的就停止了，返回的是一个对象；而filter会查找全部符合条件的结果，返回的是一个数组。

//筛选出年龄为18的学生
const students = [{name:"zhangsan",age:18},
				  {name:"lisi",age:19},
				  {name:"wangwu",age:18}]

//ES5
for(var i = 0 ;i <= students.length; i++){
	if(students[i].age === 18){ 
        console.log(students[i].name);
    }
}

//ES6(此处应用filter)
//find
selectStudents = students.find(function(student){
	return student.age === 18;
})
console.log(selectStudents);
//只输出第一个符合条件的zhangsan

//filter
selectStudents = students.filter(function(student){
	return student.age === 18;
})
console.log(selectStudents);
//输出zhangsan和wangwu

some和every
every()和 some()作用：确定数组的所有成员是否满足指定的测试
some：(一假即假)只要其中一个为true 就会返回true
every：(全真即真)所有都返回true才会返回true

reduce
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

扫描二维码关注公众号，回复： 6142636 查看本文章

var arr = [10, 120, 1000];
var sum = arr.reduce(function (prev, curr) { 
	return prev + curr 
}, 0)
console.log(sum) // 1130

2.let和const

var、let和const的区别在于作用域不同。
ES6 中新增了块级作用域。块作用域由 { } 包括。

var变量：没有块的概念，可以跨块访问, 不能跨函数访问。
let变量：只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const常量：使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

3.多行字符串

在ES5中，当我们有多行字符串时，经常要用到+来拼接字符串，书写方法冗杂且繁琐。而在ES6中新增加的``(tab键上面)可以让我们方便的使用多行字符串。

//ES5
var roadPoem = 'There is a pig looking at this'
 + 'example whiwe sda s as sada  sasda asa'
 + 'Because it was grassy and wanted wear,nt'';
//ES6
var roadPoem = `There is a pig looking at this'
  example whiwe sda s as sada  sasda asa'
  Because it was grassy and wanted wear,nt'' `;

4.箭头函数

缩减代码

//ES5
const double1 = function(number){
    return number * 2;
 }
//ES6
 const double2 = (number) => {
  return number * 2;
 }
//省略{}
 const double3 = (number) => number * 2;
//或者
 const double5 = (number => number * 2);
//单个参数时可省略()
 const double4 = number => number * 2;
//多个参数时()不能省略
 const double6 = (number,number2) => number + number2;
//箭头后面多个语句{}不能省略
 const double = (number,number2) => {
   sum = number + number2 
   return sum;
 }

改变this指向

在ES5中，我们使用闭包的时候，this总是预期之外地产生改变，需要用that = this或 self = this 或 _this = this 或.bind(this)引导this指向

而ES6箭头函数中的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

//ES5
const team1 = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    let self = this;
    //用self保存this
    return this.members.map(function(member){
      return `${member}隶属于${self.teamName}小组`;
    })
  }
}

const team2 = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map(function(member){
      return `${member}隶属于${this.teamName}小组`;
    }.bind(this))
    //bind()绑定this
  }
}

//ES6箭头函数
const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map((member) => {
      // this指向的就是team对象
      return `${member}隶属于${this.teamName}小组`;
    })
  }
}

5.增强对象字面量

相对于ES5,ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码同时语法更易于理解。

其中包括对象字面量简写(Object Literal Shorthand)、对象方法简写(Object Method Shorthand)、计算对象键(Object key)、对象解构(Object Destructuring)

6.函数默认参数值

ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。
函数参数默认值的类型：
（1）变量
（2）函数

function log(x,y='world'){
    console.log(x,y);
}
log('hello'); //hello world

7.展开运算符
展开运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
 
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }

8.解构

解构是一种打破数据结构，将其拆分为更小部分的过程。解构在实际开发中经常会应用到对象和数组中。

对象解构
解构赋值
一定要用一对小括号包裹解构赋值语句，javascript引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值的过程。

const node = {a: 1, b: 2};
let {a, b} = node;

// 对已经声明的变量赋值
const node = {a: 1, b: 2};
let a, b;
({a, b} = node)

对象解构
通过在数组中的位置进行选取，且可以将其存储在任意变量中，未“显式声明”的元素都会被直接被忽略。注意：不需要小括号包裹表达式，这一点与对象解构的约定不同

let colors = ['red', 'blue', 'green'];
let [firstColor, ...otherColor] = colors;
console.log(otherColor) // ["blue", "green"]

9. 面向对象(class)

ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。
基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

const Student = class{
    constructor(name){
	this.name = 'zhangsan'
	}
}
var p = new Student();

类的继承
ES5中的继承是通过prototype进行的，而ES6中是通过extends实现的。

class B extends A{
}

类中的super关键字
super不仅仅是一个关键字，还可以作为函数和对象。

super作为函数调用时：只能写在子类的构造函数（constructor）里面，super代表的是父类的构造函数。
super作为对象使用时：分为在普通方法中使用和在静态方法中使用

10. generator生成器

Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行。
Generator函数与普通函数区别在于定义时多了个*

function* thisGenerator(){
	console.log('This is a generator');
}

yield关键字
Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行。

const name = function* names(){
	yield "zhangsan";
	yield "lisi";
	yield "wangwu";
}
console.log(name.next());//{value:"zhangsan",done:false}
console.log(name.next());//{value:"lisi",done:false}
console.log(name.next());//{value:"wangwu",done:false}
console.log(name.next());//{value:undefined,done:true}

11. 新的数据解构：map和set

map
JavaScript中对象的本质是键值对的集合，但是键只能是字符串。为了弥补这种缺憾，ES6带来了一种新的数据结构Map。Map也是键值对的集合，只是键不仅可以是字符串还可以是其他数据类型，比如：对象、函数

const map = new Map();
const key1 = "string";
const key2 = {};
const key3 = function(){};

set
set与map相似，区别在于set中成员的值都是唯一的，没有重复

const set1 = new Set();

set1.add(100)
set1.add('string')
set1.add({name:"hhb"})
set1.add(100)

console.log(set1);
//100,"string",object

12. promise
promise有三种状态：
unresolve(任务没有完成)、resolve(任务完成且没有出现问题)、reject(任务完成但出现问题)
在这里插入图片描述
Promise函数中有两个参数
resolve：异步操作执行成功后的回调函数，将Promise的状态置为fullfiled，调用then();
reject:异步操作执行失败后的回调函数，将Promise的状态置为rejected,调用catch();

let promise = new Promise((resolve,reject) => {
    setTimeout(() => {
        // resolve();
        reject();
    }）
promise
    .then(() => console.log("成功"))
    .catch(() => console.log("失败"));
console.log(promise);//失败

13. fetch

fetch是一个基于promise的简单便捷的http请求方法。

基本使用结构

//测试接口
let url = 'http://jsonplaceholder.typicode.com/posts';
// console.log(fetch(url))//Promise {<pending>} 未执行
 
fetch(url)
    .then(response => response.json())//把response这个对象解析成正常我的可读的状态(为可读流)
    .then(data => console.log(data))//解析之后打印出来是所有返回的数据 
    .catch(err => console.log(err))//请求失败后所调用,err一般返回码超过300,是不会返回catch的,也就是说只有主要域名地址错误才会返回

获取本地纯文本

function getText(){
    fetch("test.txt")//获取本地txt文件
        .then((res) => res.text())//返回text
        .then(data =>{
            console.log(data)
            document.getElementById('output').innerHTML = data;
        })
        .catch(err => console.log(err)
        )
}

获取本地json文件

function getJson(){
    fetch("test.json")//获取本地json
        .then((res) => res.json())//返回json
        .then(data =>{
            console.log(data)
            let output = '';
            data.forEach((element) => {
                output += `<li>${element.title}</li>`
            });
            document.getElementById('output').innerHTML = output;
        })
        .catch(err => console.log(err)
        )
}

获取网络api

function getExternal(){
    fetch("http://jsonplaceholder.typicode.com/posts")//获取网络接口
        .then((res) => res.json())//返回json
        .then(data =>{
            console.log(data)
            let output = '';
            data.forEach((element) => {
                output += `<li>${element.id}</li>`
            });
            document.getElementById('output').innerHTML = output;
        })
        .catch(err => console.log(err)
        )
}

猜你喜欢