不改变原数组
1.concat()
定义: 链接两个或多个数组,并返回一个新数组
参数:
arrayX(必须):该参数可以是具体的值,也可以是数组对象。可以是任意多个。
例子:
var arr1 = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8];
var arr3 = [10, 11, 12];
var arr4 = [5, 6, [8]]
// 链接两个数组
arr1.concat(arr2); // [1, 2, 3, 4, 5, 6, 7, 8]
// 链接三个数组
arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 10,11,12]
// 添加元素
arr1.concat(arr2, arr3, '添加一个元素'); // [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12,'添加一个元素']
// 合并嵌套数组
arr1.concat(arr4); // [1, 2, 3, 4, 5, 6, [8]]
2.join()
定义:把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串, 默认以“,”。
参数:str(可选): 指定要使用的分隔符,默认使用逗号作为分隔符。如果str是空字符串(""),则所有元素之间都没有任何字符。
例子:
var arr = [1, 2, 3];
console.log(arr.join()); // "1,2,3"
console.log(arr.join("-")); // "1-2-3"
console.log(arr.join("")); // "123"
对于join()/toString()来说
如果一个元素为 undefined 或 null,它会被转换为空字符串。
如果数组中的元素是数组,会将里面的数组也调用join()/toString(),如果数组中是对象,对象会被转为[object Object]字符串。
例子:
let a= [['Kobe','24'],'great'];
console.log(a.join()); // "Kobe,24,great"
let b = [{name:'kobe', number:24&8}, 'love']
console.log(b.join()); // "[object Object],love"
3.toString
定义:用于把数组转换为由逗号链接起来的字符串。
区别:该方法的效果和join方法一样,都是用于数组转字符串的,但是与join方法相比没有优势,也不能自定义字符串的分隔符,因此不推荐使用。
let arr = [1, 2, 3, 4]
console.log(arr.toString()) // “1,2,3,4”
4.slice()
定义:返回一个含有被提取元素的新数组。
参数:arr.slice([begin , end)) (前闭后开)
1.begin:默认值为0,如果超出原数组的索引范围,则会返回空数组
2.end:如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。
3.当只有一个参数的情况下,返回该参数指定位置开始到当前数组末尾的所有项
4.当参数为负数时,将 负数 + 数组长度的值 来替换该位置
var arr = [1, 3, 5, 7, 9, 11];
var arrCopy = arr.slice(1); // [3, 5, 7, 9, 11]
var arrCopy2 = arr.slice(1, 4); // [3,5,7]
var arrCopy3 = arr.slice(1, -2); // [3,5,7]
var arrCopy4 = arr.slice(-4, -1); // [5,7,9] 相当于slice(2,5)
扩展:slice()可以实现浅拷贝
5.indexOf
定义:查找某个字符,有则返回第一次匹配到的下标值,否则返回 -1
语法: array.indexOf(searchElement,fromIndex)
参数:
searchElement: 必传参数;要查找的元素
fromIndex: 可选参数;表示调用该方法的字符串中开始查找的位置。可以是任意整数。默认值为 0。如果 fromIndex < 0 则查找整个字符串(如同传进了 0)。如果 fromIndex >= str.length,则该方法返回 -1,除非被查找的字符串是一个空字符串,此时返回 str.length。
var str = 'hello world';
str.indexof('o', -5) // 4 从0开始遍历
str.indeof('0', 11) // -1
注意:
1.严格相等的搜索:数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素,即数组元素要完全匹配才能搜索成功。
2.indexOf()不能识别NaN
let a = ['啦啦', 2, 4, 24, NaN]
a.indexOf('啦'); // -1
a.indexOf('NaN'); // -1
a.indexOf('啦啦'); // 0
6.lastIndexOf()
定义:查找某个字符,有则返回最后一次匹配到的位置,否则返回-1
语法; arr.lastIndexOf(searchElement,fromIndex)
参数: searchElement(必须): 被查找的元素
fromIndex(可选):
1.正值:如果该值大于或等于数组的长度,则整个数组会被查找。
如果该值小于数组的长度,则从该值的位置向前查找。
2.负值。若其绝对值小于数组长度,将其视为从数组末尾向前的偏移。(比如-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
let b = a.lastIndexOf(''); // 10
let b = a.lastIndexOf('', 2); // 2 如果searchValue是空字符串,则fromIndex返回。
7.includes()
定义:返回一个布尔值,表示某个数组是否包含给定的值
语法:array.includes(searchElement,fromIndex=0)
参数:
searchElement(必须):被查找的元素 fromIndex(可选):默认值为0,参数表示搜索的起始位置,接受负值。
正值超过数组长度,数组不会被搜索,返回false。
负值绝对值超过长数组度,从0开始搜索整个数组。
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 从倒数第三个元素开始搜索
let b = a.includes('Koro1', -100); // true 负值绝对值超过数组长度,搜索整个数组
改变原数组
1.splice()
定义: splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目的新数组
语法: array.splice(index,howmany,item1,.....,itemX)
index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置
howmany:可选。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX: 可选。向数组添加的新项目。
eg1: 删除元素
// 从数组下标0开始,删除3个元素
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]
let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除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']
// 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加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] 在最后一个元素的前面添加两个元素
2.sort()
定义: 对数组元素进行排序,并返回排序后的数组。
参数: 传入比较函数
// 字符串排列 默认按字母排序
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];
比较函数的两个参数: sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用a和b来接受要比较的元素。
若比较函数返回值<0,那么a将排到b的前面, 升序排序
若比较函数返回值=0,那么a 和 b 相对位置不变;
若比较函数返回值>0,那么b 排在a 将的前面,降序排序
var array = [10, 1, 3, 4, 20, 4, 25, 8];
array.sort(function (a, b) {
return a - b;
});
console.log(array); // [1,3,4,4,8,10,20,25];
array.sort(function (a, b) {
return b - a;
});
console.log(array); // [25,20,10,8,4,4,3,1];
3.pop()
定义:删除一个数组中的最后的一个元素,返回被删除的元素
let a = [1, 2, 3];
let item = a.pop(); // **3**
console.log(a); // [1,2]
4.shift()
定义: 删除数组的第一个元素,返回被删除的元素。
let a = [1, 2, 3];
let item = a.shift(); // 1
console.log(a); // [2,3]
5.push()
定义:向数组的末尾添加一个或多个元素,返回新的长度。
参数:item1, item2, ..., itemX,要添加到数组末尾的元素
let a = [1, 2, 3];
let item = a.push('末尾', '末尾1'); // 5
console.log(a); // [1,2,3,'末尾','末尾2']
6.unshift()
定义:向数组的开头添加一个或更多元素,并返回新的长度。
参数: item1, item2, ..., itemX ,要添加到数组开头的元素
let a = [1, 2, 3];
let item = a.unshift('开头'); // 4
console.log(a); // ['开头',1,2,3]
7.reserve()
定义: 用于颠倒数组中元素的顺序,返回倒序后的数组。
let a = [1, 2, 3];
a.reverse();
console.log(a); // [3,2,1]
8.fill()
定义:使用给定值,填充一个数组,返回填充后的数组
参数:
第一个元素(必须): 要填充数组的值
第二个元素(可选): 填充的开始位置,默认值为0
第三个元素(可选):填充的结束位置,默认是为this.length
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4)); // [1, 2, 0, 0]
console.log(array1.fill(5, 1)); // expected output: [1, 5, 5, 5]
console.log(array1.fill(6)); // expected output: [6, 6, 6, 6]
遍历数组
以下几个函数,参数语法都很类似: every/some/map/filter/forEach/find/findIndex
语法: array.every(function(currentValue, index, arr), thisValue)
参数:
1. currentValue(必须),数组当前元素的值
2.index(可选), 当前元素的索引值
3.arr(可选),数组对象本身
4.thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined
1.every()
定义:判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function (x) {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function (x) {
return x < 3;
});
console.log(arr3); // false
2.some()
定义: 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function (x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function (x) {
return x < 1;
});
console.log(arr3); // false
3.filter()
定义:数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function (x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
4.map()
定义:用于对数组中的每个元素进行修改,返回其构成的新数组
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function (item) {
return item * item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
5.forEach()
定义: 按升序为数组中含有效值的每一项执行一次回调函数,返回值是undefined
var arr = ["Tom", "Jack", "Lucy", "Lily", "May"];
var a = arr.forEach(function (value, index, self) {
console.log(value + "--" + index + "--" + (arr === self));
})
console.log(a); //undefined---forEach没有返回值
6.find() & findIndex()
find()定义:用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined。
findIndex()定义:返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
注意:这两个方法都可以识别NaN,弥补了indexOf()的不足.
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10, NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10, NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4
7.reduce()
定义:reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数:
- total(必须),初始值, 或者上一次调用回调返回的值
- currentValue(必须),数组当前元素的值
- currentIndex(可选),当前元素的索引值
- arr(可选),数组对象本身
执行过程:
回调第一次执行时,如果 initialValue 在调用 reduce 时被提供,那么第一个 total 将等于 initialValue,此时 currentValue 等于数组中的第一个值;
如果 initialValue 未被提供,那么 total 等于数组中的第一个值,currentValue 等于数组中的第二个值。此时如果数组为空,那么将抛出 TypeError。
如果数组仅有一个元素,并且没有提供 initialValue,或提供了 initialValue 但数组为空,那么回调不会被执行,数组的唯一值将被返回。
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);