ES6

ES: ECMAScript是浏览器脚本语言的规范，JavaScript是这个规范的具体实现

1)、let

• let 有严格的作用域，而 var 没有

{
// var 声明变量往往会越域
var a = 1;
// let声明变量有严格的作用域
let b = 1;
}
console.log(a); // 1
console.log(b); // 报错 Uncaught ReferenceError: b is not defined at let.html:18

• let 只能声明一次变量，而 var 能声明多次

var c = 1 ;
var c = 2 ;
let d = 1 ;
let d = 2 ;
console.log(c); // 2
console.log(d); // 报错 Uncaught SyntaxError: Identifier 'd' has already been declared

• let 不存在变量提升

// var 会变量提升（使用可以在声明之前）
console.log(x); // undefined
var x = 10;
console.log(y); // 报错 Cannot access 'y' before initialization
let y = 10;

---

2)、const

• const声明变量之后不允许改变；

  一旦声明就必须初始化，否则会报错

const e = 1;
//e = 3; // 报错 Assignment to constant variable

// 声明后必须初始化
const f; // 报错 Missing initializer in const declaration

---

3)、解构表达式

• 数组解构

let arr = [1,2,3];
// 不需要 let a = arr[0]....
let [a1,b1,c1] = arr; // 将arr中的值直接赋给 a,b,c
console.log(a1,b1,c1); // 1,2,3

• 对象解构

// 对象解构
const person = {
   name: "jack",
   age: 20,
   language: ["java","php","js"]
}
// const name = person.name;
// const age = person.age;
// const language = person.language;
const {name:abc,age,language} = person; // name:abc  将name赋给abc
console.log(abc,age,language); // 打印出对应的值

---

4)、字符串扩展

• 几个常用API

let str = "hello vue";
console.log(str.startsWith("hello")); // true 是否以 hello 开头
console.log(str.endsWith("vue")); // true 是否以 vue 结尾
console.log(str.includes("h")); // true 是否包含 h 字符
console.log(str.includes("hello")); // true 是否包含 hello 字符串

• 字符串模板

  • 多行字符串 注意 字符串定义是用 ``

  let ss = `<dev>
             	<span>hello ES6</span>
            </dev>`;
   console.log(ss);
  

  • 字符串插入变量、表达式、方法

  // 变量名写在 ${} 中，${} 中也可以放入 JavaScript表达式
  let info1 = `我是 ${abc},今年 ${age}了`; 
  console.log(info1); // 我是 jack,今年 20了
  let info2 = `我是 ${abc},今年 ${age+10}了`; 
  console.log(info2); // 我是 jack,今年 30了
  let info3 = `我是 ${abc},今年 ${age+10}了,我想说 ${fun()}`; 
  function fun(){
      return "这是ES6";
  }
  console.log(info3); // 我是 jack,今年 30了,我想说这是ES6
  

---

5)、函数优化

• 给定函数参数默认值

// 在 ES6 之前，我们无法给一个函数设置默认值
function add1(a, b) {
    // 判断 b 是否为空，为空就给默认值 1
    b = b || 1;
    return a + b;
}
// 传一个参数
console.log(add1(10)); // 11

// 现在可以在定义函数时，给函数默认值，如果没传就使用默认值
function add2(a, b=1) {
    return a + b;
}
console.log(add2(10)); // 11

• 不定参数

// 不定参数
function fun(...values) {
    console.log(values.length); // 打印参数个数
}
fun(1,2); // 2
fun(1,2,3,4); // 4

• 箭头函数 类似于lambda表达式

var print1 = function (obj) {
    console.log(obj);
}
print1("old")

var print2 = obj => console.log(obj);
print2("new"); // hello

var sum1 = function(a,b) {
    // ...当其中有其他代码时，箭头函数的方法体需要用{}包裹
    return a + b;
}
console.log("old=>"+sum1(1,2)) // old=>3

var sum2 = (a,b=1) => a + b;
/*
  var sum2 = (a,b=1) => {
		// ......
		return a + b;
	}
*/
console.log("new=>"+sum2(1,2)); // new=>3
console.log("new=>"+sum2(1)); // new=>2

