JS或者TS中常用的运算符及方法（工作笔记）

1. 常用运算符

1.2 ?? 和 || 区别

相同点：
?? 和 || 的用法相同，都是前后是值，中间用符号连接，根据前面的值来判断最终是返回前面的值还是后面的值。

A1 ?? A2
A1 || A2

 // ??
  undefined ?? 2     // 2
  null ?? 2          // 2
  0 ?? 2             // 0
  "" ?? 2            // ""
  true ?? 2          // true
  false ?? 2         // false


 // ||
  undefined || 2     // 2
  null || 2          // 2
  0 || 2             // 2
  "" || 2            // 2
  true || 2          // true
  false || 2         // 2

2. 常用工具函数

2.1 数据类型转换

2.1.1 地址栏参数转成对象参数

首先获取（window.location.search）url地址中的参数，也是地址栏中?后面的参数(包含?)

/**
 * @param {string} url（url=window.location.search）
 * @returns {Object} 获取参数对象
 */
export function getParamObj(url) {
  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
  if (!search) {
    return {}
  }
  const obj = {}
  const searchArr = search.split('&')
  searchArr.forEach((v) => {
    const index = v.indexOf('=')
    if (index !== -1) {
      const name = v.substring(0, index)
      const val = v.substring(index + 1, v.length)
      obj[name] = val
    }
  })
  return obj
}

2.1.2 金额转换为大写：仟佰拾亿仟佰拾万仟佰拾元角分

/**
 * 金额转换为大写：仟佰拾亿仟佰拾万仟佰拾元角分
 */
export function getUppercaseNumbers(num) {
  let strOutput = '',
    strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分'
  num += '00'
  let intPos = num.indexOf('.')
  if (intPos >= 0) {
    num = num.substring(0, intPos) + num.substr(intPos + 1, 2)
  }
  strUnit = strUnit.substr(strUnit.length - num.length)
  for (let i = 0; i < num.length; i++) {
    strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i, 1), 1) + strUnit.substr(i, 1)
  }
  return strOutput
    .replace(/零角零分$/, '整')
    .replace(/零[仟佰拾]/g, '零')
    .replace(/零{2,}/g, '零')
    .replace(/零([亿|万])/g, '$1')
    .replace(/零+元/, '元')
    .replace(/亿零{0,3}万/, '亿')
    .replace(/^元/, '零元')
}

2.1.3 获取某月的第一天和最后一天， 默认当前月

/**
 * @returns {Object} 获取某月的第一天和最后一天， 默认当前月
 */
export const getMonthFirstDayAndLastDay = (date = new Date()) => {
  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
  return [dayjs(firstDay).format('YYYY-MM-DD'), dayjs(lastDay).format('YYYY-MM-DD')]
}

2.2 浏览器相关

2.2.1 检测是否为 PC 端浏览器模式

function isPCBroswer() {
    let e = navigator.userAgent.toLowerCase()
        , t = "ipad" == e.match(/ipad/i)
        , i = "iphone" == e.match(/iphone/i)
        , r = "midp" == e.match(/midp/i)
        , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
        , a = "ucweb" == e.match(/ucweb/i)
        , o = "android" == e.match(/android/i)
        , s = "windows ce" == e.match(/windows ce/i)
        , l = "windows mobile" == e.match(/windows mobile/i);
    return !(t || i || r || n || a || o || s || l)
}

2.2.2 判断当前入口是 PC 端企业微信还是 PC 端浏览器。或者是 APP 端企业微信

function isQyweixin(){
	//判断当前入口是PC端还是APP端
	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )==null?false:true;
        return flag?is_weixin()?"来自于APP端企业微信":"":is_weixin()?"来自于PC端的企业微信":"来自于PC端浏览器";
}
function is_weixin(){
	 //判断是在企业微信打开 还是 在浏览器打开
     return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
}

2.3 数字处理

2.3.1 千分制展示数字处理

说明：用1000求模取末尾3位，然后用除法判断是否还有剩余位数的方法去做的，这种方法性能也是最好的，推荐大家使用！
参考：https://juejin.cn/post/7075531339055202311
示例：

