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 {
}
# 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表达式进行运算，以及引用对象属性，也可调用函数方法
