数组的操作

仰望星空的小猴子
107 阅读8分钟

内置对象-数组

1. 数组的API和内置方法

1.1 判断数组

  • Object.prototype.toString.call(val) === '[Object Array]'
  • Array.isArray(val)
  • val instanceof Array
  • 更多方法查看

1.2 转换数组

  • toString():把数组转换成字符串，每一项用,分割，字符串=数组.toString()
    • var arr = [1,2,3,4]; arr.toString(); // 1,2,3,4
  • valueOf(): 返回数组对象本身，数组本身 = 数组.valueOf()
    • var arr = [1,2,3,4]; arr.valueOf(); // [1,2,3,4]
  • join: 根据每个字符把数组元素连接起来变成字符串
    • 字符串 = 数组.join(变量)，变量可有可无，不写默认为逗号分割,无缝连接用空字符串
    • var arr = [1,2,3,4]; arr.join();// 1,2,3,4
    • var arr = [1,2,3,4]; arr.join('');// 1234
    • var arr = [1,2,3,4]; arr.join('@');// 1@2@3@4

1.3 数组增删、拼接和替换

  • push(): 在数组最后面插入项，返回数组的长度，数组改后的长度= 数组.push(元素) + var arr = [1,2,3]; arr.push(5); // 4; arr // [1,2,3,5]
  • unshift(): 在数组最前面插入项，返回数组的长度， 数组改后的长度= 数组.unshift(元素)
    • var arr = [1,2,3]; arr.unshift(5); // 4; arr // [5,1,2,3]
  • pop(): 取出数组中的最后一项，返回最后一项，被删除的元素= 数组.pop()
    • var arr = [1,2,3,4]; arr.pop(); // 4; arr // [1,2,3]
  • shift(): 取出数组第一个元素，返回第一项，被删除的元素= 数组.shift()
    • var arr = [1,2,3,4]; arr.shift(); // 1; arr // [2,3,4]
  • reverse(): 翻转数组(原数组将被翻转,返回值也是被翻转后的数组)，翻转后的数组= 数组.reverse()
    • var arr = [1,2,3,4]; arr.reverse(); // [4,3,2,1]; arr // [4,3,2,1]
  • sort(): 给数组排序，返回排序后的数组，如何排序看参数
    • 如无参数，按照数组元素的首字符对应的unicode编码值从小到大排列数组元素
    • 带参数，必须为函数，函数中有两个参数，代表数组中的前后元素，如果计算后(a-b)为负值，a排b前面，降序；等于0，不动；返回值为正数，a排b后面，升序
    • var arr = [3,2,4,1]; arr.sort(function(a,b){ return a-b}); // [1,2,3,4]; arr // [1,2,3,4]
  • concat(): 把参数拼接到当前数组，新数组= 数组1.concat(数组2)
    • var arr1 = [1,2,3], arr2 = [4,5,6]; var arr3 = arr1.concat(arr2); // arr3 = [1,2,3,4,5,6]
    • var arr1 = [1,2,3], arr2 = [4,5,6]; var arr3 = [...arr1,...arr2]; // arr3 = [1,2,3,4,5,6]
  • slice(): 从当前数组中截取一个新的的数组，不影响原来的数组，参数start从0开始，end从1开始，新数组= 数组.slice(start,end); 包左不包右
    • var arr = [1,2,3,4]; arr.slice(1,2); // [1]; arr [1,2,3,4]
    • var arr = [1,2,3,4]; arr.slice(1); // [1,2,3,4]; arr [1,2,3,4]
    • var arr = [1,2,3,4]; arr.slice(-1); // [3]; arr [1,2,3,4]
  • splice(): 删除或替换当前数组的某些项目，参数start,end,options(要替换的项目)， 新数组= 数组.splice(start, end, options)
    • var arr = [1,2,3,4]; arr.splice(1); //[2, 3, 4]; arr [1]
    • var arr = [1,2,3,4]; arr.splice(1,2); //[2, 3]; arr [1,4]
    • var arr = [1,2,3,4]; arr.splice(1,2,6); //[2, 3]; arr [1,6,4]
    • var arr = [1,2,3,4]; arr.splice(1,1,6); //[2]; arr [1,6,3,4]
  • indexOf(): 从前往后给元素查找索引，找到一个后，立刻返回， 索引值= 数组.indexOf(数组中的元素)
    • var arr = [1,2,3,4]; arr.indexOf(2); //1; arr [1,2,3,4]
  • lastIndexOf(): 从后往前给元素查索引,找到一个后,立刻返回 索引值= 数组.lastIndexOf(数组中的元素
    • var arr = [1,2,3,4]; arr.lastIndexOf(2); //1; arr [1,2,3,4]

1.4 迭代方法 不会修改原数组every()、filter()、forEach()、map()、some()

var arr = [1,2,3,4];
数组/boolean/无 = arr.every/filter/forEach/map/some(
  (element,index,arr) => {
     // 程序和返回值；                       
   }
);
  • every(): 对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；不写默认返回false
    • arr.every((item,index,arr)=> item >= 1); // true
    • arr.every((item,index,arr)=> item >= 2); // false
  • filter(): 对数组中每一项运行以下函数，返回是true的项组成的新数组
    • arr.filter((item,index,arr)=> item >= 2); // [2,3,4]
  • forEach(): 遍历数组
  • map(): 对数组中每一项运行一下函数，返回结果组成的新数组
    • var arr1 = arr.map(item => item + 1); // arr1 [2,3,4,5];arr [1,2,3,4]
  • some(): 对数组中每一项运行以下函数，该函数对某一项返回true，则some返回true
    • arr.some((item,index,arr)=> item > 3); // true
  • push():

1.5 清空数组

  • arr.splice(0, arr.length); 删除数组中所有项目
  • arr.length = 0; length属性可以赋值，其他语言中length是只读
  • arr = []; 推荐
  • 为数组不能使用

1.6 伪数组和arguments

  • Array.from(伪数组)，伪数组变成真数组
  • Array.from('foo'); // ['f', 'o', 'o']
  • argument形参
fn(1,2);  //传进去的实参个数可以大于形参的个数
function fn(a,b){
    //只在函数中使用，实参的数组。
    arguments[0] = 0;
    console.log(arguments); // [0,2]
    // 伪数组：不能修改长短的数组。(可以修改元素，但是不能变长变短)
    // arguments.push(1);
    console.log(arguments instanceof Array); // false
    //形参个数
    console.log(fn.length); // 2
    //实参个数
    console.log(arguments.length); // 2
    // arguments.callee整个函数。函数名。 
    console.log(arguments.callee);
}

2. ES6数组新增的方法

  • from：将两类对象转为真正的数组
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
  • of 将一组值，转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
  • find()和findIndex()
    • find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
    • 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2
  • includes方法返回一个布尔值， 表示某个数组是否包含给定的值，与字符串的includes方法类似, + 该方法的第二个参数表示搜索的起始位置，默认为0。
    • 如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

  • flat()用于将嵌套的数组“拉平”，变成一维的数组。

    • 该方法返回一个新数组，对原数据没有影响。参数写成一个整数，表示想要拉平的层数，默认为1。
    [1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
    • 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
    [1, [2, [3]]].flat(Infinity)
	// [1, 2, 3]

  • every、some 测试数组得元素是否都通过了指定函数得测试，一个数组是否符合某个条件，

    • every表示每一个项都必须通过才会返回true,
    • some表示只要数组元素某一项满足即可，
    var arr = [1,2,4,7,22,45,9];
var fn1 = arr.every(function(item,index){
	return item >10;
})
console.log(fn1);//false

var fn2 = arr.some(function(){
	return item >10;
})
console.log(fn2);//true

  • filter

    • 调用filter得结果时创建一个新数组，数组得元素时通过所提供函数通过测试得所有元素
    var fn3 = arr.filter(function(item,index,array){
	return item >10
})
console.log(fn3);//[22, 45]
    • 如果处理表达式是运算，将无效，返回元素组成员组成的数组
    var fn33 = arr.filter(function(item,index,array){
	return item*2;
})

  • map 调用map得结果也是创建一个新数组，不同的是

    • 如果给定的处理函数得表达式时逻辑判断，它返回得时布尔值组成的数组
    var fn4 = arr.map(function(item,index,array){
	return item >10;
})
console.log(fn4);//false,false,false,false,true,true,false
    • 如果给定处理函数得表达式是运算表达式，它返回的每一项运算后得结果得数组
    var fn44 = arr.map(function(item,index,array){
	return item *2;
})
console.log(fn44);//2,3,8,14,44,90,18

  • reduce

    • reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
    • 接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
    • previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    • currentValue （数组中当前被处理的元素，当前参与叠加的项）
    • index （当前元素在数组中的索引）
    • array （调用 reduce 的数组
    var sum = arr.reduce(function(prev, cur, index, arr) {
     console.log(prev, cur, index);
     return arr + cur;
})
console.log(arr, sum);
1 2 1
1,2,4,7,22,45,92  4 2
1,2,4,7,22,45,94  7 3
1,2,4,7,22,45,97  22 4
1,2,4,7,22,45,922  45 5
1,2,4,7,22,45,945  9 6
[1, 2, 4, 7, 22, 45, 9] "1,2,4,7,22,45,99"

    • 可以看出，reduce函数根据初始值0，不断的进行叠加，完成最简单的总和的实现。

    • reduce函数的返回结果类型和传入的初始值相同，上个实例中初始值为number类型，同理，初始值也可为object类型。

avatar
文章
阅读
粉丝