ES6方法的一些小应用

image.png

其中的.padStart()可以用来给日期补0：

      let date1 = '2018-3-8'
      let arry = date1.split('-')
      arry = arry.map((item) => {
        item = item.padStart(2, '0')
        return item
      })
      date1 = arry.join('-')
      console.log('打印补0以后的日期----', date1)  // 2018-03-08

.padEnd()貌似用途不大🤣

trim()消除空格：

      const str1 = '    测试     '
      console.log('消除空格----', str1.trim())   
      console.log('消除前面的空格----', str1.trimStart())
      console.log('消除后面的空格----', str1.trimEnd())

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

取整

const code = 12.658678
const num1 = parseInt(code)   // 12，会取整-不四舍五入
const num2 = Number.parseInt(code)   // 12，会取整-不四舍五入
const num3 = Math.floor(code)      // 12，会取整-不四舍五入
const num4 = parseFloat(code).toFixed(0)      // 13，会取整-会四舍五入
const num5 = Math.trunc(code)     // 12，会取整-不四舍五入

除了.toFixed()这种方式会四舍五入，其他的方法都不四舍五入，code可以是字符串，将字符串转为整数

Math方法集合

ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用。

• Math.trunc()： 用来去除一个数的小数部分来取整，不会四舍五入
• Math.sign()： 判断一个数是正数（返回+1）、负数（返回-1）、零（返回0）、还是其他（返回NaN）
• Math.cbrt()： 计算一个数的立方根，非数值会先转为数值再计算
• Math.imul(a，b)： 高精度乘法，可以当做a * b来用。它可以精准返回乘积超过了 2 的 53 次方的值
• Math.floor()：取整，可以是字符串形式，不会四舍五入
• Math.pow(a，b)：a的b次方是多少，返回double类型，如果需要强制转换为int类型，可以这样写：(int)Math.pow(a，b)

平时不怎么会用到的方法：

ES6 新增了 6 个双曲函数方法。

• Math.sinh(x) 返回x的双曲正弦（hyperbolic sine）
• Math.cosh(x) 返回x的双曲余弦（hyperbolic cosine）
• Math.tanh(x) 返回x的双曲正切（hyperbolic tangent）
• Math.asinh(x) 返回x的反双曲正弦（inverse hyperbolic sine）
• Math.acosh(x) 返回x的反双曲余弦（inverse hyperbolic cosine）
• Math.atanh(x) 返回x的反双曲正切（inverse hyperbolic tangent）

from方法转数组

如果后台返回的数据是一个对象，但是要取出对象中某个参数的值组成数组，其他参数不要，可以用from方法

const peoples = [
      { name: 'aaa', age: 2 },
      { name: 'bbb', age: 3 },
      { name: 'ccc', age: 4 }
    ]

只要所有name组成的数组:

    const names = Array.from(peoples , item => item.name)
    console.log('打印名字数组-----', names )  // [ 'aaa', 'bbb', 'ccc']

数组排序

• 如果是按照字母排序，严格说是按照编码排序：

const originalStr = ['apple', 'orro', 'pskkd', 'brekk']
console.log('打印排序---', originalStr .sort())   
// ['apple", "brekk", "orro", "pskkd"]

• 如果是按照数字大小排序：

    const originalNum = [1, 22, 105, 15, 10]
    const sortNumber = (a, b) => { return a - b }
    console.log('打印排序---', originalNum.sort(sortNumber))
    // [1, 10, 15, 22, 105]

合并参数

在请求数据前，如果要对某些参数进行修改，需要修改后的参数值覆盖之前的值，可以用扩展运算符或者Object.assign（target,source1,source2）

• assign方法：

    const target1 = { name: 'alice', code: 10293, date: '2020-09-22' }
    const source2 = { name: 'jey' }
    const source3 = { status: 'waiting', open: 1 }
    // 把所有参数合并起来：
    Object.assign(target1, source2, source3)
    console.log('打印target1-----', target1)
    // {code: 10293,date: "2020-09-22",name: "jey",open: 1,status: "waiting"}

• 扩展运算符

    const target4 = { ...target1, ...source2, ...source3 }
    console.log('打印target4-----', target4)
    //  {code: 10293,date: '2020-09-22",name: "jey",open: 1,status: "waiting"}

assign，扩展运算符都是是浅拷贝，如果要实现深拷贝，可以使用下面两种方法：

• 方法一

   const dict1 = { name: 'alice', code: 10293, date: '2020-09-22' }
   const dict3 = JSON.parse(JSON.stringify(dict1))
   dict3.code = 55
   console.log('打印dict1-----', dict1)
  // { name: 'alice', code: 10293, date: '2020-09-22' }

• 方法二

    const dict1 = { name: 'alice', code: 10293, date: '2020-09-22' }
    const dict4 = this.deepClone(dict1)
    dict4.code = 666
    console.log('打印dict1-----', dict1)
    // { name: 'alice', code: 10293, date: '2020-09-22' }

    methods: {
    deepClone(obj) {
      const objClone = Array.isArray(obj) ? [] : {}
      if (obj && typeof obj === 'object') {
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            // 判断ojb子元素是否为对象，如果是，递归复制
            if (obj[key] && typeof obj[key] === 'object') {
              objClone[key] = deepClone(obj[key])
            } else {
              // 如果不是，简单复制
              objClone[key] = obj[key]
            }
          }
        }
      }
      return objClone
    }
  }