独孤九剑之js操作数组

独孤九剑之js数组方法

一.引言

js数组方法,我将之称之为独孤九剑,独孤九剑嘛,何其强大,以自己总总变化,应对各种不同的招式,所以叫它独孤九剑

二.ES5数组方法

1.Array.isArray()

用来判断是否为数组,可以弥补typeof运算符的不足

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
var arrObj = {
   };
console.log(Array.isArray(arr));//true
console.log(Array.isArray(arrObj));//false

2.valueOf()

返回数组的原始值（一般情况下其实就是数组自身）

var arr = [1, 3, 5, "xiaoming", "liuqiao"];   
console.log(arr.valueOf());//[1, 3, 5, "xiaoming", "liuqiao"];
 //判断返回的是数组自身
console.log(arr.valueOf()===arr) //true

3.toString()

返回数组的字符串形式

var arr = [1, 3, 5, "xiaoming", "liuqiao"];   
console.log(arr.toString());//1,3,5,xiaoming,liuqiao

4.indexOf()

返回指定元素在数组中第一次出现的位置,没有返回-1

var arr = [1, 3, 5, "xiaoming", "liuqiao"];        
console.log(arr.indexOf('xiaoming'));//返回索引 3

5.lastIndexOf()

返回指定元素在数组中最后出现的位置,没有返回-1

var arr = [1, 3, 5, "xiaoming", "liuqiao",'xiaoming'];
console.log(arr.lastIndexOf('xiaoming'));//返回索引 5

6.push()

用于在数组的末端添加一个或多个元素,并返回添加元素后的数组长度, 会改变元素原数组

var arr = [1, 3, 5, "xiaoming", "liuqiao"]; 
console.log(arr.push('xiaohong', 'xiaobai')); //返回数组长度7
console.log(arr);// [1, 3, 5, "xiaoming", "liuqiao", "xiaohong", "xiaobai"]

7.pop()

用于删除数组的最后一个元素,并返回该元素,会改变原数组

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
console.log(arr.pop('liuqiao'))//liuqiao
console.log(arr);// [1, 3, 5, "xiaoming"]

8.join()

以某字符串参数为分隔符,将数组所有元素,组成字符串并返回,若没有传参,则以默认以逗号分隔

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
console.log(arr.join('-'));//1-3-5-xiaoming-liuqiao
console.log(arr.join());//1,3,5,xiaoming,liuqiao

9.concat()

用于多个数组的合并,将新数组的元素,添加到原数组元素的后面,返回一个新数组, 原数组不变

var arr = [1, 3, 5, "xiaoming", "liuqiao"];
var newArr = ['xiaohong', 'xiaobai']
console.log(arr.concat(newArr));//[1, 3, 5, "xiaoming", 
console.log(arr);//[1, 3, 5, "xiaoming", "liuqiao"];

----------------------------------分隔符-----------------------------------
//多个数组合并
var newArr = ['xiaohong']
var newArr2 = [2];
var newArr3= [6];
console.log(arr.concat(newArr,newArr2,newArr3));//[1, 3, 5, "xiaoming", "liuqiao", "xiaohong",2,6]

10.shift()

用于删除数组的第一个元素,并返回该元素.会改变原数组

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.shift());//xiaoming
console.log(arr);//[3, 5, 1, "liuqiao"]

11.unshift()

用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度.会改变原数组

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
console.log(arr.unshift('abc'));//6
console.log(arr);//["abc", "xiaoming", 3, 5, 1, "liuqiao"]

12.reverse()

用于倒置数组中的元素顺序,返回改变后的数组.会改变原数组

var arr = ["xiaoming", 3, 5, 1, "liuqiao"]; 
console.log(arr.reverse());//["liuqiao", 1, 5, 3, "xiaoming"]
console.log(arr);//["liuqiao", 1, 5, 3, "xiaoming"]

13.slice()

从数组中拷贝一部分，返回新数组

var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
//包含索引为1的元素，不包含索引为3的元素(拷贝索引为 1 2 的元素)
console.log(arr.slice(1,3));//[3, 5]
console.log(arr);//["xiaoming", 3, 5, 1, "liuqiao"];

14.splice() 最高级方法

可以对数组进行增、删、改.返回被增加,删除或修改的元素 会改变原数组

• 删除:splice一个参数时:被删除的起始索引, 直到末尾全部删除,返回被删除的项

  var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  console.log(arr.splice(2));//[5, 1, "liuqiao"]
  console.log(arr); //["xiaoming", 3]
  

• 删除: splice 两个参数时:第一个参数是被删除的起始索引,第二个参数是要删除的项数 返回被删除的项

  var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  console.log(arr.splice(0,2));//["xiaoming", 3]
  console.log(arr); //[5, 1, "liuqiao"]
  

• 添加: splice:三个参数时:第一个起始位置索引(也就是在哪个地方添加),第二个参数是0,第三个参数是插入的项.返回空数组

  //通俗点来说就是:在哪个地方,添加哪几项
  var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  console.log(arr.splice(1, 0, 'xiaofang'));//[]
  console.log(arr); //["xiaoming", "xiaofang", 3, 5, 1, "liuqiao"]
  

