react学习之es6小结

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2474041/blog/1818313

文章标签：

#javascript #前端 #python #ViewUI

本文档介绍了React中常用的ES6语法特性，包括let和const变量声明、export和import模块导入导出、class和extends类及继承、箭头函数、解构赋值和扩展运算符等，旨在帮助开发者快速掌握并应用于React项目。

2019独角兽企业重金招聘Python工程师标准>>>

由于公司前端技术转型成react，被迫更新下前端的技能包。这里并不对es6做很细的讲解，只对react中常用的一些语法做概述，前提是你对es5已经掌握。

需要完整的学习可以看 http://es6.ruanyifeng.com/#README

1.let和const

1.1let命令，用来申明变量，用法与var类似。不同之处在于let变量只在let所在的代码块起效果。

实验：

{
    let a = 10;
    var b = 1;
}
a
b

结果

可以看到这里的a在外部并没有被暴露出来。相比var，let命令解决了很多问题。如下：

1.1解决了var变量提示带来的困扰

实验：

{
    console.info(a1);
    var a1 = 1;

    console.info(a2);
    let a2 = 2;
}

结果：

1.2解决变量被污染

实验：

{
    var a3 = 1;
    function test() {
        let a3 = 2;
    }
    test();
    console.info(a3);
}

结果：

2.1const命令申明一个只读常量，一旦申明后，常量的值就不能发生改变。类似我们java语言中的final

实验：

{
    const PI = 3.1415926
    PI;
    PI = 3;
}

结果

const声明的变量不得改变值，这意味着,const一旦声明变量，就必须立即初始化，不能留到以后赋值。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针。const只能保证指针是不变的，但是实际的数据结构任然能够改变。

2.export和import

export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

示例：export.js

var a = "test"
function b() {
    console.info('test');
}

export {a, b};

import.js

import {a, b} from './export';

function test() {
    console.info(a);
}

需要注意的是import命令输入的变量都是只读的，因为它的本质是输入接口。

3.class和extend

3.1class

es5创建对象

//es5写法
function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function () {
    return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

es6写法

//定义类，es6，实际可以看作是语法糖
class Point {
    //构造函数
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

3.2extends

定义ColorPoint类继承Point

/**
 * es6继承
 */
class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
    }

    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

需要注意的是：子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

4.箭头函数

通常我们函数的写法

function test(x) {
    return x * x;
}
test(2);

箭头函数写法

var f = x => x * x;
f(2);

5.变量解构赋值和扩展运算符

5.1es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.

//从数组中解构
{
    let [a, b, c] = [1, 2, 3];
    a;//1
    b;//2
    c;//3
}
//从对象中解构
{
    let {x, b, c} = {x: 1, b: 2, c: 3};
    x;//1
    b;//2
    c;//3
}

5.2扩展运算符（spread）是三个点...,将一个数组转为用逗号分隔的参数序列。

//数据扩展
{
    var array = [1, 2, 3];
    var newArray =
        [
            ...array,
            4
        ]
    newArray;//[1,2,3,4]
}

//对象扩展
{
    let obj = {a: 1, b: 2};
    let newObj = {
        ...obj,
        c: 3
    }
    newObj;//{a: 1, b: 2, c: 3}
}

以上只是一些react常用的es6语法小记，方便各位能更快的上手react，实际es6的特性远不止这些。

转载于:https://my.oschina.net/u/2474041/blog/1818313