ES6笔记

最近在复习一些关于ES6方面的基础知识点，记录如下，与君共勉。

1、ECMAScript简介

追根溯源，什么是ES，据官方介绍：ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计的语言。而ES6只是其中发行的一个版本，该机构几乎每年都会发行一个本版。既然不断发布新版本，那为什么要学ES6这一版本呢，据介绍，ES6版本变动的内容比较多，而且加入了许多新的语法特性，简而言之，就是可以使你的编程更加简单高效，其次，就是这是就业必备技能之一。

2、ES6特性

2.1. let，const

let、const是ES6新引入的关键字，let用于声明变量，const用于声明常量。在ES6之前，我们声明变量常使用var，其声明的变量特点是全局性。let的作用与var类似，其不同为let声明的变量具有块级作用域，即只在{}块内有效。具体特点如下：

// let特点
// 不能重复申明，即在一个块内声明let Apple之后又let Apple
// 块级作用域
// 不存在变量提升
{	
	// 变量提升
	console.log(peach); // undifined
	var peach;
	console.log(apple); //报错
	//声明
	let apple = "苹果";
}
console.log(apple) // 报错

const关键字用来声明常量，例如常用的PI，它也具有块级作用域，具体特点如下：

//const特点
//申明必须赋初值
// 不能重复声明
//值不能修改，注意值不能修改并不代表不能对数组或对象的元素进行修改
//块级作用域
{
	const PI = 3.14;
	const cities = ['shenzheng', 'shanghai', 'beijing'];
	cities.push('nanjing') // success
}
console.log(PI) // 报错

2.2. 变量的解构赋值

变量的结构赋值指的是可以按照一定的规则对数组或对象的元素进行提取变换，满足自己的需求。

// 数组的结构赋值
const book = ['清明上河图密码1', '活着'];
let [book1, book2] = book;
console.log(book1) // 清明上河图密码

// 对象的结构赋值
const bookInfo = {
	name: '清明上河图密码',
	price: 45
}
let {bookName, bookPrice} = bookInfo;
console.log(bookName) // 清明上河图密码

2.3. 模板字符串

以往在定义字符串是常用的是双引号或单引号，但在遇到换行时需用+连接，比较麻烦，而模板字符串（反引号``）可以很好的解决这一问题，特点如下：

//模板字符串特点
// 字符创中可以出现换行
/ /可以使用${}形式输出变量
let str = `用了模板字符串`;
let name = `tom`;
console.log(`小猫名叫${name}`) //小猫名叫tom

2.4. 简写对象

ES6允许在花括号中直接写入变量和函数作为对象的属性和方法。

let name = "清明上河图密码";
let price = 45;
let slogon = function () {
	console.log("隐藏在千古名画中的阴谋与杀局！");
}
let book = {name, price, slogon};

2.5. 箭头函数

ES6允许使用()=>{} 来定义函数。写法如下：

//特点
// 形参只有一个，小括号可以省略
// 函数体如果只有一条语句，可以省略花括号
// this指向声明式所在作用域下this的值
// 不能作为构造函数实例化
// 不能使用arguments
// 通用写法
let fn = (value1, value2) => {
	return value1 + value2;
}
// 当变量只有一个值且语句较简单是，可以省略括号和花括号
let fn2 = value => value * 2;

let book = {
	name: '清明上河图密码',
	getName() {
		let bookName = () => {
			console.log(this.name);
		}
		bookName(); // 清明上河图密码
	}
}

2.7. rest参数

rest可以用于获取函数的实参，作用与arguments类似。用法如下：

<script>  
		//...args为rest参数，值得注意的是，rest参数必须是最后一个形参，否则会报错  
        function restTest(value1, value2, ...values) {
            console.log(value1, value2, values);
        }
        restTest(1, 2, 3, 4, 5, 6); // 1, 2, [3, 4, 5, 6]
</script>

2.8. spread扩展运算法

扩展运算符写法：… + 数组 /对象，扩展运算法作用相当于rest参数的逆运算，可将一个数组进行解包。

// 解耦数组
let cities = ['深圳', '北京', '上海', '南京'];
console.log(...cities); // 深圳 北京 上海 南京
// 解耦对象
let book = {
    name: '小行星掉在下午',
    author: '沈大成',
    price: 23
}
    let bookType = {
    type: '理想现实主义',
    symbol: '理想国'
}
console.log({...book, ...bookType}); // {"name": "小星星掉在下午","author": "沈大成","price": 23, "type": "理想现实主义","symbol": "理想国"}

2.9. 新增数据类型Symbol

ES6新增了一种数据理性Symbol，用来表示独一无二的值。

// 特点
// Symobl的值是唯一的，用来解决命名冲突的问题
// Symbol值不能与其它数据进行运算
// 不能使用for in语法
let symbol2 = Symbol('桂林');
console.log(symbol2); // Symbol(桂林)
let symbol3 = Symbol('桂林');
console.log(symbol2 == symbol3); // false

此外，ES6还为Symbol提供了许多内置值，指向语言内容使用的方法，详细内容在阮一峰的《ECMAScript 6 入门》中有详细介绍。

2.10. Iterator遍历器

Iterator相当于一个接口，任何数据结构只要部署了iterator接口，就可以使用for of进行遍历操作。有些数据本身就已经具备iterator接口，即不用部署就可以使用for of语法，常见的例如array、arguments、set、map、String等。

