es6语法详解

什么是ECMAScript？

ECMAScript是浏览器脚本语言的规范，而咱们熟知的js语言，如JavaScript则是规范的具体实现。es6就比如Java的jdk。

1、es6语法详解：let声明变量

一、var声明的变量每每会越域；let声明的变量有严格局部做用域

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

二、var 能够声明屡次；let只能声明一次

var m = 1;
    var m = 2;
    let n = 1;
    let n = 2;
    console.log(m) //2
    console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared

三、var会变量提高；let不存在变量提高

console.log(x);
    var x = 10; // undefined
    console.log(y);
    let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization

注意：之后要习惯使用let声明变量

2、es6语法详解：const声明变量 至关于声明了一个常量

一、声明以后不容许改变

const a = 1;
    console.log(a) //1
    a = 2;
    console.log(a) // Uncaught TypeError: Assignment to constant variable.

二、一旦声明必须初始化，不然会报错

const a;
  a = 1; 
  console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

3、es6语法详解：解构表达式

一、数组解构

let arr = [1, 2, 3];
 let [a, b, c] = arr;
 console.log(a, b, c) //1,2,3

二、对象解构

const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    const { name, age, language } = person 
    console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]

const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    //从person里解析出name的值在赋值给abc
    const { name:abc, age, language } = person
    console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]

4、es6语法详解: 字符串扩展

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

5、es6语法详解: 字符串模板

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

6、es6语法详解: 字符串插入变量和表达式。变量写在${}中，${}中能够放入js表达式

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23

let info = `我是${abc},今年${age}`
console.log(info) //我是qiyue,今年23

function fun() {
      return "这是一个函数";
    }
    let info = `我是${abc},今年${age + 10},我想说：${fun()}`
    console.log(info) //我是qiyue,今年33,我想说：这是一个函数

7、es6语法详解: 函数优化

一、函数默认值：直接给参数写上默认值，没传就会自动使用默认值

function add(a, b = 1) {
      return a + b;
    }
    console.log(add(10)) //11

二、不定参数：不定参数用了表示不肯定的参数个数，形如...变量名，由...加上要给具名参数标识符组成。具名参数只能放在参数列表的最后，而且有且只有一个不定参数

function fun(...params) {
      console.log(params.length)
    }
    fun(1, 2) // 2
    fun(1, 2, 3, 4) //4

三、箭头函数

//之前
var sum = function (a, b) {
      c = a + b
      return c
    }
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6

四、箭头函数结合解构表达式

//之前
    function hello(person) {
      console.log("hello" + person.name)
    }
    hello(person); //helloqiyue
    //箭头函数
    let hello2 = params => console.log("hello" + person.name)
    hello2(person) //helloqiyue
    //箭头函数加解构表达式
    var hello3 = ({ name }) => console.log("hello" + name)
    hello3(person) //helloqiyue

8、es6语法详解: 对象优化

一、es6给Object扩展了许多新的方法，如

• key(obj)：获取对象的全部key造成的数组
• value(obj):获取对象的全部value造成的数组
• entries(obj):获取对象全部的key和value造成的二维数组

const person = {
      name: "qiyue",
      age: 23,
      language: ["java", "js", "css"]
    }
    console.log(Object.keys(person)) //["name","age","language"]
    console.log(Object.values(person)) // ["qiyue",23,Array(3)]
    console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]

二、Object.assign方法的第一个参数是目标对象，后面的参数都是源对象；将源对象的属性赋值到目标对象中

onst target = { a: 1 }
    const source1 = { b: 2 }
    const source2 = { c: 3 }
    Object.assign(target, source1, source2);
    console.log(target) //{a: 1, b: 2, c: 3}

三、 声明对象简写

//之前
	const name = 'sanyue'
    const age = 21
    //将属性值name，age分别赋给person1对象的name，age,后面是属性值
    const person1 = { name: name, age: age }
    console.log(person1) //{name: "sanyue", age: 21}
    
    //es6:属性名和属性值变量名同样，能够省略
    const person2 = {name,age}
    console.log(person2) //{name: "sanyue", age: 21}

四、对象的函数属性简写

let person3 = {
      name: "qiyue",
      //之前
      eat: function (food) {
        console.log(this.name + "在吃" + food);
      },
      //箭头函数中this不能使用，用对象.属性
      eat2: food => console.log(person3.name + "在吃" + food),
      eat3(food) {
        console.log(this.name + "在吃" + food)
      }
    }
    person3.eat("苹果") //qiyue在吃苹果
    person3.eat2("香蕉") // qiyue在吃香蕉
    person3.eat3("西瓜") //qiyue在吃西瓜

五、对象的扩展运算符

扩展运算符（...)用于取出参数对象全部可遍历属性而后拷贝到当前对象

//拷贝对象（深拷贝）
    let p1 = { name: "qiyue", age: 23 }
    let obj = { ...p1 }
    console.log(obj)//{name: "qiyue", age: 23}
	
	//合并对象
    let age1 = { age: 24 }
    let name1 = { name: "qiyue" }
    let p2 = {}
    p2 = { ...age1, ...name1 }
    console.log(p2) //{age: 24, name: "qiyue"}
    //若是p2中本来有name,age属性会被覆盖

9、es6语法详解:map和reduce方法

一、map():接收一个函数，将原数组中的全部元素用这个函数处理后放入新数组返回

let arr = ["1", "3", "4", "23"]
    arr = arr.map(item => item * 2)
    console.log(arr) //[2, 6, 8, 46]

二、reduce():为数组中的每个元素依次执行回调函数，不包括数组中被删除或未被赋值的元素

语法：arr.reduce(callbace,[initialValue])

callback(执行数组中每一个值的函数，包含四个参数)

• previousValue（上一次调用回调返回的值，或者是提供的初始值（initialValue))
• currentValue(数组中当前被处理的元素)、
• index(当前元素在数组中的索引)
• array(调用reduce的数组)

initialValue(做为第一次调用callback的第一个参数)

let arr1 = [2, 40, -10, 6]
    let result = arr1.reduce((a, b) => {
      return a + b
    }, 10)
    console.log(result)//48

10、es6语法详解:模块化

什么是模块化：模块化就是把代码进行拆分，方便重复利用。相似Java中的导包，要使用一个包，必须先导包。二Js中没有包的概念，换来的就是模块

模块的功能主要有两个命令构成：export和import

• export命令用于规定模块的对外接口，export不只能够导出对象，一切js变量均可以导出。好比：基本类型变量、函数、数组、对象
• import命令用于导入其余模块提供的功能