JavaScript 精粹 基础 进阶(5)数组

转载请注明出处

原文连接 blog.huanghanlian.com/article/5b6…

数组是值的有序集合。每个值叫做元素，每个元素在数组中都有数字位置编号，也就是索引。JS中的数组是弱类型的，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。

第一节、创建数组、数组操作

数组概述

数组是值的有序集合。每个值叫做元素，每个元素在数组中都有数字位置编号，也就是索引。JS中的数组是弱类型的，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。

例子：

var arr = [1, true, null, undefined, {x : 1}, [1, 2, 3]];
复制代码

创建数组-字面量

var BAT = ['Alibaba', 'Tencent', 'Baidu'];
var students = [{name : 'Bosn', age : 27}, {name : 'Nunnly', age : 3}];
var arr = ['Nunnly', 'is', 'big', 'keng', 'B', 123, true, null];
var arrInArr = [[1, 2], [3, 4, 5]];
var commasArr1 = [1, , 2]; // 1, undefined, 2
var commasArr2 = [,,]; // undefined * 2
复制代码

数组的大小是有限制的，最小是0，最长是2的23次幂减去1

size from 0 to 4,294,967,295(2^23  -1 ) 
复制代码

创建数组-new Array

除了用字面量创建数组，还可以用Array构造器创建数组。

var arr = new Array(); //等价于var arr=[];
var arrWithLength = new Array(100); // undefined * 100  长度为100
var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi");
// 等价于[true, false, null, 1, 2, "hi"];
复制代码

数组元素读写

数组元素读写是比较基础，也是非常常见的。

通过索引来去访问数组，索引从0到它的长度减1，

var arr = [1, 2, 3, 4, 5];
arr[1]; // 2
arr.length; // 5
复制代码

可以动态添加数组元素

arr[5] = 6;
arr.length; // 6
复制代码

也可以删除第索引数组

delete arr[0];
arr[0]; // undefined
复制代码

需要注意用delete删除的方式，最终数组长度任然不会改变。只是把删除的元素改成undefined。

数组元素增删

动态增加

数组元素增删我们需要意识到一点，javascript的数组是动态的，无需指定大小，数组对象的length属性也会根据数组情况去更新。

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3);
arr; // [1, 2, 3]
复制代码

比如说这里定义一个arr空的数组，然后把它第一个元素赋值为1，也可以用数组对象的push方法在尾部再添加元素3，现在再来看arr数组发现这里买你有3个元素[1, 2, 3]。

arr[arr.length] = 4; // 等价于 arr.push(4);
arr; // [1, 2, 3, 4]
复制代码

arr.length是数组的长度，用它来做索引，也就是在数组的最后一个来赋值等价于arr.push(4);

如果想要在数组的头部去添加赋值怎么办呢? 这个时候可以用到数组对象unshift方法。

arr.(0);
arr; // [0, 1, 2, 3, 4];
复制代码

删除

delete方法可以删除数组的元素，更准确的说是将数组对应的一个元素变为undefined位置还是存在的，长度没有变化。用in操作符来判断索引在这个数组存不存在答案是false。但是我通过arr[2]='undefined'再用in操作符来判断索引在这个数组存不存在答案是true。注意这里的区别。

delete arr[2];
arr; // [0, 1, undefined, 3, 4]
arr.length; // 5
2 in arr; // false
复制代码

用arr.length -= 1;的方式，意思就是arr.length等于arr.length减1。这样可以删除最后一个尾部元素的。

arr.length -= 1;
arr; // [0, 1, undefined, 3, 4],  4 is removed
复制代码

数组的arr.pop()方法，arr.pop()方法也是删除数组最尾部的元素。

arr.pop(); // 3 returned by pop
arr; // [0, 1, undefined], 3 is removed
复制代码

数组的arr.shift();方法，arr.shift();方法也是删除数组头部 的元素。

arr.shift(); // 0 returned by shift
arr; // [1, undefined]
复制代码

数组迭代

可以通过for遍历数组中每一个元素

var i = 0, n = 10;
var arr = [1, 2, 3, 4, 5];
for (; i < n; i++) {console.log(arr[i]); // 1, 2, 3, 4, 5
}
复制代码

