转载

javascript 中的数组使用

tip

系统学习 Array 对象的笔记。

javascript 中的数组使用

定义

数组的标准定义：一个存储元素的线性集合，元素可以通过索引来任意存取，索引通常是数字，用来计算元素之间存储位置的偏移量。在javascript中的数组有些不同，他们其实是特殊的对象，表示偏移量的索引是数组对象的属性（字符串）。效率上不如其他语言高。

使用数组

创建数组

  • 通过 var arr1 = [1,2,3]
  • 使用 new var arr2 = new Array(1,2,3) （注意：如果里面传入的是一个数字，比如 10 ，是定义一个 length 为10的数组，每一个元素都是 undefined ）

在这里创造的数组实际上都是一个对象，然后把对象的引用赋值给变量，实质上我们对数组的操作都是对引用进行操作。

读写数组

// 读取数组
var arr1 = [1,2,3,4];
for(var i = 0; i < arr1.length; i++) {
 console.log(arr1[i]);
}
// 改变数组值
var arr2 = [];
for(var i = 0; i < 10; i++) {
 arr2[i] = i;
}

我们可以用 [] 读取到索引的数组，同时也可以对他进行赋值改变的操作。

由字符串生成数组

可以调用字符串对象的 split() 方法通过一个字符串生成一个数组。 

var sentence = 'hello world haha hahahha';
var words = sentence.split(' ');
console.log(words);
// ["hello", "world", "haha", "hahahha"]

我们用空格号来切分了 sentence 这个字符串。

对数组进行整体性操作

把一个数组赋给另一个数组。 

var arr1 = [1,2,3,4];
var arr2 = arr1;

这里 arr2 等于 arr1 了，但是别忘了，在 javascript 里面数组是一个对象，所以赋值的只是一个新的引用！如果我们修改了 arr2 会怎么样呢？ 

var arr1 = [1,2,3,4];
var arr2 = arr1;
arr2[4] = 5;
console.log(arr1);
// [1, 2, 3, 4, 5]

看见没有，arr2 改变了 arr1 也改变了，他们都是指向同一个数组对象，这种复制叫做浅复制。

现在我们有一个更好的方案－深复制：

function copyArr(arr) {
 var _arr = [];
 for(var i = 0; i < arr.length; i++) {
  _arr[i] = arr[i];
 }
 return _arr;
}
var arr0 = [1,2,3,4];
var arr1 = copyArr(arr0);
console.log(arr1);
// [1, 2, 3, 4]
arr1[4] = 5;
console.log(arr0);
// [1, 2, 3, 4]
console.log(arr1);
// [1, 2, 3, 4, 5]

可以看到我们用循环遍历把 arr0 的元素复制给 arr1 的对应索引量的元素，改变 arr1，arr0 不改变。当然这还是存在一些问题，比如这是个二维数组呢？数组嵌套再嵌套数组呢？可以在for循环里面判断元素是否数组，然后递归。

存取函数

查找元素

indexOf() 是最常用的了，他接受一个参数，然后查找数组中元素等于这个参数值的第一个元素，返回对应的索引值，如果没有找到这个参数，返回 -1 ，如果由多个，返回第一个的索引值。 

var arr = [1,2,3,4,3,5];
console.log( arr.indexOf(2) );
// 1
console.log( arr.indexOf(6) );
// -1
console.log( arr.indexOf(3) );
// 2

还有一个对应的函数是 lastIndexOf() 他是从后面查找起的，对于多个，会返回查找到的第一个的索引值。 

var arr = [1,2,3,4,3,5];
console.log( arr.lastIndexOf(2) );
// 1
console.log( arr.lastIndexOf(6) );
// -1
console.log( arr.lastIndexOf(3) );
// 4

数组的字符串表示

把数组转换成一个字符串有两个方法： toString() 和 join() 前者是生成用 , 分割开每个元素的字符串，后者可以传入一个参数来指导用这个参数值来隔开，上代码： 

var arr = ['a', 'b', 'c'];
console.log( arr.toString() ); // a,b,c
console.log( arr.join('-') ); // a-b-c

由已有的数组创建新数组

