js数组操作方法

最新推荐文章于 2024-05-06 17:57:53 发布

冰封墨客

最新推荐文章于 2024-05-06 17:57:53 发布

阅读量142

点赞数

分类专栏：原生js 文章标签：原生js 数组操作数组遍历

原生js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

创建一个数组：

var a = Array(); // [] 
var a = Array(3); // [undefined,undefined,undefined]//此处3识别为数组的长度
var a = Array(3,11,8); // [ 3,11,8 ]

ES6 Array.of() 返回由所有参数值组成的数组
定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。
目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。

let a = Array.of(3, 11, 8); // [3,11,8]
let a = Array.of(3); // [3]

ES6 Arrar.from(arrayLike,mapFn,thisArg) 将两类对象转为真正的数组
定义：用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。

参数：
第一个参数(必需):要转化为真正数组的对象。
第二个参数(可选): 类似数组的map方法，对每个元素进行处理，将处理后的值放入返回的数组。
第三个参数(可选): 用来绑定this。

// 1. 对象拥有length属性
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];

// 2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
let arr = Array.from('hello'); // ['h','e','l','l']
let arr1 = Array.from(new Set(['a','b'])); // ['a','b']
let arr2 = Array.from([1, 2, 3], x => x + x);//[2,4,6]

改变原数组的方法(9个):

pop、shift、push、unshift、reverse、splice、sort、copyWithin（ES6）、fill(ES6)

pop() 删除一个数组中的最后的一个元素,并且返回这个元素。

let a = [1,2,3];
let item = a.pop(); // 3
console.log(a); // [1,2]

shift()方法删除数组的第一个元素，并返回这个元素。

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

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

let a = [1,2,3];
let item = a.push('末尾'); // 4
console.log(a); // [1,2,3,'末尾']

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

let a = [1,2,3];
let item = a.unshift('开头'); // 4
console.log(a); // ['开头',1,2,3]

reverse() 方法用于颠倒数组中元素的顺序。

let a = [1,2,3];
a.reverse(); 
console.log(a); // [3,2,1]

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
语法： array.splice(index,howmany,item1,.....,itemX)
参数：
- index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
- howmany：必需。要删除的项目数量。0为替换，1为删除。
- item1, …, itemX： 可选。向数组添加的新项目。

eg1:删除元素
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]
// 从数组下标0开始，删除3个元素

let item = a.splice(-1, 3); // [7]
// 从最后一个元素(3)开始向后删除3个元素，因为是最后一个元素，所以只能删除7

eg2: 删除并添加
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,3,'添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始，删除3个元素，并添加元素'添加'

let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素(6)开始，删除3个元素，因为只有6、7两个元素，所以只能删除6、7，然后添加两个元素'添加1'、'添加2'
	
eg3: 不删除只添加:
let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素，返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]

let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素，返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

结论：
数组如果元素不够，会删除到最后一个元素为止
操作的元素，包括开始的那个元素
可以添加多个元素
添加是在开始的元素前面添加的

sort()方法对数组元素进行排序，并返回这个数组。
默认情况下sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，会调用toString()方法将元素转化为字符串的Unicode(万国码)位									      																							          																				    												           			                                       																								                                      				       						                 											                       			     点，然后再比较字符。

// 字符串排列 看起来很正常
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
// 数字排序的时候 因为转换成Unicode字符串之后，有些数字会比较大会排在后面 这显然不是我们想要的
var a = [10, 1, 3, 20,25,8];
console.log(a.sort()) // [1,10,20,25,3,8];

var array = [10, 1, 3, 4,20,4,25,8];
// 升序 a-b < 0 a将排到b的前面，按照a的大小来排序的 
// 比如被减数a是10，减数是20 10-20 < 0 被减数a(10)在减数b(20)前面 
array.sort(function(a,b){
 return a-b;
});
console.log(array); // [1,3,4,4,8,10,20,25];
// 降序 被减数和减数调换了 20-10>0 被减数b(20)在减数a(10)的前面
array.sort(function(a,b){
 return b-a;
});
console.log(array); // [25,20,10,8,4,4,3,1];

copyWithin() 指定位置的成员复制到其他位置,并返回这个数组。
语法: array.copyWithin(target, start = 0, end = this.length)
参数:
三个参数都是数值，如果不是，会自动转为数值.
target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']
// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
a.copyWithin(2,3,5)
// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"]

结论：
第一个参数是开始被替换的元素位置
要替换数据的位置范围:从第二个参数是开始读取的元素，在第三个参数前面一个元素停止读取
数组的长度不会改变
读了几个元素就从开始被替换的地方替换几个元素

