这段时间做了一个研究网站，其中UI图上有个按照烟的地区以及首字母给它排序。但是后端直接返回了一整个数组。所以需要自己处理数据格式。

按照字段条件分出地区品牌。

我这里面后端的判断条件是 brandType = 1为大陆品牌，2为港澳台品牌，3为国外品牌，4为历史品牌。

然后会把数据整理成这样：

之后只需要将这四个数组里面的数据的首字母拿出来比较，然后按照首字母给它们分类即可！

获取字符串首字母

字典文件： 提取码:u6v1

使用方式：

当我们拿到字符串的首字母之后，只需要给它循环遍历一下，比较首字母即可。

遍历数组，根据首字母分类

1,引入字典文件

2，获取后端数据。

ps：因为想吃ES6语法糖，所以用的es6的class类写的，不过用什么写都一样，思路差不多：

此处我新建了一个FirstLetter 类，然后接收需要处理的数组。

new一个构造函数，并传入需要处理的数据（此处Initials 即为 class FirstLetter）

3，使用for in 循环，拿到对象的属性名，将其给一个空对象

4，在每个空对象里创建需要的属性名，以备接下来的根据条件处理数据（此处我的是5个字母为一组）

5，然后我们调用那个字典对象拿到首字母比对即可：

6，根据首字母的不同给它分配到ADCDE,FGHIJ等不同的数组了（ps: 因为我有四个对象（大陆平品牌，国外品牌之类的，然后每个品牌里都有ADCDE这些数组，所以我要用循环把这是个大的数组循环出来））：

根据循环的数据，取首字母比对即可：

然后我们就可以得到处理好的数据，拿去页面渲染即可：

将数组在页面中渲染

1，接收处理之后的数据：

2，在页面中首先最外层对象（品牌所在地区）渲染对象，此处我需要的是它的key值用于展示所在地区（例如我第一个是大陆品牌，则key是大陆品牌）

3，然后循环上一次key所对应的value:

它的key是ABCDE之类的英文字母，同样需要展示到页面中去：

3，最后一步；我们知道，之前我们处理好的数据格式中ABCDE等它们是一个个数组，里面的数据就是我们所需要的数据。

数组里面的数据就是我们需要展示的数据。

ps：v-for不仅可以循环数组，还可以用来循环对象，当它循环对象时，第二个参数为key值。

补充：其实用正则要舒服很多，以及可以把init方法拆分给多份便于阅读：

调用根据字符串首字母判断应所处位置方法

这样写的话后期阅读会舒服很多，自己看不懂自己写的代码就很痛苦。。。

源码：

import dict from './pinyin_dict_firstletter' // 引入字典文件/** * 获取汉字首字母 * createTime: 2019-3-27 */class FirstLetter { constructor (data) { this.data = data // 接收后端数据 this.obj = {}		this.ABCDE = /[ABCDE]/		this.FGHIJ = /[FGHIJ]/		this.KLMNO = /[KLMNO]/		this.PQRST = /[PQRST]/ } // 获取汉字字符串首字母 getFirstLetter (str) { return dict.all.charAt(str.charCodeAt(0) - 19968) }	// 数据push进数组	dataPush(letter, item, prop) {		 this.obj[prop][letter].push({		 name: item.brandName,		 id: item.id		})	} // 根据字符串首字母判断应所处位置 firstLetterCondition (item, prop) { if (this.ABCDE.test(this.getFirstLetter(item.brandName))) { this.dataPush('ABCDE', item, prop) } else if ( this.FGHIJ.test(this.getFirstLetter(item.brandName))) { this.dataPush('FGHIJ', item, prop) } else if (this.KLMNO.test(this.getFirstLetter(item.brandName))) { this.dataPush('KLMNO', item, prop) } else if (this.PQRST.test(this.getFirstLetter(item.brandName))) { this.dataPush('PQRST', item, prop) } else { this.dataPush('UVWXYZ', item, prop) } } // 初始化 init () { for (let prop in this.data) { this.obj[prop] = {} this.obj[prop].ABCDE = [] this.obj[prop].FGHIJ = [] this.obj[prop].KLMNO = [] this.obj[prop].PQRST = [] this.obj[prop].UVWXYZ = [] this.data[prop].forEach(item => { this.firstLetterCondition(item, prop) }) } }}export default FirstLetter