美文网首页
ES10字符串和数组扩展

ES10字符串和数组扩展

作者: 技术小王 | 来源:发表于2021-07-01 08:49 被阅读0次

小编今天更新在es10中对字符串和数组的更新,能让我们在工作的时候能更方便一些,现在我们看一下都做了哪些扩展。大家还可以关注我的微信公众号,蜗牛全栈。
一、字符串扩展
我们之前在去除字符串中前后空格的时候,可以通过正则表达式,就像这样

let str = '    school   '
str.replace(/^\s/g,'') // 去掉字符串前面的空格
str.replace(/\s+$/g,'') // 去掉字符串后面的空格

在es10中提供了以下几个方法,很是方便。

let str = '    school   '
console.log(str.trimStart()) // 去掉前面空格  'school   '
console.log(str.trimLeft()) // 去掉前面空格    'school   '
console.log(str.trimEnd()) // 去掉后面空格     '    school'
console.log(str.trimRight()) // 去掉后面空格   '    school'
console.log(str.trim()) // 前后空格都去掉       'school'

二、对数组的扩展
我们在项目中有些时候会遇到二维数组或者三维数组,这个时候,我们调用数组的方法的时候 ,有的时候会因为数据解构的原因,变得很复杂,es10提供了这样两个方法,可以将多维数组展开,变成一维数组,就像这样

let arr = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]]
console.log(arr.flat())  // [1,2,3,4,5,6,[7,8,9,[10,11,12]]]
console.log(arr.flat().flat())  // [1,2,3,4,5,6,7,8,9,[10,11,12]]
console.log(arr.flat().flat().flat())  // [1,2,3,4,5,6,7,8,9,10,11,12]

当然,flat函数也是可以传递参数的,里面的参数可以理解为将几维数组全部展开,就像这样

console.log(arr.flat(3)) // [1,2,3,4,5,6,7,8,9,10,11,12]
console.log(arr.flat(4)) // [1,2,3,4,5,6,7,8,9,10,11,12]
console.log(arr.flat(2)) // [1,2,3,4,5,6,7,8,9,[10,11,12]]

console.log(arr.flat(Infinity)) // [1,2,3,4,5,6,7,8,9,10,11,12] 不常用

同样,我们也可以通过flatMap关键字,解决以下痛点

const arr= [1,2,3,4,5]
const res = arr.map(x => x+1)
console.log(res) // [2,3,4,5,6]

const res = arr.map(x => [x+1])
console.log(res) // [[2],[3],[4],[5],[6]]
console.log(res.flat()) // [2,3,4,5,6]

const arr= [1,2,3,4,5]
const res = arr.flatMap(x => [x+1])
console.log(res)  // [2,3,4,5,6]

相关文章

  • ES10字符串和数组扩展

    小编今天更新在es10中对字符串和数组的更新,能让我们在工作的时候能更方便一些,现在我们看一下都做了哪些扩展。大家...

  • ES6扩展

    字符串扩展 正则扩展 数值扩展 函数扩展 对象扩展 数组扩展 字符串扩展 模版字符串 部分新的方法 padStar...

  • 字符串、数组、函数、对象

    字符串 多行字符串 字符串模板 数组 扩展 函数参数的扩展 类数组对象转数组 函数 默认值 以下两种写法的区别? ...

  • ES6 字符串、数组、函数、对象

    字符串 1. 多行字符串 2. 字符串模板 数组 1. 扩展 2. 函数参数的扩展 3. 类数组对象转数组 函数 ...

  • 十五、字符串转数字

    字符串转数组 字符串 *待扩展:传递与复制扩展 函数式编程和改变原始数据的编程方法

  • 【es8,es9,es10笔记】es8,es9的新特性_扩展(1

    这里整理了ES8 对象方法扩展, ES9 扩展运算符和rest参数 和ES10 扩展方法。 欢迎大家的意见和交流 ...

  • ES6扩展

    字符串的扩展正则的扩展数值的扩展数组的扩展函数的扩展对象的扩展

  • es6入门

    一、解构赋值 数组的解构赋值 二、 对象解构赋值 三、正则新特性 四、字符串扩展 五、数值扩展 六、数组扩展 七、...

  • ES6基础-ES6的扩展

    进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展。 开发环境准备: 编辑器(VS Code, A...

  • Vue项目开发与规范--es6语法规范篇

    目录 简介 let const 解构赋值 正则的扩展 字符串的扩展 数值的扩展 数组的扩展 函数的扩展 对象的扩展...

网友评论

      本文标题:ES10字符串和数组扩展

      本文链接:https://www.haomeiwen.com/subject/tmblultx.html