JavaScript知识

基础知识

Array

方法

方法参考

• 操作

arr.push()     // 在数组末尾添加元素
arr.unshift()  // 在数组开始添加元素
arr.pop()      // 删除数组最后一项元素
arr.shift()    // 删除数组第一项元素

arr.splice(索引, 删除个数, 替换的元素)   // 可以增加、替换、删除  返回被删除元素组成的新数组

• 遍历

• 检测

arr.indexOf(指定元素)  // 查询指定元素索引
arr.findIndex()  // 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1
arr.includes()  // 判断一个数组是否包含一个指定的值, 返回值是 布尔类型
arr.every()  // 检测数组所有元素是否都符合指定条件,返回值是 布尔类型
arr.some()  // 检测数组元素中是否有元素符合指定条件, 返回值是 布尔类型
arr.

• 转换

arr.join()  // 转成字符串
arr.reverse()  // 反转数组
arr.sort()  // 排序

Object

数据处理

1.修改数组对象字段名称

问题

最近使用vant组件库的地址列表组件遇到的，后台返回的数据结构与组件的address数据结构不一致，无法正常进行数据渲染

• 后台数据结构

let addressList = [
    {
        id: 22554,
        address: "天河棠下",
        phone: "13977985520",
        name: "尤玉旭",
        is_user_default: true,
        // ...
    },
    {
        id: 22555,
        address: "广州塔",
        phone: "18889352621",
        name: "star",
        is_user_default: true,
        // ...
    },
];

• Address 数据结构

list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
],

修改方法

• map遍历

<script>
        // let temp = JSON.parse(JSON.stringify(addressList).replace(/phone/,'tel').replace(/is_user_default/,'isDefault')) // 这样做只是修改第一项而已
        
        let temp = addressList.map(v => {
            return {
                id: v.id,
                name: v.name,
                tel: v.phone,
                address: v.address,
                isDefault: v.is_user_default,
            }
        })
        console.log(temp)
</script>

2.数据按照A-Z字母开头排序

// citiesGroup 获取的数据 无序的
// sortgroupcity 处理后的数据 有序的

computed: {
    //将获取的数据按照A-Z字母开头排序
    sortgroupcity() {
      let sortobj = {};
      for (let i = 65; i <= 90; i++) {
        if (this.citiesGroup[String.fromCharCode(i)]) {
          sortobj[String.fromCharCode(i)] = this.citiesGroup[
            String.fromCharCode(i)
          ];
        }
      }
      return sortobj;
    },
  },

3.快速修改数组中一个或多个对象的属性名

• 深拷贝替换 先进性深拷贝，再做替换

JSON.parse(JSON.stringify(data).replace(/旧属性名1/g, '新属性名1').replace(/旧属性名2/g, '新属性名2')...)

4.Tue Jul 28 2020 19:19:17 GMT+0800 (中国标准时间) 转换成 2020-07-28 11:21:47

new Date().toISOString() // 2020-07-28 11:21:08.337Z
new Date().toISOString().replace(/T/, ' ') // 2020-07-28 11:21:08.337Z
new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') // 2020-07-28 11:21:47

5.获取URL中的参数并转换为对象

• 方法1

var params = url.split("?")[1].split("&")
var obj = {}
  // for (i = 0; i < params.length; i++) {
  // var param = params[i].split("=");
  // obj[param[0]] = param[1]
  // }
params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
console.log(obj) //{name: "'成龙'", page: "123", bb: ""}

• 方法2

/**
 * @param {string} url
 * @returns {Object}
 */
export function getQueryObject(url) {
  url = url == null ? window.location.href : url
  const search = url.substring(url.lastIndexOf('?') + 1)
  const obj = {}
  const reg = /([^?&=]+)=([^?&=]*)/g
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1)
    let val = decodeURIComponent($2)
    val = String(val)
    obj[name] = val
    return rs
  })
  return obj
}