ES6简单入门

前言

• 有关ES6详情参考
• ES6是ECMAScript6，js的核心是ECMAScript

入门

• var声明的变量作用域为全局

• ES6新增了let，声明的变量作用域为代码块，也即是作用域为某个函数，因此在同一个函数中不可以重复声明同一个变量；且不存在变量提升

• const声明一个只读的常量，声明后不可改变，只有在块级作用域中有效，只有在声明后使用

• 解构赋值

# 数组解构赋值
  let [a, b, c] = [1, 2, 3];   //左边的变量会赋对应的值
  let [x, , y] = [1, 2, 3];    // 解构不成功，变量的值为undefined
  let [x, y] = [1, 2, 3];    //不完全解构（只解构一部分），解构会成功
 
# 对象的解构赋值
  const user = {
	username: "狗蛋",
	age: 20,
	sex: 1,
	status: 200
  }
  const {age, sex, username} = user   //不完全解构赋值，这里将user对象赋值给 {age, sex, username}
 
# 字符串的解构赋值
  const [a, b, c, d, e] = 'hello';
	
# 数值和布尔值的解构赋值
	
# 函数参数的解构赋值
	

• 为函数参数设置默认值

 function Point(x = 0, y = 0) {  //直接写在参数后面
	this.x = x;
	this.y = y;
 }
 

• 函数参数设置默认值与解构赋值结合

  function m1({x = 0, y = 0} = {}) {
    return [x, y];
  }
 

• 函数的参数设置了默认值建议放在尾部，因为函数传参是从左往右赋值

  function f(x, y = 5, z) {   //这里设置了默认值的参数没有放在尾部
    return [x, y, z];
  }
  f() // [undefined, 5, undefined]
  f(1) // [1, 5, undefined]，传的参数赋给了x
# 函数的参数在指定默认值后，length属性将由1变成0
 

• rest参数可以看成一个数组，可以传入多个参数，写法更加简洁

  function add(...values) {
  
  }
 

• 箭头函数

  var f = v => v;      //箭头前表示参数，箭头后表示返回值
  var sum = (num1, num2) => num1 + num2;  //多个参数用小括号
# 代码块部分多余一条语句则需用大括号括起来
# 返回的是一个对象时，需用小括号括起来
 

• 扩展运算符：将一个数组转为用逗号分隔的参数序列

  const numbers = [4, 38];   //有一个数组numbers
  add(...numbers)    // 42，这里的add方法是将传入的参数相加，那么这里使用扩展运算符，将数组转为参数，即是数组中所有值相加
 
# ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
  var username       //这是一个变量
  const user = {     //这里将变量作为对象的属性写在大括号中
    username: "狗蛋",
    age: 20,
    sex: 1,
    status: 200
  }
 

• js的数据类型

# undefined  null  boolean  String  number  object  Symbol
# 为了区分变量和属性使用类型symbol，属于该类型的属性是独一无二的
  let s = Symbol();    // 通过symbol函数生成变量s
  let mySymbol = Symbol();   // 生成一个变量作为属性
  // 第一种写法
  let a = {};
  a[mySymbol] = 'Hello!';
  // 第二种写法
  let a = {
    [mySymbol]: 'Hello!'
  };
 

• Set和Map数据结构

  const s = new Set();   # 创建一个Set数组s，存储的值不可重复，add()方法可向数组添加值，Set()函数可接收一个数组用于初始化
  const m = new Map();   # 创建一个Map数组m，set()方法添加键值对，get()方法读取某个键值对，delete()删除
 

• Promise对象

  const promise = new Promise(function(resolve, reject) {    //创建promise对象实例
    // ... some code
    if (/* 异步操作成功 */){
      resolve(value);     //该函数将实例的状态从'未完成'变成'成功'
    } else {
      reject(error);    //该函数将实例的状态从'未完成'变成'失败'
    }
  });
   
  promise.then(function(value) {    //then方法分别指定resolved状态和 rejected状态的回调函数
    // success
  }, function(error) {
    // failure
  });
 
# ES6的遍历器是一种接口，一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令 for...of 循环
 
# async 函数返回一个 Promise对象，可以使用 then方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句
 

• ES6中class

  class Student {
      //无参构造函数
      constructor() {
          
      }
      constructor(name, age) {   //有参构造器
          this.name = name
          this.age = age
      }
      sayName() {  //普通方法
          return this.name
      }
  }
  const student = new Student("狗蛋")   //创建实例
  console.log(student.sayName())
 
  // ES6 class的继承
  class Point {
  }
  class ColorPoint extends Point {
  }
 

• 自定义模块和引入
  详情查看：https://blog.csdn.net/qq_31967569/article/details/82461499

  # nodejs中
  # 方式一：
  module.exports = {   // 封装为一个对外的接口，可通过require方法引入
  	//模块的具体实现
  }
  const 模块名 = require('./要导入的模块路径')
  # 方式二：
  exports.模块名 =  function ( ){};  
  const 模块名 = require("./模块路径");
  # 区别：
  # exports 返回的是模块函数
  # module.exports 返回的是模块对象本身，返回的是一个类
  # exports的方法可以直接调用
  # module.exports需要new对象之后才可以调用
 
  # ES6中
  # 方式一：
  exprot {方法一，方法二}     //自定义模块
  Import {方法一，方法二} from "./模块所在路径"
  # 方式二：
  export { 方法名 as 别名 }   //定义模块时设置别名
  import { 别名 } from "./test.js";   // 引入时
  export { 方法名 }
  import { 方法名 as 别名 } from "./test1.js";   //也可以在引入时设置别名
	

• js中的变量
  函数中定义的局部变量在调用执行后被销毁
  而循环等中的变量是不会被销毁的，没有块作用域
  函数方法中定义的变量未用var申明，则为全局变量

• Java中的可变参数

  public static void test(String... args) {   //最后一个形参前加上三点 …，就表示该形参可以接受多个参数值，多个参数值被当成数组传入
        for(String arg : args) {
            System.out.println(arg);
        }
  }
 
# 只有函数的最后一个参数可作为可变参数，其前可有其他普通参数，所以函数只能有一个可变参数
# 可变参数会被转化为一个数组
 
# Java 中的迭代器iterator相当于一个容器，可用于遍历操作集合
 

• ES6对象增强
  

• 当key和value一致时，可忽略后面的value
  

• 模板字符串

  var str = "My age is " + (a + b) + " and I love " + c;      // 字符串拼接的方式
  const str = `My age is ${a+b} and I love ${c}`;       // 使用反撇号的方式拼接，直接用${}传值
# 模板字符串可多行输出，以及使用标签
# ${}中的大括号里可以放入任意的JavaScript表达式进行运算，以及引用对象属性，也可调用函数方法
 

详情参考