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

一、MDN链接

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

二、简介

【1】数组对象属性

【2】数组对象方法

三、常用方法解读

【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）arr.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]

【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）sort()

描述：对数组的元素进行排序，并返回数组

语法：

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)
});

【10】数组去重

(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]

【11】数组扁平化

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

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

（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'];

【13】数组连接

 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']

【14】数组切片

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']

【15】累加器

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]

【16】数组反转

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

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

四、实例