ES6笔记

ES

ECMAScript

声明变量

let

let a,b,c;
let a=100, g='fdsa', h=[];

• 变量不能重复声明
• 块级作用域

{
    let a = 100;    // 只在代码块有效
}

• 不存在变量提升

console.log(a);
let a = 100;    // 报错

不能在声明前使用

• 不影响作用域链

let a = 100;
function fn() {
    console.log(a);
}
fn();

本作用域没有就往上找

const

• 不能改变，一定要初始值
• 一般常量名为大写
• 适用块级作用域
• 数组和对象可以修改

数组解构

const f4 = ['a', 'b']
let [a, b] = f4

对象解构

const zhao = {
    name: 'fdsa',
    age: 18,
    fun: function(){

    }
}
let {name, age, fun} = zhao;
fun();
let {fun} = zhao;
fun();

模板字符串

let age = 18;
let str = `fdsafdsa${age}`;

简化对象写法

let name = 'zdp';
let change = function(){

}
const school = {
    name,
    change,
    improve(){

    }
}

箭头函数

let fn = (a, b) => {
    return a+b;
}
let c = fn(1, 2);

特性：

• this静态，始终指向函数声明所在作用域下的this的值

function getName(){
    console.log(this.name)  //window的名字
}
let getName2 = () => {
    console.log(this.name)  //window的名字
}
window.name = 'zdp';
getName();
getName2();
const school = {
    name: 'yy'
}
getName.call(school);   // 改为yy
getName2.call(school);  // 仍为window

• 不能作为构造函数实例化
• 不能使用arguments
• 箭头函数简写
  • 省略小括号，形参只有一个

let add = n => {
    return n + n;
}

• 省略花括号，代码只有一个语句

let pow = n => n*n;

形参默认值

• 具有默认值的参数，位置靠后

function add(a, b, c=10) {
    return a+b+c;
}

• 与解构赋值结合

function a({name='yy', age}) {

}
a({
    name: 'zdp',
    age: 18
})

rest

必须放到参数最后

function date(...args) {
    console.log(args);  // args是数组
}
date('a', 'b', 'c');

扩展运算符

将数组转换为逗号分隔的参数序列

const a = [1, 2, 3]
function fdsa() {
    console.log(arguments);
}
fdsa(...a); // fdsa(1, 2, 3)

1. 数组合并

const a = [1, 2, 3]
const b = [4, 5]
const fdsa = [...a, ...b];

2. 数组克隆（浅拷贝）

const a = [1, 2];
const b = [...a];

3. 伪数组转换为真正数组

const divs = document.querySelectorAll('div');
const divarr = [...divs];

Symbol

基本数据类型，表示独一无二的值

• 唯一值，解决命名冲突问题
• 不能与其他数据运算
• 不能使用for…in循环遍历，可以使用Reflect.ownKeys获取对象所有键名来遍历

创建

let s = Symbol();
let s2 = Symbol('zdp');
let s3 = Symbol('zdp');
console.log(s2 === s3); //false
let s4 = Symbol.for('zdp');
let s5 = Symbol.for('zdp');
console.log(s4 === s5); //true

使用

给对象添加方法，防止命名相同直接添加出现问题

let game = {

}
let methods = {
    up: Symbol(),
    down: Symbol()
}
game[methods.up] = function () {

}
game[methods.down] = function () {

}

let game = {
    name: 'zdp',
    [Symbol('say')]: function(){
        console.log('说话');
    }
}

内置值

Symbol属性，整体作为对象属性扩展对象功能

• hasInstance

class Person {
    static [Symbol.hasInstance](param){
        console.,log(param)
        console.log('检测类型');
        return true;    //可以自己控制类型检测
    }
}
let o = {}
console.log(o instanceof Person)

• isConcatSpreadable
  数组拼接时是否可以展开

const a = [12, 2]
const b = [4, 5]
b[Symbol.isConcatSpreadable] = false;
console.log(a.concat(b));   //[12, 2, Array(2)]

迭代器

接口(对象的属性，Symbol.iterator，该属性为一个函数)，提供统一访问机制
原生具备该接口：Array, Arguments, Set, Map, String, TypedArray, NodeList

const a = [1, 2]
for (let v of a){
    console.log(v)  // of给的value：1, 2
}
for (let v in a){
    console.log(v)  // in给的key：0, 1
}

工作原理：

const a = [1, 2]
let iterator = a[Symbol.iterator]();
iterator.next();    //{value:1, done:false}
iterator.next();    //{value:2, done:false}
iterator.next();    //{value:undefined, done:true}

1. 创建一个指针对象
2. 第一次调用next()指向第一个成员
3. 每次调用指向下一个，直到最后一个
4. 每次调用返回一个包含value和done属性的对象

自定义遍历数组

const a = {
    name: 'zdp',
    stus:[
        1,
        2,
        3
    ],
    [Symbol.iterator](){
        let index = 0;
        let _this = this;
        return {
            next: function(){
                if (index < _this.stus.length) {
                    const data = {value: _this.stus[index], done: false};
                    index++;
                    return result;
                } else {
                    const data = {value: undefined, done: true};
                    return result;
                }
            }
        };
    }
}
for (let v of a) {
    console.log(v)
}

生成器

异步解决方案，一个函数

