ES6 使用简略

一、 let 声明变量

         // var 声明的变量往往会越域 
        // let 声明的变量有严格局部作用域 

{ 
    var a = 1; 
    let b = 2; 
}
console.log(a); // 1 
console.log(b); // ReferenceError: b is not defined 

        // var 可以声明多次 
        // let 只能声明一次 

var m = 1 
var m = 2 
let n = 3 
// let n = 4 
console.log(m) // 2 
console.log(n) // Identifier 'n' has already been declared 

        // var 会变量提升 
        // let 不存在变量提升 

console.log(x); // undefined 
var x = 10; 
console.log(y); //ReferenceError: y is not defined 
let y=10;

二、 const 声明常量 (只读变量)

        // 1. 声明之后不允许改变

        // 2. 一但声明必须初始化，否则会报错

const a = 1; 
a = 3; //Uncaught TypeError: Assignment to constant variable.

三、 解构表达式

3.1 数组解构

let arr = [1,2,3]; 
//以前我们想获取其中的值，只能通过角标。ES6 可以这样： 
const [x,y,z] = arr;
// x，y，z 将与 arr 中的每个位置对应来取值 
// 然后打印 
console.log(x,y,z);

3.2对象解构

const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值 
const { name, age, language } = person; 
// 等价于下面 
// const name = person.name; 
// const age = person.age; 
// const language = person.language; 
// 可以分别打印 
console.log(name); console.log(age); console.log(language); 

//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名 
const { name: nn, age, language } = person; 
console.log(nn); console.log(age); console.log(language);

四、 字符串扩展

4.1 字符串 API

let str = "hello.vue"; 
console.log(str.startsWith("hello"));    //true 
console.log(str.endsWith(".vue"));       //true 
console.log(str.includes("e"));          //true 
console.log(str.includes("hello"));      //true

4.2 字符串模板

4.2.1 多行字符串

let ss = `<div>
            <span>hello world<span> 
          </div> ` 
console.log(ss)

4.2.2 字符串中插入变量、表达式、调用函数，将它们写在 ${ } 内即可

let name = "张三"; 
let age = 18; 
let info = `我是${name}，今年${age}了`; 
console.log(info)

function fun() { 
    return "这是一个函数" 
}
let sss = `O(∩_∩)O 哈哈~，${fun()}`; 
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

五、 对象优化

5.1 Object 新扩展的 API

const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }
console.log(Object.keys(person));//["name", "age", "language"] 
console.log(Object.values(person));//["jack", 21, Array(3)] 
console.log(Object.entries(person));//[Array(2), Array(2), Arra y(2)]

5.2 声明对象简写

const age = 23 
const name = "张三"
// 传统 
const person1 = { age: age, name: name } console.log(person1) 

// ES6：属性名和属性值变量名一样，可以省略
 const person2 = { age, name } 
console.log(person2) //{age: 23, name: "张三"}

5.3 对象的函数属性简写

let person = { 
    name: "jack", 
    // 以前： 
    eat: function (food) { 
        console.log(this.name + "在吃" + food); 
    },
    
    // 箭头函数版：这里拿不到 this 
    eat2: food => console.log(person.name + "在吃" + food), 
    
    // 简写版： 
    eat3(food) { 
        console.log(this.name + "在吃" + food); 
    } 
}
person.eat("apple");

5.4 对象扩展运算符

        拓展运算符（... ）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象（深拷贝） 
let person1 = { name: "Amy", age: 15 } 
let someone = { ...person1 } 
console.log(someone)     //{name: "Amy", age: 15} 

// 2、合并对象 l
et age = { age: 15 } 
let name = { name: "Amy" } 
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字 段值会覆盖前面对象的字段值 
console.log(person2) //{age: 15, name: "Amy"}

六、 Map 和 Reduce

6.1 Map

         map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

let arr = ['1', '20', '-5', '3']; 
console.log(arr) 
arr = arr.map(s => parseInt(s)); 
console.log(arr)

6.2 Reduce

语法：

arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

        1、 previousValue （上一次调用回调返回的值，或者是提供的初始值（ initialValue ））

        2、 currentValue （数组中当前被处理的元素）

        3、 index （当前元素在数组中的索引）

        4、 array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

const arr = [1,20,-5,3]; 
//没有初始值： 
console.log(arr.reduce((a,b)=>a+b));    //19 
console.log(arr.reduce((a,b)=>a*b));    //-300

//指定初始值： 
console.log(arr.reduce((a,b)=>a+b,1));    //20 
console.log(arr.reduce((a,b)=>a*b,0));    //-0

七、 模块化

7.1 export

        export`不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象。当要导出多个值时，还可以简写。

const util = { 
    sum(a,b){ 
        return a + b; 
    } 
}
var name = "jack" 
var age = 21
export { util , name , age }

        注：省略名称

        上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出

变量名，否则就会出错。

        而下面这样，当使用者导入时，可以任意起名字

// 无需声明对象的名字 

export default { 
    sum(a,b){ 
        return a + b; 
    } 
}

7.2 import

        使用`export` 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 `import` 命令加载这个模块

// 导入 util
import util from 'hello.js' 
// 调用 util 中的属性 
util.sum(1,2)