React中的JavaScript语法

brahmsjiang2025-02-05 17:47

最近在看《深入浅出react和redux》。其实react-redux采用的单相流flux是对传统mvc的一种改进，而Qt的qml遵循的是传统mvc，已有类似flux的Qt-qml实现，比如：GitHub - benlau/quickflux: A Flux implementation for QML。为了更好理解flux于是看了此书的前三张，而React和qml都能采用JS（ECMAScript 6）作为主力语言，在此列举一些个人不甚了解的JS语法以供备忘。

花括号与方括号

一句话总结：{ } 是一个对象，是一个数组

冒号的作用

1）声明直接量对象的成员和声明标签

2）switch语句分支

3）?:三元表达式的false

主要阐述第一点。

类似于C#的属性用法：

javascript 复制代码

<SCRIPT LANGUAGE="JavaScript">
getValue = {
   a : "value1",
   b : "value2"
};

调用，a和b是属于getValue对象的2个属性：

javascript 复制代码

alert(getValue.a);
//or
alert(getValue["b"]);
</SCRIPT>

对象的方法，用法和上面差不多：

javascript 复制代码

<SCRIPT LANGUAGE="JavaScript">
getValue = 
{
	getFirst:function()
	{
	   alert("value1");
	}
};

调用：

javascript 复制代码

getValue.getFirst();
</SCRIPT>

逗号以及扩展运算符

javascript 复制代码

return { ...state, [counterCaption]: state[counterCaption] + 1};

三个句点是扩展运算符，意为在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开。于是上述代码就是将state所有key-value展开；

而逗号运算符是首先计算左操作数，然后计算右操作数，最后返回右操作数的值。用逗号运算符可以在一条语句中执行多个运算；

因此上述代码等同于：

javascript 复制代码

const newState = Object.assign({}, state);
newState[counterCaption]++;
return newState;

默认导出

默认导出主要用于导出一个模块中最核心的内容。每个文件只能有一个默认导出。在使用默认导出时，导入者可以指定任何名称引用它：

javascript 复制代码

// example.js
export default function 方法名() { /* 代码 */ }

// main.js
import abc from './example.js';
abc();