第 2 章 数组
1. 创建和初始化数组
var arr = new Array();
var arr = new Array(7);
var arr = new Array('aa','bb');
或:
var arr = [];
var arr = ['aa','bb'];
arr.length //数组长度
访问元素和迭代数组
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
2. 添加元素
var arr = [1,2,3];
arr[arr.length] = 4;
2.1 使用 push 方法(添加到数组末尾)
arr.push(5);
arr.push(6,7);
2.2 使用 unshift 方法(插入元素到数组首位)
arr.unshift(0);
arr.unshift(-2,-1);
原理:
for (var i=arr.length; i>=0; i--){
arr[i] = arr[i-1];
}
arr[0] = 0;
3. 删除元素
3.1 使用 pop 方法(删除数组里最靠后的元素)
arr.pop();
3.2 使用 shift 方法(从数组首位删除元素)
arr.shift();
原理:
for (var i = 0; i < arr.length; i++){
arr[i] = arr[i+1];
}
4. 在任意位置添加或删除元素
使用 splice 方法(通过指定位置/索引添加或删除相应位置和数量的元素)
arr.splice(1,2); // 从数组索引1开始删除2个元素
arr.splice(1,0,7,8,9); // 从数组索引1开始添加3个元素
arr.splice(1,2,7,8,9);//从数组索引1开始删除2个元素,并从索引1开始添加3个元素
5. 二维和多维数组
function printArr(matrix){
for(var i=0;i<matrix.length;i++){
for(var j=0;j<matrix[i].length;j++){
console.log(matrix[i][j])
}
}
}
3×3×3:
for (var i=0; i<arr.length; i++){
for (var j=0; j<arr[i].length; j++){
for (var z=0; z<arr[i][j].length; z++){
console.log(arr[i][j][z]);
}
}
}
6. Javascript 数组方法参考
方法名 | 描述 |
---|---|
concat | 连接2个或更多数组,并返回结果 |
every | 对数组中的每一项运行给定函数,如果该函数对每一项都返回 true ,则返回 true |
filter | 对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组 |
forEach | 对数组中的每一项运行给定函数。这个方法没有返回值 |
join | 将所有的数组元素连接成一个字符串 |
indexOf | 返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1 |
lastIndexOf | 返回在数组中搜索到的与给定参数相等的元素的索引里最大的值 |
map | 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组 |
reverse | 颠倒数组中元素的顺序,原先第一个元素现在变成最后一个,同样原先的最后一个元素变成了现在的第一个 |
slice | 传入索引值,将数组里对应索引范围内的元素作为新数组返回 |
some | 对数组中的每一项运行给定函数,如果任一项返回 true ,则返回 true |
sort | 按照字母顺序对数组排序,支持传入指定排序方法的函数作为参数 |
toString | 将数组作为字符串返回 |
valueOf | 和 toString 类似,将数组作为字符串返回 |
6.1 数组合并 (concat)
var num = 0;
var arr1 = [1,2,3];
var arr2 = [-3,-2,-1];
var nums = arr2.concat(num,arr2);//[-3,-2,-1,0,1,2,3]
6.2 迭代器函数
var isEven = function(x){
console.log(x)
return (x % 2 == 0);
};
var nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
1. 用 every 方法迭代( every 方法会迭代数组中的每个元素,直到返回 false )
nums.every(isEven); //1
2. 用 some 方法迭代( some 方法会迭代数组的每个元素,直到函数返回 true)
nums.some(isEven);//1,2
3. 用 forEach 方法迭代(迭代整个数组,与for循环相同)
nums.forEach(isEven);
4. 使用 map 和 filter 方法
var myMap = nums.map(isEven);// [false, true, false, true, false, true, false, true,false, true, false, true, false, true, false]
var myFilter = nums.filter(isEven);//[2, 4, 6, 8, 10, 12, 14]
5. 使用 reduce 方法
nums.reduce(function(preVal,currVal,index,arr){
return preVal + currVal;
});//120
6.3 ECMAScript 6 和数组的新功能
方 法 | 描 述 |
---|---|
@@iterator | 返回一个包含数组键值对的迭代器对象,可以通过同步调用得到数组元素的键值对 |
copyWithin | 复制数组中一系列元素到同一数组指定的起始位置 |
entries | 返回包含数组所有键值对的 @@iterator |
includes | 如果数组中存在某个元素则返回 true ,否则返回 false 。ES7新增 |
find | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素 |
findIndex | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素在数组中的索引 |
fill | 用静态值填充数组 |
from | 根据已有数组创建一个新数组 |
keys | 返回包含数组所有索引的 @@iterator |
of | 根据传入的参数创建一个新数组 |
values | 返回包含数组中所有值的 @@iterator |
ES6和ES7新增的数组方法。
方 法 | 描 述 |
---|---|
@@iterator | 返回一个包含数组键值对的迭代器对象,可以通过同步调用得到数组元素的键值对 |
copyWithin | 复制数组中一系列元素到同一数组指定的起始位置 |
entries | 返回包含数组所有键值对的 @@iterator |
includes | 如果数组中存在某个元素则返回 true ,否则返回 false 。ES7新增 |
find | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素 |
findIndex | 根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素在数组中的索引 |
fill | 用静态值填充数组 |
from | 根据已有数组创建一个新数组 |
keys | 返回包含数组所有索引的 @@iterator |
of | 根据传入的参数创建一个新数组 |
values | 返回包含数组中所有值的 @@iterator |
6.3.1 使用 forEach 和箭头函数迭
nums.forEach(function(x){
console.log(x%2==0);
});
num.forEach(x => {console.log(x%2==0)})
6.3.2 使用 for...of 循环迭代
for(let n of nums){ //n 代表数组中每一项
console.log((n%2==0)?'even':'odd');
}
6.3.3 使用ES6新的迭代器( @@iterator )
ES6还为 Array 类增加了一个 @@iterator 属性,需要通过 Symbol.iterator 来访问。
let iterator = nums[Symbol.iterator]();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // 4
console.log(iterator.next().value); // 5
数组的 entries 、 keys 和 values 方法
1. entries 方法返回包含键值对的 @@iterator
let aEntries = nums.entries(); // 得到键值对的迭代器
console.log(aEntries.next().value); // [0, 1] - 位置0的值为1
console.log(aEntries.next().value); // [1, 2] - 位置1的值为2
console.log(aEntries.next().value); // [2, 3] - 位置2的值为3
2. keys 方法返回包含数组索引的 @@iterator
let aKeys = nums.keys(); // 得到数组索引的迭代器
console.log(aKeys.next()); // {value: 0, done: false }
console.log(aKeys.next()); // {value: 1, done: false }
console.log(aKeys.next()); // {value: 2, done: false }
3. values 方法返回的 @@iterator 则包含数组的值
let aValues = nums.values();
console.log(aValues.next()); // {value: 1, done: false }
console.log(aValues.next()); // {value: 2, done: false }
console.log(aValues.next()); // {value: 3, done: false }
6.3.4 使用 from 方法(根据已有的数组创建一个新数组)
let nums2 = Array.from(nums);
let evens = Array.from(nums,x => {x%2==0});
6.3.5 使用 Array.of 方法(根据传入的参数创建一个新数组)
let num3 = Array.of(1);
let num4 = Array.of(1, 2, 3, 4, 5, 6);
等价于:
let num3 = [1];
let num4 = [1, 2, 3, 4, 5, 6];
复制已有数组:
let numCopy = Array.of(...num4);
6.3.6 使用 fill 方法(用静态值填充数组。参数:填充数、开始索引、结束索引)
let numCopy = Array.of(1, 2, 3, 4, 5, 6);
numCopy.fill(0); // [0,0,0,0,0,0]
numCopy.fill(2, 1); // [0,2,2,2,2,2]
numCopy.fill(1, 3, 5); // [0,2,2,1,1,2]
let ones = Array(6).fill(1);// [1,1,1,1,1,1]
6.3.7 使用 copyWithin 方法(复制数组中的一系列元素到同一数组指定的起始位置)
let copyArray = [1, 2, 3, 4, 5, 6];
copyArray.copyWithin(0, 3); // [4, 5, 6, 4, 5, 6]
copyArray = [1, 2, 3, 4, 5, 6];
copyArray.copyWithin(1, 3, 5);// [1, 4, 5, 4, 5, 6]
6.4 排序元素
nums = [1,2,3,4,5,6,7,8,9,10]
nums.reverse();//[10,9,8,7,6,5,4,3,2,1]
nums.sort(function(a, b){
return a-b;
});
等价于:
function compare(a, b) {
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;
}
nums.sort(compare);
6.4.1 自定义排序
var friends = [
{name:'张三',age:18},
{name:'李四',age:25},
{name:'王五',age:21}
]
function comparePerson(a, b){
if (a.age < b.age){
return -1
}
if (a.age > b.age){
return 1
}
return 0;
}
console.log(friends.sort(comparePerson));//从小到大
6.4.2 字符串排序
var names =['Ana', 'ana', 'john', 'John'];
names.sort(function(a, b){
if (a.toLowerCase() < b.toLowerCase()){
return -1
}
if (a.toLowerCase() > b.toLowerCase()){
return 1
}
return 0;
});
对带有重音符号的字符做排序
var names2 = ['Maève', 'Maeve'];
console.log(names2.sort(function(a, b){
return a.localCompare(b);
}));
6.5 搜索
indexOf 方法返回与参数匹配的第一个元素的索引, lastIndexOf 返回
与参数匹配的最后一个元素的索引
6.5.1 ECMAScript 6—— find 和 findIndex 方法
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
function multipleOf13(element, index, array) {
return (element % 13 == 0) ? true : false;
}
console.log(nums.find(multipleOf13)); //找到返回13,找不到返回undefined
console.log(nums.findIndex(multipleOf13)); //找到返回索引,找不到返回-1
6.5.2 ECMAScript 7——使用 includes 方法
数组里存在某个元素, includes 方法会返回 true ,否则返回 false 。
console.log(nums.includes(15));
console.log(nums.includes(20));
let nums2 = [7, 6, 5, 4, 3, 2, 1];
console.log(nums2.includes(4, 5));//从索引5开始查找
6.6 输出数组为字符串
把数组里所有元素输出为一个字符串,可以用 toString 方法
console.log(nums.toString());
用一个不同的分隔符(比如 - )把元素隔开,可以用 join 方法
var numsString = nums.join('-');
console.log(numsString);
6.7 类型数组
类型数组 | 数据类型 |
---|---|
Int8Array | 8位二进制补码整数 |
Uint8Array | 8位无符号整数 |
Uint8ClampedArray | 8位无符号整数 |
Int16Array | 16位二进制补码整数 |
Uint16Array | 16位无符号整数 |
Int32Array | 32位二进制补码整数 |
Uint32Array | 32位无符号整数 |
Float32Array | 32位IEEE浮点数 |
Float64Array | 64位IEEE浮点数 |
类型数组则用于存储单一类型的数据
类型数组 | 数据类型 |
---|---|
Int8Array | 8位二进制补码整数 |
Uint8Array | 8位无符号整数 |
Uint8ClampedArray | 8位无符号整数 |
Int16Array | 16位二进制补码整数 |
Uint16Array | 16位无符号整数 |
Int32Array | 32位二进制补码整数 |
Uint32Array | 32位无符号整数 |
Float32Array | 32位IEEE浮点数 |
Float64Array | 64位IEEE浮点数 |
let length = 5;
let int16 = new Int16Array(length);
let array16 = [];
array16.length = length;
for (let i=0; i<length; i++){
int16[i] = i+1;
}
console.log(int16);