JavaScript Array 常用属性和方法

简介: JavaScript Array 常用属性和方法


Array 对象属性


Array.length


Array 构造函数的 length 属性,其值为1

[dongshaoshuai~] ]$node
> Array.length
1
>


Array.prototype


允许为所有数组对象附加属性, 所有的数组实例都继承于 Array.prototype, Array.prototype 其实也是个数组。

> Array.prototype[]


Array 对象方法


Array.from() [ES6]


从类数组或者迭代对象中创建一个新的数组实例。

// Set 对象
> Array.from(new Set(["foo", "test"]));
[ 'foo', 'test' ]
// Map 对象
> var m = new Map([[1, 2], [3, 4], [5, 6]]);
undefined
> Array.from(m);
[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
// 字符串
> Array.from("foo");
[ 'f', 'o', 'o' ]
// Array 的 map 方法
> Array.from([1, 2, 3], x => x + x);
[ 2, 4, 6 ]
// 连续数字
> Array.from({length:5}, (v, k) => k); 
[ 0, 1, 2, 3, 4 ]
>


Array.isArray()


判断一个一个对象是否为数组,返回 Boolean。

> Array.isArray([]);
true
> Array.isArray();
false
>


Array.observe() [ES7]


异步监听数组发生的变化。 未实践。


Array.of() [ES6]


将多个参数组成一个数组并返回。

> Array.of(1, 2, 3);
[ 1, 2, 3 ]
> Array.of(4);
[ 4 ]
> Array.of(undefined);
[ undefined ]
>


Array 数组实例属性


前面说了,所有数组实例继承自 Array.prototype。


Array.prototype.constructor


值为 Array。


Array.prototype.length


Array.prototype 是个数组,它的 length 属性值为 0

[dongshaoshuai~] ]$node
> Array.prototype.length
0
>


Array 数组实例方法


以下方法会改变调用对象自身的值:


Array.prototype.copyWithin() [ES6]


用数组内的元素替换数组内的元素。

