简单总结一下JS的Array对象

头像
Kyrielin
    阅读 8 分钟

    简单总结一下JS的Array对象

    constructor 属性（数组）

    指定创建一个数组的函数。该属性可用于判断某个对象是否为数组与arr instanceof Array效果一致

    // array.constructor
const x = new Array();
if (x.constructor === Array) {
    console.log('Object is an Array')
} else {
    console.log('Object is not an Array')
}
// Object is an Array

    length 属性（Array）

    获取或设置数组的长度。此数值比数组中所定义的最高位元素大 1

    const arr = [0,1,2,3,4]
console.log(arr.length) // 5

    prototype 属性（数组）

    每个对象都有prototype属性，Array也属于对象。在数组的prototype原型对象上添加的属性，所有的数组对象都能继承并使用。

    Array.prototype.test = 'test';
const arr = [];
console.log(arr.test) // 'test'

    Array.from 函数（数组）

    从类似数组的对象或可迭代的对象返回一个数组。该方法是es6新增的函数，在以往将类数组转化成数组则需要编写这样的代码：Array.slice.call(arrayLike);

    // 将dom节点整理成数组
const elemArr = Array.from(document.querySelectorAll('*'));

// 将字符串整理成数组
const charArr = Array.from('abc');
console.log(charArr[0]); // 'a'

// 将集合整理成数组
const setObj = new Set('a','b','c');
const objArr = Array.from(setObj);
console.log(objArr[0]); // 'a'

// 还可以传入回调函数对即将生成的数组进行操作
const arr = Array.from(['1','2','3'], x => x * 10);
// arr[0] == 10;
// arr[1] == 20;
// arr[2] == 30;

    Array.isArray 函数

    确定对象是否为数组。使用场景与constructor、instance一致。

    var ar1 = [];
var result1 = Array.isArray(ar1);
// Output: true

var ar2 = new Array();
var result2 = Array.isArray(ar2);
// Output: true

var ar3 = [1, 2, 3];
var result3 = Array.isArray(ar3);
// Output: true

var result4 = Array.isArray("an array");
// Output: false

    Array.of 函数（数组）

    从传入的参数返回一个数组。
    此函数类似于调用 new Array(args)，但当传入一个参数时，Array.of 不包括特殊行为。

    const arr1 = Array.of(3);
console.log(arr1); // [3]

const arr2 = new Array(3);
console.log(arr2); // [undefined, undefined, undefined]

    concat 方法 (Array)

    组合两个或两个以上的数组。
    concat 方法返回一个 Array 对象，它包含 array1 和任何其他提供的项的连接。
    要添加的项 (item1 itemN) 会按顺序（从列表中的第一个项开始）添加到数组。如果某一项为数组，则其内容将添加到 array1 的末尾。如果该项不是数组，则将其作为单个数组元素添加到数组末尾。
    源数组元素按以下规则复制到结果数组：
    如果从连接到新数组的任何数组中复制某个对象，则该对象引用仍然指向相同的对象。不论新数组和原始数组中哪一个有改变，都将引起对方的改变。
    如果将某个数字或字符串值添加到新数组，则只复制其值。更改一个数组中的值不会影响另一个数组中的值。

    var a, b, c, d;
a = new Array(1,2,3);
b = "dog";
c = new Array(42, "cat");
d = a.concat(b, c);
console.log(d); // 1, 2, 3, "dog", 42, "cat"

    entries 方法（数组）

    返回一个迭代器，它返回数组的键/值对。

    const entries = ['a', 'b', 'c'].entries();
console.log(entries); // Array Iterator{}
// 在迭代器的原型链上包含next方法，调用next可以得到一个对象,这个对象包涵value和done属性，倘若该迭代器调用next方法value仍然有值则done属性为false，直到迭代完毕后done属性返回true
console.log(entries.next().value) // [0, 'a']
console.log(entries.next().value) // [1, 'b']
console.log(entries.next().value) // [2, 'c']

    every 方法 (Array)

    确定数组的所有成员是否满足指定的测试。

    const arr = [1,2,3];
console.log(arr.every(item => item < 3)) // false
console.log(arr.every(item => item < 4)) // true

    fill 方法（数组）

    使用指定值填充数组。

    // arr.fill(value, start, end)
// 其中arr为填充的数组，value为填充的值，start为填充的起始位置（可选，默认第一位），end为填充的末尾（可选，默认最后一位），左闭右开区间
[0,0,0].fill(7,1);
// [0,7,7]
[0,0,0].fill(7);
// [7,7,7]

    filter 方法 (Array)

    返回数组中的满足回调函数中指定的条件的元素。
    filter()接受一系列的值，对每个值执行一个函数或比较，最后返回一个新数组。这些值都通过它的测试。若都不符合，则返回空数组。

    const arr = [1,2,3,4]
const newArr = arr.filter(item => item > 2);
console.log(newArr) // [3,4]

    findIndex 方法（数组）

    返回满足回调函数中指定的测试条件的第一个数组元素的索引值。
    对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。
    findIndex 不会改变数组对象。

    [1,2,3].findIndex(item => item > 1); // 1