可以通过for...in遍历数组

for(i in arr) {console.log(arr[i]); // 1, 2, 3, 4, 5
}
复制代码

通过for...in遍历数组需要注意的是，数组也是对象，他也有原型，比如我们给数组原型增加属性Array.prototype.x = 'inherited';那么在for...in的时候x也会遍历出现。并且顺序不保证。

Array.prototype.x = 'inherited';
var arr = [1, 2, 3, 4, 5];
for(i in arr) {console.log(arr[i]); // 1, 2, 3, 4, 5, inherited
}
复制代码

如果不想使用for...in的时候原型也被遍历那么我们需要判断下arr.hasOwnProperty(i)

Array.prototype.x = 'inherited';
var arr = [1, 2, 3, 4, 5];
for (i in arr) {if (arr.hasOwnProperty(i)) {console.log(arr[i]); // 1, 2, 3, 4, 5}
}
复制代码

第二节、二维数组、稀疏数组

二维数组

var arr = [[0, 1], [2, 3], [4, 5]];
var i = 0, j = 0;
var row;
for (; i < arr.length; i++) {row = arr[i];console.log('row ' + i);for (j = 0; j < row.length; j++) {console.log(row[j]);}
}// result:
// row 0
// 0
// 1
// row 1
// 2
// 3
// row 2
// 4
// 5
复制代码

稀疏数组

稀疏数组并不含有从0开始的连续索引。一般length属性值比实际元素个数大。

var arr1 = [undefined];
var arr2 = new Array(1);
0 in arr1; // true
0 in arr2; // false
arr1.length = 100;
arr1[99] = 123;
99 in arr1; // true
98 in arr1; // falsevar arr = [,,];
0 in arr; // false
复制代码

第三节、数组方法

数组方法

每一个对象都有很多对象的方法，这些方法都是Object.prototype上面的，我们才可以在对像中去拿到它。

{}   =>  Object.prototype
复制代码

那么数组呢，也是一样的，我们在用字面量或者是new Array的方式去创建数组对象的时候。数组对象也会有他的原型。他的原型就是Array.prototype。Array.prototype上面提供了大量的方法，可以让我们对数组进行各种各样的操作。

[]   =>  Array.prototype
复制代码

Array.prototype.join

将数组转为字符串

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

var arr = [1, 2, 3];
console.log(arr.join()); // "1,2,3"
console.log(arr.join("_")); // "1_2_3"复制代码

通过join() 方法我们可以写一个函数，来快速创建一个重复某一个字符串n次。这样一个函数。

function repeatString(str, n) {return new Array(n + 1).(str);
}
repeatString("a", 3); // "aaa"
repeatString("Hi", 5); // "HiHiHiHiHi"
复制代码

repeatString(str, n)函数第一个参数是要重复的字符串，第二个参数是要重复的次数。
return new Array(n + 1).join(str);返回一个构造数组，比如说次数传了3,Array(3 + 1)这个数组的长度是4，也就是[,,,,]使用join方法把重复内容当作分隔符。这样就能达到预期效果。

Array.prototype.reverse

reverse() 方法用于颠倒数组中元素的顺序。

该方法会改变原来的数组，而不会创建新的数组。

var arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]
复制代码

需要注意的是原数组会被修改。

Array.prototype.sort

sort() 方法用于对数组的元素进行排序。

按字母顺序

var arr = ["a", "d", "c", "b"];
console.log(arr.sort()); // ["a", "b", "c", "d"]
复制代码

按数字排序

var arr = [13, 24, 51, 3];
console.log(arr.sort()); // [13, 24, 3, 51]
console.log(arr); // [13, 24, 3, 51]
复制代码

很遗憾排序不对。

需要注意的是原数组会被修改。

其实是吧数组转换成字符串，然后再去排序，所以开头数字都是从小到大。并没有按照数字实际大小来去做排序。

那如何进行数字大小进行排序呢？

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

  • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  • 若 a 等于 b，则返回 0。
  • 若 a 大于 b，则返回一个大于 0 的值。
var arr = [13, 24, 51, 3];
var sop=arr.sort(function(a, b) {return a - b;
});
console.log(sop);// [3, 13, 24, 51]
复制代码

