字符串新增方法

padStartpadEnd

  • 如果原字符串不够指定长度,则会在左侧(右侧)填充字符串,用以补全

  • padStart( length: number, fillStr?: string )

  • padEnd( length: number, fillStr?: string )

    参数 是否必选 描述
    length true 指定的长度
    fillStr true 要填充的字符串
let str = 'Hello'
console.log(str.padStart(10, 'ha')); //hahahHello
console.log(str.padEnd(10, 'ha')); //Hellohahah

repeat()

  • 将原字符串重复n次后返回
  • repeat (count: number)
let str = 'Hello'
console.log(str.repeat(3)); //HelloHelloHello

includes(), startsWith(), endsWith()

  • includes():判断一个字符串是否包含在另一个字符串中

  • startsWith():判断一个字符串是否在另一个字符串头部

  • endsWith():判断一个字符串是否在另一个字符串尾部

  • startsWith(searchString: string, position?: number)

    参数 是否必选 描述
    searchString true 要搜索的字符串
    position false 要搜索的起始索引
let s = 'Hello world!';
console.log(s.includes('wo')) //true
console.log(s.startsWith('el')); //false
console.log(s.startsWith('el', 1)); //true
console.log(s.endsWith('d')); //false

数组新增方法

Array.from

  • 将其他数据类型转换为数组

  • 其它数据类型包括所有可遍历的字符串、Set、Map等

  • Array.from(iterable: Iterable | ArrayLike): any[]

    参数 是否必选 描述
    iterable true 用于遍历的对象
    ArrayLike false 数组中每个元素需要调用的函数,类似于map()
let str = 'Hello'
console.log(Array.from(str, v => v + 2)); //[ 'H2', 'e2', 'l2', 'l2', 'o2' ]

map()filter()every()some()find()findIndex()

  • map():传入一个回调函数,将原数组映射成一个新数组

  • filter:过滤器。传入一个回调函数,对原数组的每一项按照相同规则做一些转变后返回。

  • every():判断数组中是否每一项都符合条件

  • some():判断数组中是否有一项符合条件

  • find():找到满足条件的一个值立即返回

  • findIndex():找到满足条件的一个值的索引,立即返回

  • array.filter(function(currentValue,index,arr), thisValue)

    参数 描述
    currentValue true 当前元素的值
    index false 当前元素的索引值
    arr false 原数组
    thisValue false 用作this的值,省略则thisundefined
let arr = [1, 5, 7, 3, 2]

let res1 = arr.map((value, index, originArr) => {
return index % 2 === 0 ? value * 2 : value * 3
})
let res2 = let res1 = arr.filter(item => item > 3)
let res3 = arr.every(item => item > 3)
let res4 = arr.some(item => item > 3)
let res5 = arr.find(item => value > 5)
let res6 = arr.findIndex(item => value > 5) console.log(res1); //[ 2, 15, 14, 9, 4 ]
console.log(res2); //[ 5, 7 ]
console.log(res3); //false
console.log(res4); //true
console.log(res5); //7
console.log(res6); //2

reduce()

  • 传入一个回调,对原数组每一项累加求和

  • array.reduce(function(total,currentValue,currentIndex,arr), initialValue)

    参数 是否必选 描述
    total true 初始值, 或者计算结束后的返回值。
    currentValue true 当前元素的值
    currentIndex false 当前元素的索引
    arr false 原数组
    initialValue false 初始值。默认为0
let arr = [1, 5, 7, 3, 2]
let num = arr.reduce((total, pre) => total + pre)
console.log(num); //18

forEach()

  • 循环-迭代

  • array.forEach(function(currentValue, index, arr), thisValue)

    参数 是否必选 描述
    currentValue true 当前元素
    index false 当前元素的索引值
    arr false 原数组
let arr = [1, 5, 7, 3, 2]
arr.forEach(item => console.log(item)) //1 5 7 3 2

对象新增方法

Object.assign()

  • 合并对象,将后面的对象合并到第一个对象中;

  • Object.assign(目标对象, 源对象1,源对象2,...)

  • 同名属性覆盖,不同名属性新增,后面的覆盖前面的

  • 基本数据类型作为源对象时会自动转换为对象再合并

