js的字符串方法如substr、substring,数组方法如slice、splice等名字相近,用法稍有不同,让开发者在开发过程中总是记不起其用法,需要查资料。现整理一下,希望有助大家记忆。

String对象

slice

stringObject.slice(start, end)

var a = 'Hello world!';
var b = a.slice(2);
var c = a.slice(-4, -2);
// a: 'Hello world!'
// b: 'llo world!'
// c: 'rl',参数可为负
复制代码

substr

stringObject.substr(start, length)

var a = 'Hello world!';
var b = a.substr(0, 4);
var c = a.substr(-5, 2);
// a: 'Hello world!'
// b: 'Hell'
// c: 'or',参数可为负
复制代码

substring

stringObject.substring(start, stop)

var a = 'Hello world!';
var b = a.substring(0, 4);
var c = a.substring(3, 2);
var d = a.substring(0, -1);
// a: 'Hello world!'
// b: 'Hell'
// c: 'l',start比stop小,交换这两个参数
// d: '',参数为负,返回空字符串
复制代码

slice、substr、substring都是字符串的切割方法,三者之间有细微的区别,根据不同的使用场景可以灵活使用。三种方法都是生成新的字符串,而不是修改原string。

Array对象

concat

arrayObject.concat(arrayX, arrayX, ......, arrayX)

参数可以为具体的值,也可以为数组对象,可以任意多个。不改变现有的数组,返回被连接数组的一个副本。

var a = [1, 2, 3];
var b = a.concat(4, 5);
var c = a.concat([4, 5]);
// a: [1, 2, 3]
// b: [1, 2, 3, 4, 5]
// c: [1, 2, 3, 4, 5]
复制代码

pop

arrayObject.pop()

删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。该方法会改变原数组。

var a = [1, 2, 3];
var b = a.pop();
// a: [1, 2],修改了原数组
// b: 3,返回删除元素的值
复制代码

push

arrayObject.push(newelement1,newelement2,....,newelementX)

参数顺序添加到 arrayObject 的尾部,直接修改arrayObject。

var a = [1, 2, 3];
var b = a.push(4, 5);
// a: [1, 2, 3, 4, 5],修改了原数组
// b: 5,返回修改后的数组的长度
复制代码

shift

arrayObject.shift()

把数组的第一个元素从其中删除,并返回第一个元素的值。如果数组是空的,那么 shift() 方法将不进行任何操作,返回undefined值。该方法会改变原数组。类比pop方法。

var a = [1, 2, 3];
var b = a.shift();
// a: [2, 3],修改了原数组
// b: 1,返回删除元素的值
复制代码

unshift

arrayObject.unshift(newelement1, newelement2, ...., newelementX)

向数组的开头添加一个或更多元素,并返回新的长度。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

var a = [1, 2, 3];
var b = a.unshift(4, 5);
// a: [ 4, 5, 1, 2, 3 ],修改了原数组
// b: 5,返回修改后的数组的长度
复制代码

slice

arrayObject.slice(start, end)

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。该方法不会修改原数组。

var a = [1, 2, 3, 4, 5];
var b = a.slice(2);
// a: [1, 2, 3, 4, 5],不修改原数组
// b: [3, 4, 5],返回新数组var c = [1, 2, 3, 4, 5];
var d = c.slice(2, -1);
// c: [1, 2, 3, 4, 5],不修改原数组
// d: [3, 4],返回新数组
复制代码

splice

arrayObject.splice(index, howmany, item1, ....., itemX)

可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

var a = [1, 2, 3, 4, 5];
var b = a.splice(1, 1);
// a: [1, 3, 4, 5],修改了原数组
// b: [2],返回新数组var c = [1, 2, 3, 4, 5];
var d = c.splice(-1, 1);
// c: [1, 2, 3, 4],修改了原数组
// d: [5],返回新数组var e = [1, 2, 3, 4, 5];
var f = e.splice(1, 1, 6, 7);
// e: [ 1, 6, 7, 3, 4, 5 ],修改了原数组
// f: [2],返回新数组var g = [1, 2, 3, 4, 5];
var h = g.splice(1, 0, 8);
// g: [ 1, 8, 2, 3, 4, 5 ],修改了原数组
// h: [],没有删除值,返回空数组
复制代码

sort

arrayObject.sort(sortBy)

无参数时,将按字母顺序对数组中的元素进行排序。参数为比较函数时,如果要交换prev和next的值,返回大于0的值。

var a = [1, 10, 8, 6, 9];
var b = a.sort(function (prev, next) {return prev - next;
});
// a: [1, 6, 8, 9, 10],修改了原数组
// b: [1, 6, 8, 9, 10],返回修改后的数组
复制代码

reverse

arrayObject.reverse()

用于颠倒数组中元素的顺序。会改变原数组。

var a = [1, 2, 3];
var b = a.reverse();
// a: [3, 2, 1],修改了原数组
// b: [3, 2, 1],返回修改后的数组
复制代码

map

arrayObject.map(function(currentValue, index, arrayObject) {})

对数组的每一项进行处理,返回新数组。

var a = [1, 2, 3];
var b = a.map((curVal) => curVal * 2);
// a: [1, 2, 3],不修改原数组
// b: [2, 4, 6],返回新数组
复制代码

forEach

arrayObject.forEach(function(currentValue, index, arrayObject) {})

数组的每个元素执行一次提供的函数。一般来说不修改原数组,但也可以通过处理函数修改原数组。该方法很灵活,可类比for...of

var a = [1, 2, 3];
var sum = 0;
var b = a.forEach((curVal) => sum += curVal);
// a: [1, 2, 3],不修改原数组
// b: undefined,forEach不返回值
// sum: 6
复制代码

find

