Javascript基础知识之四（常用数组方法）

一、MDN链接

Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

二、简介

【1】数组对象属性

属性	描述
length	数组的长度
prototype	允许您向数组添加属性和方法

【2】数组对象方法

方法	描述
new Array()	创建新数组
Array.of()	创建新数组
Array.fill()	数组内容填充
Array.isArray()	判断是否是数组类型
Array.forEach()	遍历数组
Array.map()	由原数组每个元素执行回调函数的结果组成的新数组
Array.every()	测试一个数组内的所有元素是否都能通过某个指定函数的测试
Array.keys()	返回一个包含数组中每个索引键的Array Iterator对象
Array.push()	在数组末尾 添加一个或者多个数组元素
Array.unshift()	在数组开头 添加一个或者多个数组元素
Array.pop()	删除数组的最后一个元素
Array.shift()	删除数组的第一个元素
Array.splice()	通过删除或替换现有元素或者原地添加新的元素来修改数组
Array.filter()	过滤数组
Array.indexOf(数组元素)	返回在数组中可以找到一个给定元素的第一个索引
Array.lastIndexOf(数组元素)	返回指定元素在数组中的最后一个的索引
Array.includes()	用来判断一个数组是否包含一个指定的值
Array.sort()	对数组的元素进行排序，并返回数组
Array.toString()	数组转换为字符串
Array.join(分隔符)	数组转换为字符串
Array.split('分隔符')	字符串转换为数组
Array.from()	对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
Array.concat()	方法用于合并两个或多个数组
Array.slice()	数组切片
Array.reduce()	累加器，对数组中的每个元素按序执行一个由您提供的 reducer 函数
Array.reverse()	将数组中元素的位置颠倒

三、常用方法解读

【1】创建数组、初始化值

（1）利用数组字面量

var arr = [1, 2, 3];
console.log(arr) //[1, 2, 3]

（2）利用new Array()

var arr2 = new Array(1,2,3,4);//1,2,3,4
console.log(arr2) //[1, 2, 3, 4]
var arr3 = new Array(3);//empty*3 length:3
console.log(arr3,arr3.length); //[empty × 3] 3

（3）Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

 Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

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

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

（4）Array.fill() 往数组内填充初始值

语法：

arr.fill(value[, start[, end]])

例子：

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

---

【2】检测是否为数组

（1）instanceof  运算符 它可以用来检测是否为数组

var arr = [];
var obj = {};
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false

（2）Array.isArray(参数)

注： H5新增的方法  ie9以上版本支持

var arr = [];
var obj = {};
console.log(Array.isArray(arr));//true
console.log(Array.isArray(obj));//false

---

【3】遍历数组元素

具体参考：

Javascript基础知识之二（数据遍历）_yaping0276的博客-CSDN博客https://blog.csdn.net/yaping0276/article/details/123883536?spm=1001.2014.3001.5502（1）for循环

（2）优化版for循环

for(let j = 0,len=arr.length; j < len; j++) {
   
}

简要说明: 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

（3）for...in...

const arr = ['a','b','c','d','e','f']
for(let i in arr){
  console.log(i);//0\1\2\3\4 打印为索引号
  console.log(arr[i])//a,b,c...
}

（4）for...of...

for(let i of arr){
  console.log(i)//a,b,c...
}

（5）forEach()

注意：for循环和for-in能正确响应break、continue和return语句，但forEach不行。

arr.forEach(function(item){  
   
});

语法：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

例子：

//*例子****统计数组 arr 中值等于 item 的元素出现的次数
function count(arr, item) {
  var times = 0;
  // arr.forEach(function(element){
  //   if(element === item) times++
  // })
  arr.forEach(element => {if(element === item) times++});
  console.log(times);//count([1, 2, 4, 4, 3, 4, 3], 4);  //3
}

（6）map()

描述：一个由原数组每个元素执行回调函数的结果组成的新数组。

语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

• callback生成新数组元素的函数，使用三个参数：
• currentValue callback 数组中正在处理的当前元素。
• index可选 callback 数组中正在处理的当前元素的索引。
• array可选   map 方法调用的数组。
• thisArg可选   执行 callback 函数时值被用作this。

例子：

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

（7）every()

描述：every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

语法：

arr.every(callback(element[, index[, array]])[, thisArg])

例子：

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

（8）keys() 

描述：keys()方法返回一个包含数组中每个索引键的Array Iterator对象

解读：该方法类似for...in...

语法：

arr.keys()

例子：

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key); //遍历输出0、1、2
}

---

【4】数组添加元素

（1）push() 在数组末尾 添加一个或者多个数组元素

（2） unshift() 在数组开头 添加一个或者多个数组元素