方法有 concat() 和 splice() 和 slice()

  • concat() 接受多个数组作为参数，返回和他们合并的一个数组；
  • splice() 截取一个数组的子集返回一个新数组；（会改变原数组）
  • slice() 截取一个数组的子集： 
    var arr1 = [1,2,3,4];
    var arr2 = [5,6];
    var arr3 = [8];
    var arr4 = arr1.concat(arr2, arr3);
    console.log(arr4);
    // [1, 2, 3, 4, 5, 6, 8]
var arr1 = [1,2,3,4,5,6,7,8];
var arr2 = arr1.splice(2, 4); // 第一个参数是截取位置开始的索引值，第二个是截取的长度
console.log(arr2);
// [3, 4, 5, 6]

var arr3 = [1,2,3,4];
var arr4 = arr3.slice(1,3);
// [2, 3]

可变函数

为数组增减元素

添加

  • push() 将一个元素添加到数组的末尾，返回被添加的元素；
  • unshift() 将一个元素添加到数组开头，返回被添加的元素； 
var arr = [1,2,3,4];
arr.push(5); // 5
console.log(arr);
// [1, 2, 3, 4, 5]
arr.unshift(0); // 0
console.log(arr);
// [0, 1, 2, 3, 4, 5]

删除

  • pop() 删除数组末尾的一个元素，返回这个元素值；
  • shift() 删除数组开头的一个元素，返回这个元素值； 
var arr = [1,2,3,4];
arr.pop(); // 4
console.log(arr);
// [1, 2, 3]
arr.shift(); // 1
console.log(arr);
// [2, 3]

在数组中间添加或者删除元素

还是 splice 方法，他接受参数：

  • 启始索引
  • 需要删除的数组个数（添加元素的时候可以是0）
  • 需要添加进数组的元素
// 添加
var arr1 = [1,2,3,4,5];
arr1.splice(2, 0, 10);
console.log(arr1);
// [1, 2, 10, 3, 4, 5]

// 删除
var arr2 = [1,2,3,4,5];
arr2.splice(2, 1);
console.log(arr2);
// [1, 2, 4, 5]

为数组排序

  • reverse() 可以使数组反转；
  • sort() 排序，可以接受一个排序规则函数作为参数； 
var arr = [1,2,3,4];
arr.reverse();
console.log(arr);
// [4, 3, 2, 1]
var arr = [23, 11, 8, 24, 55, 43];
arr.sort(function(a1, a2) {
 return a1 - a2;
});
// [8, 11, 23, 24, 43, 55]

迭代方法

不生成新的数组的迭代器方法

  • forEach() ，他接受一个函数作为参数，函数接受两个参数：当前元素值、当前元素索引，单纯遍历数组： 

    var arr = [10,20,30,40,50,60];
    arr.forEach(function(item, idx) {
     console.log(item);
     console.log(idx);
    });

  • every() 接受一个返回值为布尔类型的函数为参数，对数组中每个元素使用该函数，如果全都是返回 true 则该方法返回 true ，如果有一个以上返回 false ，那么该方法返回 false ； 

    var arr = [1,2,3,4,5,6];
    var b1 = arr.every(function(item, idx) {
     return item >= 1;
    });
    console.log(b1); // true
    var b2 = arr.every(function(item, idx) {
     return item >= 2;
    });
    console.log(b2); // false

  • some() 方法，其实和 every() 方法很像，顾名思义，如果返回的有一个结果是 true 则返回 true ，如果全是 false ，则返回 false ; 

    var arr = [1,2,3,4,5,7];
    var b1 = arr.some(function(item, idx) {
     return item > 5;
    });
    console.log(b1); // true
    var b2 = arr.some(function(item, idx) {
     return item > 8;
    });
    console.log(b2); // false

  • reduce() 方法，他接受两个参数：一个函数、一个初始值（可不传），函数接受4个参数：之前一次遍历的返回值（第一次的话就是初始值）、当前元素值、当前元素索引、被遍历的数组，函数返回一个值。他会从一个累加之开始不断对后面的元素调用该函数； 

    var arr = [1,2,3,4,5,6];
    var sum = arr.reduce(function(runningTotal, currentValue) {
     return runningTotal + currentValue;
    }, 10);
    console.log(sum); // 31

  • reduceRight() 方法，它其实和 reduce() 方法一样，区别是他是从数组的右边开始累加到左边的。

