JavaScript数据结构-Array 数组-基本用法二

2.7 JavaScript 的数组方法参考

在 JavaScript 里，数组是可修改的对象，这意味着创建的每个数组都有一些可用的方法

方法名	描 述
concat	连接 2 个或更多数组，并返回结果
every	对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true
filter	对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组
forEach	对数组中的每一项运行给定函数。这个方法没有返回值
join	将所有的数组元素连接成一个字符串
indexOf	返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1
lastIndexOf	返回在数组中搜索到的与给定参数相等的元素的索引里最大的值
map	对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
reverse	颠倒数组中元素的顺序，原先第一个元素现在变成最后一个，同样原先的最后一个元素变成了现在的第一个
slice	传入索引值，将数组里对应索引范围内的元素作为新数组返回
some	对数组中的每一项运行给定函数，如果任一项返回 true，则返回 true
sort	按照字母顺序对数组排序，支持传入指定排序方法的函数作为参数
toString	将数组作为字符串返回
valueOf	和 toString 类似，将数组作为字符串返回

2.7.1 数组合并

var zero = 0;
var positiveNumbers = [1, 2, 3];
var negativeNumbers = [-3, -2, -1];
var numbers = negativeNumbers.concat(zero, positiveNumbers);

2.7.2 迭代器函数

var isEven = function() {
  //如果x是2的倍数，就返回true
  console.log(x);
  return x % 2 == 0 ? true : false; //return (x % 2 == 0) ? true : false也可以写成return (x % 2== 0)
};
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

1. 用 every 方法迭代

every 方法会迭代数组中的每个元素，直到返回 false。

numbers.every(isEven);

2. 用 some 方法迭代

some 方法会迭代数组的每个元素，直到函数返回 true

numbers.some(isEven);

3. 用 forEach 方法迭代

迭代整个数组

numbers.forEach(function(x) {
  console.log(x % 2 == 0);
});

4. 使用 map 和 filter 方法

var myMap = numbers.map(isEven);

数组 myMap 里的值是： [false, true, false, true, false, true, false, true,false,true, false, true, false, true, false]。它保存了传入 map 方法的 isEven 函数的运行结果。

5. 使用 reduce 方法

reduce 方法接收一个函数作为参数，这个函数有四个参数：previousValue、 currentValue、 index 和 array。

numbers.reduce(function(previous, current, index) {
  return previous + current;
});

2.7.3 ECMAScript 6 和数组的新功能

方 法	描 述
@@iterator	返回一个包含数组键值对的迭代器对象，可以通过同步调用得到数组元素的键值对
copyWithin	复制数组中一系列元素到同一数组指定的起始位置
entries	返回包含数组所有键值对的@@iterator
includes	如果数组中存在某个元素则返回 true，否则返回 false。ES7 新增
find	根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素
findIndex	根据回调函数给定的条件从数组中查找元素，如果找到则返回该元素在数组中的索引
fill	用静态值填充数组
from	根据已有数组创建一个新数组
keys	返回包含数组所有索引的@@iterator
of	根据传入的参数创建一个新数组
values	返回包含数组中所有值的@@iterator

1. 使用 forEach 和箭头函数迭代

numbers.foreach(function(x) {
  console.log(x % 2 == 0);
});

2. 使用 for…of 循环迭代

用 for 循环和 forEach 方法迭代数组

for (let n of numbers) {
  console.log(n % 2 == 0 ? "even" : "odd");
}

3. 使用 ES6 新的迭代器（ @@iterator）

let iterator = numbers[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 方法
entries 方法:

let aEntries = numbers.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

numbers 数组中都是数字， key 是数组中的位置， value 是保存在数组索引的值

keys 方法返回包含数组索引的@@iterator。

let aKeys = numbers.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 }

keys 方法会返回 numbers 数组的索引。一旦没有可迭代的值， aKeys.next()就会返回一个 value 属性为 undefined， done 属性为 true 的对象。如果 done 属性的值为 false，就意味着还有可迭代的值

values 方法返回的@@iterator 则包含数组的值

let aValues = numbers.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 }

4. 使用 from 方法

Array.from 方法根据已有的数组创建一个新数组。比如，要复制 numbers 数组， 可以这样做：

