独孤九剑之js操作数组

独孤九剑之js数组方法

文章目录

独孤九剑之js数组方法
一.引言
二.ES5数组方法
- 1.Array.isArray()
- 2.valueOf()
- 3.toString()
- 4.indexOf()
- 5.lastIndexOf()
- 6.push()
- 7.pop()
- 8.join()
- 9.concat()
- 10.shift()
- 11.unshift()
- 12.reverse()
- 13.slice()
- 14.splice() 最高级方法
- 15.sort()
- 16 some()
- 17.every()
- 18.flat()
三.ES6数组方法
- 1.扩展运算符 ...
- - 1.1 将一个数组转为用逗号分隔参数序列
  - 1.2 求最大值
  - 1.3 拼接数组
  - 1.4 深拷贝数组
  - 1.5 合并多个数组 (浅拷贝)
  - 1.6 将字符串转为数组
- 2. Array.of()
- 3. Array.from()
- - 3.1 转换类数组对象
  - 3.2 从string中生成数组
  - 3.3 从 `Set` 生成数组(可以作为数组的去重一种解决方案)
  - 3.4 可以遍历数组,进行数据处理
- 4.fill()
- 5.includes()
- 6.entries(),keys(),values()
四.常用的迭代方法(包含ES5和ES6)
- 1.map
- 2.filter
- 3.forEach
- 4.find()
- 5.findIndex()
- 6.reduce()

一.引言

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);//12var 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);//3var index = arr.findIndex(item => {return item > 13
});
console.log(index);//-1

6.reduce()

reduce() 累加器，详细介绍可以参考另外独立写的一篇文章 JS数组之Reduce()用法

独孤九剑之js操作数组相关推荐

js操作数组更改其中一个数组值另一个数组也会改变
问题背景: 在vue项目中,在data中定义了两个数组对象,一个用于展示,一个用于修改操作.当修改其中一个数组的值时发现另一个也会跟着改变.代码如下: var regNeg = /^[0-9]{1,7 ...
js 操作数组 push splice
一个可以根据table 勾选项把数据push进数组,取消勾选从数组里删除主要代码: data: data() {return {msg:[],}; methods: this.msg.push(ro ...
js操作数组的方法（1）添加、删除数组元素
shift() -- 删除原数组第一项,并返回删除元素的值如果数组为空则返回 undefined 该方法会改变原数组的长度. 语法格式:array.shift() var arr = [1, 2, ...
JS操作数组方法大全--你了解多少？
面试前后将有关数组的所有方法进行了一个总结,希望能帮到大家. 目录一.什么是数组? 二.创建数组两种方式 1.使用Array构造函数创建数组对象 2.使用"[ ]" 字面量来创建 ...
js操作数组前面插入，后面插入
前面插入unshift _this.tableData.unshift(req); 后面插入push data.push(req);
前端：JS/20/数组（数组的概念，数组元素，数组索引，数组元素的访问，数组的长度，数组的创建方法，数组的操作，实例：使用数组保存个人信息，实例：求数组所有值的平均值，数组对象的length属性）
数组 1,数组的概念一组值(或对象)的集合,称为"数组": var arr =[10,20,30,50]; var arr =["张三","男&qu ...
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会 ...
js截取数组的操作 - Kaiqisan
js截取数组的操作 hey みんなさんこんにちはKaiqisanと申します.一つの学生プログラマーである-,今天来讲一下截取数组的操作.由于我在项目的实践中总是会用到这个方法但是经常会忘记这些方法的时 ...
js/javascript 操作数组【全】(含常用的操作数组的lodash)
数组的基本特点和操作数组的存储性能比普通对象要好,数组的类型也是对象. 普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引来操作元素.索引:从0开始的整数就是索引. 获取数组的长度 arr ...
js 字节数组操作，TCP协议组装
js字节数组,进制转换 js基础知识数组 Array json对象转化为key,value的对象数组创建全为0的数组的几种方法扩展操作符三个点(...) ArrayBuffer Array 与 ...