function * gen() {
    yield '123';
    yield '456';
    yield '789';
}
let iterator = gen();   //返回迭代器对象
console.log(iterator);
iterator.next();    //123
iterator.next();    //456
iterator.next();    //789
<!-- for (let v of gen()){
    console.log(v);
} -->

参数传递

function * gen(arg) {
    let one = yield 111;
    yield 222;
    yield 333;
}
let iterator = gen('AAA');
console.log(iterator.next());
// next方法传入实参，第二次next传入实参由第一个yield返回
console.log(iterator.next('bbb'));

实例

let iterator = gen();
function getUsers(){
    setTimeout(()=>{
        let data= '用户数据'
        iterator.next(data)
    }, 1000);
}
function getOrders(){
    setTimeout(()=>{
        let data= '订单数据'
        iterator.next(data)
    }, 1000);
}
function getGoods(){
    setTimeout(()=>{
        let data= '商品数据'
        iterator.next(data)
    }, 1000);
}
function * gen(){
    let usersData = yield getUsers();
    console.log(usersData)
    let ordersData = yield getOrders();
    console.log(ordersData)
    let goodsData = yield getGoods();
    console.log(goodsData)
}
iterator.next();

Set

let s = new Set();
let s1 = new Set([1, 2, 3, 1]);
//s.size
s.add(5)
s.delete(3)
s.has(1)
s.clear();
for (let v of s) {

}
// 去重
let a = [1, 1, 2, 3]
let result = [...new Set(a)];
// 交集
let a2 = [2, 3, 4]
let result = [...new Set(a2)].filter(item => new Set(a).has(item));
// 并集
let result2 = [...new Set([...a, ...a2])];
// 差集 a-a2
let result = [...new Set(a2)].filter(item => !(new Set(a).has(item)));

map

let a = new Map()
m.set('name', 'zdp')
m.set('change', function(){

})
let key = {
    school: 'a'
};
m.set(key, ['f', 'f', 'd']);
//m.size
m.delete('name');
m.get('change');
m.clear();
for (let v of m){   // v为数组，第一个为key，第二个为value
}

class类

class MyPhone{
    constructor(brand, price){  //构造方法
        this.brand = brand;
        this.price = price;
    }
    call(){

    }
}
let onePlus = new MyPhone('1+', 5999);
onePlus.call();

静态成员

class MyPhone {
    static name = '手机';
    static fun(){

    }
}
let nokia = new MyPhone();
console.log(nokia.name) // undefined
console.log(MyPhone.name) // '手机'

class继承

class Phone {
    constructor(brand){

    }
    call(){

    }
}
class SmartPhone extends Phone {
    constructor(brand, price){
        super(brand)
    }
    photo(){

    }
    call(){     //重写

    }
}

get/set

class Phone {
    get price(){
        console.log();
        return 1;
    }
    set price(newVal){
        
    }
}
let s = new Phone();
console.log(s.price);   // 1
s.price = 'free';

数值扩展

1. Number.EPSILON
   小于该数表示两个数相同

console.log(0.1 + 0.2 === 0.3)  //false
function equal(a, b) {
    if (Math.abs(a-b)<Number.EPSILON) {
        return true;
    } else {
        return false;
    }
}

2. 二级制和八进制

let b = 0b1010;     // 二进制
let o = 0o777;      // 八进制
let d = 100;        // 十进制
let x = 0xff;       // 十六进制

3. Number.isFinite()
   是否为有限数
4. Number.isNaN()
   检测是否为NaN
5. Number.parseInt() Number.parseFloat()
   字符串转换为数字
6. Number.isInteger()
   是否为整数
7. Math.trunc()
   去掉小数
8. Math.sign() // 1 0 -1
   判断正负

对象方法扩展

1. Object.is()
   判断是否完全相等
   NaN与NaN也会是true
   但NaN===NaN为false
2. Object.assign()

const a = {
    name: 'zdp';
}
const b = {
    name: 'yy';
}
Object.assign(a, b);    //b会把a覆盖

3. Object.setPrototypeof Object.getPrototypeof
   设置原型对象

const a = {
    name: 'f'
}
const b = {
    f: [1, 2, 3]
}
Object.setPrototypeof(a, b)
Object.getPrototypeof(a)

模块化

• 防止命名冲突
• 代码复用
• 高维护性

语法

// m1.js
export let a = 123
export function teach(){

}
// html
<script type="module">
    import * as m1 from "./js/m1.js"
    console.log(m1)
<script>

暴露

// 统一暴露
let a = 123
function teach(){

}
export {a, teach};
// 默认暴露
export default{
    school: '';
    change: function(){

    }
}
// html
import ...
m3.default.change();

引入

// 通用方式
import * as m1 from "./js/m1.js"
// 解构赋值形式
import {a, teach} from "./js/m1.js"
import {a as ab, teach} from "./js/m1.js"
// 默认暴露的引入
import {default as m3} from "./js/m3.js"
// 简便形式，只能用于默认暴露
import m3 from "./js/m3.js"

浏览器单独js文件的引入

// app.js
import * as m1 from "./js/m1.js"


// html
<script src="./js/app.js" type="module">
<script>

模块化结合npm

1. 安装
2. import

import $ from 'jquery';
$('body').css('background','pink');