2023-01-22 ES6基础(大年初一)

m0_64083329

已于 2023-04-18 20:28:32 修改

阅读量149

点赞数

文章标签： es6 前端 ecmascript Powered by 金山文档

于 2023-01-22 13:30:08 首次发布

本文链接：https://blog.csdn.net/m0_64083329/article/details/128748848

版权

太卷了，大年初一还上CSDN。这阵子我一直在琢磨重写公司系统，目前初步采用方案是react antd，因此少不了温故一下JS的ES6内容。不然连代码都看不懂了。

一.箭头函数

箭头函数是一种更简单的函数声明方式，可以看作是一种语法糖，箭头函数永远是匿名的。

箭头函数没有自己的this,它的this是派生而来，箭头函数调用时不会生成自身作用域下的this和 arguments值，其持有外包包含它的函数的this值，并且在调用的时候就定下来不可动态改变。

普通函数的this和定义位置无关,谁调用这个函数this就指向谁。箭头函数的this和调用者无关，定义位置所在的this(函数作用域,包裹它最近的函数)是谁，箭头函数就指向谁，注意的是类其实就是函数，类中的匿名函数this指向就是该类。

https://blog.csdn.net/weixin_43845090/article/details/116120441

因此箭头函数不应该出现在

1.对象里定义箭头函数。不该写{ sum:()=>{ return this.name }}，而是 { sum(){ return this.name }}

2.定义在原型方法上不该写Person.prototype.sayName = ()=>{ return this.name}，而是 Person.prototype.sayName = function(){ return this.name}

3.定义事件回调函数

4.定义构造函数

二.let const 关键字

在ES6之前,JavaScript变量只存在函数级别作用域,没有块级别作用域,ES6的let const 弥补了此缺陷

默认使用潜规则

尽量用let和const 代替var

声明方法尽量使用const以防后期无意覆盖,const定义的变量使用大写形式

三.函数默认参数

1.带默认值的参数。函数的参数可以传入默认值，function getNum(num1,num2=5){}

2.参数默认值表达式。不光可以是一个普通的默认值，还可以是一个函数表达式来获取值

function function getNum(num1,num2=getValue()){}。每一次调用getNum，将通过getValue动态计算num2的默认值。

3.后面参数默认值。前面参数作为后面参数的默认值。function getNum(num1,num2=num1+1){}

4.剩余参数rest。三个点和参数名构成。函数只能有一个剩余参数并且放在最后，不能在对象字面量setter属性中使用。

http://events.jianshu.io/p/961ee83da76d

四.展开操作符 - ES6

1.用于可迭代的对象, 数组 , Set , Map ,Generator函数,String等,可以将可迭代对象转换为用逗号分隔的参数序列

五.对象的展开操作符 - ES7

1.let obj1 = { ...obj2, a:1} 它可以让你已更简洁的形式将一个对象可枚举属性复制到另一个对象上。注意的是不会深拷贝。

2.对象的展开和解构都不是通过迭代器做到的

六.模板字符串

主要用于字符串拼接还支持可以回车。`my name is ${name}`

七.解构赋值

写法看上取是对象赋值(=)给对象，数组赋值(=)给数组

1.解构数组(可迭代的?) let [a,b,c,,e] = [1,2,3,4,5]

2.解构对象 let {a,b:b1=3,c=2} = {a:'a',b:'22'}

解构用于函数参数的时候{} 别看不懂哦

const father= {
    name: 'father',
    age: 666,
    son: {
        child: {
            name: 'child',
            age: 3,
        }
    }
};
let { son: { child } } = father;
console.log(child.name); // "child"
console.log(child.age); // 3
/***我们在解构模式中使用了花括号，其含义为在找到father对象中的son属性后，
应当深入一层继续查找child属性。在上面的解构示例中，所有冒号前的标识符都代表在对象中的检索位置，
其右侧为被赋值的变量名；
如果冒号后是花括号，则意味着要赋予的最终值嵌套在对象内部更深的层级中 **/

八.类

只是一种语法糖，class并没带来新的结构只是原来原型链方式的一种语法糖。

class Animal {
    // 构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    shout() {
        return `My name is ${this.name}, age is ${this.age}`;
    }
    // 静态方法
    static foo() {
        return 'this is static method';
    }
}

const cow = new Animal('uzi', 2);
cow.shout();
// "My name is uzi, age is 2"
Animal.foo();
// "this is static method"

class Dog extends Animal {
    constructor(name, age = 2, color = 'black') {
        // 在构造函数中直接调用 super 方法
        super(name, age);
        this.color = color;
    }
    shout() {
        // 非构造函数中不能直接使用 super 方法
        // 但是可以采用 super. + 方法名调用父类方法
        return super.shout() + `, color is ${this.color}`;
    }
}

const uzisDog = new Dog('uzi');
uzisDog.shout();
// "My name is uzi, age is 2, color is black"

九. 模块。在ES6没出来之前，模块加载方案主要使用CommonJS和AMD两种，前者用于服务器，后者用于浏览器。

// hello.js
export const PI = 3.14;
export function hello() {
    console.log('Hello ES6');
}
export let person = {
    name: 'uzi'
};

// main.js
// 使用对象解构赋值加载这3个变量
import {
    PI,
    hello,
    person
} from './hello';

// 也可以将这个模块全部导出
import * as util from './hello';
console.log(util.PI);
// 3.14

十.Generator函数

https://www.cnblogs.com/rogerwu/p/10764046.html