[1,2,3].findIndex(item => item === 3); // 2
[1,2,3].findeIndex(item => item === 4); // -1

    forEach 方法 (Array)

    为数组中的每个元素执行指定操作。不返回任何值

    const arr = [1,2,3]
arr.forEach( (item, index) => {
    console.log(item) // 1, 2, 3
    console.log(index) // 0, 1, 2
})

    indexOf 方法 (Array)

    indexOf 方法在数组中搜索指定的值。该方法返回第一个匹配项的索引；如果找不到指定的值，则为 -1。
    搜索按升序索引顺序进行。判断规则采用全等判断。

    var ar = ["ab", "cd", "ef", "ab", "cd"];
console.log(ar.indexOf('ab')); // 0
console.log(ar.indexOf('ab', 1)); // 3
console.log(ar.indexOf('ab', -2)); // 3
console.log(ar.indexOf('ab', 4)); // -1

    join 方法 (Array)

    添加由指定分隔符字符串分隔的数组的所有元素。
    如果数组的任一元素为 undefined 或 null，则该元素将被视为空字符串。传入undefined会被当成空字符串处理，传入null会当成字符串''null'处理

    const a = [1,2,3,4];
const b = a.join('-');
console.log(b); // 1-2-3-4
const c = a.join(undefined);
console.log(c); // 1,2,3,4 
const d = a.join(null);
console.log(d); // 1null2null3null4

    keys 方法（数组）

    返回一个迭代器，它能返回数组的索引值。使用方法与entries类似，只是返回的value值不同

    const k = ['a,','b','c','d'].keys();
// k.next().value == 0
// k.next().value == 1
// k.next().value == 2

    lastIndexOf 方法 (Array)

    lastIndexOf 方法在数组中搜索指定的值。该方法返回第一个匹配项的索引；如果找不到指定的值，则为 -1。
    搜索按降序索引顺序进行。判断规则采用全等判断。

    var ar = ["ab", "cd", "ef", "ab", "cd"];
console.log(ar.lastIndexOf('ab')); // 3
console.log(ar.lastIndexOf('ab', 1)); // 0
console.log(ar.lastIndexOf('ab', -2)); // 3
console.log(ar.lastIndexOf('ab', 4)); // 3

    map 方法 (Array)

    对数组的每个元素调用定义的回调函数并返回包含结果的数组。
    如果你有一个数组，且希望对该数组每一项执行一些操作，最后返回一个新的数组，那么就用map()

    const arr = [1,2,3,4]
const newArr = arr.map( (item, index) => {
    // 这里的item代表每个项的值，index代表每个项的索引
    return item * 2
})
console.log(newArr) // [2,4,6,8]

    pop 方法 (Array)

    从数组中移除最后一个元素并返回该元素。
    如果该数组为空，则返回 undefined。
    使用 push 和 pop 方法可模拟一个使用先进先出 (LIFO) 的原则来存储数据的堆栈。

    var num;
var arr = new Array();
arr.push(1,2,3);
arr.push(4,5,6);
num = arr.pop();
while(num != undefined) {
    console.log(num);
    num = arr.pop();
}
// 6 5 4 3 2 1

    push 方法 (Array)

    将新元素追加到一个数组中，并返回新的数组长度。
    可使用 push 和 pop 方法模拟后进先出堆栈。
    push 方法按元素出现的顺序附加元素。如果某个参数是数组，则以单个元素的形式添加它。使用 concat 方法要合并两个或多个数组中的元素。

    var arr = [1,2];
arr.push(3); // [1,2,3]
arr.push([4,5]); // [1,2,3,[4,5]]

    reduce 方法 (Array)

    对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。
    最终只返回一个结果！

    //下面的示例将数组值连接成字符串，各个值用“::”分隔开。由于未向 reduce 方法提供初始值，第一次调用回调函数时会将“abc”作为 previousValue 参数并将“def”作为 currentValue 参数。
function appendCurrent (previousValue, currentValue) {
    return previousValue + "::" + currentValue;
    }

var elements = ["abc", "def", 123, 456];

var result = elements.reduce(appendCurrent);
console.log(result) // abc::def::123::456
    function addRounded (previousValue, currentValue) {
    return previousValue + Math.round(currentValue);
    }

var numbers = [10.9, 15.4, 0.5];

var result = numbers.reduce(addRounded, 0);
console.log(result) // 27 -> (0 + 11 + 15 +1)

var result2 = numbers.reduce(addRounded);
console.log(result2) // 26.9 -> (10.9 + 15 + 1)

    reduceRight 方法 (Array)

    按降序顺序对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。
    使用方式与reduce一致，只是以降序方式执行。
    最终只返回一个结果！

    reverse 方法

    反转 Array 中的元素。该操作会改变原来的数组！
    reverse 方法将一个 Array 对象中的元素按所在位置进行反转。 在执行过程中，此方法并不创建新 Array 对象。
    如果数组是不连续的，则 reverse 方法将在数组中创建元素，这些元素将填充数组中的间隙。 所创建的这些元素的值具有值 undefined。

    var arr = [1,2,3];