let numbers2 = Array.from(numbers);

还可以传入一个用来过滤值的函数，例子如下：

let evens = Array.from(numbers, (x) => x % 2 == 0);

上面的代码会创建一个 evens 数组，其中只包含 numbers 数组中的偶数

5. 使用 Array.of 方法

Array.of 方法根据传入的参数创建一个新数组

let numbers3 = Array.of(1);
let numbers4 = Array.of(1, 2, 3, 4, 5, 6);
//等于下述代码
let numbers3 = [1];
let numbers4 = [1, 2, 3, 4, 5, 6];

let numbersCopy = Array.of(...numbers4);

6. 使用 fill 方法

fill 方法用静态值填充数组

let numbersCopy = Array.of(1, 2, 3, 4, 5, 6);

numbersCopy 数组的 length 是 6，也就是有 6 个位置。

numbersCopy.fill(0);

numbersCopy 数组所有位置的值都会变成 0（[0, 0, 0, 0, 0, 0]）

numbersCopy.fill(2, 1);

数组中从 1 开始的所有位置，值都是 2（[0, 2, 2, 2, 2, 2]）。

7. 使用 copyWithin 方法

copyWithin 方法复制数组中的一系列元素到同一数组指定的起始位置

let copyArray = [1, 2, 3, 4, 5, 6];
//把4、 5、 6三个值复制到数组前三个位置
copyArray.copyWithin(0, 3);
//把4、 5两个值（位置3和4）复制到位置1和2
copyArray = [1, 2, 3, 4, 5, 6];
copyArray.copyWithin(1, 3, 5);

2.7.4 排序元素

//反序输出数组numbers
numbers.reverse();
console.log(numbers); //[15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
//
numbers.sort(); //[1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]

numbers.sort(function(a, b) {
  return a - b;
});

1. 自定义排序

创建 compareFunction 来比较元素

var friends = [
  { name: "John", age: 30 },
  { name: "Ana", age: 20 },
  { name: "Chris", age: 25 },
];
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));

2. 字符串排序

var names = ["Ana", "ana", "john", "John"];
console.log(names.sort()); //["Ana", "John", "ana", "john"]

JavaScript 在做字符比较的时候，是根据字符对应的 ASCII 值来比较的。例如， A、J、a、j 对应的 ASCII 值分别是 65、 75、97、 106。

给 sort 传入一个忽略大小写的比较函数，将会输出[“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;
});

对带有重音符号的字符做排序的话，用 localCompare 来实现：

var names2 = ["Maève", "Maeve"];
console.log(
  names2.sort(function(a, b) {
    return a.localCompare(b);
  })
);

2.7.5 搜索

搜索有两个方法： indexOf 方法返回与参数匹配的第一个元素的索引， lastIndexOf 返回与参数匹配的最后一个元素的索引。

console.log(numbers.indexOf(10)); //9
console.log(numbers.indexOf(100)); //1 未找到

numbers.push(10);
console.log(numbers.lastIndexOf(10));
console.log(numbers.lastIndexOf(100));

1. ECMAScript 6——find 和 findIndex 方法

let numbers = [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(numbers.find(multipleOf13));
console.log(numbers.findIndex(multipleOf13));

find 和 findIndex 的不同之处在于， find 方法返回第一个满足条件的值， findIndex 方法则返回这个值在数组里的索引。

2. ECMAScript 7——使用 includes 方法

如果数组里存在某个元素， includes 方法会返回 true，否则返回 false。

console.log(numbers.includes(15));
console.log(numbers.includes(20));

let numbers2 = [7, 6, 5, 4, 3, 2, 1];
console.log(numbers2.includes(4, 5)); //false 5后不包括4

2.7.6 输出数组为字符串

把数组里所有元素输出为一个字符串，可以用 toString 方法：

console.log(numbers.toString());
//1、 2、 3、 4、 5、 6、 7、 8、 9、 10、 11、 12、 13、 14、 15

var numbersString = numbers.join("-");
console.log(numbersString);
//1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-10

2.8 类型数组

与 C 和 Java 等其他语言不同， JavaScript 数组不是强类型的，因此它可以存储任意类型的数据。

类型数组	数据类型
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);