数组 Array .png

数组是引用类型,JavaScript中万物皆对象。
数组元素可以是一个字符串,数字,数组,布尔,或者其他对象类型。

数组的创建

1.使用数组字面量

let arr0 = [1, "array", true, Date.now()];

2.使用构造函数Array()

let arr1 = new Array();//等同于[]
let arr2 = new Array(1, 2, 3, "array");//显示指定
let arr3 = new Array(10);//指定长度

数组的属性

属性 描述
length 设置或返回数组元素的个数
constructor 返回创建数组对象的原型函数
prototype 向数组对象添加属性或方法

数组的方法

数组方法.png

会改变自身的方法

  • pop()

功能:用于删除数组的最后一个元素并返回删除的元素。
参数:无
返回值:返回删除的元素

let arr = [2, 4, 6, 'a', 8, true, 9];
arr.pop();
console.log(arr);//[ 2, 4, 6, 'a', 8, true ]
  • push()

功能:向数组的末尾添加一个或更多元素,并返回新的长度。
参数:push(newData1, newData2, ......)
返回值:新数组长度

let arr = [2, 4, 6, 'a', 8, true, 9];
arr.push("c");
console.log(arr);//[ 2, 4, 6, 'a', 8, true, "c" ]
  • shift()

功能:用于删除并返回数组的第一个元素。
参数:无

let arr = [2, 4, 6, 'a', 8, true, 9];
console.log(arr.shift());//2
console.log(arr);//[ 4, 6, 'a', 8, true, 9 ]
  • unshift()

功能:向数组的开头添加一个或更多元素,并返回新的长度。
参数:unshift(newData1, newData2, ......)

let arr = [2, 4, 6, 'a', 8, true, 9];
arr.unshift(()=>{});
console.log(arr);//[ [Function], 2, 4, 6, 'a', 8, true, 9 ]
  • reverse()

功能:颠倒数组中元素的顺序,并返回更改后的数组
参数:无

let arr = [2, 6, 'a', 8, true, 9];
arr.reverse();
console.log(arr);//[ 9, true, 8, 'a', 6, 2 ]
  • sort()

功能:对数组中的元素进行排序,默认是升序,返回新数组
参数:无
注意:在排序前,会先调用数组的toString()方法,将每个元素都转成字符之后,再进行排序,此时会按照字符串的排序,逐位比较,进行排序。

let arr = [2, 16, 'a', 8, true, 9];
arr.sort();
console.log(arr);//[ 16, 2, 8, 9, 'a', true ]

解决方法:通过传入自定义函数 。sort(fn)
若fn(a,b)函数返回负数,则a排在b前面。
若fn(a,b)函数返回负数,则b排在a前面。

function fnS_B(a,b){ //从小到大
    return a-b;
}
function fnB_S(a,b){ //从大到小
    return b-a;
}
//注意:Number('a')为 NaN,不能用于排序。
let arr = [2, 16,  8, true, 9];
console.log(arr.sort(fnS_B));
console.log(arr.sort(fnB_S));
  • splice()

功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。数组的长度前后不会改变。
参数:splice(start,num,data1,data2,...); 所有参数全部可选;分为多种情况

  • start:整数,规定添加/删除项目位置的索引,使用负数可从数组结尾处规定删除的位置
  • num:整数,规定要删除元素的数量,若为0则不会删除
  • data1,data2,data3.....:可选,规定需要添加的元素
let arr = [2, 8, true, 9];
arr.splice(1, 0, 'a', 'b');
console.log(arr);//[ 2, 'a', 'b', 8, true, 9 ]
arr.splice(1,2,16);  
console.log(arr);//[ 2, 16, 8, true, 9 ]
  • copyWithin() #ES6

功能:从数组的指定位置拷贝元素到数组的另一个指定位置。并返回新数组。
参数:array.copyWithin(target, start, end)

  • target:必需。复制到指定目标索引位置。
  • start:可选。元素复制的起始位置。默认start = 0。
  • end:可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。

注意:复制的元素是[start,end)

let arr = [2, 8, 'a', true, 9];
console.log(arr.copyWithin(1, 2, 4));//[ 2, 'a', true, true, 9 ]
  • fill #ES6

功能:用于将一个固定值替换数组的元素。
参数:array.fill(value, start, end)

  • target :必需。复制到指定目标索引位置。
  • start:可选。元素复制的起始位置。默认start = 0。
  • end:可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。

注意:复制的元素是[start,end)

let arr = [2, 8, 'a', true, 9];  
console.log(arr.fill(6, 1, 3));//[ 2, 6, 6, true, 9 ]

不会改变自身的方法

这些方法都返回操作后的结果
  • concat()

功能:用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
参数:array1.concat(array2,array3,...,arrayX)

let arr1= [1,'a',false];
let arr2=[2,'b',true];
console.log(arr1.concat(arr2));//[ 1, 'a', false, 2, 'b', true ]
  • join()