let KangKang = {
age: 24,
name:'kangkang'
}
let Maria = {
age: 21,
name: 'maria',
gender: 'female'
}
let Jane = {
name: 'jane'
}
console.log(Object.assign(KangKang, Maria, Jane)); //{ age: 21, name: 'jane', gender: 'female' }

Object.keys ()Object.value()Object.entries ()

  • Object.keys() :获取对象中属性名的集合
  • Object.value():获取对象中属性值的集合
  • Object.entries ():获取对象中属性名和属性值的集合
let Maria = {
age: 21,
name: 'maria',
gender: 'female'
}
console.log(Object.keys(Maria)); //[ 'age', 'name', 'gender' ]
console.log(Object.values(Maria)); //[ 21, 'maria', 'female' ]
console.log(Object.entries(Maria)); //[ [ 'age', 21 ], [ 'name', 'maria' ], [ 'gender', 'female' ] ]

后续补充……

ES6新增常用方法的更多相关文章

  1. es6新增

    首先要说let,他是只在代码块中执行的变量,例如: {    let a = 10;    var b = 1;}console.log(a);//definedconsole.log(b);//1 ...

  2. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  3. ES6新增的常用数组方法(forEach,map,filter,every,some)

    ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...

  4. ES6新增对象方法的访问描述符:get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  5. 浅谈ES6新增数据类型:Symbol

    面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...

  6. ES6新增的数据类型Map和Set。

    Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...

  7. es6 新增字符串方法

    es6新增了4个字符串处理的方法:startsWith,endsWith,includes,repeat. 1.简单使用 includes()返回布尔值,表示是否找到了参数字符串 startsWith ...

  8. es6新增功能

    声明命令 1. let命令 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.下面代码在代码块之中,分别用let和var声明了两个变量.然 ...

  9. ES6 新增的一些东西

    一.常量 不允许重复定义 const a='HELLO' const a='world'//报错Uncaught SyntaxError: Identifier 'a' has already bee ...

随机推荐

  1. python网络编程TCP服务多客户端的服务端开发

    #服务多客户端TCP服务端开发 2 #方法说明 3 """ 4 bind(host,port)表示绑定端口号,host是ip地址,ip地址一般不进 行绑定,表示本机的任何 ...

  2. FTP操作/Passive/Active控制

    1 using System; 2 using System.Collections.Generic; 3 using System.Text; 4 using System.IO; 5 using ...

  3. SpringMVC请求映射handler源码解读

    请求映射源码 首先看一张请求完整流转图(这里感谢博客园上这位大神的图,博客地址我忘记了): 前台发送给后台的访问请求是如何找到对应的控制器映射并执行后续的后台操作呢,其核心为DispatcherSer ...

  4. MQ 架构与细节

    MQ 架构与细节 MQ 是什么? MQ:MessageQueue,消息队列的简称,用于进程间通信或同一进程的不同线程间的通信方式. 什么时候该使用MQ? 数据驱动的任务依赖 上游不关心执行结果 上游关 ...

  5. tasker支持的shell 命令大全

    参考 http://www.notenoughtech.com/tasker/tasker-run-shell-commands/   罗列所有系统配置项 settings list system s ...

  6. day-5 xctf-when_did_you_born

    xctf-when_did_you_born 题目传送门:https://adworld.xctf.org.cn/task/answer?type=pwn&number=2&grade ...

  7. 《疯狂Kotlin讲义》读书笔记4——流程控制

    流程控制 与Java类似,Kotlin同样提供了两种基本的流程控制结构:分支结构和循环结构. Kotlin提供了 if 和 when 两种分支语句,其中 when 语句可以代替Java的switch语 ...

  8. 05.ElementUI源码学习:项目发布配置(github pages&npm package)

    0x00.前言 书接上文.项目第一个组件已经封装好,说明文档也已编写好.下面需要将说明文档发布到外网上,以此来展示和推广项目,使用 Github Pages功能实现.同时将组件发布之 npm 上,方便 ...

  9. vue 回顾

    ①.组件的注册 全局注册: // 注册 Vue.component('my-component', { template: '<div>A custom component!</di ...

  10. 移动端小总结(1)---meta、input和单行多行文字溢出省略号

    一.常用META 1. 添加到主屏后的标题(IOS) 1 <meta name="apple-mobile-web-app-title" content="标题&q ...