【Javascript 基础】数组方法及其应用

最新推荐文章于 2022-12-07 14:59:01 发布

mirror_Mx

最新推荐文章于 2022-12-07 14:59:01 发布

阅读量279

点赞数

分类专栏： JavaScript 文章标签： javascript 数组

本文链接：https://blog.csdn.net/mirror_Mx/article/details/110194272

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型

Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

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

添加/删除

push arr.push(element1, ..., elementN)
作用：向 数组末尾 追加一项
参数：添加的具体项，可以是一项，也可以是多项
返回值：新数组的长度
是否改变原数组：改变
```
var ary=[‘a’，‘b’，‘c’];
var res= ary .push (‘d’，‘e’)
console.log(ary);//[‘a’，‘b’，‘c’，‘d’，‘e’];
console.log(res);//5
```

pop：
作用：删除数组的最后一项
参数：无
返回值：删除的项
是否改变原数组：改变

var ary = [‘1’,‘2’,‘3’];
var res = ary.pop();
console.log(ary); // [‘1’,‘2’];
console.log(res); // [‘3’];

unshift arr.unshift(element1, ..., elementN)
作用：向 数组开头 添加内容
参数：要添加到数组开头的元素或多个元素
返回值：新数组的长度
是否改变原数组：改变
```
var ary = [‘a’,‘b’,‘c’];
var res = ary.unshift(‘d’,‘e’);
console.log(ary); //[‘d’,‘e’，‘a’,‘b’,‘c’];
console.log(res); // 5
```

shift
作用：删除数组的第一项
参数：无
返回值：删除的项
是否改变原数组：改变

var ary = [‘a’,‘b’,‘c’];
var res = ary.shift();
console.log(ary); // [‘b’,‘c’];
console.log(res); // [‘a’];

splice：
作用：删除/新增/修改
参数：splice（n,m,…x）；完整的写法，第一个参数代表从n索引开始，删除m项，把删除的内容用x进行替换
返回值：是一个数组，里面是删除的每一项
是否改变原数组：是

// 增加功能
var ary = [1,2,3,4,5];
var res = ary.splice(1,0,6,7);
console.log(ary); // [1,6,7,2,3,4,5];
console.log(res); // [],删除0项，返回值是一个空数组

// 删除功能
var ary = [1,2,3,4,5];
var res = ary.splice(1,2);
console.log(ary); // [1,4,5];
console.log(res); // [2,3]

//修改功能
var ary = [1,2,3,4,5];
var res = ary.splice(1,2,6,7);
console.log(ary); // [1,6,7,4,5];
console.log(res); // [2,3}

取特定内容

slice:
作用：从原有的数组中选中特定的内容
参数：slice（n，m）：选中从索引n（包含n）开始——索引m项（不包含m）
- 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
返回值：返回值是一个数组，返回的每一项是复制的项
是否改变原数组：不改变
```
var ary = [1,2,3,4,5];
var res = ary.slice(1,3);
var res2 = ary.slice(-3,-1)
console.log(ary); // [1,2,3,4,5];
console.log(res); // [2,3];
console.log(res2) // [3,4];
```

拼接数组

concat
作用：实现多个数组或者值的拼接
参数：数组或者值
返回值：返回值是拼接后的新数组
是否改变原数组：不改变

var ary = [1,2,3,4,5];
var res = ary.concat(6,7);
var res2 = ary.concat(6,[7,8]);
var res3 = ary.concat(6,[7,[8,9]]);
var res4 = ary.concat();
console.log(ary); // [1,2,3,4,5];
console.log(res); // [1,2,3,4,5,6,7];
console.log(res2); //[1,2,3,4,5,6,7,8];
console.log(res3) // [1,2,3,4,5,6,7,[8,9]];
// concat()如果操作的参数是数组，那么添加的是数组中的元素，而不是数组。 如果是二维(或以上)数组，concat只能’拆开’一层数组
console.log(res4) // [1,2,3,4,5];
//如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的

转化成字符串

toString:
作用：可以把一个逻辑值转换为字符串
参数：无
返回值：返回值是转换后的字符串
是否改变原数组：不改变
```
var ary1=[1,2,3];
var res=ary1.toString();===>“1,2,3”
```
join:
作用：把数组通过指定的连接符，转换为字符串
参数：连接符
返回值：返回值是转换后的字符串
是否改变原数组：不改变
```
var ary = [1,2,3,4,5];
var res = ary.join(’-’);
console.log(ary); // [1,2,3,4,5]
console.log(res); // ”1-2-3-4-5“
```

排序

reverse 倒序
作用：把数组倒过来
参数：无
返回值：返回值是排序后的新数组
是否改变原数组：改变
```
var ary = [1,2,3,4,5];
var res = ary.reverse();
console.log(ary); //[[5,4,3,2,1]
console.log(res); // [5,4,3,2,1]
```