• 替换:splice:向数组指定位置插入任意项元素,同时删除任意数量的项

  三个参数:第一个参数:起始索引位置,第二个参数:删除的项数,第三个参数:插入任意数量的项

  返回被删除的项

  var arr = ["xiaoming", 3, 5, 1, "liuqiao"];
  console.log(arr.splice(1, 2, 'xiaofang','xiaohong'));//[3,5]
  console.log(arr);//["xiaoming", "xiaofang", "xiaohong", 1, "liuqiao"]
  

15.sort()

将数组进行排序，返回数组 默认按照字符编码排序(默认为升序) 会改变原数组

• sort排序是针对字符的排序,先使用数组的toString()方法转为字符串,再逐位笔记,3 是大于12的,因为收尾3>1,所以尽量不要使用Number类型的数据进行排序
• 比较字符串的时候,首位的英文字母通过ASCII码可以转为相应的数值，再根据数值比较

var arr = ["xiaoming", 3, 5, 1, 12,"liuqiao"];
console.log(arr.sort());//["xiaoming", 3, 5, 1, 12,"liuqiao"];
console.log(arr);//["xiaoming", 3, 5, 1, 12,"liuqiao"];

数组排序方法,需要自己定义回调函数 sort([fn]),返回数组

• 升序，只能对数值排序

var arr = [3, 5, 1, 12];
//升序，只能对数值排序
arr.sort(function (a, b) {
    
    return a - b;
});
console.log(arr);//[1, 3, 5, 12]

• 降序，只能对数值排序

var arr = [3, 5, 1, 12];
 //降序，只能对数值排序
arr.sort(function (a, b) {
   
    return b - a;
});
console.log(arr);//[12, 5, 3, 1]

• 自定义排序函数 升序

var arr = [3, 5, 1, 12];
arr.sort(function (a, b) {
   //升序
    if (a > b) {
   
        return 1;
    }
    if (a < b) {
   
        return -1;
    }
    return 0;
});
console.log(arr);//[1, 3, 5, 12]

16 some()

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

array.some(callback(value,index,self))

some()接收一个回调函数作为参数,这个回调函数需要有返回值,callback(value,index,self)有是三个参数

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
//相当于循环遍历
var bol = arr.some(function (value, index, self) {
   
    console.log(value);//遍历的值
    console.log(index);//索引
    console.log(self);//self表示自身
    return value == 3;
});
console.log(bol);//true

可以判断某值是否存在,或者是否满足条件

some的执行原理:因为要判断数组中的每一项，只要有一个回调函数返回true，some都会返回true，所以与every正好相反，当遇到一个回调函数的返回值为true时，可以确定结果，那么停止执行，后面都数据不再遍历，停在第一个返回true的位置；当回调函数的返回值为false时，需要继续向后执行，到最后才能确定结果，所以会遍历所有数据，实现类似于forEach的功能，遍历所有。

17.every()

判断数组中每一项都是否满足所给条件,当所有项都满足条件,才会返回true 与some相反

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
var bol = arr.every(function (value, index, self) {
   
    console.log(value);//遍历的值
    console.log(index);//索引
    console.log(self);//self表示自身
    return value == 3;
});
console.log(bol);//false

every的执行原理和some都差不多,也是循环遍历,只要发现不满足条件,立马停止,返回false

18.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

它有一个参数,指定要提取嵌套数组的结构深度，默认值为 1。
另外: 使用 Infinity，可展开任意深度的嵌套数组

var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
//扁平化数组
arr = arr.flat(Infinity);
//使用Set特性,可以去重
arr = Array.from(new Set(arr));
console.log(arr);
//如果需要排序,需要自己定义回调函数 sort([fn]),返回数组
详情可见上述sort()方法

三.ES6数组方法

1.扩展运算符 …

1.1 将一个数组转为用逗号分隔参数序列

作用:函数调用

var arr = [7, 8];
function sum(a, b) {
   
    return a + b;
}
onsole.log(sum(...arr));//15

1.2 求最大值

var arr = [7, 8, 20];
console.log(Math.max(...arr));//20

1.3 拼接数组

var arr1= [7, 8, 20];
var arr2=["xiaoming",25];
arr1.push(...arr2);
console.log(arr1);//[7, 8, 20, "xiaoming", 25]

1.4 深拷贝数组

var arr1 = [1,2,3]
var arr2 = [...arr1]
console.log(arr1)  // [1, 2, 3]
console.log(arr2)  // [1, 2, 3]

arr2[0]=0
console.log(arr1)  // [1, 2, 3]
console.log(arr2)  //[0, 2, 3]

1.5 合并多个数组 (浅拷贝)

var arr1 = ['1', '2'];
const arr2 = ['3'];
const arr3 = ['4', '5'];
var arr4=[...arr1, ...arr2, ...arr3]
console.log(arr4)// ["1", "2", "3", "4", "5"]

1.6 将字符串转为数组

var msg='我是中国人';
console.log([...msg]);//["我", "是", "中", "国", "人"]