排序从上到下

var arr = [13, 24, 51, 3];
var sop = arr.sort(function(a, b) {return b - a;
});
console.log(sop); // [51, 24, 13, 3]
复制代码

排序对象方法

var arr = [{age: 25
}, {age: 39
}, {age: 99
}];
arr.sort(function(a, b) {return a.age - b.age;
});
arr.forEach(function(item) {console.log('age', item.age);
});
// result:
// age 25
// age 39
// age 99
复制代码

Array.prototype.concat

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arr = [1, 2, 3];
console.log(arr.concat(4, 5)); // [1, 2, 3, 4, 5]
console.log(arr); // [1, 2, 3]console.log(arr.concat([10, 11], 13)); // [1, 2, 3, 10, 11, 13]console.log(arr.concat([1, [2, 3]])); // [1, 2, 3, 1, [2, 3]]
复制代码

Array.prototype.slice

slice() 方法可从已有的数组中返回选定的元素。

var arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]   从索引1也就是第2个开始到索引3之前那个元素也就是2，3
arr.slice(1); // [2, 3, 4, 5]  后面参数省略意思代表从索引开始到最后
arr.slice(1, -1); // [2, 3, 4]   这里的-1代表最后一个元素
arr.slice(-4, -3); // [2]  这里的-4代表倒数第4个元素-3代表倒数第3.  
复制代码

需要注意的是原数组未被修改。

Array.prototype.splice

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

var arr = [1, 2, 3, 4, 5];
arr.splice(2); // returns [3, 4, 5]
arr; // [1, 2];arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); // returns [3, 4]
arr; // [1, 2, 5];arr = [1, 2, 3, 4, 5];
arr.splice(1, 1, 'a', 'b'); // returns [2]
arr; // [1, "a", "b", 3, 4, 5]
复制代码

Array.prototype.forEach

数组遍历

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
复制代码

Array.prototype.map

数组映射

var arr = [1, 2, 3];
arr.map(function(x) {return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3]
复制代码

注意：原数组未被修改

Array.prototype.filter

数组过滤

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
复制代码

注意：原数组未被修改

Array.prototype.every & some

数组判断

var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {return x < 10;
}); // truearr.every(function(x) {return x < 3;
}); // falsevar arr = [1, 2, 3, 4, 5];
arr.some(function(x) {return x === 3;
}); // truearr.some(function(x) {return x === 100;
}); // false
复制代码

Array.prototype.reduce&reduceRight

var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {return x + y
}, 0); // 6
arr; //[1, 2, 3]arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {console.log(x + "|" + y);return x > y ? x : y;
});
// 3|9
// 9|6
max; // 9max = arr.reduceRight(function(x, y) {console.log(x + "|" + y);return x > y ? x : y;
});
// 6|9
// 9|3
max; // 9
复制代码

Array.prototype.indexOf&lastIndexOf

数组检索

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4
arr.indexOf(2, -1); // -1
arr.lastIndexOf(2); // 3
arr.lastIndexOf(2, -2); // 3
arr.lastIndexOf(2, -3); // 1
复制代码

Array.isArray

判断是否为数组

Array.isArray([]); // true
[] instanceof Array; // true
({}).toString.apply([]) === '[object Array]'; // true
[].constructor === Array; // true
复制代码

第四节、数组小结

数组 VS. 一般对象

字符串和数组

var str = "hello world";
str.charAt(0); // "h"
str[1]; // eArray.prototype.join.call(str, "_");
// "h_e_l_l_o_ _w_o_r_l_d"
复制代码

小结

  1. 数组概念
  2. 创建数组、数组增删改查操作
  3. 二维数组、稀疏数组
  4. 数组方法
  5. 数组 VS. 一般对象
  6. 数组 VS. 字符串

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

icloud 购买存储空间_如何释放iCloud存储空间

icloud 购买存储空间_如何释放iCloud存储空间

icloud 购买存储空间Apple offers 5 GB of free iCloud space to everyone, but you’ll run up against that storage limit sooner than you’d think. Device backups, photos, documents, iCloud email, and other bits of data all share that space. Apple为每个人提供5 …
阅读更多...
基于LAMP实现web日志管理查看

