js中那些方法不改变原来的数组对象
一、map方法
- function fuzzyPlural(single) {
- var result = single.replace(/o/g, 'e');
- //replace也不会修改原来数组的值,这里打印[foot,goose,moose,kangaroo]
- //alert(single);
- //下面为新的数组添加了一个元素,但是我们看到在map的时候没有对添加的元素进行处理,所以map调用的结果还是没有变化:["feet", "geese", "meese", "kangareese"]
- //但是可以知道words结果已经变化了!
- //words[4]="metoo";
- //虽然下面通过修改length为3将数组截断了,从而相当于删除了第四个元素,但是map方法并不会检测到这种变化,所以在map方法调用的结果数组长度还是为4,只是最后一个元素变成了空了!但是这种删除会影响外层的words,使得他的长度变成了3!
- //但是在具体的fuzzyPlural只会调用三次!(通过alert(single)就可以知道,因为这里已经把数组截断了,但是返回的数组长度还是4,一个为空!)
- words.length=3;
- if( single === 'kangaroo'){
- result += 'se';
- }
- return result;
- }
- var words = ["foot", "goose", "moose", "kangaroo"];
- alert(words.map(fuzzyPlural));
- //map方法不修改原数组的值,words经过map调用以后,还是没有发生变化!
- alert(words);
- // ["feet", "geese", "meese", "kangareese"]
note:map方法的调用不会修改原来的数组,同时从上面分析来说replace方法也不会改变原来调用的字符串!同时我们上面用到了把length减少来删除数组元素的方法,但是这种方法比较笨拙,只能从数组尾部删除数据,同时数组也有delete删除方法,但是这种方法的不当之处在于他会在原来的数组中留下空洞,也就是原来的对象只是变成了undefined,而不是真正的删除。于是我们建议用splice方法,第一个参数是开始删除的下标,第二个参数是要删除的个数!同时要注意parseInt方法parseInt("1",0);会变成1!
二、concat方法
- var num1 = [1, 2, 3];
- var num2 = [4, 5, 6];
- var num3 = [7, 8, 9,"c"];
- var nums = num1.concat(num2, num3);
- //为老数组添加一个元素,看新数组是否会发生变化
- //打印[1,2,3,4,5,6,7,8,9,c]
- alert(nums);
- num3[4]="xxxx";
- //发现新数组没有发生变化
- alert(nums);
- //为num1添加一个元素
- num1[3]="cccc"
- //新数组也没有发生变化!
- alert(nums);
note:对新数组的任何操作不会影响老数组,反之亦然!因为这个方法会创建当前数组的一个副本,然后将接受的参数添加到这个副本的末尾!所以互不影响!
三、slice方法
- // 使用slice方法从myCar中创建一个newCar.
- var myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } };
- var myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
- var newCar = myCar.slice(0, 2);
- // 输出myCar, newCar,以及各自的myHonda对象引用的color属性.
- print("myCar = " + myCar.toSource());
- print("newCar = " + newCar.toSource());
- print("myCar[0].color = " + myCar[0].color);
- print("newCar[0].color = " + newCar[0].color);
- // 改变myHonda对象的color属性.
- myHonda.color = "purple";
- print("The new color of my Honda is " + myHonda.color);
- //输出myCar, newCar中各自的myHonda对象引用的color属性.
- print("myCar[0].color = " + myCar[0].color);
- print("newCar[0].color = " + newCar[0].color);
note:slice不会修改原来的数组,但是如果slice得到的结果数组包含了引用对象,那么如果修改原来的引用对象,,那么除了原来的被修改了以外,通过slice获取的结果的数组也会发生变化,这就是引用对象在slice中的表现!同时在上面的这篇博客里面我们要学到可以把类数组对象转化为数组对象有三种方法,Array.prototype.slice.call和[].slice.call,以及slice=Function.prototype.call.bind(Array.prototype.slice)然后通过slice(arguments)来完成!第三种用法还有一种去除两端空格的方法,a.map(Function.prototype.call,String.prototype.trim)
四、filter,forEach,some,every(只要有一个元素不满足就会终止循环)等
ps:(简单来说以下两种更直观:
有一个数组arr = [1, 2, 3, 4, 10]。
var str = new Array;
str = arr; //这个不是赋值,将数组arr的引用赋给str,所以改变str也会改变arr (js实际创建的str是一个对象);
正确赋值:
1、str = [].concat(arr);
或者:
str=arr.concat();
content用于连接多个数组:arr1.concat(arr2,arr3,。。。。)
2、str=arr.slice(0);
返回一个新数组,从0到最后。
(slice有两个参数:xx.slice(start,end),返回数组xx下标从start到end的元素。若未定义end则返回start到结尾。)
js中那些方法不改变原来的数组对象的更多相关文章
- js中apply方法的使用
js中apply方法的使用 1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- paip.编程语言方法重载实现的原理及python,php,js中实现方法重载
paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...
- js中settimeout方法加参数
js中settimeout方法加参数的使用. 简单使用看w3school 里面没有参数调用, 例子: <script type="text/javascript"> ...
- js中split()方法得到的数组长度
js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...
- 关于JS中的方法是否加括号的问题
js中的方法什么时候加括号什么时候不加括号呢,我们有时候经常就搞不清楚,记住下面这几点就好理解了. 1.函数做参数时都不要加括号. function fun(a){ alert(a); } funct ...
- js中的方法如何传入多个参数
js中的方法如何传入多个参数 $(function () { let parameter1 = 1; let parameter2 = 'Hello World'; let parameter3 = ...
- js 中的方法注入(aop)
js 中的方法注入 java中很多框架支持 apo 的注入, js中也可以类似的进行实现 主要是通过扩展js中方法的老祖 Function 对象来进行实现. Function.prototype.af ...
随机推荐
- Vue字符串padStart和padEnd方法
padStart()用于头部补全,padEnd()用于尾部补全. 'a'.padStart(3, '0') // '00a' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.pa ...
- 【大数据】Clickhouse基础知识
第1章 ClickHouse概述 1.1 什么是ClickHouse ClickHouse 是俄罗斯的Yandex于2016年开源的列式存储数据库(DBMS),主要用于在线分析处理查询(OLAP),能 ...
- 二〇一八-美团工程师面试解析(Java)
一轮面试: 小数是怎么存的 算法题:N二进制有多少个1 Linux命令(不熟悉 JVM垃圾回收算法 C或者伪代码实现复制算法 volatile 树的先序中序后序以及应用场景 Mysql存储记录的数据结 ...
- solr8.2 环境搭建 配置中文分词器 ik-analyzer-solr8 详细步骤
一.下载安装Apache Solr 8.2.0 下载地址:http://lucene.apache.org/solr/downloads.html 因为是部署部署在windows系统上,所以下载zip ...
- idou老师教你学Istio 27:解读Mixer Report流程
1.概述 Mixer是Istio的核心组件,提供了遥测数据收集的功能,能够实时采集服务的请求状态等信息,以达到监控服务状态目的. 1.1 核心功能 •前置检查(Check):某服务接收并响应外部请求前 ...
- tkinter_战队数据查询系统
# 导入tkinter模块 import tkinter from tkinter import ttk # 导入库 import pymysql # 创建主窗口对象 root = tkinter.T ...
- idea在springboot项目中显示Run Dashboard
1.Run->Edit Configurations 2.在Templates[Defaults]-> Configurations available in Run Dashboard ...
- 前端知识体系:JavaScript基础-作用域和闭包-闭包的实现原理和作用以及堆栈溢出和内存泄漏原理和相应解决办法
闭包的实现原理和作用 闭包: 有权访问另一个函数作用域中的变量的函数. 创建闭包的常见方式就是,在一个函数中创建另一个函数. 闭包的作用: 访问函数内部变量.保持函数在环境中一直存在,不会被垃圾回收机 ...
- C# GridView 的使用
1.GridView无代码分页排序: 1.AllowSorting设为True,aspx代码中是AllowSorting="True":2.默认1页10条,如果要修改每页条数,修改 ...
- STM32串口接收中断——基于HAL库
写在前面 最近需要使用一款STM32L4系列的芯片进行开发,需要学习使用HAL库.在进行串口中断使用的时候遇到了一些小麻烦,写下解决方案供大家参考. 1.UART相关的头文件引用错误 由于本人直接使用 ...