（3）arr[arr.length]赋值操作

// 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
var arr = [1, 2, 3];
console.log(arr.push(4, 'pink'));//5
console.log(arr);//[1, 2, 3, 4, 'pink']
// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度 
// (4) 原数组也会发生变化

// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));//7
console.log(arr);//['red', 'purple', 1, 2, 3, 4, 'pink']
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度 
// (4) 原数组也会发生变化

//给数组尾巴添加数据
arr[arr.length] = 4
console.log(arr) //['red', 'purple', 1, 2, 3, 4, 'pink', 4]

---

【5】数组删除元素

（1）pop() 删除数组的最后一个元素 

（2）shift() 删除数组的第一个元素 

var arr = [1, 2, 3];
// 1. pop() 它可以删除数组的最后一个元素  
console.log(arr.pop());//3
console.log(arr);[1, 2]
// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素 
// (4) 原数组也会发生变化

// 2. shift() 它可以删除数组的第一个元素  
console.log(arr.shift());//1
console.log(arr);//[2]
// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素 
// (4) 原数组也会发生变化

---

【6】替换指定位置元素

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法：

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

• start 指定修改的开始位置（从0计数）
• deleteCount(可选)表示要移除的数组元素的个数
• item1, item2, ...要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素

例子：

const months = ['Jan', 'March', 'April', 'June'];
//splice的第二个参数为0时，表示插入数据
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
//删除索引2位置起，2个元素
months.splice(2,2);
console.log(months); //Array ["Jan", "Feb", "March"]

---

【7】筛选/过滤 数组元素

（1）for循环遍历筛选

var arr = [1500, 1200, 2000, 2100, 1800];
  var newArr = [];
  for (var i = 0; i < arr.length; i++) {
      if (arr[i] < 2000) {
          // newArr[newArr.length] = arr[i];
          newArr.push(arr[i]);
      }
  }
console.log(newArr);//[1500, 1200, 1800]

（2）filter过滤器

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 

语法：

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

• callback        用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
• element        数组中当前正在处理的元素。
• index可选       正在处理的元素在数组中的索引。
• array可选       调用了 filter 的数组本身。
• thisArg可选        执行 callback 时，用于 this 的值。

例子一：

//【1】filter
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
//(1)箭头函数写法
const result = words.filter(word => word.length > 6);
console.log(result.toString()) //exuberant,destruction,present
//(2)普通函数写法
const result_two = words.filter(
  function(word ,index ,array){
    //do something
    console.log(word,index,array);
    return word.length > 6//最终return true的word可以返回到result_two中
  }
)
console.log(result_two);//['exuberant', 'destruction', 'present']

例子二：数组对象过滤

//对对象数组进行过滤
var cups = [
  { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
  { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
  { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
  { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
]
var filtered_arr = cups.filter((ele) => {return ele.sales<100;});

例子三：实现Array.filter函数的功能且该新函数命名为"_filter"

//语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
//要求实现Array.filter函数的功能且该新函数命名为"_filter"
//在Array的原型上增加_filter()方法
Array.prototype._filter = function(fn){
  //1、判断fn是否为方法
  if (typeof fn !== 'function') {
    throw new TypeError('should be function')
  }
  //2、创建一个新数组接收过滤后的值
  const newArray = []
  //3、循环遍历数组中的每个值，分别调用函数参数，将满足判断条件的元素添加进空数组中
  //（1）拿到数组
  let arr = this //this指向调用方法的Array
  //（2）将满足判断条件的元素添加进空数组中
  for(var i=0; i<arr.length; i++){
    let result = fn.call(fn, arr[i], i, arr);//result为true or false //后面的三个是传给fn的参数 //fn可以改写为null
    result && newArray.push(arr[i])
  }
  return newArray
}

let a = words._filter(function(element){
  console.log(arguments);
  return element.length > 6
})
console.log(a)

 例子四：上面的问题的第二种写法

//第二种方式
Array.prototype._filter_one = function(fn){
    let newArr = [];
    this.forEach((item,index,array) => {
        if(fn(item,index,array)){//item在fn方法中返回true
            newArr.push(item);
        }
    })
    return newArr;
}

---

【8】查找满足条件的数组索引号

（1）indexOf(数组元素)

描述：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。注意：它只返回第一个满足条件的索引号。

语法：

arr.indexOf(searchElement[, fromIndex])

例子：

var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));//-1
console.log(arr.indexOf('green'));//1

（2）lastIndexOf(数组元素)

描述：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

语法：

arr.lastIndexOf(searchElement[, fromIndex])

例子：

var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4

---

【9】判断数组中是否存在某个值

（1）includes()

描述：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false

语法：

arr.includes(valueToFind[, fromIndex])

例子：

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

（2）用indexOf方法

---

【10】数组排序

（1）sort()

描述：对数组的元素进行排序，并返回数组，排序⽅法的默认算法是将数组内全部元素转成⼀个字符串数组，再⽐较它们的UTF-16 编码

语法：

arr.sort([compareFunction])

• compareFunction 可选        用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
• firstEl        第一个用于比较的元素。
• secondEl        第二个用于比较的元素。

例子一：

var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
    //  return a - b; 升序的顺序排列 第一个比第二个大的话，为true，交换顺序，则最终为升序
    return b - a; // 降序的顺序排列
});
console.log(arr1);//[77, 13, 7, 4, 1]
console.log(arr1.sort());//[1, 13, 4, 7, 77] //默认升序