const person1 = {
    name: "jack",
    age: 20,
    language: ["java", "php", "js"]
}
function hello1(obj) {
    console.log("hello1 " + obj.name);
}
hello1(person1); // hello1 jack

var hello2 = obj => console.log("hello2 " + obj.name);
hello2(person1); // hello2 jack

var hello3 = ({name}) => console.log("hello3 " + name);
hello3(person1); // hello3 jack

---

6)、对象优化

• Object的一些方法

const person = {
        name: "jack",
        age: 20,
        language: ["java", "php", "js"]
    }
console.log(Object.keys(person)); // 打印person属性 ["name","age","la..."]
console.log(Object.values(person)); // 打印person的值
console.log(Object.entries(person)); // 打印person的 K,V

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
// assign 方法的第一个参数时目标对象，后面的都是源对象
Object.assign(target, source1, source2);
console.log(target);

• 声明对象简写

// 传统
const age = 20;
const name = "jim";
const person1 = { age: age, name: name };
console.log(person1);
// 简写
const person2 = { age, name };
console.log(person2); 

• 对象上的函数属性简写

let person3 = {
    name: "ls",
    eat1: function(food) {
        console.log(this.name + " 在吃 " + food);
    },
    eat2: (food) => console.log(person3.name + " 在吃 " + food),// 箭头函数中不能使用this
    eat3(food){
        console.log(this.name + " 在吃 " + food);
    }
}
person3.eat1("苹果"); // ls 在吃 苹果
person3.eat2("香蕉"); // ls 在吃 香蕉
person3.eat3("橘子"); // ls 在吃 橘子

• 对象的扩展运算符

  • 拷贝对象 （深拷贝） 使用： {...obj}

  let person4 = { name: "jim", age: 21 }
  let someone = {...person4}
  console.log(someone); // {name: "jim", age: 21}
  

  • 合并对象： let obj = {...f1,...f2}

  let age1 = { age: 15 }
  let name1 = { name: "xx" }
  let p2 = { ...age1, ...name1 }
  console.log(p2); // {age: 15, name: "xx"}
  

---

7)、map 和 reduce

• map 类似于Stream中的map过滤操作

let arr = ['1', '20', '-5']
let arr1 = arr.map(item => {
    return item * 2;
})
console.log(arr1) // [2, 40, -10]
let arr2 = arr.map(item => item * 2)
console.log(arr2) // [2, 40, -10]

• reduce

  • 语法：

    • arr.reduce(callback, [initialValuel])
      reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元
      素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调
      用 reduce的数组。
    • callback(执行数组中每个值的函数,包含四个参数)
      1、 previousvalue(上一次调用回调返回的值,或者是提供的初始值( initiaNalue))
      2、 currentvalue(数组中当前被处理的元素)
      3、 index(当前元素在数组中的索引)
      4、aray(调用 reduce的数组)

    initialValuel (作为第一次调用 callback 的第一个参数)

// arr1 = [2,40,-10]
let res =arr1.reduce((a, b)=> {
    console.log("上一次处理后：" + a);
    console.log("当前正在处理：" + a);
    return a+b;
})
console.log(res); // 32

// 指定初始值 100
res = arr1.reduce((a,b)=>{
    console.log("上一次处理后：" + a);
    console.log("当前正在处理：" + a);
    return a+b;
},100)
console.log(res); // 132

---

8)、promise

封装异步请求

---

9)、模块化

• 什么是模块化
  模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。而s中没有包的概念,换来的是 模块
  模块功能主要由两个命令构成: export和 import'。

  • export命令用于规定模块的对外接口
  • import命令用于导入其他模块提供的功能

  使用场景

  在 A.js 文件中有一个 add方法，需要在 B.js中使用的话，

  1、export

  • 就需要在 A.js 中导出 ： export { add }

  • 也可以在 函数，变量前直接加上 export，直接导出

    export 能导出 变量，函数，数组....

  2、 import

  • 在 B.js 中需要导入： import add from ./A.js