JavaScript引用类型Array实例分析

news2024/11/18 13:35:46

},
toString: function() {
return “Bruce”;
}//前端全栈开发交流圈:866109386
}//帮助1-3年前端人员,突破技术瓶颈,提升思维能力
var person2 = {
toLocaleString: function() {
return “Cindy”;
},
toString: function() {
return “David”;
}
}
var person = [person1, person2];
alert(person);//Alice,Bruce
alert(person.toString());//Alice,Bruce
alert(person.toLocaleString());//Cindy,David

##6、栈方法

**(1)push():**接收任意数量的参数,逐个添加到末尾,返回修改后数组的长度。

**(2)pop():**从数组末尾移除最后一项,数组的长度减一,返回移除的项。

var friends = new Array();
var len = friends.push(“Alice”,“Bruce”);
alert(len);//2
var friend = friends.pop();
alert(friend );//“Bruce”
alert(friends.length);//1

##7、队列方法

**(1)shift():**移除数组的第一项,数组的长度减一,返回移除的项。

**(2)unshift():**在数组前端添加任意数量的项,返回修改后数组的长度。

var friends = new Array();
var len = friends.unshift(“Alice”,“Bruce”);
alert(len);//2
var friend = friends.shift();
alert(friend );//“Alice”
alert(friends.length);//1

##8、重排序方法

**(1)reverse():**翻转数组项的顺序

**(2)sort():**按升序排列数组项

sort()方法会调用每项的toString()方法,然后比较得到的字符串。

var items=[0,1,3,15,18];
items.sort();
alert(items);//0,1,15,18,3

sort()方法可以接收一个比较函数作为参数:比较函数接收两个参数,若第一个参数应该位于第二个参数之前则返回一个负数;若两个参数相等则返回0;若第一个参数应该位于第二个参数之后则返回一个正数。

function compare(item1, item2) {
if (item1 < item2)
return -1;
else if (item1 > item2)
return 1;
else
return 0;//前端全栈学习交流圈:866109386
}//帮助1-3年前端人员,突破技术瓶颈,提升思维能力。
var items=[0,1,3,15,18];
items.sort(compare);
alert(items);//0,1,3,15,18

对于数值类型或其valueOf()方法会返回数值类型的对象类型,可以简写比较函数。

function compare(item1, item2) {
return item1 - item2;
}

##9、操作方法

**(1)concat():**基于当前数组中的所有项创建一个新数组。先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。若没有给concat()传递参数,则只是复制当前数组并返回副本;若传递给concat()的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组;若传递给concat()的不是数组,则这些值都简单地添加到结果数组的末尾。

var friends = [“Alice”, “Bruce”];
var newFriends = friends.concat(“Cindy”, [“David”, “Emy”]);
alert(newFriends);//Alice,Bruce,Cindy,David,Emy

**(2)slice():**基于当前数组的一或多项创建一个新数组。接收一或两个参数,即要返回项的开始和结束位置(不包括结束位置)。slice()方法不会影响原始数组。若参数中有负数,则用数组长度加上该负数来确定相应的位置。若结束位置小于开始位置,则返回空数组。

var friends = [“Alice”, “Bruce”, “Cindy”];
var friends1 = friends.slice(1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 2);
alert(friends2);//Bruce

splice():主要用途是向数组的中部插入项,返回一个包含从原始数组中删除的项的数组,若没有删除任何项,则返回空数组。使用方式有3种:

**1)删除:**可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。

**2)插入:**可以向指定位置插入任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入任意数量的项。

**3)替换:**可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入任意数量的项。插入的项数不必和删除的项数相等。

var friends = [“Alice”, “Bruce”, “Cindy”];
var friends1 = friends.splice(0, 1);
alert(friends1);//Bruce,Cindy
var friends2 = friends.slice(1, 0, “David”, “Emy”);
alert(friends2);//Bruce,David,Emy,Cindy
var friends3 = friends.slice(1, 1, “Fancy”, “Gary”);
alert(friends3);//Bruce,Fancy,Gary,Emy,Cindy

##10、位置方法

**(1)indexOf():**接收两个参数——要查找的项和可选的查找起点位置的索引,从开头开始查找,没找到则返回-1。

**(2)lastIndexOf():**接收两个参数——要查找的项和可选的查找起点位置的索引,从末尾开始查找,没找到则返回-1。

在比较第一个参数与数组中的每一项时,会使用全等操作符,也就是要求查找的项必须严格相等。

var person = {name : “Alice”};
var people1 = [{name : “Alice”}, person];
alert(people1.indexOf(person));//1,不是0

11、迭代方法

