数组知识总结

发布于 2021-01-25  649 次阅读 本文共6271个字


数组简介

所谓数组,是相同数据类型的元素按一定顺序排列的集合。 若将有限个类型相同的变量的集合命名,那么这个名称为数组名,里边的每一项称为数组的元素。

创建一个数组最简单的方式是数组直接量的方式:

let arr = [1,2,3,4,5,6,7,8,9];

也可以用构造函数的方式来创建:

let arr = new Array(1,2,3,4)

数组方法

添加和删除

push()

该方法可向数组的末尾添加一个或者多个元素(任意js数据类型的值),并返回新的数组的长度,原数组改变。

可以这么来理解,push是对数据的压栈操作,比如说:桌子上堆了一摞厚厚的书,压栈就是把书一本本的往上加。

使用语法:arr.push(ele1, ele2, ele3..., eleN) 其中第一个是必填的,指将第一个元素添加到数组中,后边的参数是可选的,在使用过程中也一般只传第一个参数,再做便利即可。

let arr = [123];
arr.push(1); // 1
console.log(arr); // 123

unshift()

该方法可向数组的开头添加一个或多个元素(任意js数据类型的值),并返回新的数组的长度,原数组改变。

它的作用不要和push混淆,一个是从数组的开头进行元素添加,一个则是从数组的末尾进行元素添加。

使用方法:arr.unshift(ele1, ele2, ele3...eleN),这里的元素和push一样,都是第一必填,后边的可选。

let arr = [];
arr.unshift(321); // 1
console.log(arr); // 321

concat()

该方法用于连接两个或者多个数组,该方法不会改变原数组,只会返回一个被连接后的数组。

使用语法:arr.concat(arr1, arr2, arr3...arrN)

元素参数传入规则都同上。

let arr = [0];
arr.concat([123], [456]); // [0,123,456]
console.log(arr); // [0]

pop()

该方法删除数组的最后一项,返回被删除的最后一项元素,数组长度减一,原数组改变。如果数组已经为空,再去执行pop(),返回undefined。

使用方法:arr.pop(),括号内不需要传参。

let arr = [9];
arr.pop(); // 9
arr.pop(); // undefined
console.log(arr); // []

shift()

该方法删除数组的第一项,返回被删除的第一项元素。数组长度减一,原数组改变。若数组已经为空,再去执行shift(),返回undefined

使用方法:arr.shift()

let arr = [9];
arr.shift(); // 9
arr.shift(); // undefined
console.log(shift); // []

slice 和 splice

slice()

该方法可以从已有的数组中返回规定的元素,此方法返回的是一个新数组,包含startIndex到endIndex前一位的数组中的元素。原数组不变。

使用方法:arr.slice(startIndex, endIndex),其中startIndex是必填项,表示开始选取元素的位置,但如果是负数的话,就表示从数组的尾部开始算起(-1为最后一个元素,-2为倒数第二个元素...)。endIndex是可选的,规定了从何处结束选取,如果不传,则表示从规定的起始位置一直选取到结束,如果是负数,表示从数组的尾部开始算起的元素。

let arr = [1,2,3,4,5];
arr.slice(2,4); // [3, 4]
console.log(arr); // [1, 2, 3, 4, 5]

splice()

该方法用于对数组添加、删除、替换 的功能。添加功能返回处理后的数组;删除功能返回被删除的项,若没有任何元素可以删除,则返回空数组;替换则返回被替换的项,会改变原数组。

使用方法:arr.splice(index, count, item1, item2...itemN)

参数说明:index是必填项,而且必须是整数,这个参数指定了添加或删除项的位置。index为负数时,表示可以从数组结尾处规定的位置执行该方法;count也是必填参数,指定要删除的项目数量,如果设置为0,则不删除项目,后边添加参数的话,此时就可以实现插入的功能了;item是可选参数,如果不传,则指向删除功能,传入的话,则可以实现添加和替换 的功能