2.11. Promise

Promise是一种解决异步编程的新方案，可以用来封装异步操作并获取其返回结果，常有两个参数resolve和reject，resolve表示成功的返回，reject表示失败的返回。常见的用途例如封装ajax请求、文件读取等操作，常见写法如下：

// 写法
function promesTest(value){
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              if (value > 0) {
              	// 成功返回数据
                  resolve('数据正确');
              }
              // 失败返回数据
              reject('数据错误');
          }, 1000)
      })
}
  promesTest(10).then(data => {
      console.log(data); // 数据正确
  })
   promesTest(-10).then(data => {
      console.log(data); // 报错
  })

2.12. Set

Set是一种新的数据结构，与数组类似，不同的是元素成员唯一，具有遍历器结构，可以使用扩展运算符和for of进行遍历。具有以下方法：

• size：返回元素个数，与length类似
• add：增加新的元素
• delete：删除指定元素，返回Boolean值
• has：检查集合中是否含有某个元素，返回Boolean值
• clear：清空集合

let cities = new Set(['深圳', '北京', '上海', '南京', '深圳']);
// 使用扩展运算符，且会去重
console.log(...cities); // 深圳 北京 上海 南京
console.log(cities.size); // 4
console.log(cities.add('桂林'));  // Set(['深圳', '北京', '上海', '南京', '桂林']])
console.log(cities.delete('深圳')); // true
console.log(cities.has('南京')); // true
console.log(cities.clear()); // undifined

注意，Set虽然与Array数组类似，但却不能像数组那样直接使用下标array[0] = value直接获取元素值。

2.12. Map

Map通Set类似，也是一种新的数据结构，类似于对象，具有键值对的集合，值得一提的是，其“键”，不仅仅指字符串，可以使任何类型的值，也具有遍历器和扩展运算发的特性。具有的属性和方法如下：

• size：返回元素的个数
• set：新增一个新元素，返回新的Map
• get：根据键名返回键值
• has：通过键名检查Map是否含有指定的元素，返回Boolean值
• clear：清空Map

let map = new Map();
 map.set('city', '深圳');
    
let key = {
    build: '公园' 
}
let values = ['深圳湾公园', '人才公园', '科技园公园'];
// 添加元素
map.set(key, values);
console.log(map); // 2
console.log(map.get('city')); // 深圳
console.log(map.get(key)); // ['深圳湾公园', '人才公园', '科技园公园']
// 以键名key来检查
console.log(map.has('city')); // true
console.log(map.clear()); // undifined

2.13. Class类

ES6引入了“类”这个概念，作为对象的模板。通过class关键字，就可以定义一个类，具体如下：

    // 定义一个父类：book对象，
    class Book {
        // 构造方法
        constructor(name, price) {
            this.name = name;
            this.price = price;
        }
        //对象方法
        sologon() {
            console.log('一本好书');
        }
    }
    // 定义一个子类，利用extends继承父类
    class LikeBook extends Book {
        constructor(name, price, author, type) {
            // super继承父类的构造方法
            super(name, price);
            this.author = author;
            this.type = type;
        }
        // 子类方法
        readBook() {
            console.log('认识世界！');
        }
        // 重写父类方法
        sologon() {
            console.log('喜欢的一本好书');
        }
    }
    // 实例化对象
    const book1 = new Book('自在独行', 25);
    const book2 = new LikeBook('小行星掉在下午', 30, '沈大成', '理想国');
    console.log(book1);
    console.log(book2);
    book1.sologon(); // 一本好书
    book2.readBook(); // 认识世界！
    book2.sologon();  // 喜欢的一本好书

2.14. 数值扩展

ES6还扩展了一些数字方法：

• Number.isFinite()：检查数值是否有限
• Number.isNan()：检查值是否为NaN
• Number.parseInt()：获取整数
• Number.parseFloat()：获取浮点数
• Math.trunc：去除一个数的小数部分，只保留整数
• Number.isInterge()：判断一个数值是否为整数

	console.log(Number.isFinite(100)); // true
    console.log(Number.isNaN(1)); // false
    console.log(Number.parseInt('123gg45')); // 123
    console.log(Number.parseFloat('0.2545xx')); // 0.2545
    console.log(Math.trunc(3.14125)); // 3
    console.log(Number.isInteger(2.35)); // false

2.15. 对象扩展

ES6对对象的扩展主要体现在下面三点：

• Object.is：比较两个值是否严格相等，相等于===
• Object.assign：将两个对象合并
• setPrototypeOf：设置对象原型

    // Object.is()
    console.log(Object.is(100, 100)); // true

    // Object.assign()
    const book1 = {
        name: '糊涂一点洒脱一点',
        price: 25
    };
    const book2 = {
        name: '活着',
        author: '余华'
    }
    console.log(Object.assign(book1, book2
    )); // {name: '活着', price: 25, author: '余华'}

    // Object.setPrototypeOf()
    const book3 = {
        name: '一个人就一个人'
    }
    const types = {
        type: ['文学小说', '青春', '热血', '现实']
    }
    Object.setPrototypeOf(book3, types);
    console.log(book3);

3. 总结

以上只是对ES6部分知识点的简单总结，更详细的内容请参阅阮一峰大神的《ECMAScript 6 入门》。