生成新数组的方法

  • map() 方法接受一个函数，这个函数处理每一个元素并返回一个新的值，然后方法会返回这些值组成的一个新数组。 

    var arr = [1,2,3,4,5];
    var arr2 = arr.map(function(item, idx) {
     return item + idx;
    });
    console.log(arr2);
    // [1, 3, 5, 7, 9]

  • filter() 方法接受一个函数，函数返回一个布尔类型的值，最后方法返回的数组是被函数返回 true 的元素的集合，顾名思义，就是过滤。 

    var arr = [1,2,3,4,5,6,7,8];
    var arr2 = arr.filter(function(item, idx) {
     return item % 2 === 0;
    });
    console.log(arr2);
    // [2, 4, 6, 8]

二维数组和多维数组

创建二维数组

二维数组类似于一种行和列组成的数据表格。

在javascript里面定义二维数组，可以扩展javascript的数组对象：

Array.matrix = function(numrows, numcols, initial) {
 var arr = [];
 for(var i = 0; i < numrows; i++) {
  var colnums = [];
  for(var j = 0; j < numcols; j++) {
   colnums[j] = initial;
  }
  arr[i] = colnums;
 }
 return arr;
}
var nums = Array.matrix(3,4,9);

处理二位数组中的元素

var arrs = [[1,2,3], [33,44,55], [12,23,34], [999, 000, 666]];
var total = 0;
for(var row = 0; row < arrs.length; row++) {
 for(var col = 0; col < arrs[row].length; col++) {
  total += arrs[row][col];
 }
}
console.log(total); // 1872

是否改变原数组

  • 1.不改变原有数组：
    • indexOf
    • lastIndexOf
    • toString
    • join
    • concat
    • slice
    • some
    • forEach
    • every
    • filter
    • map
    • reduce
    • reduceRight
  • 2.改变数组：
    • splice
    • push
    • pop
    • shift
    • unshift
    • reverse
    • sort

es6 中的新特性

Array.from()

Array.from 方法可以将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

下面是一个类似数组的对象，Array.from将它转为真正的数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of()

Array.of 方法用于将一组值，转换为数组。

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

就是之前说的在用 new 构造一个数组的时候，如果传入的是一个数字，那么返回的是一个该长度的数组：

var arr0 = new Array(2);
console.log(arr0);
// []
arr0.length; // 2

如果使用 Array.of : 

var arr0 = Array.of(2);
console.log(arr0);
// [2]

var arr1 = Array.of(1,2,3);
console.log(arr1);
// [1,2,3]

数组实例的copyWithin()

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

它接受三个参数：

  • target（必需）：从该位置开始替换数据。
  • start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
  • end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

数组实例的find()和findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 

[1, 4, -5, 10].find((n) => n < 0)
// -5

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 

[1, 4, -5, 10].find((n) => n < 0)
// 2

数组实例的fill()

fill 方法使用给定值，填充一个数组。 

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。 

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

数组实例的entries()，keys()和values()

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。 

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

数组实例的includes()

Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于ES7，但Babel转码器已经支持。 

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。 

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
原文  http://qiutc.me/post/javascript-array.html
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Java设计模式 Jenkins进阶系列 openfire参考指南 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 Ant教程 java实例教程 SpringCloud Elastic-Job-Lite XStream教程 深入浅出MyBatis Hazelcast教程 springcloud-demo ibaties教程 SVN教程 rabittmq教程 WebService CXF学习 solr教程 Hadoop教程 JPA教程 ActiveMQ中文指南 java-demo Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 Python3访问MySQL数据库快速入门Demo
  2. 2 Github开源项目作者可以免费申请 JetBrains 全家桶
  3. 3 Spring Cloud Vault快速入门Demo
  4. 4 Spring Cloud Gateway快速入门Demo
  5. 5 Spring Cloud Contract快速入门Demo
  6. 6 Spring Cloud Consul快速入门Demo
  7. 7 Spring Boot集成SQL Server快速入门Demo
  8. 8 如何自己实现事件的订阅和发布呢？
  9. 9 Java字节码增强库ByteBuddy
  10. 10 如何找出爬取网站的罪魁祸首？
网站信息
  • 文章总数：82,712 篇
  • 文件总数：284,281 个
  • 标签总数：2,391 个
  • 分类总数：85 个
  • 留言数量：2,560 条
  • 在线人数：657 人
  • 运行天数：4,405天
  • 最后更新：2024年11月18日13点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG