最后简单学点这个。
# ECMAScript
let变量及特性：
// 声明变量
let a;
let b, c, d;
let f = 2, g = 'sdsdc', h = [];
// 1.变量不能重复声明
let a = 1;
let a = 2; //将会报错，因为变量不能重复声明
// 2.块级作用域
{
let a = 'test';
}
console.log(a); //将会报错，a只在{}内有效
// 3.不存在变量提升
console.log(a);
let a = 'test'; //将会报错，log的时候a还没有声明
// 4.不影响作用域链
{
let a = 'test';
function fn() {
console.log(a);
}
fn(); //是可以的
}const常量及特性：
// 声明const常量
const a = 1;
// 1.一定要赋初始值
const aNumber = 1 //否则会报错
// 2.常量的值不能修改
// 3.也是块级作用域
// 4.对于数组和对象元素的修改，不算做对常量的修改，不会报错
const Team = ['a', 'b', 'c'];
Team.push('d'); //因为没有修改常量地址，所以不会报错变量解构与赋值：
// ES6允许按照一定模式从数组和对象中提取值，或对变量进行赋值。这被称为解构赋值。
// 1.数组的解构
const F4 = ['a', 'b', 'c', 'd'];
let [wa, wb, wc, wd] = F4; //这时wa wb wc wd就分别等于"a" "b" "c" "d"
// 2.对象的解构
const zhao = {
name: 'a';
age: 0;
xiaopin: function () {
console.log("演小品");
}
};
let { name, age, xiaopin } = zhao;//同名赋值，name现在就是"a"
模板字符串：
// ES6引入新的声明字符串的方式，反引号
// 1.声明
let str = `string`;
// 2.内容可以直接出现换行符
let str = `
<ul>
<li>a</li>
<li>b</li>
</ul>`;
// 3.变量拼接
let stra = `a`;
let pinjie = `${stra}bcd`;对象的简化写法：
// ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样写更简洁
let name = `test`;
let fun = function () {
console.log(`testtest`);
};
const school = {
name,
fun,
newfun(){ // 创建了一个新方法，不用写成 newfun = function(){};
console.log(`testtesttest`);
}
};箭头函数及声明特点：
// ES6中允许使用箭头来定义函数
// 声明函数
let fun = function(a, b) {
};
// 使用箭头声明函数
let jFun = (a, b) => {
return a + b;
};
// 调用函数
let result = jFun(1, 2);
// 特性
// 1.this是静态的，始终指向函数声明时所在作用域下的this的值
getName.call(school); //this的作用域就在school里面了
// 2.不能作为构造实例化对象
let newA = new A(); //这个是无效的
// 3.不能使用arguments变量
let fn = () => {
console.log(arguments);
}
console.log(fn(1, 2, 3)); //无效的，因为箭头函数里面不能使用arguments
// 4.箭头函数简写
// 4.1当形参有且只有一个的时候,可以省略小括号
let addFn = n => {
return n++;
}
// 4.2当代码体只有一条语句的时候,可以省略大括号,且return必须省略
let powFn = n => n * n;练习：
// 创建数组
const arr = [0,1,2,3];函数参数的初始值：
// ES6 允许给函数赋初始值
// 1.形参初始值。具有初始值的参数，一半位置要靠后
function add(a, b, c = 10) {
return a + b + c;
}
// 2.与解构赋值结合
function connect({ host=`127.0.0.1`, username, password, port }) {
console.log(host); // 如果host属性没有传，则就用默认值127.0.0.1
console.log(username);
console.log(password);
console.log(port);
}
connect({
host: `localhost`,
username: `root`,
password: `root`,
port:`1080`
})REST参数：
// ES6 引入rest参数，用于获取函数的实参，用来代替arguments
// rest参数，必须放到所有参数最后
function date(a, b, ...args) {
console.log(a);
console.log(b);
console.log(args);
}
date(1, 2, 3, 4, 5, 6, 7);扩展运算符及其应用：
// 三个点...叫做扩展运算符，能将数组转换为逗号分隔的参数序列
const arr = [`a`, `b`, `c`];
function chaikai() {
console.log(arguments);
}
chaikai(...arr); // 和chaikai('a','b','c'); 一样
// 1.数组的合并
const arr1 = ['a', 'c', 'b'];
const arr2 = [9, 0];
// const arr12 = arr1.concat(arr2); 这是一种方法
const arr12 = [...arr1, ...arr2];
// 2.数组的克隆
const arr1 = ['a', 'b', 'c'];
const arr2 = [...arr1]
// 3.将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs]; //将会转换成真正的数组Symbol 数据类型：
Symbol是全新的原始数据类型，表独一无二的值。特点如下：
- Symbol值是唯一的，用来解决命名冲突的问题
- Symbol的值不能与其它数据进行计算
- Symbol定义的对象属性不能使用for…in…遍历循环。但可以使用Reflect.ownKeys来获取对象的所有键名
// 创建Symbol
let s = Symbol();
// 用Symbol给对象安全高效地添加方法
let game = {
// 假设里面有很多方法
}
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function () {
//添加独一无二的方法
}
game[methods.down] = function () {
}
// 还可以给game这样添加方法
let game = {
name: `lalala`;
[Symbol(`date`)]: function () {
console.log(`date someone`);
},
[Symbol(`hug`)]: function () {
console.log(`hug someone`);
}
}迭代器：
const arr = [`a`, `b`, `c`, `d`];
// 使用 for...of 遍历数组
for (let t of arr) {
console.log(t); // 用for...of 得到的是值
}
for (let index in arr) {
console.log(index); // 用for...in得到的是index
}
// 迭代器原理。创建一个指向数据结构初始位置的指针。第一次调用对象的next方法，指针自动指向数据结构的第一个成员。接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员。每调用next方法返回一个包含value和done属性的对象模块化：
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
// ES6 模块化语法
// 模块功能主要由两个命令构成：export 和 import
export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能
export:
//export 用法：js该怎么写怎么写
//分别暴露
export let a = `1a1a`;
export function putA() {
console.log(a);
}
//统一暴露
let a = `1a1a`;
function putA() {
console.log(a);
}
export { a, putA };
//默认暴露
export default {
a: '1a1a',
putA: function () {
console.log(a);
}
}import:
<script type="module">
// 1.通用的导入方式
// 引入m1.js模块内容
import * as m1 from "./js/m1.js";
// 2.解构赋值形式
import { a, putA } from "./js/m1.js"; //导入分别、统一暴露的模块
import { a as a2, putA as putA1 } from "./js/m2.js"; //发生重名的解决办法，加上别名
import { default as m3 } from "./js/m3.js"; //导入默认暴露的模块
// 3.简便形式，只针对默认暴露
import m3 from "./js/m3.js";
</script>
如果觉得这样不美观，可以把这些import代码写在一个js文件里，然后再引用这个文件，只需要一行代码
<script src="./js/main.js" type="module"></script> 注意要加type="module"模块化引入NPM包：
<script type="module">
import $ from 'jquery'; // const $ = require("jquery");
$('body').css('background','pink');
</script>动态import:
<script type="module">
// 动态import 要用到的时候才导入
btn.onclick = function(){
import('./hello.js').then(module => {
module.hello();
});
}
</script>Promise介绍与应用:
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
- Promise构造函数：Promise(excutor){}
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
// 实例化Promise对象，该对象有三个状态，初始化、成功、失败
const p = new Promise(function (resolve, reject) {
let data = '数据';
resolve(data); // 当调用完resolve后，这个promise函数将变为“成功”状态
reject(data); // 当调用完reject后，这个promise函数将变为“失败”状态。二选一
});
// 调用promise的then方法。成功的参数一般写value，失败的参数一般写reason。该Promise函数若为成功，则调用回调函数的第一个函数。若为失败，则调用第二个。
p.then(function (value) {
}, function (reason) {
})