JS中的数组

JS中的数组

实例方法,属性

基础

length

length返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标.

  • 可以设置length 属性的值来截断任何数组

    var arr=[1,2,3];
    arr.length=2;
    console.log(arr);  //[1,2]
    
  • 也可改变length属性值来扩展数组时,实际元素的数目将会增加。新增元素的值将会是undefined

    var arr=[1,2,3];
    arr.length=5;
    console.log(arr);  // [1, 2, 3, empty × 2]
    console.log(arr[4]);  //undefined
    
  • 当对数组中为大于等于length的下标x对应元素赋值时,数组大小length会更改为x+1,其他未初始化的元素值为undefined

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

**toString()**返回一个字符串,表示指定的数组及其元素。

调用console.log()打印数组时,系统默认调用其toString()方法。

toLocaleString()

toLocaleString()返回一个字符串表示数组中的元素。数组中的每个元素将使用各自的 toLocaleString()方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。

var number = 1337;  //number.toLocaleString() 为1,337
var date = new Date();  //date.toLocaleString() 为2025/2/24 17:59:18
var myArr = [number, date, 'foo'];  //

console.log(myArr.toLocaleString());  //1,337,2025/2/24 17:59:18,foo
console.log(myArr);  //[1337, Mon Feb 24 2025 17:59:18 GMT+0800 (中国标准时间), 'foo']
forEach()

**forEach(fun)**方法对数组的每个元素执行一次指定的函数。

fun函数原型

function fun(Value, index, array) {
    //函数体
}

参数

  • value:正在处理的当前元素。
  • index:可选,正在处理的当前元素下标
  • array:可选,正在操作的数组

说明

forEach方法按下标升序为数组中含有效值的每一项执行一次fun 函数,那些未初始化的项将被跳过

操作数组

push()

push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度

var numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers); // [1, 2, 3, 4]

numbers.push(5, 6, 7);

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7]

注:push 方法根据 length 属性来决定从哪里开始插入给定的值。

pop()

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

shift()

shift()方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

unshift()

unshift()方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

var numbers = [1, 2, 3];
numbers.unshift(4);

console.log(numbers); // [4, 1, 2, 3]

numbers.unshift(5, 6, 7);

console.log(numbers); // [5, 6, 7, 4, 1, 2, 3]
splice()

splice()方法通过删除现有元素和/或插入新元素来更改一个数组的内容。返回由被删除的元素组成的一个数组

原型

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

参数

  1. start指定修改的开始位置(从0计数)。
    • 如果超出了数组的长度,则从数组末尾开始添加内容;
    • 正值,则表示从数组0下标开始的第几位(从0计数);
    • 负值,则表示从数组末位开始往前数的第几位(从1计数);
    • 若只使用start参数而不使用deleteCount、item,如:array.splice(start) ,表示删除[start,end]的元素。
  2. deleteCount可选整数,表示要移除的数组元素的个数。
    • 如果deleteCount是 0,则不移除元素。这种情况下,至少应添加一个新元素。
    • 如果deleteCount 大于start之后的元素的总数,则从start及后面的元素都将被删除。如果deleteCount被省略,则其相当于(arr.length - start)。
  3. item1, item2, ...可选,要添加进数组的元素,从start位置开始。如果不指定,则splice() 将只删除数组元素

注:splice()方法使用deleteCount参数来控制是删除(非0)还是不删除(0)

示例

  • 删除指定下标及以后所有元素
var arr=[1,2,3,4,5]
var red=arr.splice(2);
console.log(arr);  //[1,2]
console.log(red);  //[3,4,5]
var arr=[1,2,3,4,5]
var red=arr.splice(-2);
console.log(arr);  //[1,2,3]
console.log(red);  //[4,5]
  • 删除指定下标及以后n个元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,2);
console.log(arr);  //[1,2,5]
console.log(red);  //[3,4]
  • 指定下标插入一个元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,0,8);
