Vue 城市页面渲染

一、数组去重

1、使用ES6中的 Set 构造函数

• （1）new Set( )：类似于数组的对象，区别于它的成员都是唯一的，不能有重复值
• （2）只能用于基本数据类型的数组去重

        let arr = [1, 2, 3, 4, 5, 2, 3];
        //使用Set为数组去重
        //类似于数组的对象，区别于它的成员是都是唯一的，不能有重复的值
        //只能用于基本数据类型
        let set = new Set(arr);
        console.log(set);

        let newArr = [...set];
        // 或者： let newArr = Array.from( set );
        console.log(newArr);

2、数组中的对象去重

• （1）创建新的空数组
• （2）把原数组进行遍历，然后对空数组使用find方法，没有的元素就push进去

        let arr = [
            {name: '龙岗区',id: 001},
            {name: '福田区',id: 002},
            {name: '龙岗区',id: 003},
            {name: '龙华区',id: 004},
            {name: '罗湖区',id: 005},
        ]
        let newArr = [];

        arr.forEach(item => {
            // console.log(item);
            let res = newArr.find(item2 => {
                // console.log(item2);
                return item.name === item2.name;
            })
            if (!res) {
                newArr.push(item);
            }
        })
        console.log(newArr);

二、页面渲染

1、遇到复杂页面时，可以进行组件拆分，使思路更清晰，所以在写样时是分块写，方便于组件拆分

2、城市页面渲染思路

• （1）获取数据

• （2）渲染热门城市

• （3）渲染所有城市

  • （3.1）使用map方法提取pinyin属性的首字母
  • （3.2）使用Set进行数组去重
  • （3.3）使用sort进行数组排序
  • （3.4）把字母在模板上进行遍历
  • （3.5）将 调用字母对应城市方法所得到的城市 进行遍历（v-for遍历的数据来源也可以是通过调用方法所得到的的返回值）