javascript const 真的是常量吗?在减少?
are javascript const really constant? in redux?
我的商店里有这个减速器,其中初始状态 initialProcessingState
是从另一个源文件导入的。
import {
ACTN_IS_PROCESSING
} from '../config/action-types.js';
import { initialProcessingState } from "./redProcessing-initial.js";
export default function (state = initialProcessingState, action) {
switch (action.type) {
case ACTN_IS_PROCESSING:
return {
...state,
...action.isProcessing
}
default:
return state;
}
}
源文件中的定义如下:
export const initialProcessingState = {
keys: [],
mostRecentStatus: false,
neverStale: true
}
现在我的商店正在使用订阅将状态持久化到本地存储中
store.subscribe(() => {
updateLocalStorage(store);
})
像这样...
import { initialProcessingState } from "../reducers/redProcessing-initial.js";
var updateLocalStorage = debounce((store) => {
const state = store.getState();
var _state = {
...state,
isProcessing: { ...initialProcessingState }
};
localStorage.setItem('reduxState', JSON.stringify(_state))
}, 100);
我的目的是用 初始状态 覆盖 isProcessing
,在 initialProcessingState
中定义为 const
。
可惜不行。因为每次updateLocalStorage
调用的时候initialProcessingState
的值不是初始值,而是当前更新的值通过后续的减速器调用状态。
怎么可能?这是 const
.
我的临时修复是涉及JSON.parse(JSON.stringify(initialProcessingState))
:
const _initialProcessingState = JSON.parse(JSON.stringify(initialProcessingState));
var updateLocalStorage = debounce((store) => {
const state = store.getState();
//this is not the best way
console.log("updateLocalStorage", "initialProcessingState", initialProcessingState, _initialProcessingState);
var _state = {
...state,
isProcessing: { ..._initialProcessingState }
};
localStorage.setItem('reduxState', JSON.stringify(_state))
}, 100);
以下内容不足以使其正常工作:
const _initialProcessingState = initialProcessingState;
有人可以帮忙吗?
initialProcessingState
的值是对对象的引用。该值无法更改。
它引用的对象可以突变。
The const declaration creates a read-only reference to a value. It
does not mean the value it holds is immutable, just that the variable
identifier cannot be reassigned. For instance, in the case where the
content is an object, this means the object's contents (e.g., its
properties) can be altered.
来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
编辑
正如@Apolo 在他的评论中指出的那样,提及 Object.freeze()
可能很重要。
对象
The Object.freeze() method freezes an object. A frozen object can no
longer be changed; freezing an object prevents new properties from
being added to it, existing properties from being removed, prevents
changing the enumerability, configurability, or writability of
existing properties, and prevents the values of existing properties
from being changed. In addition, freezing an object also prevents its
prototype from being changed.
使用 Object.freeze()
然而,同样重要的是要注意它不会扩展到冻结的 object 持有的值:
Note that values [of Objects] that are objects can still be modified, unless they
are also frozen.
数组
As an object, an array can be frozen; after doing so, its elements
cannot be altered and no elements can be added to or removed from the
array.
EDIT 部分中的来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
const
表示不能重新分配引用。这就是为什么在分配字符串或数字时它们保持不可变,但在分配对象和数组时,其内容可以通过它们的引用进行修改,使它们不可变。
来自MDN:
The const declaration creates a read-only reference to a value. It
does not mean the value it holds is immutable, just that the variable
identifier cannot be reassigned. For instance, in the case where the
content is an object, this means the object's contents (e.g., its
properties) can be altered.
const foo = { bar : 'baz' };
foo.bar = 'foo'; // works, because it doesn't change what foo is.
foo = null; // will fail, since it tries to change what foo is
您可以查看 Object.freeze,但这只会冻结第一层:
const foo = Object.freeze({
bar : 'baz',
baz : { foo : 'bar'}
});
foo.bar = 'foo'; // will not change since foo is frozen
foo.baz.foo = 'foo'; // will change, since foo.baz is not frozen
console.dir(foo)
我的商店里有这个减速器,其中初始状态 initialProcessingState
是从另一个源文件导入的。
import {
ACTN_IS_PROCESSING
} from '../config/action-types.js';
import { initialProcessingState } from "./redProcessing-initial.js";
export default function (state = initialProcessingState, action) {
switch (action.type) {
case ACTN_IS_PROCESSING:
return {
...state,
...action.isProcessing
}
default:
return state;
}
}
源文件中的定义如下:
export const initialProcessingState = {
keys: [],
mostRecentStatus: false,
neverStale: true
}
现在我的商店正在使用订阅将状态持久化到本地存储中
store.subscribe(() => {
updateLocalStorage(store);
})
像这样...
import { initialProcessingState } from "../reducers/redProcessing-initial.js";
var updateLocalStorage = debounce((store) => {
const state = store.getState();
var _state = {
...state,
isProcessing: { ...initialProcessingState }
};
localStorage.setItem('reduxState', JSON.stringify(_state))
}, 100);
我的目的是用 初始状态 覆盖 isProcessing
,在 initialProcessingState
中定义为 const
。
可惜不行。因为每次updateLocalStorage
调用的时候initialProcessingState
的值不是初始值,而是当前更新的值通过后续的减速器调用状态。
怎么可能?这是 const
.
我的临时修复是涉及JSON.parse(JSON.stringify(initialProcessingState))
:
const _initialProcessingState = JSON.parse(JSON.stringify(initialProcessingState));
var updateLocalStorage = debounce((store) => {
const state = store.getState();
//this is not the best way
console.log("updateLocalStorage", "initialProcessingState", initialProcessingState, _initialProcessingState);
var _state = {
...state,
isProcessing: { ..._initialProcessingState }
};
localStorage.setItem('reduxState', JSON.stringify(_state))
}, 100);
以下内容不足以使其正常工作:
const _initialProcessingState = initialProcessingState;
有人可以帮忙吗?
initialProcessingState
的值是对对象的引用。该值无法更改。
它引用的对象可以突变。
The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.
来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
编辑
正如@Apolo 在他的评论中指出的那样,提及 Object.freeze()
可能很重要。
对象
The Object.freeze() method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed.
使用 Object.freeze()
然而,同样重要的是要注意它不会扩展到冻结的 object 持有的值:
Note that values [of Objects] that are objects can still be modified, unless they are also frozen.
数组
As an object, an array can be frozen; after doing so, its elements cannot be altered and no elements can be added to or removed from the array.
EDIT 部分中的来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
const
表示不能重新分配引用。这就是为什么在分配字符串或数字时它们保持不可变,但在分配对象和数组时,其内容可以通过它们的引用进行修改,使它们不可变。
来自MDN:
The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.
const foo = { bar : 'baz' };
foo.bar = 'foo'; // works, because it doesn't change what foo is.
foo = null; // will fail, since it tries to change what foo is
您可以查看 Object.freeze,但这只会冻结第一层:
const foo = Object.freeze({
bar : 'baz',
baz : { foo : 'bar'}
});
foo.bar = 'foo'; // will not change since foo is frozen
foo.baz.foo = 'foo'; // will change, since foo.baz is not frozen
console.dir(foo)