console.log(arr);  //[1,2,8,3,4,5]
console.log(red);  //[]
  • 指定下标插入多个元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,0,7,8,9);
console.log(arr);  //[1,2,7,8,9,3,4,5]
console.log(red);  //[]
  • 指定下标删除后插入元素
var arr=[1,2,3,4,5]
var red=arr.splice(2,1,8);
console.log(arr);  //[1,2,8,4,5]
console.log(red);  //[3]

数组变换

reverse()

reverse() 方法将数组反转,并返回新数组的引用

var arr=[1,2,3,4,5]
var red=arr.reverse();
console.log(arr);  //[5,4,3,2,1]
console.log(red);  //[5,4,3,2,1]
red[3]=9;  //更改red数组,arr数组也随之改变
console.log(arr[3]);  //9
sort()

**sort()**方法用就地( in-place )的算法对数组的元素进行排序,并返回排序后数组的引用。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

原型

arr.sort()
arr.sort(compareFunction)
  • compareFunction可选。用来指定按某种顺序进行排列的函数
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

items.sort(function (a, b) {
  return a.value - b.value;  //负数,a排在前,正数,b排在前
});

console.log(items);
/*
[
{name: 'The', value: -12},
{name: 'Magnetic', value: 13},
{name: 'Edward', value: 21},
{name: 'Sharpe', value: 37},
{name: 'Zeros', value: 37},
{name: 'And', value: 45}
]
*/
  • 数值默认按值升序
var arr=[1,2,5,3,6,3,2,7];
var red=arr.sort();
console.log(arr);  //[1,2,2,3,3,5,6,7]
console.log(red);  //[1,2,2,3,3,5,6,7]
  • 字符串按字典序升序
var arr=['abc','sdt','tudf','ab','zy'];
var red=arr.sort();
console.log(arr);  //['ab', 'abc', 'sdt', 'tudf', 'zy']
console.log(red);  //['ab', 'abc', 'sdt', 'tudf', 'zy']
  • 数值一定排在字符串前
var arr=['abc','sdt',3,'tudf',1,'ab','zy',2,56,999999999];
var red=arr.sort();
console.log(arr);  //[1, 2, 3, 56, 999999999, 'ab', 'abc', 'sdt', 'tudf', 'zy']
console.log(red);  //[1, 2, 3, 56, 999999999, 'ab', 'abc', 'sdt', 'tudf', 'zy']
concat()

**concat()**方法用于合并两个或更多数组。此方法不会更改现有的数组,而是返回一个新的数组。

  • 合并两个数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];

var arr3 = arr1.concat(arr2);
console.log(arr3);  //[1,2,3,4,5,6]
  • 合并多个数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9,10];

var arr3 = arr1.concat(arr2,arr3);
console.log(arr3);  //[1,2,3,4,5,6,7,8,9,10]

注:该方法会将此数组参数数组内的所有元素浅拷贝都尾添到新数组中

slice()

slice() 方法返回一个从原数组开始到结束(不包括结束)范围内所有元素浅拷贝到一个新数组。不更改原数组。

原型

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

参数

  • begin可选,从该索引处开始提取原数组中的元素(从0开始)。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,如果省略则slice从索引 0 开始。

  • end可选,在该索引处结束提取原数组元素(从0开始)。

注:slice(begin,end)会提取原数组中索引从 beginend 的所有元素(包含begin,不包含end)。

var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);

console.log(a);      // ['zero', 'one', 'two', 'three']
console.log(sliced); // ['one', 'two']

注意:slice() 方法返回的新数组中的元素是原数组中对应元素的浅拷贝

当原数组中元素为数组或对象的引用类型数据时,更改新数组的元素属性,原数组中对应元素属性随之改变。

var objs=[
    {value: 2,id:3},
    {value: 20,id:4},
    {value: 3,id:3}
]
var now=objs.slice(1,3);
now[0].value=100;  //改变新数组中下标为0的元素属性,原数组也随之更改
console.log(now);  //[{value: 100, id: 4},{value: 3, id: 3}]
console.log(objs);  //[{value: 2, id: 3},{value: 100, id: 4},{value: 3, id: 3}]