例子二：

//*例子* 数组对象排序
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];
// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

---

【11】数组去重

数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。

(1)双重循环去重

• 目标： 把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
• 核心算法：遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。
• 我们怎么知道该元素没有存在？利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有该元素

// 封装一个 去重的函数 unique 独一无二的 
function unique(arr){
  var newArr = [];
  for(var i = 0; i < arr.length; i++){
    if(newArr.indexOf(arr[i]) === -1){
      newArr[newArr.length] = arr[i];
    }
  }
  return newArr;
}

（2）Set去重

//set去重
let a = [1,2,3,4,1,2]
let b = [... new Set(a)]
console.log(b) //[1,2,3,4]

---

【12】数组扁平化

//要放在外部，不然每次递归都要被重新赋值为空数组
let newarr = []
const _flatten = arr => {
// 补全代码 
  rr.forEach(item => {
      if(Array.isArray(item)){
           _flatten(item)
      }else{
           newarr.push(item)
      }
  })
  return newarr
}

---

【13】与其它类型的相互转换

（1）数组转换为字符串

• toString()
• join(分隔符)

// 1. toString() 将我们的数组转换为字符串,返回一个表示指定的数组及其元素的字符串。
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3

// 2. join(分隔符) 
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink

（2）字符串转换为数组 split('分隔符')

split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

var str4 = 'red, pink, blue';
console.log(str4.split(','));//['red', ' pink', ' blue']
var str5 = 'red&pink&blue';
console.log(str5.split('&'));//['red', ' pink', ' blue']
var str6 = 'abcdefg';
console.log(str6.split(''));//['a', 'b', 'c', 'd', 'e', 'f', 'g']

（3）Array.from()

描述：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

语法：

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike        想要转换成数组的伪数组对象或可迭代对象。
• mapFn 可选        如果指定了该参数，新数组中的每个元素会执行该回调函数。
• thisArg 可选        可选参数，执行回调函数 mapFn 时 this 对象。

Array.from() 方法有一个可选参数 mapFn，让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。

例子一：

//【1】从字符串生成数组
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

//【2】mapFn演示
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

//【3】从set生成数组
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

//【4】从类数组对象（arguments）生成数组
function f() {
  return Array.from(arguments);
}
f(1, 2, 3);// [ 1, 2, 3 ]

//【5】从 Map 生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

---

【14】数组连接

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

语法：

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array1);//['a', 'b', 'c']
console.log(array3);//['a', 'b', 'c', 'd', 'e', 'f']

---

【15】数组切片

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

语法：

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

例子：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));//['camel', 'duck', 'elephant']
console.log(animals.slice(1, 5));//['bison', 'camel', 'duck', 'elephant']

---

【16】累加器

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

具体参考：

Array.prototype.reduce() - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

• accumulator 累计器
• currentValue 当前值
• currentIndex 当前索引
• array 数组

回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

例子一

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);// 初始值为0，这数组的第一个为初始值，当前currentValue为1
var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);// 和为 6

例子二：二维数组化为一维数组

//累加器例子：将二维数组化为一维数组
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);//a的初始值为[0,1] concat[2,3]...由此累加
  },
  [] //初始值 空[]
);
// flattened is [0, 1, 2, 3, 4, 5]

---

【17】数组反转

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);//['blue', 'red', 'pink']

四、实例

目录

一、MDN链接

二、简介

【1】数组对象属性

【2】数组对象方法

三、常用方法解读

【1】创建数组、初始化值

【2】检测是否为数组

【3】遍历数组元素

【4】数组添加元素

【5】数组删除元素

【6】替换指定位置元素

【7】筛选/过滤 数组元素

【8】查找满足条件的数组索引号

【9】判断数组中是否存在某个值

【10】数组排序

【11】数组去重

【12】数组扁平化

【13】与其它类型的相互转换

【14】数组连接

【15】数组切片

【16】累加器

【17】数组反转

四、实例

---