运算符展开、函数,对象,数组,字符串变化 集合

... 展开运算符 用于函数实参或者赋值号右边

 console.log(...[1, 2, 3]) // 1,2,3
      console.log(Math.max(...[1, 2, 3]))//3   
      console.log(Math.max.apply(null, [1, 2, 3]))//3
      const o = { a: 1, b: 2 }
      const obj = { ...o, c: 3 }
      console.log(obj)//Object

... 剩余运算符 用于赋值号左边或函数形参

 const [a, ...args] = [1, 2, 3, 4]
      console.log(args) // [2,3,4]
      const fn = (...args) => {
        console.log(args)
        let sum = 0
        args.forEach((item) => {
          sum += item
        })
        return sum
      }
      console.log(fn(1))//1
      console.log(fn(1, 2))//3
      console.log(fn(1, 2, 3))//6

 函数参数默认值

function fn(a = 0, b = 0) {
        return a + b
      }

      console.log(fn())//0
      console.log(fn.name)//fn

对象变化

当对象的属性名和值的变量名或常量名一样 可以省略冒号+变量名

const username = 'admin'
      const pwd = '123456'
 const obj = {
        username, // username:username
        pwd,
       
        say() {
          console.log('say')//say
        },
        say1: () => {},
      }
      console.log(obj)//object
      obj.say()
      const o = Object.create(obj) // o.__proto__ = obj
      o.a = 100
      console.log(o.username)//admin

      console.log(NaN === NaN)//false
      console.log(Object.is(NaN, NaN)) // true
      console.log(Object.is({ a: 1 }, { a: 1 }))//false

      const arr = [1, 2, 3]
      console.log(arr.toString())//1,2,3   
      console.log(Object.prototype.toString.call(arr))//[object Array]

hasOwnProperty() 判断某个属性是否是自身

 console.log(o.hasOwnProperty('username')) // false
      console.log(o.hasOwnProperty('a')) // true

数组扁平化

实现方式一 数组的flat方法
 const arr1 = [0, 1, 2, [3, 4, [9, 10]], [7, 8]]
 console.log(arr1.keys()) // 返回
      const iterator = arr1.keys()
      for (const key of iterator) {
        console.log(key)
      }
      console.log(Object.keys(arr1))//['0', '1', '2', '3', '4']
实现方式二 递归
function flat(arr, newArr = []) {
        arr.forEach((item) => {
          if (Array.isArray(item)) {
            flat(item, newArr)
          } else {
            newArr.push(item)
          }
        })
        return newArr
      }
console.log(flat(arr1))//[0, 1, 2, 3, 4, 9, 10, 7, 8]
console.log('x'.repeat(3))//xxx
 const paragraph =
        'The quick brown fox jumps over the lazy dog. It barked.'
      const regex = /([A-Z])h/
      const found = paragraph.match(regex)
      console.log(found)

集合-Set集合不能重复

  const set = new Set()

往集合添加元素

set.add('html')
      set.add('css')
      set.add('js')
      set.add('js')

集合遍历

set.forEach((item) => {
        console.log(item)
      })

 集合长度

 console.log(set.size)

判断集合是否含有某个元素

 console.log(set.has('js'))
      console.log(Array.from(set)) //['html', 'css', 'js'] 
      console.log([...set]) //['html', 'css', 'js']  
      set.delete('html')
      console.log(set)//{'css', 'js'}
      set.clear()
      console.log(set.size)//0

利用set集合实现数组去重       对原数组进行遍历,判断每个元素不在新数组中,加到新数组中

const s = [...new Set([1, 2, 3, 4, 3, 2])] 
console.log(s)//[1, 2, 3, 4]
const arr = [1, 2, 3, 4, 3, 2]
 const newArr = []
      arr.forEach((item) => {
        if (newArr.indexOf(item) === -1) {
          newArr.push(item)
        }
      })
      console.log(newArr)// [1, 2, 3, 4]

Map存的是键值对

const map = new Map()
      map.set('uname', 'zs')
      map.set('address', { province: '浙江省', city: '杭州' })
      const o = { a: 1 }
      map.set(o, { x: 100 })
      map.delete('uname')
      console.log(map.get('address'))//object
      console.log(map.size)//2
      console.log(map.has('uname'))//false

遍历

map.forEach((v, k) => {
        console.log(v, k)
      })

 WeakMap 它的键只能是对象,一个对象作为 WeakMap 的键存在,不会阻止该对象被垃圾回收性能更好

 const weakMap = new WeakMap()
      weakMap.set(o, 10)
      console.log(weakMap)

深拷贝方式

const o = {
        a: 1,
        b: [2, 3],
        c: {
          x: 10,
          y: 20,
        },
      }
      o.o1 = o // {a,b,c,o1:{a,b,c,o1:}}
      function deepClone(obj,map=new WeakMap()) {
        if (obj == null) return obj
        if (obj instanceof Date) return new Date(obj)
        if (typeof obj !== 'object') return obj
        if(map.get(obj)){
          return map.get(obj)
        }
        const newObj = new obj.constructor()
        map.set(obj,newObj)
        for (const key in obj) {
          newObj[key] = deepClone(obj[key],map)
        }
        return newObj
      }
      console.log(deepClone(o))

你可能感兴趣的:(javascript,前端,vue.js)