时间戳

首页 > 技术文章 > 前端常用语法糖或便利的方法函数

前端常用语法糖或便利的方法函数

Shyno 2021-07-02 18:13 原文

方法或函数

1.includes():返回布尔值，表示是否找到了参数字符串

 (1)string.includes

  const str= 'shyno大帅逼'
  const str1 = '大帅逼'
  console.log('includes',str.includes(str1)) //true

 (2)array.includes

  const arr= ['shyno','大帅逼']
  const str1 = '大帅逼'
  console.log('includes',arr.includes(str1)) //true

2.去掉字符串空格

  trim():去掉字符串两端空格

  trimStart():去掉字符串前端空格

  trimEnd():去掉字符串后端空格

  const str= '  shyno 大帅逼 '
  console.log('includes1',str.trim()) //'shyno 大帅逼'
  console.log('includes2',str.trimStart()) //'shyno 大帅逼 '
  console.log('includes3',str.trimEnd()) //'  shyno 大帅逼'

3.拓展运算符

  (1)深拷贝

   const arr = [1,2,3]
   const arr1 = [...arr]
   arr1[0]=4
   console.log('kkkk',arr,arr1)//[1,2,3] [4,2,3]

  (2)数组添加元素

   const arr = [1,2,3]
   const arr1 = [...arr,4]
   console.log('kkkk',arr1)//[1,2,3,4]

  (3)对象添加属性

  const obj = {
     name:'shyno',
     age:18
   }
   const obj1 = {...obj,sex:'男'}
   console.log('kkkk',obj1)//{name: "shyno", age: 18, sex: "男"}

  (4)修改对象属性值(重复属性名以后面的为主)

  const obj = {
     name:'shyno',
     age:18
   }
   const obj1 = {...obj,age:17}
   console.log('kkkk',obj1)//{name: "shyno", age: 17}

4.Array.from()将类数组和可遍历对象转化成数组

5.对象的简洁写法

 const name = 'shyno'
   const age = 18 
   //日常写法
   const you = {
    name:name,
    age:age
  }
  //属性名与属性值变量名相同时可简写
   const me = {
     name,
     age
   }
   console.log('kkkk',you,me)//{name: "shyno", age: 18},{name: "shyno", age: 18}

6.Object.keys(obj)对象的键值:返回一个键的数组

const obj = {
     name:'shyno',
     age:18
   }
   console.log(Object.keys(obj))//["name", "age"]

7.Object.values()对象的属性值:返回一个值的数组

 const obj = {
     name:'shyno',  
     age:18
   }
   console.log(Object.values(obj))//["shyno", 18]

9.Object.entries()对象的属性键值对:返回一个数组-----如何将一个对象转化成数组

const obj = {
     name:'shyno',  
     age:18
   }
   console.log(Object.entries(obj))//[{name:'shyno',age:18}]

10.flat()嵌套数组的平铺,平铺后,空元素会被去除

   const arr = [1,[2,3],[[4,5],6]]
   
   console.log(arr.flat())//[1,2,3,[4,5],6]
   console.log(arr.flat(1))//[1,2,3,[4,5],6]
   console.log(arr.flat(2))//[1, 2, 3, 4, 5, 6]

 11.join()用特定字符串将数组元素拼接成字符串

const arr = [1, 2, 3];
 console.log('join', arr.join(',')) // join 1,2,3

 

语法糖

1.筛选出数组中符合条件的元素

 filter()+箭头函数   不改变原来数组

   const arr = [1,2,3,4,5,6]
   
   console.log('1',arr,arr.filter((item)=>item>3))//[1,2,3,4,5,6],[4,5,6]

2.对象数组的所有元素添加或者改变某个属性   改变原来数组

map()+箭头函数

   const arr =[ {name:'shyno',age:18},{name:'shy',age:18},{name:'no',age:17}]
   arr.map((item)=>item.sex='男')
   
   console.log('1',arr)//[ {name:'shyno',age:18,sex:'男'},{name:'shy',age:18,sex:'男'},{name:'no',age:17,sex:'男'}]

3.根据某数组的长度生成同长度的新数组 不改变原数组

map()+箭头函数

   const arr =[ {name:'shyno',age:18},{name:'shy',age:18},{name:'no',age:17}]
   const arr1 = arr.map(()=>1)
   
   console.log('1',arr1)//[1,1,1]

 4.es6链式判断.主要是用于非空判断的逻辑,减少代码量

?.

 const me = {
    name: 'shyno',
    age: {
      before: 18,
      now: 18,
      after: 18,
    },
  };
  let isYoung = me?.age?.now === 18; // 等于   me && me.age && me.age.now ===18
  console.log('isYoung', isYoung); //isYoung  true

 

推荐阅读