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}

​ 箭头函数最直观的三个特点:

1. 不需要 function 关键字来创建函数
2. 省略 return 关键字
3. 继承当前上下文的 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()控制台打印，后面的代码依然会执行