javascript数组的标准定义:一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量。在javascript中的数组有些不同,他们其实是特殊的对象,表示偏移量的索引是数组对象的属性(字符串)。效率上不如其他语言高。 使用数组创建数组
在这里创造的数组实际上都是一个对象,然后把对象的引用赋值给变量,实质上我们对数组的操作都是对引用进行操作。 读写数组// 读取数组 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()
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] 可变函数为数组增减元素添加
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] 删除
var arr = [1,2,3,4]; arr.pop(); // 4 console.log(arr); // [1, 2, 3] arr.shift(); // 1 console.log(arr); // [2, 3] 在数组中间添加或者删除元素还是 splice 方法,他接受参数:
// 添加 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] 为数组排序
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] 迭代方法不生成新的数组的迭代器方法
生成新数组的方法
二维数组和多维数组创建二维数组二维数组类似于一种行和列组成的数据表格。 在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 是否改变原数组
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方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。 它接受三个参数:
[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 (责任编辑:好模板) |