2. Array.of()

用于将一组值，转换为数组。

var arr = Array.of("xiaoming", 4, 7, 9);
console.log(arr);//["xiaoming", 4, 7, 9]

3. Array.from()

ES6为Array增加了from函数用来将其他对象转换成数组。

其他对象有要求:可以将两种对象转为数组

1.部署了iterator接口的对象,比如:Set,Map,Array

2.类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length属性,转换出来的是空数组.

你会碰到的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。

3.1 转换类数组对象

var arr = {
    '0': 10, '1': 15, length: 2 };
var array = Array.from(arr);
console.log(array);//[10, 15]

3.2 从string中生成数组

var msg = "我是中国人";
var arr=Array.from(msg)
console.log(arr);//["我", "是", "中", "国", "人"]

3.3 从 Set 生成数组(可以作为数组的去重一种解决方案)

var set=new Set(['abc','foo','abc','cde']);
var arr=Array.from(set);
console.log(arr);// ["abc", "foo", "cde"]

//一行代码,数组去重
var arr1 = [1,2,4,2,3,5,1,3];
var arr2 = Array.from(new Set(arr1));
console.log(arr2);// [1, 2, 4, 3, 5]

3.4 可以遍历数组,进行数据处理

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
arr=Array.from(arr,item=>{
   
    return item+"_hello";
});
console.log(arr);//["xiaoming_hello", "3_hello", "5_hello", "1_hello", "12_hello", "liuqiao_hello"]

4.fill()

fill()函数，使用制定的元素填充数组，其实就是用默认内容初始化数组

三个参数:

第一个:填充的元素值

第二个:从哪里开始填充(位置索引)

第三个:从哪里之前结束

var arr = [2, 5, 1, 12, 8];
//一个值的时候都填充
arr.fill("liuqiao");
console.log(arr);//["liuqiao", "liuqiao", "liuqiao", "liuqiao", "liuqiao"]

//2个值的时候, 从这里开始,都填充
arr.fill("liuqiao",2);
console.log(arr);//[2, 5, "liuqiao", "liuqiao", "liuqiao"]

//三个值的时候,走索引,从哪里到哪里之前
arr.fill("liuqiao",0,2);
console.log(arr);//["liuqiao", "liuqiao", 1, 12, 8]

5.includes()

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

var arr = ["xiaobin", 3, 5, 1, 12, "liuqiao"];
onsole.log( arr.includes("liuqiao"));//true

6.entries(),keys(),values()

用于数组遍历,他们返回一个新的Array Iterator对象,可以用for…of循环进行遍历

唯一的区别就是

keys()是对键名的遍历,

values()是对键值的遍历

entries()是对键值对的遍历

//entries()是对键值对的遍历
var arr = ["a", "b", "c"];
var iterator = arr.entries();
for (let item of iterator) {
   
    console.log(item);
}
//[0, "a"]
//[1, "b"]
//[2, "c"]

//keys() 返回 0  1  2
//values() 返回  a  b  c

四.常用的迭代方法(包含ES5和ES6)

1.map

map() 映射,对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组.

var arr = ["xiaobin", 3, 5, 1, 12, "liuqiao"];
//currentValue 当前遍历的项
//index 项索引
//array  当前数组
let array = arr.map(function (currentValue, index, array) {
   
    return currentValue + 'hello';
});
console.log(array);//["xiaobinhello", "3hello", "5hello", "1hello", "12hello", "liuqiaohello"]

2.filter

filter()过滤,对数组中的每一项运行给定的函数,返回满足过滤条件组成的数据

var arr = [3, 5, 1, 12, 8];
//currentValue 当前遍历的项
//index 项索引
//array  当前数组
var array=arr.filter(function (currentValue, index, array) {
   
    return currentValue > 5;
});
console.log(array);//[12, 8]

3.forEach

forEach(),对数组进行遍历循环,对数组中的每一项运行给定的函数.这个方法没有返回值.

与map的功能一样,但是区别是:

forEach()遍历执行某方法,但是没有返回值

map()遍历执行某方法,有返回值

var arr = ["xiaoming", 3, 5, 1, 12, "liuqiao"];
//item 当前遍历的项
//index 项索引
//array  当前数组
arr.forEach((item,index,array )=> {
   
    //执行某功能
});

4.find()

用于找出第一个符合条件的数组成员,它的参数是一个回调函数,所有成员依次执行该回调函数.直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员则返回undefined

 var arr = [3, 5, 1, 12, 8];
 var array = arr.find(item => {
   
     return item > 5
 });
 console.log(array);//12

 var array = arr.find(item => {
   
     return item > 12
 });
 console.log(array);//undefined

5.findIndex()

findIndex() 方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员不符合条件,则返回-1

var arr = [2, 5, 1, 12, 8];
var index = arr.findIndex(item => {
   
    return item > 5
});
console.log(index);//3

var index = arr.findIndex(item => {
   
    return item > 13
});
console.log(index);//-1

转载：https://blog.csdn.net/liuqiao0327/article/details/106877333