当原数组中元素为值类型时,更改新数组的元素,原数组中对应元素不会改变。

var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);

sliced[0]='123';

console.log(a);      // ['zero', 'one', 'two', 'three']
console.log(sliced); // ['123', 'two']
entries()

entries()方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

var a = ['a', 'b', 'c'];
var iterator = a.entries();

console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']
fill()

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内(不包括终止索引)的全部元素。

arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)
  • value用来填充数组元素的值。

  • start可选起始索引,默认值为0。

  • end可选终止索引(不包括),默认值为this.length

说明

fill()将数组下标范围在[start,end)的所有元素填充为value

[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, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
join()

**join()**方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。该方法不更改原数组

原型

arr.join()
arr.join(separator)

参数

  • separator 可选,连接符,默认为‘,’(逗号)
var a = ['Wind', 'Rain', 'Fire'];
a.join();    // 'Wind,Rain,Fire'
a.join('-'); // 'Wind-Rain-Fire'

测试数组

includes()

**includes()**方法用来判断一个数组是否包含一个指定的值

原型

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

参数

  • searchElement需要查找的元素值。

  • fromIndex可选从该索引处开始查找searchElement。如果为负值,则按下标升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

var a = [1, 2, 3];
a.includes(2); // true 
a.includes(4); // false
a.includes(1,1);  //false
a.includes(1,0);  //true
find()

find()方法返回数组中满足指定测试函数的第一个元素的值。不存在返回undefined

var arr=[12, 5, 8, 130, 44];
arr.find(function(value[, index, array]){
    return value>=15;
}); // 130
findIndex()

findIndex()方法返回数组中满足指定测试函数的第一个元素的下标。不存在返回-1

var arr=[12, 5, 8, 130, 44];
arr.findIndex(function(value[, index, array]){
    return value>=15;
}); // 3
every()

every()方法测试数组的所有元素是否都通过了指定函数的测试。

function isBigEnough(value[, index, array]) { 
  return value >= 10; 
} 

[12, 5, 8, 130, 44].every(isBigEnough);   // false 
[12, 54, 18, 130, 44].every(isBigEnough); // true
some()

every()方法测试数组是否存在元素通过了指定函数的测试。

function isBigEnough(value[, index, array]) { 
  return value >= 10; 
} 

[4, 5, 8, 0, 4].every(isBigEnough);   // false 
[8, 9, 18, 130, 44].every(isBigEnough); // true
indexOf()

indexOf()方法返回在数组中可以找到指定定元素的第一个索引,如果不存在,则返回-1。

var a = [2, 9, 9]; 
a.indexOf(2); // 0 
a.indexOf(7); // -1
lastIndexOf()

lastIndexOf()方法返回指定元素在数组中的最后一个索引,如果不存在则返回 -1。

var a = [2, 9, 9]; 
a.indexOf(9); // 2
a.indexOf(7); // -1
filter()

**filter()**方法返回一个新数组, 其包含通过给定函数测试的所有元素。该方法对原数组不会影响

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

var longWords = words.filter(function(word){
  return word.length > 5;
});

console.log(longWords); //['exuberant', 'destruction', 'present']

静态方法

prototype

Array.prototype 属性表示Array构造函数的原型,并允许您向所有Array对象添加新的属性和方法。

isArray()

Array.isArray() 用于确定传递的值是否是一个Array

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false
of()

**Array.of()**方法创建一个具有可变数量参数的新数组实例。

Array.of()Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素7的数组,而 Array(7) 创建一个包含7undefined元素的数组。

Array.of()方法不常用,用[...]是一样的效果

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]
from()

**Array.from()**方法从一个类似数组或可迭代对象中创建一个新的数组实例。

const bar = ['a', 'b', 'c'];
Array.from(bar);
// ['a', 'b', 'c']

Array.from('foo');
// ['f', 'o', 'o']
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值