js es6+ 常用语法

注意有些语法对某些浏览器不兼容。

主要内容:

map,find,filter,some, every,reduce,includes,
解构&&解构命名,扩展运算...,flat(Infinity),?. ,??,
Object.keys,Object.values,Object.entries

map:
遍历并返回一个加工过的新数组(与原数组length相等,否者对应的index为undefind)
const arr=[1,2,3,4,5]
const data=arr.map(item=>item*10)
//[10,20,30,40,50]
(若仅仅用来遍历,数组内为对象可直接改变内部值)
find:
返回一个匹配的值(匹配到对应的值,不在向下执行)
const arr=[1,2,3,4,5]
const data=arr.find(item=>item===3)
//3
filter:
返回一个数组(过滤后的数组)
const arr=[1,2,3,4,5]
const data=arr.filter(item=>item>3)
//[4,5]
some:
返回一个布尔值,匹配到任意一个值,返回true,不在向下执行
const arr=[1,2,3,4,5]
const data=arr.some(item=>item===3)
//true
every:
返回一个布尔值,任意一个值不匹配,返回false,不在向下执行
const arr=[1,2,3,4,5]
const data=arr.every(item=>item>0)
//true
reduce:
返回一个运算结果的总和
const arr=[1,2,3,4,5]
const data=arr.reduce((count,num)=>count+num)
//15
includes:
返回一个布尔值,匹配到返回true (常用于语句中)
const arr=[1,2,3,4,5]
if(arr.includes(3)) console.log('true')
//true
解构&&解构命名:
//解构
const {name,age}={name:'李响',age:24}
//李响,24
//解构命名
const {name:likeName}={name:'李响'}
//likeName log 李响
//设置默认值
const {name='李响'}={name:''}  或者 const {name='李响'}={}
//李响
//有时拿到的结果可能为undefind,解构会报错
const {name='李响'}=obj || {}
//可以给一个||值
扩展运算...:
//数组
const arr0=[1,2,3]
const arr1=[4,5,6]
const arr3=[...arr0,...arr1]
//[1,2,3,4,5,6]
//对象
const obj0={status:'true',date:'2021-10-25'}
const obj1={flex:'Man'}
const obj3={...obj0,...obj1}
//{status:'true',date:'2021-10-25',flex:'Man'}
flat(num):
返回一个n维数组
flat(num):num展开为num维数组,num可以为Infinity,无论多少层都展开为一维数组
const arr=[1,[2,[3]]]
const arr1=arr.flat(1)
//[1,2,[3]]
const arr1=arr.flat(2) 或 const arr1=arr.flat(Infinity)
//[1,2,3]
?. ??:
?.可选链操作符
日常处理数据的时间,会遇到对象中找不到我们写的属性,如下
let obj={name:'卡恩'}
let result=obj.sex
//err 报错
//使用?.
let result=obj?.sex
//undefind  这样就完美解决了报错的问题,然后进行相应的判断

??空值合并操作符
值为undefind,null返回右边的值
let name=undefind
let result=name??'赫尔德'
//赫尔德
常用来解决(val!==undefind||val!==null||val!=='')情况
??写法 :if((val??'')!=='')...

Object.keys:
枚举对象的键,返回一个数组
const obj={name:'李响',age:24}
const arr=Object.keys(obj)
//['name','age']
Object.values:
枚举对象的值,返回一个数组
const obj={name:'李响',age:24}
const arr=Object.values(obj)
//['李响','24']
Object.entries:
枚举对象的键,值,返回一个数组
const obj={name:'李响',age:24}
const arr=Object.entries(obj)
//[['name','李响'],['age','24']]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ES6常用语法 [TOC] let 它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码...
    NearZXH阅读 599评论 0 1
  • 实习的时候写的学习笔记 如有错误请各位大佬直接留言批判,防止错误的信息会误导他人! ---------------...
    ci鱼丸粗面阅读 551评论 0 0
  • ES6 是什么 ECMAScript 2015 于2015年6月正式发布 可以使用babel语法转换器,支持低端浏...
    我是嘉炜阅读 199评论 0 2
  • ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才...
    DudleyLi阅读 955评论 0 1
  • 没事的时候学习一下吧。欢迎加我技术交流QQ群 :811956471 该笔记会持续更新.......... 特别注意...
    不忘初心_d阅读 374评论 0 2