let arr = [1,2,3,4,5];
// 从数组索引第1个开始,删除2项
arr.splice(1,3); // [2, 3, 4]
console.log(arr); // [1, 5]
// 从数组索引第0个开始,删除一个元素,插入7,8,9。也就是用7,8,9三个元素替换掉1
arr.splice(0, 1, 7, 8, 9); // [1]
console.log(arr); // [7, 8, 9, 5]
// 从数组索引第2个开始,不删除任何元素,插入一个0
arr.splice(2, 0, 0); // []
console.log(arr); // [7, 8, 0, 9, 5]

toString()

该方法用于将一个逻辑值转换为字符串,并返回结果。

let age = 18;
let str1 = age.toString(); // str结果为 '18'
console.log(str1); // '18'

let flag = false;
let str2 = flag.toString();
console.log(str2); // 'false'

数值、布尔值、对象、字符串都有toString方法,但null 和 undefined没有此方法

toString在大多数情况下不需要传递参数,因为默认情况下该方法都是以十进制的格式返回数值的结果。如果传递参数给toString()的话,则可以以二进制、八进制、十六进制表示相应结果。

let num = 16;
console.log(num.toString(2)); // 二进制,值为1000
console.log(num.toString(8)); // 八进制,值为20
console.log(num.toString(16)); // 十六进制,值为10
console.log(num.toString(5)); // 没有五进制,但是传参是可以被toString所接受的,值为31

没有重新定义toString方法,调用toString方法将Object类型转换为string类型则返回"[object Object]",此时调用的是从Object继承来的原始的toString方法。

let obj = {
  name: 'gjr',
  age: 18
};
console.log(obj.toString()); // [object Object]

用toString判断数据类型

Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call("abc"); // "[object String]"
Object.prototype.toString.call(123); // "[object Number]"
Object.prototype.toString.call(true); // "[object Boolean]"

function fn() { console.log('test'); } // 函数类型
Object.prototype.toString.call(fn); "[object Function]"

let arr = [1,2,3]; // 数组类型
Object.prototype.toString.call(arr); // "[object Array]"

排序方法

reverse()

该方法是用于颠倒数组中元素的顺序,该方法是直接操作原数组,所以原数组会改变,不会创建一个新的数组,并且,使用时不需要传参。如arr.reverse()。

sort()

该方法用于对数组的元素进行排序,和reverse方法类似,该方法也是直接在原数组上进行排序,会改变原数组。

调用该方法但不传参时,如arr.sort(),此时该方法将按照ASCII码的字母顺序对数组中的元素进行排序,这是封装时这样设计的,使用时需要注意。

let arr = ['1', '3', 'b' , '2', 'a', 'c'];
arr.sort();
console.log(arr); // ["1", "2", "3", "a", "b", "c"]

如果需要按照其他的标准进行排序时,可以将函数直接量作为该方法的传参,从而实现排序,如以下写法可以实现升序排序(对DOM元素排序,对对象的排序,用的排序算法是插入排序的思想):

let arr = [3, 56, 78, 5, 9, 23];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // [3, 5, 9, 23, 56, 78]
// 给带单位的变量进行排序
let arr = ['3px', '56px', '78px', '5px', '9px', '23px'];
arr.sort(function(a, b) {
  return parseInt(a) - parseInt(b);
});
console.log(arr);

数组转换

toLocaleString()

toLocaleString() 方法用于将数组转换为本地字符串,作用和toString() 差不多,但此方法是使用地区特定的分隔符来将生成的字符串连接起来。

valueOf()

该方法可以返回Array对象的原数值,通常都是在后台隐式的调用该方法,一般不会显式的出现在代码中。

join()

该方法用于将一个数组的所有元素按指定的分隔符分隔,转换成字符串。

split()

该方法用于将字符串按片段分隔创建数组,和join()的功能正好相反。

位置方法

位置方法包含indexOf() 、lastIndexOf() 这两个方法,用于搜索整个数组中具有给定值的元素,并且返回找到的第一个元素的索引值,如果没有找到,则返回-1。两者不同的是,indexOf() 方法是从头到尾的搜索,而lastIndexOf() 则是从尾向前搜索。