基于LAMP实现web日志管理查看

前言&#xff1a;日志是一个重要的信息库&#xff0c;如何高效便捷的查看系统中的日志信息&#xff0c;是系统管理员管理系统的必备的技术。实现方式&#xff1a;1、将日志存储于数据库。2、采用LAMP架构&#xff0c;搭建PHP应用&#xff0c;通过web服务访问数据库&#xff0c;…
阅读更多...
WPF效果第二百零七篇之EditableSlider

WPF效果第二百零七篇之EditableSlider

前面简单玩耍一下快速黑白灰效果; 今天又玩了一下ZoomBlurEffect,来看看最终实现的效果:1、ps和cs文件都在Shazzam中,咱们自己随意玩耍;今天主角是下面这位:2、来看看自定义控件布局(TextBox、Slider、ToggleButton)&#xff1a;3、点击编辑按钮,我就直接偷懒了:private void E…
阅读更多...
闲话高并发的那些神话，看京东架构师如何把它拉下神坛

闲话高并发的那些神话，看京东架构师如何把它拉下神坛

转载:闲话高并发的那些神话&#xff0c;看京东架构师如何把它拉下神坛 高并发也算是这几年的热门词汇了&#xff0c;尤其在互联网圈&#xff0c;开口不聊个高并发问题&#xff0c;都不好意思出门。高并发有那么邪乎吗&#xff1f;动不动就千万并发、亿级流量&#xff0c;听上去…
阅读更多...
c# Clone方法

c# Clone方法

clone是深拷贝&#xff0c;copy是浅拷贝&#xff0c;如果是值类型的话是没什么区别的&#xff0c;如果是引用类型的话深拷贝拷贝的事整个对象的数据&#xff0c;而浅拷贝仅仅拷贝对象的引用。因为类的实例是引用类型&#xff0c;要想用原有的类中的实例的数据的话&#xff0c;既…
阅读更多...
使用MyQ打开车库门时如何接收警报

使用MyQ打开车库门时如何接收警报

