乐趣区

关于javascript:js数组构造器API整理及遍历方法

jiezi

数组结构形式

数组字面量

let a = Array(6);
console.log(a) // [<6 empty items>]
let b = [];
b.length = 6;
console.log(b) // [<6 empty items>]

Array.of 和 Array.from

Array.of 用于将参数顺次转化为数组中的一项，而后返回这个新数组，而不论这个参数是数字还是其余

Array.of(8.0); // [8]
Array(8.0); // [empty × 8]
Array.of(8.0, 5); // [8, 5]
Array(8.0, 5); // [8, 5]
Array.of('8'); // ["8"]
Array('8'); // ["8"]

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike 想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选. 如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg 可选. 可选参数，执行回调函数 mapFn 时 this 对象。

Array.from 从一个相似数组的可迭代对象中创立一个新的数组实例. 只有一个对象有迭代器，Array.from 就能把它变成一个数组（留神：是返回新的数组，不扭转原对象）

var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
};
var arr = Array.from(obj, function (value, index) {console.log(value, index, this, arguments.length)
    // a 0 {'0': 'a', '1': 'b', '2': 'c', length: 3} 2
    // b 1 {'0': 'a', '1': 'b', '2': 'c', length: 3} 2
    // c 2 {'0': 'a', '1': 'b', '2': 'c', length: 3} 2  
    return value.repeat(3)
}, obj)
console.log(arr) // ['aaa', 'bbb', 'ccc']

领有迭代器的对象还包含 String、Set、Map 等，Array.from 都能够解决

Array 的判断

五种判断形式都为 true

var a = [];
// 1. 基于 instanceof
a instanceof Array;
// 2. 基于 constructor
a.constructor === Array;
// 3. 基于 Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);
// 4. 基于 getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype;
// 5. 基于 Object.prototype.toString
Object.prototype.toString.apply(a) === '[object Array]';`

Array.isArray

if (!Array.isArray){Array.isArray = function(arg){return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

扭转本身的办法
基于 ES6，会扭转本身值的办法一共有 9 个，别离为 pop、push、reverse、shift、sort、splice、unshift，以及两个 ES6 新增的办法 copyWithin 和 fill。

array.copyWithin(target, start, end)
copyWithin() 办法用于从数组的指定地位拷贝元素到数组的另一个指定地位中。

target 必须。复制到指定指标索引地位。
start 可选。元素复制的起始地位。
end 可选。进行复制的索引地位 (默认为 array.length, 第三个参数如果没写，那么默认值就是 array.length)。如果为负值，示意倒数。

array.fill(value, start, end)
fill() 办法用于将一个固定值替换数组的元素。

value 必须。填充的值。
start 可选。开始填充地位。
end 可选。进行填充地位 (默认为 array.length)

范例

var array = [1,2,3,4,5]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2);  // true [4, 5, 3, 4, 5]
var a2 = array.copyWithin(4, 3) // [1, 2, 3, 4,4, 5, 6, 7]
var a3 = array.copyWithin(2, 3) // [1,2,4,4,5,6,7,7]
var a4 = array.copyWithin(3,4,6) / [1,2,4,4,5,6,6,7,7]
// fill 办法
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); 
// true [10, 10, 10, 4, 5], 可见数组区间 [0,3] 的元素全副替换为 10

Leetcode 算法题《合并两个有序数组》

给你两个有序整数数组 nums1 和 nums2，请你将 nums2 合并到 nums1 中，使 nums1 成为一个有序数组。另有两个整数 m 和 n，别离示意 nums1 和 nums2 中的元素数目
留神：最终，合并后数组不应由函数返回，而是存储在数组 nums1 中。为了应答这种状况，nums1 的初始长度为 m + n，其中前 m 个元素示意应合并的元素，后 n 个元素为 0，应疏忽。nums2 的长度为 n。输出:
nums1 = [1,2,3,0,0,0]；m = 3
nums2 = [2,5,6]；n = 3
输入: [1,2,2,3,5,6]

解析这道题

  • 不能新开数组，那么就须要利用数组扭转本身的办法实现这个题目
  • 首先是将 nums2 合并到 nums1 外面，不新开数组，否则将无奈通过；
  • 其次是合并完了之后 nums1 还是一个有序数组，这里也是须要留神的；
  • 另外样例外面 nums1 和 nums2 都有“2”这个数，也都须要将反复的合并进去。
var merge = function (nums1, m, nums2, n) {nums1.splice(m)
    nums2.splice(n)
    nums1.push(...nums2)
    nums1.sort((a, b) => a - b)
};

不扭转本身的办法
基于 ES7，不会扭转本身的办法也有 9 个，别离为 concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未造成规范的 toSource，以及 ES7 新增的办法 includes。

// concat
let arr = [1, 2, 3]
let arr2 = arr.concat(4, [5], [6, 7])
console.log(arr2) // [1,2,3,4,5,6,7]
console.log(arr) // [1,2,3]

// slice
console.log(arr.slice()) // [1,2,3]
console.log(arr.slice(0, 1)) // [1]
console.log(arr) // [1,2,3]

// toString
console.log(arr.toString()) // "1,2,3"

// toLocaleString
let arr3 = [{a: 1}, 2, "3", new Date()]
console.log(arr3.toLocaleString()) // [object Object],2,3,2021/12/19 上午 9:38:21

// includes 
let arr4 = [-0, 1, 2]
console.log(arr4.includes(+0)) // true，这是一个遗留 BUG，includes 不辨别 + 0 和 -0
let arr5 = [NaN]
console.log(arr5.includes(NaN)) // true

数组遍历

基于 ES6，不会扭转本身的遍历办法一共有 12 个，别离为 forEach、every、some、filter、map、reduce、reduceRight，以及 ES6 新增的办法 entries、find、findIndex、keys、values。

forEach 会返回 undefined

let arr = [1, 2, 3]
let arr1 = arr.map(i => i + i)
console.log(arr, arr1) // [1, 2, 3] [2, 4, 6]

// pre 上一次函数调用返回值，或者初始值
// cur 以后正在解决元素
// 以后解决元素下标
// 调用 reduce()办法的数组
let s = arr.reduce(function (pre, val, index, arr) {return pre * val}, 1)
// ES6 写法更加简洁
arr.reduce((p, v) => p * v); // 24
console.log(s) // 6

var array = [1, 3, 5, 7, 8, 9, 10];

function f(value, index, array) {return value % 2 == 0; // 返回偶数}

function f2(value, index, array) {return value > 20; // 返回大于 20 的数}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1

// keys 办法
[...Array(10).keys()];     // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// values 办法，迭代器遍历
let strArr = ['a','b','c']
let iterator = strArr.values();
console.log(iterator.next().value) // a
console.log(iterator.next().value) // b
退出移动版