其他分享
首页 > 其他分享> > [JS高程] JavsScript 常用数组方法总结

[JS高程] JavsScript 常用数组方法总结

作者：互联网

目录

关于数组Array 的几点回顾

  1. ”ECMAScript 数组跟其他编程语言的数组有着很大的区别， 跟其他语言中的数组一样，ECMAScript 数组也是一组有序的数据， 但是跟其他语言不同的是， 数组中的每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组，它的第一个元素是字符串，第二个元素是数值，第三个是对象。 ”
  2. 数组的创建方式有通过构造函数创建和通过字面量创建两个方式。 当通过构造函数创建时,new 操作符可以像对象创建一样省略掉。通过构造函数创建时，数组元可以作为参数传入。 但是注意：
    1. 如果只传入一个数值n , 那么会创建一个指定长度n 的空数组。
    2. 和对象一样，在使用数组字面量表示法创建数组时，并不会调用Array() 构造函数。

【拓展：一些奇怪的新东西】

  1. 数组length 属性并不是只读的，通过修改length 属性，可以从数组末尾删除或者添加元素。

    let arr = [1,2,3];
arr.length = 5;
console.log(arr) ;//[1,2,3,empty × 2]
console.log(arr[4]); // undefined

arr.length = 1;
console.log(arr); // [1]

  2. ES6规范对数组中的空位进行了重新定义， 数组 [1,2,,,,,3] 中间逗号的值如若为空， 其访问值则为undefined ，但是，也会因为不同的方法，访问值存在差异，如join 会视其为空串。

    [1,,,,5].join('-'); // "1----5"

    map会直接跳过:

    [1,,,,5].map(()=>6));// [6, undefined,undefined,undefined,6]

    所以为了避免行为不一致以及考虑到存在性能隐患，要避免使用空位数组，如果确实需要，则显式用undefined填充。

  3. 如果给在一个数组超出当前数组长度的索引位上新增一个元素，那么中间会自动用空值填充，数组长度也会发生变化：

    let arr = [1,2,3]
arr[100] = 4;
console.log(arr);// [1, 2, 3, empty × 97, 4]

1. Array 构造函数有两个ES6 新增的用于创建数组的静态方法：

1.1 Array.from()

[ES6]:Array.from() 构造函数静态方法，用于将类数组结构转换为数组实例。

示例1：

// 将字符串转为数组
console.log(Array.from("Matt"));//["M","a","t","t"]

示例2：

// 将集合和映射转换为一个新数组
const m = new Map().set(1,2).set(3,4);
const s = new Set().add(1).add(2).add(3).add(4);

console.log(Array.from(m));// [[1,2],[3,4]]
console.log(Array.from(s));// [1,2,3,4]

示例3：

// 可以使用任何可迭代对象
const iter = {
    *[Symbol.iterator](){
        yield 1;
        yield 2;
        yield 3;
        yield 4;
    }
}
console.log(Array.from(iter)); // [1,2,3,4]

示例4：

// 对现有数组执行浅复制
const a1 = [1,2,3,4];
const a2 = Array.from(a1);

console.log(a1); //[1,2,3,4];
console.log(a1 === a2);// false

示例5：

// 可以将函数参数对象arguments 转换为数组
function getArgsArray(){
    return Array.from(arguments);
}
console.log(getArgsArray(1,2,3,4)); // [1, 2, 3, 4]

示例6：

// 转换带有必要属性的自定义对象
const arrayLikeObject = {
    0 : 1,
    1 : 2,
    2 : 3,
    3 : 4,
    length : 4
};
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

Array.from() 还接收第二个可选的映射函数参数。 这个函数可以直接增强新数组的值，而无需像调用Array.from().map() 那样先创建一个中间数组。 还可以接收第三个可选参数， 用于指定映射函数中的this 的值。但是这个重写的this 值在箭头函数中不适用。

示例：

const a1 = [1,2,3,4];
const a2 = Array.from(a1, x => x**2);
const a3 = Array.from(a1, function(x){ return x**this.exponent},{exponent:2});
console.log(a2); // [1,4,9,16]
console.log(a3); // [1,4,9,16]

1.2 Array.of()

[ES6]:Array.of()将一组参数转换为数组实例。

Array.of() 用于替代在ES6 之前常用的Array.prototype.slice.call(arguments), 一种异常笨拙的将arguments 对象转换为数组的写法：

console.log(Array.of(1,2,3,4)); // [1,2,3,4]
console.log(Array.of(undefined)); // [undefined]

2. Array.isArray()

  1. 判断是否为数组 ：[ES6]: Array.isArray()

    使用instanceof 的问题在于，要先假定只有一个全局执行上下文。 如果网页中有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的Array 构造函数。 如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将会有别于在第二个框架内本地创建的数组。

    Array.isArray() 方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。