fill() 填充数组
参数：
第一个元素(必须): 要填充数组的值
第二个元素(可选): 填充的开始位置,默认值为0
第三个元素(可选)：填充的结束位置，默认是为this.length

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

不改变原数组的方法(8个):
join、toLocateString、toStrigin、slice、cancat、indexOf、lastIndexOf、includes(ES7)

join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串
语法：
array.join(str)
let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world

toString() 方法可把数组转换为由逗号链接起来的字符串

let b= [ 'toString','演示'].toString(); // toString,演示
let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦

slice() 浅拷贝数组的元素
定义： 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。
语法:array.slice(begin, end);
参数:
begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。

let a= ['hello','world'];
let b=a.slice(0,1); // ['hello']
a[0]='改变原数组';
console.log(a,b); // ['改变原数组','world'] ['hello']
b[0]='改变拷贝的数组';
console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']

concat方法用于合并两个或多个数组，返回一个新数组

语法：
var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)

let a = [1, 2, 3];
let b = [4, 5, 6];
//连接两个数组
let newVal=a.concat(b); // [1,2,3,4,5,6]

indexOf() 查找数组是否存在某个元素，返回下标

定义: 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

语法:
array.indexOf(searchElement,fromIndex)

参数:
searchElement(必须):被查找的元素
fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。

let a=['啦啦',2,4,24,NaN]
console.log(a.indexOf('啦')); // -1 
console.log(a.indexOf('NaN')); // -1   不能识别NaN
console.log(a.indexOf('啦啦')); // 0

lastIndexOf() 查找指定元素在数组中的最后一个位置

定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）

语法:
arr.lastIndexOf(searchElement,fromIndex)

参数:
searchElement(必须): 被查找的元素
fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。

关于fromIndex有三个规则:
正值。如果该值大于或等于数组的长度，则整个数组会被查找。
负值。将其视为从数组末尾向前的偏移。(比如-2，从数组最后第二个元素开始往前查找)
负值。其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 数组长度为10
// let b=a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2
// let b=a.lastIndexOf('Koro1',100); // 大于或数组的长度 查找整个数组 返回9
// let b=a.lastIndexOf('Koro1',-11); // -1 数组不会被查找
let b=a.lastIndexOf('Koro1',-9); // 从第二个元素4往前查找，没有找到 返回-1

ES7 includes() 查找数组是否包含某个元素 返回布尔
语法：
array.includes(searchElement,fromIndex=0)
参数：
searchElement(必须):被查找的元素

fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，		重置从0开始搜索。

includes方法是为了弥补indexOf方法的缺陷而出现的:
indexOf方法不能识别NaN
indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

let a=['OB','Koro1',1,NaN];
// let b=a.includes(NaN); // true 识别NaN
// let b=a.includes('Koro1',100); // false 超过数组长度 不搜索
// let b=a.includes('Koro1',-3); // true 从倒数第三个元素开始搜索

遍历方法12个

ES5: forEach、every 、some、 fliter、map、reduce、reduceRight
ES6: find、findIndex、keys、values、entries

forEach(function(currentValue, index, arr), thisValue)

注意点：
 1. 无法中途退出循环，只能用return退出本次回调，进行下一次回调。
 2. 它总是返回 undefined值,即使你return了一个值。
 
 举例:
 let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
 let obj = { name: 'OBKoro1' };
 let result = a.forEach(function (value, index, array) { 
	 a[3] = '改变元素';
	 a.push('添加到尾端，不会被遍历')
	 console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
	 console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
	 return value; // return只能结束本次回调 会执行下次回调
	 console.log('不会执行，因为return 会执行下一次循环回调')
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
// 回调函数也接受箭头函数写法

every 检测数组所有元素是否都符合判断条件

语法：array.every(function(currentValue, index, arr), thisValue)
举例：
function isBigEnough(element, index, array) { 
 return element >= 10; // 判断数组中的所有元素是否都大于10
}
// 接受箭头函数写法 
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

some 数组中的是否有满足判断条件的元素

语法：array.some(function(currentValue, index, arr), thisValue)

例子：
function isBigEnough(element, index, array) {
 return (element >= 10); //数组中是否有一个元素大于 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true

filter 过滤原始数组，返回新数组

例子：
let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
 return value >= 18; // 返回a数组中所有大于18的元素
});
console.log(result,a);// [32,33,40] [32,33,16,40]

map 对数组中的每个元素进行处理，返回新的数组

例子：
let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
 return value + '新数组的新元素'
});
console.log(result, a); 
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]

reduce 为数组提供累加器，合并为一个值

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

例子：
// 数组求和 
let sum = [0, 1, 2, 3].reduce(function (a, b) {
 return a + b;
}, 1);
// 7