ES6新特性总结
1.1：let和const
let的出现，解决了某些场景下var关键字带来的变量作用域问题，一般用var在外部定义的变量是全局的，但有时候我们想像Java那样，对于不同场合定义当前场合的局部变量，出了这个场合即为未定义，比如下面这个场景
for(var i = 0; i < 5; i++){ console.log("循环内：" + i); } console.log("循环外：" + i ) //5我们在外部也能访问到变量i，这个变量的作用域太大了，这是不够完善的，而let的出现就是解决了这个问题
for(let i = 0; i < 5; i++){ console.log("循环内：" + i); } console.log("循环外：" + i ) //未定义let：let声明的变量，只在let命令所在代码块内有效
且let审美的变量，只能赋值一次，不能多次赋值
const：声明的变量就是常量，定义为是不能修改的，要求在定义变量时就得完成初始化，且后续不能修改
1.2：字符串扩展
-
字符串api扩展
<script> let str = "hello world"; //返回布尔，表示是否包含 console.log(str.includes("hello")); //返回布尔，表示是否以 h 开头，区分大小写哦 console.log(str.startsWith("h")); //返回布尔，表示是否以 d 结尾 console.log(str.endsWith("d")); </script>
-
模板字符串
模板字符串无论是在Vue还是React中用的都很普遍，使用的是``来标记
模板字符串中换行，在渲染的时候也会换行
<script> let str = ` Hello World ES6` console.log(str); </script>
1.3：解构表达式
-
个人理解解构为：解析结构，按照一定的模式从数组和对象中拿到值
-
下面我们分别以数组和对象做一个列子简单说明一下
<script> let arr = [1, 2, 3] //定义一个数组 const [a, b, c] = arr //通过这种方式取得1,2,3 console.log(a, b, c) const [d] = arr //如果不匹配的情况，从数组0开始去 console.log(d) // 1 </script><script> let person = { name: '玛卡巴卡', age: 3, address: '魔仙堡' } //对象属性名接受 const {name,age,address} = person console.log(name, age, address); //自定义变量接受 const {name: yourName,age: yourAge,address: yourAddress} = person console.log(yourName, yourAge, yourAddress); </script>
1.4：函数优化
-
ES6中，对函数做了些许优化，这些优化，我们在工作中还是很常见的
-
函数参数默认值
-
我们可以给形参指定默认值，
-
<script> //ES6之前，想实现相同的效果 function add1(a, b) { b = b || 1; // 判断b是否为空，为空就给默认值1 return a + b; } console.log(add1(10)); //ES6带来的改变 function add2(a, b = 1) { return a + b; } console.log(add2(10)); </script> -
箭头函数，详细说明一下：
箭头函数没有参数的时候，形参括号为空必须有
当有一个参数，括号可以省略不写
当函数体内部只要有一行代码是，大括号可以省略
<script> // ES6之前 var test1 = function(arg1) { console.log(arg1); } // ES6的箭头函数 var test2 = (arg1) => { console.log(arg1); } // 精简版 var test3 = arg1 => console.log(arg1) </script>
对象的函数属性简写
<script> let person = { name: "Ninja", // ES6之前 do1: function(thing) { console.log(this.name + "正在" + thing); }, // ES6的箭头函数 // 这里拿不到this do2: thing => console.log(this.name + "正在" + thing), // 使用person.的方式 do22: thing => console.log(person.name + "正在" + thing), // 简写版： do3(thing) { console.log(this.name + "正在" + thing); } } </script>
箭头函数配合结构表达式
<script> let person = { name: "Ninja", age: 24, } function test1(person) { console.log(person.name + '的年龄是' + person.age); } //箭头函数配合结构表达式 var test2 = ({name,age}) => console.log(name + '的年龄是' + age); test1(person) test2(person) </script>
1.5：map和reduce
map() :接收的是一个函数，将原数组中的元素经过这个函数处理后放入一个新的数组
<script> var arr = [1, 2, 3, 4, 5] var newArr = arr.map(item => item * 10) console.log(newArr); //[10, 20, 30, 40, 50] </script>
reduce()：接收两个参数，一个函数(必须)，一个初始值(选择)
这个要稍微复杂一点，但是也不难理解
reduce函数会把数组中的每一个值依次处理，比如下面的列子，第一次时，a就是数组中第一个值1，b就是数组中第二个值2，函数体为俩个数相加为3
然后又会把上一次的结果带入下一次的运算中，知道数组内数据遍历完毕。把上次的结果继续操作a为3，b就为了数组中的3，相加为6，再下一轮a就是6，b就是4了
<script> var arr = [1, 2, 3, 4, 5] var result = arr.reduce((a, b) => a + b) console.log(result); //1+2+3+4+5 = 15 // 指定初始值 var result2 = arr.reduce((a, b) => a + b, -15) console.log(result2); //-15+1+2+3+4+5 = 0 </script>
1.6：扩展运算符
用...标识符将一个数组转为用逗号分隔的参数序列 。
<script> console.log(...[1, 2, 3]); //1 2 3 console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5 function add(x, y) { return x + y; } var numbers = [1, 2]; console.log(add(...numbers)); // 3 // 数组合并 let arr = [...[1, 2, 3], ...[4, 5, 6]]; console.log(arr); //[1, 2, 3, 4, 5, 6] // 与解构表达式结合 const [first, ...rest] = [1, 2, 3, 4, 5]; console.log(first, rest) //1 [2, 3, 4, 5] //将字符串转成数组 console.log([...'hello']) //["h", "e", "l", "l", "o"] </script>
1.7：Promise
从语法上来看，Promise是一个对象，里面保存着未来才会触发的事件，通常是一个异步操作的结果，比如我们异步请求，我们不知道什么时候会有响应，我们可以通过Promise来写出看似同步的代码，下面一个写过列子看看
new关键字创建一个Promise的实例饿，传入一个函数做为参数
入参函数有两个参数，第一个为成功的回调，第二个为失败的回调
在我们异步请求中，可能会请求成功，也可能会请求失败，分别调用上面的两个参数，然后通过Promise的实例方法.then获取异步操作结果，如果如果调用成功，就会走.then(function(msg){})方法，且响应也在msg中，否之，则走catch(function(msg){})方法，相应的，响应也在msg中，至于最后的那个finally，无论请求是否请求成功都会执行的代码段，和Java中一致
<script> const promise = new Promise(function(success, error) { //我们使用定时器来模仿一个异步任务 setTimeout(() => { const num = Math.random() if (num <= 0.5) { success("成功" + num) } else { error("失败" + num) } }, 1000) }) promise.then(function(msg) { console.log(msg); }).catch(function(msg) { console.log(msg); }).finally(function() { console.log("finally是一定会执行的代码段"); }) </script>
1.8：Set和Map数据结构
Set：和数组一致，差别在于，Set中只能保存不同的元素，重复的会被剔除
<script> const set1 = new Set() const set2 = new Set([1,2,3,4,1]) set1.add(1) set1.add(2) set1.add(1) console.log(set1); //{1 2} console.log(set2); //{1, 2, 3, 4} </script
一些api
set.add(); // 添加 set.clear(); // 清空 set.delete(2); // 删除指定元素 set.has(2); // 判断是否存在 set.forEach(function(){}) //遍历元素 set.size; // 元素个数。是属性，不是方法
Map：
<script> const map = new Map([ ['key1', 'value1'], ['key2', 'value2'], ]) const set = new Set([ ['key1', 'value1'], ['key2', 'value2'], ]) const map2 = new Map(set) //可以接收一个set const map3 = new Map(map); //也可以接受其他map const map4 = new Map() //Map的键值都是Object，而Object的键只能是字符串 map4.set(1, 2) map4.set('key', 'value') map4.set(true, false) console.log(map4); </script>
一些api：
map.set(key, value);// 添加 map.clear(); // 清空该map所有键值 map.delete(key); // 根据键删除键值 map.has(key); // 判断是否存在 map.forEach(function(key,value){}) //遍历元素 map.size; // 元素个数。是属性，不是方法 map.values() //获取value的迭代器 map.keys() //获取key的迭代器 map.entries() //获取entry的迭代器
1.9：Class类的引入
写Java的对下面的代码应该熟悉得不得了，思想差不多
constructor构造函数，创建实例时调用，完成实例初始化
实例方法、静态方法的创建和调用如下所示
继承采用extends关键字
一旦有继承关系，应该在构造函数中，第一步应该完成父类的初始化
<script> class User { constructor(name, age = 24) { this.name = name; this.age = age; } method1() { return "Hello World"; } static method2() { return "我是静态方法" } } let user = new User("Ninja") console.log(user.method1()); //实例调用实例方法 console.log(User.method2()); //类调用静态方法 // 继承玩法 class Son extends User { constructor(name, age, lovely) { // 完成父类的初始化 super(name, age) this.lovely = lovely } method3() { return "我是" + this.name + ",我今年" + this.age + "岁，我的爱好是" + this.lovely } } let son = new Son("大猪蹄子", 18, "打篮球") console.log(son.method1()); console.log(Son.method2()); //静态方法也会被继承，但不建议这样写 console.log(son.method3()); </script>
1.10：Generator函数
这个用的少，还是记录一下
function命令与函数名 之间有一个星号:
函数体内部使用 yield语句定义不同的内部状态。
next()方法的持续调用，依次暴露函数内部的值
<script> function* hello() { yield "hello"; yield "world"; return "ES6"; } let h = hello(); console.log(h.next()); //{value: "hello", done: false} console.log(h.next()); //{value: "world", done: false} console.log(h.next()); //{value: "ES6", done: true} console.log(h.next()); //{value: undefined, done: true} // 遍历，注意不要和上面同时启用 for (let item of h) { console.log(item); //hello world } </script>
1.11:模块化
就是将代码抽出去，单独封装为一个js文件，我们需要什么就引入对应的js文件即可，有利于代码的复用
export命令用于模块化中的导出
import命令用于模块化的中导入
