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' ]


目录
相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
26天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
121 52
|
1月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
28天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
39 7
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
下一篇
DataWorks