3. 迭代器方法：keys(), values(),entries()

  1. [ES6]:keys() : 返回数组索引的迭代器，
  2. [ES6]:values() ：返回数组元素的迭代器，
  3. [ES6]:entries() ：返回 key/value 键值对的迭代器
const a = ["foo", "bar", "baz", "qux"];

const aKeys = Array.from(a.keys());// [0, 1, 2, 3]
const aValues = Array.from(a.values()); // ["foo", "bar", "baz", "qux"]
const aEntries = Array.from(a.entries()); // [[0,"foo"],[1,"bar"],[2,"baz"],[3,"qux"]]

因为这些方法都返回迭代器， 所以可以将它们的内容通过Array.from() 直接转换为数组示例。

另外，使用ES6 的结构，可以非常容易地在循环中拆分键值对：

const a = ["foo", "bar", "baz", "qux"];
for (const [idx, element] of a.entries()){
 alert(idx);
 alert(element);
}
//0
//foo
//1
//bar
//2 
//baz
//3
//qux

4. 复制和填充方法 copyWith(), fill()

4.1 [ES6]:fill()

//Syntax
fill(value)
fill(value, start)
fill(value, start, end)

用于填充数组：

let arr = new Array(10);
arr.fill("hello");

console.log(arr);
//["hello","hello","hello","hello","hello","hello","hello","hello","hello","hello",];

arr.fill("world", 5);

console.log(arr);
//["hello","hello","hello","hello","hello","world","world","world","world","world",];

arr.fill("jay", 3, 6);

console.log(arr);
//["hello","hello","hello","jay","jay","jay","world","world","world","world"]

4.2 [ES6]:copyWith()

按照指定范围浅复制数组中的部分内容，然后将他们插入到指定索引开始的位置。

//Syntax
copyWithin(target)
copyWithin(target, start)
copyWithin(target, start, end)

let arr = [1, true, "hello world", { name: "jayce" }];
arr.copyWithin(0, 2);
console.log(arr, "--line3");
//
[
  "hello world",
  {
    name: "jayce",
  },
  "hello world",
  {
    name: "jayce",
  },
];
arr[0] = "JavaScript NB!";
arr[1].name = "frank";
console.log(arr, "--line16");
//
[
  "JavaScript NB!",
  {
      "name": "frank"
  },
  "hello world",
  {
      "name": "frank"
  }
]

5. 栈方法 push() 和 pop()

栈是一种后进先出（LIFO, Last-In-First-Out） 的结构，数据项的推入和删除只在栈的顶部发生。

let colors = [];
let count = colors.push("red","green");// 2
let count1 = colors.push("yellow"); //3
let count2 = colors.pop();// "green"
let count3 = colors.pop();// "red"

注意,push() 和 pop() 方法都是有返回值的， 前者返回数组长度， 后者返回被删去的元素本身。

6. 队列方法 shift() 和 unshift()

队列以先进先出的形式限制访问 （FIFO, First-In-First-Out）

let list  = [1,2,3,4,5,6];
list.unshift("a","b","c"); // 有返回值 ：9
console.log(list)
// ['a', 'b', 'c', 1, 2, 3, 4, 5, 6]
list.shift(); //'a'
list.shift(); //'b'
list.shift(); //'c'
console.log(list)
// [1, 2, 3, 4, 5, 6]

7. 排序方法 reverse() 和 sort()

7.1 reverse()

reverse() 方法用于将数组元素反向排列。

let values = ["a","b","c"];
values.reverse();
console.log(values); // ['c', 'b', 'a']

let values = [1,2,3,4,5];
values.reverse();
console.log(values);// [5,4,3,2,1]

注意⚠️ reverse() 方法可以直接用于处理String 或者Number数组， 如果是String 数组，则按照字母排序。

7.2 sort()

sort() 方法不同于reverse() ,sort() 会在每一项上调用String() 转型函数。然后去按照升序排序字符串。

let values =  [0, 1, 5, 10, 15];
values.sort();
alert(values); // 0,1,10,15,5

注意⚠️ 也就是说，sort() 方法不能直接用于数字排序。

sort() 方法，能够接收一个 比较函数 ， 用于判断哪个值应该排在前面。

比较函数接收两个参数， 入股过第一个参数应该排在第二个参数前面，就返回负值； 如果两个参数相等，就返回0； 如果第一个参数应该排在第二个参数后面， 就返回正值。

function compare(a,b){
 return a < b ? -1 : a > b ? 1 : 0
}
let values =  [ 5, 10, 0, 1,15];
let res = values.sort(compare);
console.log(res);		// [0, 1, 5, 10, 15]
console.log(values); 	// [0, 1, 5, 10, 15]

标签：高程,arr,console,log,JavsScript,JS,let,数组,Array
来源： https://www.cnblogs.com/jaycethanks/p/15632764.html