JS内部的字典形式

JavaScript内部的数据组织形式用了太多的字典形式,对象可以用字典的形式来组织,甚至数组也是字典的形式,特意强调数组是因为数据不仅可以用数字作为下标,用字符串也可以作为下标
var stack = new Array();
stack["first"] = 3;
stack["second"] = "second";
stack["third"] = new Date();


甚至在JavaScript中,数字下标会最终被转化为字符串形式的下标
同是,看出了不同类型的数据时可以组织到同一个数组中的

对于以字符串为下标的数组,访问其中的元素和遍历一般JSON形式对象的方式一样:
for(var item in stack){//也就是访问Map键
alert(stack[item]);
}
//分割/

上面的有些理论是错误的,下面:

我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,
数组中的数据可以是任何的数据类型.数组本身仍旧是对象,但是由于数组的很多特性,通常情况下把数组和对象区别
开来分别对待(Throughout this book, objects and arrays are often treated as distinct datatypes.
This is a useful and reasonable simplification; you can treat objects and arrays as separate types
for most of your JavaScript programming.To fully understand the behavior of objects and arrays,
however, you have to know the truth: an array is nothing more than an object with a thin layer of extra
functionality. You can see this with the typeof operator: applied to an array value, it returns
the string "object". --section7.5).
创建数组可以用"[]"操作符,或者是用Array()构造函数来new一个.


通过上面的解释,我们已经知道,对象的属性值是通过属性的名字(字符串类型)来获取,而数组的元素是通过索
引(整数型 0~~2**32-1)来得到值.数组本身也是一个对象,所以对象属性的操作也完全适合于数组.

Js代码 
var array = new Array("no1","no2");
array["po"] = "props1";
alert(array.length); //2 说明字符串不是下标,而是数组对象的属性
//对于数组来说,array[0]同array["0"]效果是一样的(?不确定,测试时如此)
alert(array[0] + "_" + array["1"] + "_" + array.po);//no1_no2_props1



///记录一个Array的方法sort
sort不带参数,是默认按字母顺序排序
sort带上参数,就是按照参数提供的比较器来排序,这点和java的集合框架的排序又很大的相似性,java的Collections.sort() 也提供了两种显示的参数列表,带比较器的和不带比较器的,不带比较器就按照自然顺序来排序。
static <T extends Comparable<? super T>> 
void
sort(List<T> list)
根据元素的自然顺序 对指定列表按升序进行排序。
static <T> void
sort(List<T> list, Comparator<? super T> c)
根据指定比较器产生的顺序对指定列表进行排序。


至于js中怎么组织这个代码,见下面的实例:

function comparator(a,b){
return a-b;
}
var array = [10, 23, 44, 58, 106, 235];
array.sort(sorter);
print(array);
### 如何在 Vue 中使用 Pinia 实现字典功能 #### 字典功能概述 字典通常用于存储键值对形式的数据,这些数据可以被多个组件共享并动态更新。通过 Pinia,可以在整个应用中实现全局状态管理,从而轻松维护和访问字典数据。 --- #### 创建字典 Store 以下是基于 Pinia 的最佳实践来实现字典功能: 1. **初始化 Store** 在 `store` 文件夹下创建一个新的文件,例如 `dictionary.js` 或 `dictionary.ts`,用来定义字典的逻辑。 ```javascript // store/dictionary.js import { defineStore } from 'pinia'; export const useDictionaryStore = defineStore('dictionary', { state: () => ({ dictionary: {}, // 初始化为空对象 }), getters: { getDictItem(state) { return (key) => state.dictionary[key]; // 提供按 key 获取 value 的方法 }, }, actions: { setDict(key, value) { this.dictionary[key] = value; // 设置单个键值对 }, batchSetDict(dictObject) { Object.assign(this.dictionary, dictObject); // 批量设置字典项 }, removeDictKey(key) { delete this.dictionary[key]; // 删除指定键 }, clearDict() { this.dictionary = {}; // 清空字典 }, }, }); ``` 上述代码实现了以下功能: - `state`: 维护一个名为 `dictionary` 的对象作为字典容器[^3]。 - `getters`: 提供便捷的方法获取特定键对应的值。 - `actions`: 提供增删改查的操作接口。 --- 2. **在组件中使用 Dictionary Store** 在需要使用的组件中引入该 Store 并调用其方法。 ```javascript // MyComponent.vue <template> <div> <p>Value of Key A: {{ dict.getDictItem('A') }}</p> <button @click="addEntry">Add Entry</button> <button @click="removeEntry">Remove Entry</button> </div> </template> <script> import { useDictionaryStore } from '@/store/dictionary'; import { ref } from 'vue'; export default { setup() { const dict = useDictionaryStore(); // 使用字典 Store function addEntry() { dict.setDict('B', 'New Value'); // 添加新条目 } function removeEntry() { dict.removeDictKey('A'); // 移除某个条目 } return { dict, addEntry, removeEntry }; }, }; </script> ``` 此示例展示了如何在模板中读取字典中的值以及通过按钮触发修改操作。 --- 3. **批量加载初始数据** 如果需要在应用启动时预加载一些默认字典数据,可以通过插件或生命周期钩子完成。 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from 'pinia'; import { useDictionaryStore } from './store/dictionary'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); // 加载初始字典数据 const dictStore = useDictionaryStore(); dictStore.batchSetDict({ color: ['red', 'green', 'blue'], size: ['small', 'medium', 'large'], }); app.mount('#app'); ``` 这样,在应用运行之初即可填充好基础字典数据[^2]。 --- 4. **TypeScript 支持** 为了充分利用 TypeScript 的强类型特性,可为字典结构定义明确的类型。 ```typescript // store/dictionary.ts interface DictState { [key: string]: any; } export const useDictionaryStore = defineStore('dictionary', { state: (): DictState => ({ dictionary: {} }), // ...其余部分保持不变 }); ``` 这有助于减少潜在错误并提升开发体验。 --- #### 性能优化建议 - 如果字典较大且不常变动,考虑将其缓存到本地存储(如 localStorage)以减少重复请求。 - 对于异步加载场景,可在 `actions` 方法内部加入 Promise 处理机制,确保数据加载完成后才更新状态。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值