> [1, 2, 3, 4, 5].copyWithin(0, 3);
[ 4, 5, 3, 4, 5 ]
> [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
[ 4, 2, 3, 4, 5 ]
> [1, 2, 3, 4, 5].copyWithin(0, 3, 5);
[ 4, 5, 3, 4, 5 ]
> [1, 2, 3, 4, 5].copyWithin(0, -2);
[ 4, 5, 3, 4, 5 ]
>


Array.prototype.fill() [ES6]


用指定值来填充或替换一个数组中指定区间的所有元素的值。

> [1, 2, 3].fill(4)
[ 4, 4, 4 ]
> [1, 2, 3].fill(4, 1)
[ 1, 4, 4 ]
> [1, 2, 3].fill(4, 1, 2) 
[ 1, 4, 3 ]
> [1, 2, 3].fill(4, -3, -2)
[ 4, 2, 3 ]
>


Array.prototype.pop()


除一个数组中的最后一个元素,并返回这个删除掉的元素.

> [1, 2, 3].pop()
3


Array.prototype.push()


在数组末尾添加一个或多个元素,并返回该数组的新的 length 值。

> var arr = [1, 2];
undefined
> arr.push(3, 4);
4
> arr
[ 1, 2, 3, 4 ]
>


Array.prototype.reverse()


颠倒数组中元素的位置,并返回该数组的引用。

> var arr = [1, 2, 3];
undefined
> arr.reverse();
[ 3, 2, 1 ]
> arr
[ 3, 2, 1 ]
>


Array.prototype.shift()


移除数组的第一个元素,并返回被移除的元素。

> var arr = [1, 2, 3];
undefined
> arr.shift();
1
> arr
[ 2, 3 ]
>


Array.prototype.sort()


对数组进行排序,并返回该数组。

> var arr = [1, 2, 3, 'one', 'two', '4 h'];undefined> arr.sort();
[ 1, 2, 3, '4 h', 'one', 'two' ]
> arr.sort((a, b) => b - a);
[ 3, 2, 1, '4 h', 'one', 'two' ]
>


Array.prototype.splice()


用新的元素替换数组中的指定元素,并返回原数组中被修改的内容。

> arr
[ 3, 2, 1, '4 h', 'one', 'two' ]
> arr.splice(0, 2, 'ONE', 'TWO');
[ 3, 2 ]
> arr
[ 'ONE', 'TWO', 1, '4 h', 'one', 'two' ]
> arr
[ 1, 2, 3, 'one', 'two', '4 h' ]
> // 从第 3 位开始删除一个元素
undefined
> arr.splice(3, 1);
[ 'one' ]
> arr
[ 1, 2, 3, 'two', '4 h' ]
>


Array.prototype.unshift()


在数组开头添加元素,并返回数组 length 属性值。

> var arr = [1, 2, 3];
undefined
> arr.unshift('zz');
4
> arr
[ 'zz', 1, 2, 3 ]
> arr.unshift('test1', 'test2');
6
> arr
[ 'test1', 'test2', 'zz', 1, 2, 3 ]
>

以下方法不改变调用对象自身的值:


Array.prototype.concat()


返回一个由当前数组和若干数组或值组成的新数组。

> var arr = [1, 2, 3];
undefined
> arr.concat(4, 5);
[ 1, 2, 3, 4, 5 ]
> arr
[ 1, 2, 3 ]
> arr.concat([4, 5], [6, 7]);
[ 1, 2, 3, 4, 5, 6, 7 ]


Array.prototype.includes() [ES6]


数组是否包含指定值,返回 Boolean 值。

> var arr = [1, 2, 3];
undefined
> arr.includes(2);
true
> arr.includes(2, 1); // 从索引 1 开始查找
true
> arr.includes(2, 2);
false
>


Array.prototype.join()


将所有数组元素组成一个字符串。

> var arr = [1, 2, 3];
undefined
> arr.join();
'1,2,3'
> arr.join('-');
'1-2-3'>


Array.prototype.slice()


将数组中指定起始位置的元素组成新的数组。

> var arr = [1, 2, 3];
undefined
> arr.slice(1);
[ 2, 3 ]
> arr.slice(0, 1);
[ 1 ]


Array.prototype.toString()


返回一个数组元素组成的字符串。

> var arr = [1, 2, 3];
undefined
> arr.toString();
'1,2,3'


Array.prototype.indexOf()


返回指定元素在数组中的第一个下标值, 不存在则返回 -1。

> var arr = [1, 2, 3];
undefined
> arr.indexOf(2);
1
> arr.indexOf(4);
-1


Array.prototype.lastIndexOf()


返回指定元素在数组中的最后下标值, 不存在则返回 -1。

> var arr = [1, 2, 3, 1];
undefined
> arr.lastIndexOf(1);
3


数组遍历


Array.prototype.forEach()


arr.forEach((val, index, array) => {});


Array.prototype.every()


是否数组中每个元素都满足测试函数, 返回 Boolean。

let arr = ['one', 'two'];
let result = arr.every((val, index, array) => {
    return isNaN(val);
});
console.log(result); // true


Array.prototype.some()


是否数组中至少有一个元素满足测试函数, 返回 Boolean。

let arr = ['one', 'two', 1];
let result = arr.some((val, index, array) => {    
    return isNaN(val);
});
console.log(result); // true


Array.prototype.filter()


使用指定的函数测试所有元素,并返回一个包含所有通过测试的元素的新数组。

let arr = ['one', 'two', 1];
let result = arr.filter((val, index, array) => {
    return isNaN(val);
});
console.log(result); //  [ 'one', 'two' ]


Array.prototype.find() [ES6]


找到第一个满足测试函数的元素并返回该元素的值,如果找不到,则返回 undefined。

let arr = ['one', 'two', 1];
let result = arr.find((val, index, array) => {
    return isNaN(val);
});
console.log(result); // one


Array.prototype.findIndex() [ES6]


找到第一个满足测试函数的元素并返回该元素的下标值,如果找不到,则返回 -1。

let arr = ['one', 'two', 1];
let result = arr.findIndex((val, index, array) => {  
    return isNaN(val);
});
console.log(result); // 0


Array.prototype.entries() [ES6]


返回数组中每一个索引的键值对。

let arr = ['one', 'two'];
let eArr = arr.entries();
console.log(eArr.next().value); // [ 0, 'one' ]
console.log(eArr.next().value); // [ 1, 'two' ]


Array.prototype.keys() [ES6]


返会包含所有数组元素的键的迭代器。

let arr = ['one', 'two', 1];
let keys = arr.keys();
console.log(keys.next()); // { value: 0, done: false }
console.log(keys.next()); // { value: 1, done: false }
console.log(keys.next()); // { value: 2, done: false }
console.log(keys.next()); // { value: undefined, done: true }


Array.prototype.values() [ES6]


返会包含所有数组元素的值的迭代器。

let arr = ['one', 'two', 1];
 let values = arr.values();  
 console.log(values.next()); // {value: "one", done: false}
 console.log(values.next()); // {value: "two", done: false}
 console.log(values.next()); // {value: 1, done: false}
 console.log(values.next()); // {done: true, value: undefined}


Array.prototype.map()


返回由回调函数返回值所组成的新的数组。

let arr = ['one', 'two', 1];
let newArr = arr.map((val, index, array) => {
    return val + 'T';
});console.log(newArr); // [ 'oneT', 'twoT', '1T' ]


目录
相关文章
|
10月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1062 0
|
10月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1184 80
|
12月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
测试技术 PHP 开发者
PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?