功能:join() 方法用于把数组中的所有元素转换一个字符串并返回这个字符串。元素是通过指定的分隔符进行分隔的。
参数:array.join(separator)

separator:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
let arr = [2, 8, 'a', true, 9];
console.log(arr.join('-')); //2-8-a-true-9
  • slice()

功能:从已有的数组中返回选定的元素。slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
参数:slice(start, end)

  • start:可选。规定从何处开始选取。
  • end:可选。规定从何处结束选取。

注意:选取元素为[ start, end )

let arr = [2, 8, 'a', true, 9];
console.log(arr.slice()); //[ 2, 8, 'a', true, 9 ]
console.log(arr.slice(1, 3)); //[ 8, 'a' ]
  • toString()

功能:可把数组转换为字符串,并返回结果。数组中的元素之间用逗号分隔。
参数:无。

let arr = [2, 8, 'a', true, 9];
console.log(arr.toString()); //2,8,a,true,9
  • indexOf()

功能:可返回数组中某个指定的元素位置。若要检索的元素没有出现,则该方法返回 -1。
参数:array.indexOf(item,start)

  • item:必选。查找的元素。
  • start:可选。规定在数组中开始检索的位置。默认start = 0。它的合法取值是 0 到 array.length - 1。
let arr = [2, 8, 'a', true, 9];
console.log(arr.indexOf(8)); // 1
console.log(arr.indexOf(9, 2)); // 4
console.log(arr.indexOf(8, -1)); //
  • lastIndexOf()

功能:返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。 若要检索的元素没有出现,则该方法返回 -1。
参数:array.lastIndexOf(item,start)

  • item:必选。查找的元素。
  • start:可选。规定在数组中开始检索的位置。默认start= -1。
let arr = [2, 8, 'a', 8,true, 9];
console.log(arr.lastIndexOf(8, 1)); // 1
console.log(arr.lastIndexOf(8)); // 3
  • includes() #ES7

功能:用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
参数:arr.includes(item, start)

  • item:必选。查找的元素。
  • start:可选。规定在数组中开始检索的位置。默认start= 0。如果为负值,则按升序从 array.length + start 的索引开始搜索。

注意与indexOf()的区别。

let arr = [2, 8, 'a', true, 9];
console.log(arr.includes(8));  //true
console.log(arr.includes(8, 2));  //false
console.log(arr.includes(8, -2));  //false

遍历方法

  • forEach()