function format_with_mod(number) {
  let n = number;
  let r = '';
  let temp = '';
  let mod;
  do {
    // 求模的值， 用于获取高三位，这里可能有小数
    mod = n % 1000;
    // 值是不是大于1，是继续的条件
    n = n / 1000;
    // 高三位
    temp = ~~mod;
    // 1.填充: n > 1 循环未结束， 就要填充为比如 1 => 001
    // 不然temp = ~~mod的时候, 1 001， 就会变成 "11"
    // 2.拼接“,”
    r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
  } while (n >= 1);
  const strNumber = number + '';
  let index = strNumber.indexOf('.');
  // 拼接小数部分
  if (index >= 0) {
    r += strNumber.substring(index);
  }
  return r;
}
console.log(format_with_mod(1234567893.99));

3. 特殊字符

3.1 _blank、_parent、_self、_top 的意思

1、“_blank”的意思：
浏览器总在一个新打开、未命名的窗口中载入目标文档。
2、“_parent”的意思：
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
3、“_self”的意思：
这个目标的值对所有没有指定目标的 < a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 < base> 标签中的 target 属性一起使用。
4、“_top”的意思：
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
HTML < a> 标签的 target 属性

一、定义和用法
1、< a> 标签的 target 属性规定在何处打开链接文档。
2、如果在一个 < a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

二、打开新窗口
被指向的超链接使得创建高效的浏览工具变得很容易。例如，一个简单的内容文档的列表，可以将文档重定向到一个单独的窗口：

<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_window">Preface</a></li>
<li><a href="chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>

4. CSS 样式

4.1 当鼠标移动到元素上显示手状

// 参考博客：https://blog.csdn.net/qq_36836224/article/details/123725963
style="cursor:pointer;"

5. 图标使用

5.1 使用 require 加载本地图标

<img class="img-refresh-style" :src="`${require('@/assets/icon_home_refresh.png')}`" />

设置了大小及左边距：

.img-refresh-style {
  margin-left: 4px;
  width: 10px;
  height: 10px;
}

5.2 使用 element-ui 中的图标

父组件中使用的

// 在父组件当中通过props传递都子组件
:icon="
  [
   require('@/assets/icon_home_todo.png'),
   'el-icon-message-solid',
   'el-icon-s-flag',
   'el-icon-s-opportunity',
  ][index] || 'el-icon-message-solid'
 "

props接受icon

  props: {
    icon: {
      default: 'el-icon-message-solid',
    },
  },

//第一种使用方式
<img :src="`${icon}`" class="img-icon-style" />
//第二种使用方式
<i :class="`${icon}`" class="icon" />

6. 数组的增删改查

6.1 数组：增

(1) 首位添加 语法：arr.unshift()
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5']
  //1.新增：arr.unshift()
  arr.unshift('6')
  console.log(arr) //结果：['6', '1', '2', '3', '4', '5']

  // 数据
  let arr = ['1', '2', '3', '4', '5']
  //1.新增：arr.unshift()
  arr.unshift('6', '7')
  console.log(arr) //结果：['6','7', '1', '2', '3', '4', '5']

(2) 末位添加 语法：arr.push()
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5']
  //1.新增：arr.unshift()
  arr.push('6', '7')
  console.log(arr) //结果：['1', '2', '3', '4', '5', '6', '7']

6.2 数组：删和改

(1) 首位删除 语法：arr.shift()
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5']
  //1.删除：arr.shift()
  arr.shift()
  console.log(arr) //结果：['2', '3', '4', '5']

(2) 末位删除 语法：arr.pop()
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5']
  //1.删除：arr.pop()
  arr.pop()
  console.log(arr) //结果：['1', '2', '3', '4']

(2) 选择删除（可以实现改） 语法：arr.splice()
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5']
  //语法：数组.splice(参数一，参数二，参数三)
  //参数一:数组起始索引下标；可以为负数，表示从倒数第几个数开始；
  //参数二:删除数组单元个数；
  //参数三:参数三及以后参数都为替换值，替换删除的数组单元。
  //说明：利用该参数的特点，当参数二为0时，能够实现对数组的插入操作。
  //1.选择删除：arr.splice()
  arr.splice(1, 2)
  console.log(arr) //结果：['1', '4', '5']

