ES6——基础
ES6基础
1. 概念
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准。
ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。
2. const、let、var
const
声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。
const name = 'lux'
name = 'joe' // 再次赋值此时会报错
如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。
const student = { name: 'cc' }
// 没毛病
student.name = 'yy'
// 如果这样子就会报错了
student = { name: 'yy' }
let
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在代码块内有效，只能申明一次，没有变量提升
var
全局有效，可以多次申明，有变量提升（当脚本开始运行的时候申明的变量就已经存在，但是并未赋值）。ES6都用let，不用var。
//变量提升示例
console.log(a); //ReferenceError: a is not defined
let a = "apple";
console.log(b); //undefined
var b = "banana";
3. 解构
基本用法：ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
//数组举例
基本
let [a, b, c] = [1, 2, 3];
// a = 1，b = 2，c = 3
可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1，b = 2，c = 3
可忽略
let [a, , b] = [1, 2, 3];
// a = 1，b = 3
不完全解构
let [a = 1, b] = [];
// a = 1, b = undefined
剩余运算符
let [a, ...b] = [1, 2, 3];
//a = 1，b = [2, 3]
在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。
let [a, b, c, d, e] = 'hello';
// a = 'h'，b = 'e'，c = 'l'，d = 'l'，e = 'o'
解构默认值
let [a = 2] = [undefined]; // a = 2
当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
let [a = 3, b = a] = []; // a = 3, b = 3
let [a = 3, b = a] = [1]; // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
集合遍历：ES6便利所有Array、Object、Map、Set
for(let item of items){}
while(!$result.value){$result=$Iterator.next()}
//有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法）
//【解构函数】
let set = new Set().add('a').add('b').add('c');
let [first, ...rest] = set;
// first='a'; rest=['b','c'];
//【扩展运算符】
var str = 'hello';
[...str] // ['h','e','l','l','o']
let s = new Set().add().add()//无序不可重复
let ws = new WeakSet().add()//只能放对象，String都不行
let m = new Map().set()//key类型不限制
let wm = new WeakMap().set()//key只能存放对象，String都不行
null是一个object，{null==""}//true
4. 函数
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
上面代码检查函数log的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
箭头函数 （…params）=>{code block}
普通函数function fun_name(…params){code block}
箭头函数最直观的三个特点:
-
不需要
function关键字来创建函数 -
省略
return关键字 -
继承当前上下文的
this关键字
//例如：
[1,2,3].map(x => x + 1)
//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:
var people = name => 'hello' + name
//参数name就没有括号
var people = (name, age) => {
const fullName = 'hello' + name
return fullName
}
//如果缺少()或者{}就会报错
js中函数有两种命名方式：
function fun_name(){};函数提升，解释器优先编译
let fun = function(){};等到执行到该代码才会编译
function fun_name(){}();自动忽略()
let fun = function(){}();可以直接调用
(function fun_name(){})()//function fun_name(){}用括号括起来可以看作是函数表达式，用()直接调用
常用函数
//repeat字符串复制指定次数
let a = "啤酒子"
console.log(a.repeat(3))
Promise
Promise的构造函数的参数是函数，该函数的参数是两个函数，这两个函数js自带的，Promise执行成功执行resolve方法，失败执行reject
/*执行顺序: AAA -> CCC -> BBB。
Promise新建后会立即执行，所以首先输出 AAA。
然后，then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行，所以BBB 最后输出。*/
let promise = new Promise(function(resolve, reject){
console.log("AAA");
resolve()
});
promise.then(() => console.log("BBB"));
console.log("CCC")
生成器函数
function* show(){
console.log('开始生成器函数')//调用next开启函数
yield;//到这里会停止，直到再次调用next方法
console.log('再次开启生成器函数')
}
let fun = show();
fun.next();
fun.next();
5. 模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`.
模板字符串调用函数
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
举例：
let serverUrl='http:localhost:8080'
let typeid='1'
let str='${serverUrl}/test.do?typeid=${typeid}'
//函数需要返回字符串或者简单数据类型
let fun = ()=>{return ""}
console.log(${fun()})
//数组拼接
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1, ...arr2]
6. 获取标签
document.querySelector
7. import & export
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
import {} from './xx.js'//如果是导入export default就不要花括号，因为只有一个export default
export let job = 'worker'//加在变量、函数前，相当于public，特殊的
8. document —整个dom树
1.获取标签
document.querySelectorAll(#id||.classname||'label_name')
没有则返回空的nodelist（DOM快照，对增删不敏感，对修改敏感）
document.querySelector(#id||.classname||'label_name')
返回符合条件的第一个，没有则返回null
2.document.getELementByTagName()
返回类型HTMLCollection
（对增删敏感，注意不是数组，可用数组下标索引，但不能用数组方法）
arguments：js中传形参，可传可不传，要想看到传过来的参数，直接console.log(arguments)
navigator：Navigator 对象包含的属性描述了正在使用的浏览器。
注意
1. let a = [1,2,3] 不可以被 a = 10覆盖掉
function show(x,y=[1,2,3]){} show(1,2)可以覆盖
2. 已有的字符串拼接${a + b}，不是${a}+${b}
3. find()方法(当前参数，参数索引，数组)
[1,2,3,4,5].find(function(x,y,z){
// console.log(x,y,z);
console.log(z[y])//1，2，3，4，5
})
4. console.error()控制台打印，后面的代码依然会执行