简介
ES6 全称 ECMAScript 6.0 是JavaScript 语言的标准，JavaScript 是对他的实现，几乎每年都会有一个新版本
ECMAScript 是浏览器脚本语言的规范，JavaScript 是他的具体实现
特性
特性一：let 声明变量
特点一
<script>
// var 声明的变量是全局的
// let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a);
console.log(b);// 这是控制台会报错 ：b is not defined
// 因为let 声明的变量是局部的，值能在代码块内使用
</script>
特点二
<script>
// var 能声明多次
// let 只能声明一次
var a=1;
var a=2;
let b=3;// IDE 的编译也不通过（会报红）
let b=4;
console.log(a);
console.log(b); //控制台会报错 ：Identifier 'b' has already been declared
</script>
特点三
<script>
// var 会变量提升
// let 不存在变量提升
console.log(a); // undefined
var a = 0;
console.log(b); // Cannot access 'b' before initialization
let b = 1;
</script>
特性二 ：const 声明变量
<script>
// const 声明变量后不能改变，一旦声明必须赋值，否则报错
const a=1;
a=3; // 会报错 ：Assignment to constant variable.
</script>
特性三 ：解构表达式
数组解构
var 声明的变量一样可以
<script>
let arr = [1, 2, 3];
// 通过解构表达式 将 数组中的值分别赋给 a,b,c
let [a, b, c] = arr;
console.log(a, b, c)
</script>
对象解构
<script>
let person = {
name:'jack',
age:24,
language:['java','javaScript','css']
}
// 对象解构
//let {name,age,language} = person;
// 不想使用对象中的名称也可以换
let {name:a,age:b,language:c} = person;
console.log(a,b,c);
</script>
特性四 ：字符串扩展
扩展的 API
<script>
let str = "hello.vue";
// 是否以he开始
console.log(str.startsWith("he"));// true
// 是否以 vue 结尾
console.log(str.endsWith("vue"));// true
// 是否包含 e
console.log(str.includes("e"));// true
</script>
字符串模板
//可以放一些标签
<script>
let a = ` <div>
<div></div>
</div>`;
console.log(a)
</script>
//也可以在模板中动态插入值
<script>
const person = {
name: "Jack",
age: 12,
language: ['java', 'css', 'js']
}
const { name, age, language } = person;
function say() {
return "我在学习ES6的新特性呢！！！";
}
let info = `我是${name}，今年${age+10}岁，我想说 ：${say()}`;
console.log(info);
</script>
特性五 ：函数优化
函数的默认值
<script>
// 直接给参数传上默认值，没传就会自动使用默认值
function add(a,b=1) {
return a+b;
}
console.log(add(20));// 结果是21
</script>
不定参数
不定参数用来表示不确定参数的个数，形如 ：…变量名，由… 加上一个具名参数标识符组成。具名参数只能放在参
数列表的最后，并且有且只有一个不定参数。
<script>
function fun(...values) {
console.log(values.length);
}
fun(1,2); // 2
fun(1,2,3); // 3
</script>
箭头函数
只有一个参数时
<script>
// 以前的方式
// var print = function(obj) {
// console.log(obj);
// }
// 简化
// 创建一个 只有一个参数，参数为 obj 的函数，函数中只有一条代码
var print = obj=>console.log(obj);
print("hello");
</script>
控制台就会打印 hello
多个参数时候 ：参数用括号括起来
<script>
// 以前的方式
// var print = function(a,b) {
// return a+b;
// }
// 简化，不需要写return 默认是返回
var print = (a,b)=>a+b;
console.log( print(1,2));
</script>
多条语句的时候 ：语句用花括号括住
<script>
// 以前的方式
// var print = function(a,b) {
// c=a+b;
// return a+c;
// }
// 简化
var print = (a,b)=>{
c=a+b;
return a+c;
}
console.log( print(1,2));
</script>
特性六
新增 API
keys(obj) : 获取对象所有的 key
values(obj) : 获取对象所有的 value
entries(obj) : 获取对象所有的 key 和 value 形成的二维数组
<script>
const person = {
name : "jack",
age : 13,
language : ['java','css','javascript']
}
console.log(Object.keys(person)); //所有的键
console.log(Object.values(person)); //所有的值
console.log(Object.entries(person)); //所有的键和值形成的二维数组
</script>
合并对象
assign 复制
<script>
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
// 将三个合并
// object.assign 方法的第一个参数是目标对象，后两个参数都是源对象
Object.assign(target,source1,source2);
console.log(target)
</script>
对象扩展运算符
<script>
let a = {a:1};
let b = {b:2};
let c = {c:3,...a,...b};
console.log(c);
</script>
声明对象的简写方式
<script>
const name = 'jack';
const age = 12;
//以前声明对象方式
const person = {name:name,age:age};
// 当键和值的名称一致时，可以简写为 ：
const person1 = {name,age};
console.log(person);
console.log(person1);
</script>
对象的函数属性简写
<script>
const person = {
name : 'jack',
// 以前的写法
eat : function(food){
console.log(this.name+"在吃"+food);
},
// 箭头函数，不能使用 this 去调用对象属性，必须使用 person 对象调用属性
eat1 : food => console.log(person.name+"在吃"+food),
// 简写
eat2(food){
console.log(this.name+"在吃"+food);
}
}
person.eat("苹果");
person.eat1("香蕉");
person.eat2("葡萄");
</script>
map 和 reduce 方法
map
map方法：接收一个函数，将原数组中的所有元素用这个函数处理后放入新的数组中
<script>
let arr = ['1','2','3'];
arr = arr.map(item => item*2);
console.log(arr);
</script>
reduce
reduce 方法 ：为数组中的每个元素执行回调函数，不包括数组中被删除或从未被赋值的元素。
<script>
let arr = [1,2,3];
// 没有初始值
let result = arr.reduce((a,b)=>{
console.log("上次调用回调返回的值: ",a)
console.log("正在处理的值 : "+b)
return a+b;
});
// 有初始值
// let result = arr.reduce((a,b)=>{
// console.log("上次调用回调返回的值: ",a)
// console.log("正在处理的值 : "+b)
// return a+b;
// },100);
/**
* 参数 ：共四个
* 1、previousValue ：上次调用回调返回的值，或者是提供的初始值
* 2、currentValue ：数组中正在处理的元素
* 3、index ：当前元素的下标索引
* 4、array ：调用 reduce 的回调
*/
console.log(result);
</script>
模块化
模块化 就是把代码进行拆分，方便反复使用。类似于 java 中的 导包 ：要使用一个包，就得先导包 ；
模块功能主要是由两个命令构成 ： export 和 import
export ：命令用于规定模块的对外接口
import ：命令用于导入其他模块提供的功能
export
export 不仅仅可以导出对象，一切 js 变量都可以导出，比如 ：基本类型变量、函数、数组、对象
定义一个 hello.js 文件，里面有个对象，并导出
const utils = {
sum(a,b){
return a+b;
}
}
// 使用 export 导出对象
export {utils};
定义一个 user.js 文件，并将变量导出
const name = 'jack';
const age = 21;
export {name,age};
导出也可以简写为 ：
export let name = 'jack';
import
创建一个 main.js 文件去导入这些文件。
import {utils} from "./user.js";
import {name,age} from "./hello.js";
console.log(utils.sum(1,2))
console.log(name);
console.log(age);
由于我们这个是 ES6 的语法，所以我们目前不能测试。。。