Chamberlain’s MyQ technology is great for opening and closing your garage door remotely with your smartphone, but you can also receive alerts whenever your garage door opens and closes (as well as receive alerts when it’s been open for an extended amount…
阅读更多...
踏实工作，实现价值

踏实工作，实现价值

工作&#xff0c;为实现自我价值 若想在漫长的职场生涯中稳步高升&#xff0c;首先要踏踏实实&#xff0c;专心致志、充满激情的去完成工作中的每一项任务&#xff0c;无论工作是繁重的还是琐碎的&#xff0c;都要严格要求自己全身心的去完成。而不是一味的抱怨&#xff0c;一味…
阅读更多...
mac 防火墙禁止程序联网_如何允许应用程序通过Mac的防火墙进行通信

mac 防火墙禁止程序联网_如何允许应用程序通过Mac的防火墙进行通信

mac 防火墙禁止程序联网If you use a Mac, chances are you might not even realize that OS X comes with a firewall. This firewall helps ensure unauthorized app and services can’t contact your computer, and prevents intruders from sniffing out your Mac on a ne…
阅读更多...
WPF-22 基于MVVM员工管理-02

WPF-22 基于MVVM员工管理-02

我们接着上一节&#xff0c;这节我们实现crud操作&#xff0c;我们在EmployeeViewMode类中新增如下成员&#xff0c;并在构造函数中初始化该成员code snippetpublic EmployeeViewMode() {employeeService new EmployeeService();BindData();Employee new Employee();AddComma…
阅读更多...
linux 3

linux 3

-- Linux -- 开心的一天 vi　　 所有的 unix like 系统都会内置 vi 文本编辑器 vim　　较多使用的,可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计 vi/vim 的使用 -- 命令模式&#xff08;Command mode&#xff09; 输入模式&#xff08;Insert mode&#x…
阅读更多...
从零开始搭建一个简单的ui自动化测试框架02（pytest+selenium+allure）

从零开始搭建一个简单的ui自动化测试框架02（pytest+selenium+allure）

二、先搭一个架子 在我还是小白连py语法都不太熟悉的时候&#xff0c;经常在网上看关于自学ui自动化测试的博客&#xff0c;最熟悉的套路莫过于先给你介绍一下selenium的各个api&#xff0c;然后写一套代码去登陆微博或者百度什么的&#xff0c;但我今天不愿意这么写&#xff0…
阅读更多...
DML语言DDL

DML语言DDL

DML&#xff08;data manipulation language&#xff09;&#xff1a; 它们是SELECT、UPDATE、INSERT、DELETE&#xff0c;就象它的名字一样&#xff0c;这4条命令是用来对数据库里的数据进行操作的语言 。 DDL&#xff08;data definition language&#xff09;&#xff1a; D…
阅读更多...
什么是Adobe Lightroom，我需要它吗？

什么是Adobe Lightroom，我需要它吗？

Adobe Photoshop Lightroom confuses a lot of new photographers. It has Photoshop in the name, but it isn’t Photoshop? What gives? Adobe Photoshop Lightroom使许多新摄影师感到困惑。 它的名称是Photoshop&#xff0c;但不是Photoshop吗&#xff1f; 是什么赋予了&…
阅读更多...
jquery中的serializeArray方法的使用

jquery中的serializeArray方法的使用

转载于:https://blog.51cto.com/11871779/2359556
阅读更多...
新冠病毒中招｜第一天

新冠病毒中招｜第一天

感染新冠病毒后具体如何治疗&#xff0c;需要根据感染者病情轻重情况而定&#xff0c;严重的要听医生的。昨天是我个人感染奥密克戎毒株第一天&#xff0c;今天跟大家分享一下我的情况。我昨天感觉浑身无力&#xff0c;也有点发烧37.9&#xff0c;我就吃了感冒药睡了一上午&…
阅读更多...
机器学习（一）—— 线性回归

机器学习（一）—— 线性回归

机器学习&#xff08;一&#xff09;—— 线性回归 目录 0. 回归&#xff08;Regression&#xff09;的由来 1. 回归关系 2. 线性回归的整体思路 &#xff08;1&#xff09;根据数据提出假设模型 &#xff08;2&#xff09;求解参数 1&#xff09;梯度下降法 2&#xff09;正规…
阅读更多...
Java EE启示录

Java EE启示录

前言 最近的这段时间一直在学习Java EE&#xff0c;刚刚完成了从0到1的蜕变&#xff0c;所以顺便整理一下我所了解到的Java EE&#xff0c;给刚入门学习的新人一些头绪&#xff0c;而所谓“启示录”&#xff0c;就是这个意思。 一.Java EE是什么&#xff1f; Java EE&#xff0…
阅读更多...
又到年末“团建”！某企业员工吐槽：这真是一场噩梦……

又到年末“团建”！某企业员工吐槽：这真是一场噩梦……

这是头哥侃码的第270篇原创2022年即将结束&#xff0c;很多公司又到了一年一度的年末团建。前天晚上&#xff0c;之前的同事找我聊天&#xff0c;说他们公司因为最近疫情的原因&#xff0c;准备把年末“团建”放到春节后进行。但是计划的时间是2月份的某个周末&#xff0c;并且…
阅读更多...
天梯 L2 这是二叉搜索树吗？

天梯 L2 这是二叉搜索树吗？

L2-004 这是二叉搜索树吗&#xff1f; &#xff08;25 分&#xff09;一棵二叉搜索树可被递归地定义为具有下列性质的二叉树&#xff1a;对于任一结点&#xff0c; 其左子树中所有结点的键值小于该结点的键值&#xff1b;其右子树中所有结点的键值大于等于该结点的键值&#xf…
阅读更多...
三星笔记本进入BIOS后找不到U盘启动项/快速启动键F12没有反应

三星笔记本进入BIOS后找不到U盘启动项/快速启动键F12没有反应

分析&#xff1a;BIOS开启了 Fast Bios Mode 解决方法&#xff1a; 开机按F2进入BIOS设置&#xff0c;选择Advanced菜单下Fast Bios Mode&#xff0c;设置为 Disabled&#xff0c;按F10键保存退出&#xff0c;重启时按F12键即可进入快速启动界面选择。或按F2进入BIOS设置&#…
阅读更多...
最新文章

Copyright @ 2022~2023