功能:用于调用数组的每个元素,并将元素传递给回调函数。不会对空数组进行检测。
参数:array.forEach(function(currentValue, index, arr), thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//将数组所有元素相加
let sum = 0;
function add(item){
    sum+=item;
}
let arr = [1,3,8,6];
arr.forEach(add);
console.log(sum); //18
  • map()

功能:1.同forEach功能;
2.返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
3.原数组不改变。
参数:array.map(function(currentValue,index,arr), thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。
//输出数组的平方
function fn(item) {
    return item * item;
}

let arr = [6, 2, 8, 5];
console.log(arr.map(fn)); //[ 36, 4, 64, 25 ]
  • filter()

功能:创建一个新的数组,新数组中的元素指定数组中符合条件的所有元素。如果没有符合条件的元素则返回空数组。
参数:array.filter(function(currentValue,index,arr), thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。必须返回一个boolean值。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//输出数组中的偶数
function fn(item) {
    if (item % 2) {
        return false;
    } else {
        return true;
    }
}
let arr = [6, 2, 8, 5];
console.log(arr.filter(fn)); //[ 6, 2, 8 ]
  • every()

功能:用于检测数组所有元素是否符合指定条件。如果所有元素都通过检测返回 true,否则返回 false。
参数:array.every(function(currentValue,index,arr), thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//判断数组元素是否都为偶数
function fn(item) {
    if (item % 2) {
        return false;
    } else {
        return true;
    }
}
let arr = [6, 2, 8, 5];
console.log(arr.every(fn)); //false
  • some()

功能:用于检测数组中的元素是否满足指定条件​。
some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

参数:array.every(function(currentValue,index,arr), thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//判断数组中是否存在奇数
function fn(item) {
    if (item % 2) {
        return true;
    } else {
        return false;
    }
}
let arr = [6, 2, 8, 5];
console.log(arr.some(fn));​ // true
  • reduce()

功能:从数组的第一项开始,为数组中的每一个元素依次执行函数,逐个遍历到最后,迭代数组的所有项,返回计算结果。
参数:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • function(total,currentValue, index,arr):必选。数组中每个元素需要调用的函数。

    • total:必需。初始值, 或者计算结束后的返回值。
    • currentValue:必需。当前元素。
    • currentIndex:可选。当前元素的索引。
    • arr:可选。当前元素所属的数组对象。
  • initialValue:可选。传递给函数的初始值
//将数组所有元素相加
function fn(total, item) {
    return total += item;
}

let arr = [1, 3, 8, 6];
console.log(arr.reduce(fn, 0)); //18
  • reduceRight()

功能:从数组的末尾开始,为数组中的每一个元素依次执行函数,逐个遍历到数组的第一个元素,迭代数组的所有项,返回计算结果。(与reduce执行顺序相反)
参数:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • function(total,currentValue, index,arr):必选。数组中每个元素需要调用的函数。

    • total:必需。初始值, 或者计算结束后的返回值。
    • currentValue:必需。当前元素。
    • currentIndex:可选。当前元素的索引。
    • arr:可选。当前元素所属的数组对象。
  • initialValue:可选。传递给函数的初始值
//将数组所有元素相加
function fn(total, item) {
    return total += item;
}

let arr = [1, 3, 8, 6];
console.log(arr.reduceRight(fn, 0)); // 18
  • find() #ES6

功能:返回通过测试的第一个元素值。如果没有符合条件的元素返回 undefined
参数:array.find(function(currentValue, index, arr),thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//查找第一个大于5的元素值
function fn(item) {
    return item>5;
}

let arr1 = [1, 3, 8, 6];
console.log(arr1.find(fn)); // 8
let arr2 = [1, 3, 2, 5];
console.log(arr2.find(fn)); // undefined
  • findIndex() #ES6

功能:返回通过测试的第一个元素值的索引。如果没有符合条件的元素返回 -1
参数:array.findIndex(function(currentValue, index, arr), thisValue)

  • function(currentValue, index, arr):必选。数组中每个元素需要调用的函数。

    • currentValue:必需。当前元素。
    • index:可选。当前元素的索引值。
    • arr:可选。当前元素所属的数组对象。
  • thisValue:可选。执行回调函数时用作this的值。默认值为undefined
//查找第一个大于5的元素值的索引
function fn(item) {
    return item>5;
}

let arr1 = [1, 3, 8, 6];
console.log(arr1.findIndex(fn)); // 2
let arr2 = [1, 3, 2, 5];
console.log(arr2.findIndex(fn)); // -1
  • entries(),keys() 和 values() #ES6

功能:用于遍历数组。它们都返回一个遍历器对象。可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
参数:无

let arr = [1, 3];
console.log(arr.keys());
for (let i of arr.keys()) {
    console.log(i);
}
//0
//1
for (let i of arr.values()) {
    console.log(i);
}
//1
//3
for (let [i, elem] of arr.entries()) {
    console.log(i + "--" + elem);
}
//0--1
//1--3

其他

  • 扩展运算符...

功能:将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

//扩展运算符
function add(a, b) {
    return a + b;
}

let arr = [2, 3];
console.log(add(...arr));// 5
  • from() ES6

功能:将类数组对象和可遍历对象转化为数组。
参数:Array.from(object, fn, thisValue)

  • object:必需,要转换为数组的对象
  • fn:可选,数组中每个元素要调用的函数
  • thisValue:可选,映射函数(mapFunction)中的 this 对象
let obj ={
    0:'a',
    1:'b',
    2:'c',
    length:3
};
console.log(Array.from(obj));//[ 'a', 'b', 'c' ]
  • of() ES6

功能:用于将一组值,转换为数组。主要目的是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
参数:Array.of(element0[, element1[, ...[, elementN]]])

Array(); //[]
Array.of(); //[]

Array(3);//[ , , ,]
Array.of(3);//[3]

Array(2, 4);//[2,4]
Array.of(2, 4);//[2,4]

数组应用

数组去重

  • indexOf()
// indexOf()
function unique(array) {
  let res = [];
  for (let i of arr) {
    if (res.indexOf(i) === -1) {
      res.push(i);
    }
  }
  return res;
}

let arr = [1, 1, "1", true];
console.log(unique(arr)); //[ 1, '1', true ]
  • object 键值对
function unique(arr) {
  let obj = {};
  let res = [];
  for (let i of arr) {
    if (!obj[i]) {
      obj[i] = true;
      res.push(i);
    }
  }
  return res;
}

let arr = [1, 1, "1", true];
console.log(unique(arr)); //[ 1, true ]
  • set、map ES6
function unique(array){
    return Array.from(new Set(array));
    // return [...(new Set(array))];
}
let arr = [1, 1, "1", true];
console.log(unique(arr)); //[ 1, '1', true ]

求数组的最值

使用 Math 的静态方法
Math.max();
Math.min();
  • apply()
let arr = [1, 6, 2, 8];
console.log(Math.max.apply(null,arr));//8
console.log(Math.min.apply(null,arr));//1
  • 扩展运算符 ES6
let arr = [1, 6, 2, 8];
console.log(Math.max(...arr)); //8
console.log(Math.min(...arr)); //1

数组乱序

//数组乱序
function fn(){
    return Math.random()-0.5;
}
let arr = [1,2,3,4,5,6];
console.log(arr.sort(fn));

梁柱
135 声望12 粉丝

下一篇 »
存储