sort 排序
作用：把数组进行排序
参数：无或者是一个函数
返回值：排序后的新数组
是否改变原数组：改变

var ary = [1,5,7,9,12,24,56,87,92];
var ary2 = [1,5,7,9,12,24,56,87,92];
var ary3 = [1,5,7,9,12,24,56,87,92];
var res = ary.sort();
var res2 = ary2.sort(function(a,b){
	return a-b;
})
var res3 = ary3.sort(function(a,b){
	return b-a;
})
// sort的参数函数总的形参a,b就是数组排序时候的相邻比较的两项
console.log(res); // [1, 12, 24, 5, 56, 7, 87, 9, 92]
console.log(res2); // [1,5,7,9,12,24,56,87,92]
console.log(res3); // [92,87,56,24,12,9,7,5,1]
// 不传参的时候，超出10以内的，只能按照第一位进行排序。
// 传参的时候， return a-b; // 升序， return b-a; //降序。

检测数组

includes
作用：检测数组中是否包含某一项
参数：具体项
返回值：布尔值
是否改变原数组：不改变
```
[1,2,3].includes(2);
true
[1,2,3].includes(100);
false
```

indexOf/lastlndexOf
不兼容ie6-ie8:；
作用：获取某项在数组中首次出现/最后出现的索引（也可以用来是否包含某项）
参数: n：检测的项 m：如果是indexof的话，就是从索引m开始检索。如果是lastIndexOf的话，就是从索引m停止检索
返回值：-1或者具体的索引值
是否改变原数组：不改变

var ary = [1,2,3,4,5]
var res = ary.indexOf(3);
console.log(ary); // [1,2,3,4,5]
console.log(res); //2
var ary = [‘a’,‘b’,‘c’,‘d’,‘c’];
var res = ary.indexOf(‘c’,3);
console.log(res) //4

var ary = [‘a’,‘b’,‘c’,‘d’,‘c’];
var res = ary.lastIndexOf(‘c’,3);
var res2 = ary.lastIndexOf(‘c’,1);
console.log(res); //2
console.log(res2); //-1

遍历数组

forEach
作用：遍历数组中的每一项
参数：函数
返回值：undefined
是否改变原数组：不改变

var ary = [‘a’,‘b’,‘c’]
var res = ary.forEach(function(item,index,ary){
console.log(item,index,ary);
// a 0 [“a”, “b”, “c”]
// b 1 [“a”, “b”, “c”]
// c 2 [“a”, “b”, “c”]
return item;
})
console.log(res) //undefined

map
作用：把一个数组可以映射成一个新的数组
参数：函数
返回值：映射后的新数组
是否改变原数组：不改变

var ary = [‘a’,‘b’,‘c’]
var res = ary.map(function(item,index,ary){
return item+1;
})
console.log(res) // [‘a1’,‘b1’,‘c1’]

filter
作用：检测数组所有元素是否都符合指定条件
参数：函数ary.filter(function(item){})
返回值：符合条件元素构成的数组
是否改变原数组：不改变
```
var ary = [1,2,3,4,5,6]
var res = ary.filter(function(item){
return item<3;
})
console.log(res) // [1,2]
```

some
作用：检测数组中的元素是否满足指定条件
参数：函数ary.some(function(item,index,ary){})
item:每一项 index:索引 ary:当前数组
返回值：布尔值
是否改变原数组：不改变

var ary = [1,2,3,4,5,6]
var res = ary.some(function(item){
return item<3;
})
console.log(res) // ture
// 1 如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测。
// 2 如果没有满足条件的元素，则返回 false。

every
作用：检测数组所有元素是否都符合指定条件
参数：函数ary.every(function(item){})
返回值：布尔值
是否改变原数组：不改变
```
var ary = [1,2,3,4,5,6]
var res = ary.every(function(item){
return item<3;
})
var res2 = ary.every(function(item){
return item<7;
})
console.log(res) //false
console.log(res2) // ture
// 1 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
// 2 如果所有元素都满足条件，则返回 true。
```
- reduce()和 reduceRight()
  这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
  这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
  传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
  下面代码用reduce()实现数组求和，数组一开始加了一个初始值10。
```
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25
```

应用

去重

双循环 + splice
思路：双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

function unique(arr) {
    for(var i=0;i<arr.length;i++) {
        for(var j=i+1;j<arr.length;j++) {
            if(arr[i] == arr[j]) {
                arr.splice(j,1);
                j--;
            }
        }
    }
    return arr;
}

indexOf + 单循环
思路：利用indexOf 新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

function unique(arr) {
    if(!Array.isArray(arr)) {
        console.log('type error')
        return
    }
    var array = []
    for(var i=0;i<arr.length;i++) {
        if(array.indexOf(arr[i]) === -1) {
            array.push(arr[i])
        }
    }
    return array
}