arr.reverse();
console.log(arr); // [3,2,1]

    shift 方法 (Array)

    从数组中移除第一个元素并将返回该元素。
    使用方式与pop一致，只是删除的是第一个，而pop是最后一个。

    var arr = [1,2,3];
var a = arr.shift();
console.log(a); // 1
console.log(arr) // [2,3]

    slice 方法 (Array)

    • 返回一个数组中的一部分。该操作不会影响原数组！
    • slice 方法返回一个 Array 对象，其中包含了 arrayObj 的指定部分。
    // arrayObj.slice(start, [end])
// arrayObj为操作的数组,start为指定部分起始位置(可选，默认第一个,支持负数),end为制定部分的末尾(可选，默认最后一个,支持负数形式)

var arr = [1,2,3,4];
var a1 = arr.slice(1,1);
console.log(a1) // []
var a2 = arr.slice();
console.log(a2) // [1,2,3,4]
var a3 = arr.slice(-1);
console.log(a3) // 4
var a4 = arr.slice(-3,-1);
console.log(a4) // [2,3]

    some 方法 (Array)

    确定指定的回调函数是否为数组中的任何元素均返回 true。
    使用方式与every一致，区别在于every要求每一项都符合要求，而some只需要其中一项符合要求即可。

    var arr = [1,2,3,4];
arr.some(item => item > 4); // false
arr.some(item => item > 3); // true

    sort 方法 (Array)

    arrayobj.sort(sortFunction)

    • sort 方法就地对 Array 对象进行排序；在执行过程中不会创建新 Array 对象。该操作会改变原数组!
    • 如果在 sortFunction 参数中提供一个函数，则该函数必须返回下列值之一：
      如果所传递的第一个参数小于第二个参数，则返回负值。

    如果两个参数相等，则返回零。
    如果第一个参数大于第二个参数，则返回正值。

    var a = new Array(4, 11, 2, 10, 3, 1);
var b = a.sort();
console.log(b) // [1, 10, 11, 2, 3, 4]
console.log(b === a) // true
a.sort((a,b) => a - b) // 升序排列
a.sort((a,b) => b - a) // 降序排列

// 自定义排列函数,此处仅仅依照大小来排序,可以自定义规则排序大小
function CompareForSort(first, second)
{
    if (first == second)
        return 0;
    if (first < second)
        return -1;
    else
        return 1; 
}
a.sort(CompareForSort)

    splice 方法 (Array)

    从一个数组中移除元素，如有必要，在所移除元素的位置上插入新元素，并返回所移除的元素。
    该方法会改变原数组！

    arrayObj.splice(start, deleteCount, item1, item2...)
arrayObj: 必需。一个 Array 对象
start: 可选。数组中移除元素操作的起点，从 0 开始。默认为 0
deleteCount: 可选。要移除的元素数。默认为arrayObj.length
item1, item2,. . ., itemN: 可选。插入数组中代替已移除元素的元素。

    var arr = new Array("4", "11", "2", "10", "3", "1");
var a = arr.splice(0);
console.log(a) // ["4", "11", "2", "10", "3", "1"]
console.log(arr) // []

var arr = new Array("4", "11", "2", "10", "3", "1");
var b = arr.splice(1, 1, 999);
console.log(b) // 11
console.log(arr) // ["4", 999, "2", "10", "3", "1"]

    toString 方法 (Array)

    返回数组的字符串表示形式。
    将 Array 的元素转换为字符串。结果字符串被连接起来，用逗号分隔。

    var arr = [1, 2, 3, 4];
var s = arr.toString();
console.log(s) // 1,2,3,4

    unshift 方法 (Array)

    在数组的开头插入新元素。
    unshift 方法将这些元素插入到一个数组的开头，以便它们按其在参数表中的次序排列。
    使用方式与push一致，区别在于push追加到末尾而unshift从起始位置添加

    var ar = new Array();
ar.unshift(10, 11);
ar.unshift(12, 13, 14);
consloe.log(ar) // 12,13,14,10,11

    valueOf 方法 (Array)

    返回指定对象的基元值。

    var arr = [1,2,3,4]
var s = arr.valueOf()

console.log(arr === s); // true

    values 方法（数组）

    返回一个迭代器，它返回数组的值。
    与keys、entries是一家人，使用方法都一致，区别就在于value不同

    var v = ["a", "b", "c"].values();
// v.next().value == "a"
// v.next().value == "b"
// v.next().value == "c"
    javascript
    Kyrielin
    1.1k 声望330 粉丝

    Coding is amazing!

    « 上一篇
    记录一下前端分片上传七牛云踩过的坑
    下一篇 »
    手把手教你从零搭建react局部热加载环境

    引用和评论

    推荐阅读
    头像
    30分钟从零开始教会你什么是PWA

    Kyrielin赞 218阅读 18.4k评论 5

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新