ECMAScript数组有5个迭代方法。每个方法接收两个参数——要在每一项上运行的函数和可选的运行该函数的作用域对象(影响this的值)。传入的函数接收三个参数——数组项的值、该项在数组中的位置和数组对象本身。

**(1)every():**对数组中的每一项运行给定函数,若该函数对每一项都返回true,则返回true。

**(2)some():**对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

**(3)filter():**对数组中的每一项运行给定函数,若该函数对每一项都返回true,则返回true。

**(4)foreach():**对数组中的每一项运行给定函数,无返回值。

**(5)`map()``:**对数组中的每一项运行给定函数,若该函数对每一项都返回true,则返回true。

var nums = [1,2,3,4,1,2,3];
var every = nums.every(function(item, index, array) {
return (item > 2); // 前端全栈学习交流圈:866109386
});//帮助1-3年经验前端人员,突破技术瓶颈,提升思维能力
alert(every);//false
var some = nums.some(function(item, index, array) {
return (item > 2);
});
alert(some);//true
var filter = nums.filter(function(item, index, array) {
return (item > 2);
});
alert(filter);//[3,4,3]
var map = nums.map(function(item, index, array) {
return (item * 2);
});
alert(map);//[2,4,6,8,2,4,6]
nums.foreach(function(item, index, array) {

});

##12、归并方法

迭代数组的所有项,然后构建一个最终返回的值。接收两个参数——一个在每一项上调用的函数和可选的作为归并基础的值。传入的函数接收四个参数——前一个值、当前值、项的索引和数组对象。函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。

**(1)reduce():**从数组的第一项开始,逐个遍历到最后。

var items = [1,2,3,4];

总结

根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。

这里分享一些前端学习笔记:

  • html5 / css3 学习笔记

  • JavaScript 学习笔记

  • Vue 学习笔记

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1858593.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React的生命周期函数详解

import React,{Component} from "react";import SonApp from ./sonAppclass App extends Component{state{hobby:爱吃很多好吃的}// 是否要更新数据&#xff0c;这里返回true才会更新数据shouldComponentUpdate(nextProps,nextState){console.log("app.js第一步…

算法06 贪心算法【C++实现】

我们可以扮演一个贪心的人&#xff0c;在金子、银、铁中选择装入背包带走的话&#xff0c;作为一个贪心的人&#xff0c;肯定要把价值最大化&#xff0c;优先要选择装载价值较高的金子。 目录 什么是贪心算法 证明方法 常见题型 常见题型解法 训练&#xff1a;小木船过河 …

富士施乐M268DW加粉清零方法

基本参数&#xff1a; 品牌型号&#xff1a;富士施乐(Fuji Xerox) M268DW 产品类型&#xff1a;A4黑白激光多功能一体机&#xff08;三合一&#xff09;&#xff0c;打印、复印、扫描 打印情况&#xff1a;30张/分&#xff0c;1200dpi最大分辨率&#xff0c;64M内存 最大月…

Tomcat多实例配置

目录 一. 复制程序文件 二. 启动tomcat多实例 三. Tomcat多实例负载均衡 多实例&#xff08;多进程&#xff09;&#xff1a;同一个程序启动多次&#xff0c;分为两种情况: 第一种&#xff1a;一台机器跑多个站点&#xff1b; 第二种&#xff1a;一个机器跑一个站点多个实…

JeecgFlow并行网关概念及案例演示

概念讲解 并行网关能够在一个流程中用于进行并发建模处理&#xff0c;将单条线路拆分成多条路径并行执行&#xff0c;或者将多条路径合并处理。 在一个流程模型中引入并发最直接的网关就是并行网关&#xff0c;它基于进入和外出顺序流&#xff0c;有分支和合并两种行为&#xf…

存储无界限:MK米客方德SD NAND系列,小容量到大容量的全方位覆盖

在这个数字化飞速前进的时代&#xff0c;数据存储的需求日益增长&#xff0c;不同的应用场景对存储容量的要求也各不相同。MK米客方德公司以其SD NAND系列产品&#xff0c;凭借其广泛的容量覆盖&#xff0c;从1Gb到512Gb&#xff0c;为各种应用场景提供了完美的存储解决方案。今…

AWS WAF 中的验证码和挑战 | 网页抓取时如何解决这个问题

正如许多企业或爬虫用户所知&#xff0c;AWS WAF&#xff08;Web 应用防火墙&#xff09;是一个强大的安全解决方案&#xff0c;旨在保护 Web 应用免受常见的网络攻击和漏洞。其关键功能之一是使用 CAPTCHA 和挑战来区分合法用户和潜在的恶意机器人。虽然这增强了安全性&#x…

session 共享、Nginx session 共享、Token、Json web Token 【JWT】等认证

.NET JWT JWT 》》Json Web Token header . payload . Signature 三部分组成 JWT 在线生成 》》 https://jwt.io/ 》》https://tooltt.com/jwt-encode/ 》》解码工具 https://tool.box3.cn/jwt.html JWT 特点 无状态 JWT不需要在服务端存储任何状态&#xff0c;客户端可以携…

华为开发者大会闪耀东莞,康佳电视携手海思惊艳亮相

近日&#xff0c;华为开发者大会&#xff08;HDC2024&#xff09;在东莞松山湖举行。 作为电视领域唯一受邀参展的品牌&#xff0c;康佳电视以其优秀的创新实力&#xff0c;携手华为海思共同展示了基于OpenHarmony Standard层级的鸿鹄媒体创新方案。该方案不仅能够为用户带来更…

网络构建关键技术_1.网络高可用设计

1.网络高可用性概述 随着网络快速发展及应用日益深入&#xff0c;各种核心和增值业务在网络上广泛部署&#xff0c;网络的作用愈来愈凸显出来。即使网络出现短时间中断&#xff0c;都可能对业务带来比较大的影响&#xff0c;甚至给企业造成一定程度的经济损失。因此&#xff0c…

LeetCode 算法:对称二叉树 c++

原题链接&#x1f517;&#xff1a;对称二叉树 难度&#xff1a;简单⭐️ 题目 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;ro…

FreeRTOS实时操作系统

1.认识实施操作系统 1.1 裸机和实时操作系统 裸机&#xff1a; 早期嵌入式开发没有嵌入式操作系统的概念&#xff0c;直接操作裸机&#xff0c;在裸机上写程序&#xff0c;比如用51单片机基本就没有操作系统的概念。 通常把程序设计为前后台系统&#xff0c;主要分为两部分&a…

路由(urls)

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 Django的URL路由流程&#xff1a; l Django查找全局urlpatterns变量&#xff08;urls.py&#xff09;。 l 按照先后顺序&#xff0c;对URL逐一匹…

我做个人站长 7 年的经验,最痛的莫过于。。

大家好&#xff0c;我是程序员鱼皮&#xff0c;从大学期间上线个人博客网站开始&#xff0c;我做个人站长已经有 7 年多了。在这个过程中&#xff0c;我收获了很多&#xff0c;除了技术成长带来的快乐外&#xff0c;个人站长最开心的莫过于有用户使用、并且留下好评&#xff0c…

数据库精选题(七)(综合模拟题二)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;数据库 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 一、名词解释 1、事务 2、弱实体集 3、正…

顶尖项目经理都在用的SOP

接受任务SOP 了解任务背景了解任务目标&#xff08;包含deadline&#xff09;拆解任务&#xff0c;确认负责人执行方案审批确认跟进执行并定期汇报验收结果&#xff0c;进行反馈相关文档存档&#xff0c;形成闭环 推进任务SOP - PDCA循环 制定计划 Plan。依据目标&#xff0c…

【面试题】面试小技巧:如果有人问你 xxx 技术是什么?_面试问你对什么技术特别了解

前端工程越来越大&#xff0c;前面几种方案不能很好的支持单元测试。 在这样的背景下&#xff0c;React 诞生了。React 带来了新的思维模式&#xff0c;UI fn(props)&#xff0c;React 中一个组件就是一个函数或者一个类&#xff0c;一个函数或者一个类就是一个基础单位&…

OpenFeign 的请求处理流程

流程 1. 定义 Feign 客户端接口 首先&#xff0c;开发者需要定义一个 Feign 客户端接口&#xff0c;并使用 FeignClient 注解进行配置。例如&#xff1a; FeignClient(name "aService", url "http://localhost:8080") public interface ServiceProvid…

数据库 复习题

有一个关系模式&#xff1a;工程关系&#xff08;工程号&#xff0c;工程名称&#xff0c;职工号&#xff0c;姓名&#xff0c;聘期&#xff0c;职务&#xff0c;小时工资率&#xff0c;工时&#xff09;&#xff0c;公司按照工时和小时工资率支付工资&#xff0c;小时工资率由…

【面试题】马上金九银十了,简历该准备起来了,面试题你准备好了吗 ?浅谈 JS 浅拷贝和深拷贝

代码展示 let obj_old {name: Tom,age: 15,favorite: {food: bread,drink: milk} } let obj_new {...obj_old} console.log(obj_old obj_new) // false console.log(obj_old.name obj_new.name) // true console.log(obj_old.favorite obj_new.favorite) // true3. Ar…