sort + 单循环
思路：利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

function unique(arr) {
    if(!Array.isArray(arr)) {
        console.log('type eror')
        return;
    }
    arr.sort()
    var array = [arr[0]]
    for(var i=1;i<arr.length;i++) {
        if(arr[i] !== arr[i-1]) {
            array.push(arr[i])
        }
    }
    return array;
}

利用对象属性不能相同

function unique(arr) {
    if(!Array.isArray(arr)) {
        console.log('type eror')
        return;
    }
    var array = []
    var obj = {}
    for(var i=0;i<arr.length;i++) {
        if(!obj[arr[i]]) {
            array.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return array;
}

利用includes

function unique(arr) {
  return arr.filter((item, index, arr) => {
    return arr.indexOf(item,0) === index; // 当前元素，在原始数组中的第一个索引===当前索引值，否则返回当前元素。
  })
}

利用递归

function unique(arr) {
  var array = arr;
  var len = arr.length;
  array.sort((a, b) => {
    return a-b;
  })
  function loop(index) {
    if(index >=1) {
      if(array[index] === array[index -1]) {
        array.splice(index, 1)
      }
      loop(index-1)
    }
  }
  loop(len-1)
  return array;
}

利用Map数据结构

function arrayNonRepeatfy(arr) {
    let map = new Map();    
    let array = new Array();  // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
        if(map.has(arr[i])) {  // 如果有该key值
          map.set(arr[i], true); 
        } else { 
          map.set(arr[i], false);   // 如果没有该key值
          array.push(arr[i]);
        }
      }   
    return array ;
}

利用ES6的Set去重

function unique(arr) {
  return Array.from(new Set(arr))
}
var arr = ['a','d','d','d','a',1,2,3,3,4,true,true]
console.log(unique(arr)) // ["a", "d", 1, 2, 3, 4, true]

ES6新增数组方法

1. `Array.from()`

该方法用于将两类（类似数组的对象和可遍历对象（包括Set/Map数据结构））对象转为真正的数组，类似数组的对象本质特征只有一点就必须有length属性。
常见类似数组的对象：

DOM操作返回的NodeList集合
函数内部的arguments对象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3 // 必须指定
}

// ES5写法
var arr1 = [].slice.call(arrayLike); // ['a','b','c']

[].concat.apply([], arguments)
Array.prototype.slice.call(arguments) // apply也可以

// ES6
var arr2 = Array.from(arrayLike)

注：[].slice.call()相关概念。

Array.from()还能接收第二个参数，实现类似map的功能。

Array.from([1,2,3], (x) => x*x) // [1,4,9]

Array.from({length: 2}, () => 'jack') // ['jack','jack']

// 第一个参数指定了第二个参数运行的次数，可以更灵活。

2. `Array.of()`

弥补构造函数Array()的不足，因为参数个数不同导致的行为差异，基本可以用来替代new Array()/Array()

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

3. `copyWithin()`

会在当前数组内部将指定位置的成员复制到其他位置，会修改原始数组。
接收参数：都为数值，不是就会自动转为数值。负值则用数组长度去减。
target：必选，从该位置开始替换数据
start：可选，从该位置开始读取数据，默认为0。如果为负值表示倒数。
end：可选。到该位置停止读取数据，默认等于数组长度。如果为负值，表示倒数。

[1,2,3,4,5].copyWithin(0,3) // [4,5,3,4,5]

// 没有部署TypedArrayd的copyWithin方法的平台
[].copyWithin.call(new Init32Array([1,2,3,4,5]),0,3,4) // Init32Array [4,2,3,4,5]

4. `find()和findIndex()`

数组实例的find()方法找出第一个符合条件的数组成员。参数第一个是回调函数，第二个则是用来绑定回调函数的this对象。回调函数直到找到返回true的成员并且返回该成员，否则返回undefined。回调函数的参数：当前的值，当前的位置和原数组。findIndex()方法类似，只不过返回的是当前位置，不符合则返回-1。

[1,4,-5,10].find((n) => n<0) // -5

find()方法和indexOf()方法的区别在于前者可以找到NaN，后者不行

[NaN].indexOf(NaN) // -1

mirror_Mx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Javascript 基础】数组方法及其应用

添加/删除push arr.push(element1, ..., elementN)作用：向数组末尾追加一项参数：添加的具体项，可以是一项，也可以是多项返回值：新数组的长度是否改变原数组：改变var ary=[‘a’，‘b’，‘c’];var res= ary .push (‘d’，‘e’)console.log(ary);//[‘a’，‘b’，‘c’，‘d’，‘e’];console.log(res);//5pop：作用：删除数组的最后一项参数：无返回值：删除
复制链接

扫一扫