arrayObject.find(function(currentValue, index, arrayObject) {})

返回数组中第一个满足测试条件(返回true)的元素。如果不存在这样的元素,返回undefined。findIndex类似,只不过返回的是第一个满足测试条件的元素的index。

var a = [1, 2, 3];
var b = a.find((curVal) => curVal === 1);
var c = a.find((curVal) => curVal === 4);
// a: [1, 2, 3],不修改原数组
// b: 1
// c: undefined
复制代码

filter

arrayObject.filter(function(currentValue, index, arrayObject) {})

返回数组中所有满足测试条件(返回true)的元素组成的数组。如果不存在这样的元素,返回[]。

var a = [1, 2, 3];
var b = a.filter((curVal) => curVal > 1);
var c = a.filter((curVal) => curVal > 3);
// a: [1, 2, 3],不修改原数组
// b: [2, 3]
// c: []
复制代码

reduce

arrayObject.filter(function(previousValue, currentValue, currentIndex, arrayObject) {}, initialValue)

接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

如果没有initialValue参数,reduce从index为1开始执行回调函数,跳过第一个index。如果有initialValue参数, reduce将从index为0开始执行回调。如果数组是空的并且没有initialValue参数,将会抛出TypeError错误。如果数组只有一个元素并且没有初始值initialValue,或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数。

var a = [1, 2, 3];
var b = a.reduce((prevResult, curItem) => prevResult + curItem);
// a: [1, 2, 3],不修改原数组
// b: 6
复制代码

除了Array的pop、push、shift、unshift、splice、sort、reverse这7个方法会修改原数组,其他方法均不会修改原数组。

转载于:https://juejin.im/post/5a8e3b08f265da4e9449c50e

JS易混淆的方法整理相关推荐

  1. a 中调用js的几种方法整理及使用推荐

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

  2. 去除js代码混淆的方法,亲测有效

    步骤: 1.新建一个js.html 2.页面新建一个dev,id=divTest 3.写一段script脚本,document.getElementById('divTest').innerText= ...

  3. js常用数组字符串方法整理

    tips: 在js中基本涉及到区间的都是包头不包尾,如果是删除操作返回值一般为删除内容,关于查找的方法有一定的区别注意使用情况,另外一些可以配合正则表达式的方法也要留意 Array实例的所有方法 co ...

  4. JS学习--取整方法整理

    一. Math对象取整 Math对象提供静态方法: Math.ceil():向上取整 Math.floor():向下取整 Math.round():四舍五入 Math.ceil(2.4) // 3 M ...

  5. js中修改this的指向方法整理

    JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,Ja ...

  6. C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用...

    这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框架类库) 这些类是微软 ...

  7. js DOM Element属性和方法整理

    js DOM Element属性和方法整理 节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...

  8. js中text方法是啥意识_一盏茶的时间,快速捕获JS中常用的方法(细心整理,持续更新ing)...

    不知不觉上班一周辽-趁着大好周末,小编挣扎着从床上爬起来,决定对前端日常编程中常用到的一些方法做一个系统的整合. 有些人或许会觉得忘了百度就完事儿,no no no!这事儿小编真的亲践过好多次,百度一 ...

  9. 导图整理数组1: 总结了二分查找的通用模板写法, 彻底解决几个易混淆问题, 力扣35:搜索插入位置

    此专栏文章是对力扣上算法题目各种方法的总结和归纳, 整理出最重要的思路和知识重点并以思维导图形式呈现, 当然也会加上我对导图的详解. 目的是为了更方便快捷的记忆和回忆算法重点(不用每次都重复看题解), ...

  10. JS常见正则方法整理

    JS常见正则方法整理 目录 文章目录 前言 1. 使用测试方法 - `test` 2. 同时用多种模式匹配文字字符串 - `x|y` 3. 匹配时忽略大小写 - `/x/i` 4. 提取匹配项 - ` ...

最新文章

  1. android手机播放pc音乐播放器,最强手机音乐播放器?Foobar2K安卓版体验
  2. 性能超过人类炼丹师,AutoGluon 低调开源
  3. mysql 远程连接速度慢的解决方案
  4. 抗原试剂盒也卷起来了,我的塑料袋不会影响房价吧?
  5. 从薪资、需求来分析,武汉Java开发就业前景好不好?
  6. 990. Satisfiability of Equality Equations
  7. Ext JS - Combobox 加载下拉框数据 级联下拉框
  8. java Web监听器导图详解
  9. 大型网络架构变迁和知识图谱
  10. ruby学习笔记(3)--语法层面的先见之明
  11. 以虚拟现实骨灰级开发者视角,来看VR智能硬件平台
  12. Beta阶段第1周/共2周 Scrum立会报告+燃尽图 06
  13. 常用汉字2504个(无重复)
  14. pcm设备的注册流程
  15. MATLAB坐标轴(gca)的简单应用---MATLAB学习
  16. 轻松查询多个中通速递发出物流中含有某个城市的单号
  17. 栅格地图矢量化的一个思路
  18. WordPress自媒体网站迁移
  19. DDD(Domain-Driven Design 领域驱动设计) 与产品设计
  20. 高通SDX12:Keypad按键相关(PowerKey、Reset)

热门文章

  1. Java判断是否为移动端
  2. modbus学习笔记——帧
  3. Eclipse中servlet显示无法导入javax.servlet包问题的解决方案
  4. Mac下常用快捷键(转)
  5. [微信小程序]swiper保持宽高比
  6. CLR via C#深解笔记四 - 方法、参数、属性
  7. “代理XP”组件已作为此服务器安全配置的一部分被关闭
  8. 089 重用父类方法的两种方式
  9. 083 conllections模块
  10. github上预览Demo网页最简单的方法