参数说明:indexOf() 和 lastIndexOf() 方法的第一个参数都是必须的,传入的是需要搜索的目标,而第二个参数是可选的,即指定开始搜索的位置,如果不传的话,indexOf() 方法默认从头开始搜索,lastIndexOf() 方法默认从末尾开始搜索。第二个参数也可以是一个负数,表示相对数组末尾的偏移量,所以这也使以上两个方法的使用没有明确的界限划分。

迭代方法

every()

该方法对数组中的每一项都运行给定的函数直接量,如果该函数对每一项都返回true,则该方法返回true,注意的是每一项都满足条件该方法才会返回true。

let arr = [1, 2, 3, 4, 5];
let result = arr.every(function(item) {
  return item > 3;
})
console.log(result); // false

let result1 = arr.every(function(item) {
  return item > 0;
});
console.log(result1); // true

filter()

该方法对数组的每一项都运行给定函数,返回该函数返回true的项组成的数组

从字面意思理解,该方法是对数据执行一个过滤作用,满足条件的返回,不满足的丢弃,如:

let arr = [1, 2, 3, 4, 5];
let result = arr.filter(function(item) {
  return item > 3;
});
console.log(result); // [4, 5]

forEach()

对数组的每一项运行给定函数,但该方法没有返回值。

该方法就有一个遍历数组元素的作用,不用每次去写for循环进行操作了。

map()

对数组的每一项运行给定的函数,返回每次函数调用的结果组成的数组。

注意:这里返回数组,和some() 等方法返回布尔值不一样,使用时需要注意区别。

let arr = [1, 2, 3, 4, 5];
let result = arr.map(function(item) {
  return item > 3;
});
console.log(result); // [false, false, false, true, true]

some()

对数组的每一项运行给定的函数,如果该函数对任一项都返回true,则该方法返回true。

和every有点类似,但every是需要每一项都要满足条件,而some只要有一条满足就直接返回true。

let arr = [1, 2, 3, 4, 5];
let result = arr.some(function(item) {
  return item > 3;
});
console.log(result); // true

缩小方法

reduce()

该方法从数组的第一项开始逐个遍历至尾,使用指定的函数来将数组的元素进行整合,只生成单个的值。

参数说明:reduce() 需要两个参数,第一个参数是执行化简操作的函数,这个参数是必须的;第二个参数是一个传递给函数的初始值(就是传递给第一个函数参数执行操作的第一个值)。在接下来的操作中,这个值就是上一次函数的返回值了,而当第二个传参不使用时,化简函数就使用数组的第一个元素和第二个元素作为其第一个和第二个参数进行计算。可以结合下边的栗子进行理解。

let arr = [1, 2, 3, 4, 5];

// 对数组元素求和
let sum = arr.reduce(function(item1, item2) {
  return item1 + item2;
});
console.log(sum); // 15
let sum1 = arr.reduce(function(item1, item2) {
  return item1 + item2;
}, 0);
console.log(sum1); // 15
let sum2 = arr.reduce(function(item1, item2) {
  return item1 + item2;
}, 9);
console.log(sum2); // 24

// 求数组中各元素乘积
let multi = arr.reduce(function(item1, item2) {
  return item1 * item2;
});
console.log(multi); // 120
let multi1 = arr.reduce(function(item1, item2) {
  return item1 * item2;
}, 1);
console.log(multi1); // 120
let multi2 = arr.reduce(function(item1, item2) {
  return item1 * item2;
}, 2);
console.log(multi2); // 240

// 求最大值
let max = arr.reduce(function(item1, item2) {
  return item1 > item2 ? item1 : item2;
});
console.log(max); // 5
let max = arr.reduce(function(item1, item2) {
  return item1 > item2 ? item1 : item2;
}, 9);
console.log(max); // 9


努力,只为遇见更好的自己!