6.3 数组：查

(1) 查询 语法：arr.indexOf()；
说明：查询数值第一次出现的位置；查询结果存在，则返回该数值对应的索引下标，如果不存在返回-1；
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5', '3']
  //1.查询：arr.indexOf()
  console.log(arr.indexOf('3')) //结果：2(脚标位置)
  console.log(arr) //结果：['1', '2', '3', '4', '5'，'3']

(2) 查询 语法：arr.lastIndexOf()；
说明：查询数值最后一次出现的位置；查询结果存在，则返回该数值对应的索引下标，如果不存在返回-1；
示例：

  // 数据
  let arr = ['1', '2', '3', '4', '5', '3', '6']
  //1.查询：arr.lastIndexOf()
  arr.lastIndexOf('3')
  console.log(arr.lastIndexOf('3')) //结果：5(脚标位置)
  console.log(arr) //结果：['1', '2', '3', '4', '5', '3', '6']

(3)查询 语法：const 变量名= arr.find(function(value，index ，array){return 表达式 }
参数value：数组单元的值；
参数index：数组单元索引下标；
参数array：代表原数组；
示例：

//当5在此数组存在时，则return 返回的值 num =5
const arr = [36,65,2,1,2,34,4,75,69,7]
const num = arr.find(function (a) {
  return a===69
})
console.log('num',num)//结果：69
console.log(arr)//结果：[36, 65, 2, 1, 2, 34, 4, 75, 69, 7]

//当10在此数组存在时，则return 返回的值 num = undefined
const arr = [36,65,2,1,2,34,4,75,69,7]
const num = arr.find(function (a) {
  return a===10
})
console.log('num',num)//结果：undefined
console.log(arr)//结果：[36, 65, 2, 1, 2, 34, 4, 75, 69, 7]

(4)查询 语法：const 变量名= arr.findIndex(function(value，index ，array){return 表达式 }
参数value：数组单元的值；
参数index：数组单元索引下标；
参数array：代表原数组；
说明：返回值为表达式对应数组单元的索引下标；
示例：

const arr = [36,65,2,5,2,34,4,75,69,7]
const num = arr.findIndex(function (a) {
  return a===69
})
console.log('num',num)//结果：8(数据所在位置的角标)
console.log(arr)//结果：[36, 65, 2, 5, 2, 34, 4, 75, 69, 7]

6.4 数组：数组截取

(1)截取 语法：arr.slice(参数1,参数2)
参数1: 截取起始位置下标索引，负数为倒数第几个；
参数2: 结束位置下标索引，负数为倒数第几个；
说明：数组截取之后，生成新的数组，原数组数据保持不变；
示例：

const arr = [36,65,2,5,2,34,4,75,69,7]
const arr2 = arr.slice(-5,-1)
console.log('arr2',arr2)//结果：[34, 4, 75, 69]
console.log(arr)//结果：[36, 65, 2, 5, 2, 34, 4, 75, 69, 7]

6.5 数组：映射

(1)截取 语法：arr.slice(参数1,参数2)
参数1: 截取起始位置下标索引，负数为倒数第几个；
参数2: 结束位置下标索引，负数为倒数第几个；
说明：数组截取之后，生成新的数组，原数组数据保持不变；
示例：

const arr = [100, 5, 2, 6, 5, 3, 8, 4, 6, 8]
const arr2 = arr.map(function (value, index, origin) {
  if (value % 2==0){
     return value / 2
   }else{
     return value * 2
   }
})
console.log('arr2',arr2)//结果：[50, 10, 1, 3, 10, 6, 4, 2, 3, 4]
console.log('arr',arr)//结果：[100, 5, 2, 6, 5, 3, 8, 4, 6, 8]

其他项目示例

1.Vue使用 Promise.all() 实现多个枚举接口获取