二 Array 数组常用操作方法
数组链接
Array 构造上的方法
一、Array.from()
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
// NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).filter(p => {return p.textContent.length > 100; });// arguments对象 function foo() {var args = Array.from(arguments); }
View Code
二、Array.isArray()
1.用于判断是否是数组(推荐)
let arr= [1,2,3]; let str="12345"; console.log(Array.isArray(arr)); // true console.log(Array.isArray(str)); // false
三、Array.of() vs Array()
1.用于将一组数值转化为数组
2.这个方法的主要目的,是弥补数组构造函数Array()
的不足(因为参数个数的不同,会导致Array()
的行为有差异,多个参数是相同)
console.log(Array.of(1)); // [ 1 ] console.log(Array.of(3)); // [ 3 ] console.log(Array.of(1,2,3)); // [ 1, 2, 3 ] console.log(Array(1)); // [ <1 empty item> ] console.log(Array(3)); // [ <3 empty items> ] console.log(Array(1,2,3)); // [ 1, 2, 3 ]
View Code
Array 原型上的方法
一、concat() vs 扩展运算符...
concat
1.不改变原来数组
2.可以打散数组
3.只能从后面插入
let arr = [1,2,3]; let newArr = arr.concat(4,5,6); console.log(arr); // [ 1, 2, 3 ] console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ] let arr1 = [1,2,3]; let arr2= [1,2,3] let newArr1 = arr1.concat(arr2); console.log(arr1); // [ 1, 2, 3 ] console.log(newArr1); // [ 1, 2, 3, 1, 2, 3 ]
View Code
数组解构(推荐)
1.可以在任何位置插入
let arr1= [1,2,3]; let arr2=[4,5,...arr1, 6]; console.log(arr1); // [ 1, 2, 3 ] console.log(arr2); // [ 4, 5, 1, 2, 3, 6 ]
View Code
二、 keys values entries vs for of
let letter = ['a', 'b', 'c']; let entries = letter.entries(); console.log(entries.next().value); // [0, 'a'] console.log(entries.next().value); // [1, 'b'] console.log(entries.next().value); // [2, 'c']
View Code
let arr = ['a', 'b', 'c']; for(let key of arr.keys()){console.log(key); // 0 1 2 }
View Code
三、some() vs every()
1.共同点:都返回boolean
2.some--一真为真;every--一假为假;
let arr = [1,2,3,4,5]; let bool1 = arr.some(item=>item>=5); console.log(bool1); // true let arr1 = [1,2,3,4,5]; let bool2 = arr1.every(item=>item>=5); console.log(bool2); // false
View Code
四、map() forEach() vs filter
共同点: 都不会循环empty; for of 会变量
1.forEach 用于循环变量 没有返回值;
let arr = [1,2,3,4,5]; arr.forEach((val,index)=>{console.log(val + '-' + index); // 1-0// 2-1// 3-2// 4-3// 5-4 });
View Code
let arr = Array(5); arr[0]= null; arr[1]= 1; arr[3] = 3; arr[6]= undefined; arr.forEach((val,index)=>{console.log(val + '-' + index); // null-0// 1-1// 3-3// undefined-6 }); for(let val of arr){console.log(val);/*null1undefined3undefinedundefinedundefined*/ }
View Code
2.map 根据返回值返回一个新的数组,没有返回值,返回undefined;
let arr = ['a', 'b', 'c']; let newArr=arr.map((item,index)=>{return item+1; }); console.log(newArr); // [ 'a1', 'b1', 'c1' ] let arr1 = Array(5); arr1[1]=1; arr1[3]=3; arr1[10]=10; let newArr1 = arr1.map((item,index)=>{return item; }); console.log(newArr1); // [ <1 empty item>, 1, <1 empty item>, 3, <6 empty items>, 10 ]
View Code
3.filter 返回为true的值组成新数组;
let arr = [1, 2, 3, 4, 5]; let newArr=arr.filter((item,index)=>{return item % 2 === 0; // [ 2, 4 ] }); console.log(newArr); let arr1 = Array(5); arr1[1]=1; arr1[3]=3; arr1[10]=10; let newArr1 = arr1.filter((item,index)=>{console.log(item,index); //1 1 3 3 10 10return item >1; }); console.log(newArr1); // [ 3, 10 ]
View Code
五、find vs findIndex
1.find 返回第一次找到的值,没有找到返回undefined;会遍历每一个,知道条件满足就停止
// let arr = [1, 2, 3, 4, 5]; let val=arr.find((item,index)=>{return item >6; }); console.log(val); let arr1 = Array(5); arr1[1]=1; arr1[3]=3; arr1[5]=5; let val1 = arr1.find((item,index)=>{console.log(item,index); //undefined 0 1 1 undefined 2 3 3 undefined 4 5 5return item >20; }); console.log(val1); // undefined
View Code
2.findIndex 返回第一次找到的值的下标,没有找到返回-1;会遍历每一个,知道条件满足就停止
六、fill
1.arr.fill(val,startIndex,endIndex);
let arr = Array(5); arr.fill(1); console.log(arr); // [ 1, 1, 1, 1, 1 ] let arr1 = Array(1,2,3); arr1.fill('a',1,2); console.log(arr1); // [ 1, 'a', 3 ]
View Code
七、flat vs flatMap
1.flat用于将嵌套的数组“拉平”, 默认拉平一层,用Infinity 拉平任意层
let arr = [1,2,3]; let arr1= [5,4,6,arr]; let arr2=[arr1, 7,8,9]; console.log(arr2); // [ [ 5, 4, 6, [ 1, 2, 3 ] ], 7, 8, 9 ] console.log(arr2.flat(1)); // [5, 4, 6, Array(3), 7, 8, 9] console.log(arr2.flat(2)); // [5, 4, 6, 1, 2, 3, 7, 8, 9] console.log(arr2.flat(Infinity)) // [5, 4, 6, 1, 2, 3, 7, 8, 9]
View Code
2.flat 清除empty
let arr =Array(5); arr[1]=1; arr[2]=2; arr[6]=null; arr[8]= undefined; arr[10] =false; console.log(arr); console.log(arr.flat());
View Code
3.flatMap 先map 后flat 只能flat一层
let arr =Array(); arr[1]=1; arr[2]=2; arr[6]=6; let newArr = arr.flatMap((item, index, arr)=>{ console.log(item, index, arr); return [item,item*2]; }); console.log(newArr); // [1, 2, 2, 4, 6, 12]
View Code
八、indexOf vs lastIndexOf
indexOf 从左边开始,第一个参数是要查找的值(区分数据类型);第二个参数是开始查找的位置
lastIndexOf 从右边开始,第一个参数是要查找的值(区分数据类型);第二个参数是开始查找的位置
let arr = [1,2,2,2,5]; console.log(arr.indexOf(2,1)); console.log(arr.lastIndexOf(2,-3));
View Code
九、includes
arr.includes(searchElement, fromIndex)
let arr = [1,2,2,2,5]; console.log(arr.includes(2,5)); // false console.log(arr.includes(10)); // false
View Code
十、join
1.默认以,连接
let arr = ['a','b', 'c']; let str= arr.join(); console.log(arr); // [ 'a', 'b', 'c' ] console.log(str); // a,b,c let arr1 = ['a','b', 'c']; let str1= arr1.join('|'); console.log(arr1); // [ 'a', 'b', 'c' ] console.log(str1); // abc
View Code
十一、push 、pop、 shift、unshift
共同点: 改变数组,用于进出栈,不打散
let arr=[1]; arr.push(1,2); // 后面进入(可以进入多个) console.log(arr);arr.pop(); console.log(arr); // 后面出去(只能出去一个) arr.unshift(5,6); console.log(arr); // 前面进入(可以进入多个) arr.shift(); console.log(arr); // 前面出去(只能出去一个)
View Code
十二、reduce vs reduceRight
1.reduce 从左到右
1.reduceRight 从右到左
arr.reduce(callback,[initialValue])
// 有初始化值 let arr=[10,20, 30, 40]; let value=arr.reduce((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; },1); console.log(value); // 1 10 0 [ 10, 20, 30, 40 ] // 10 20 1 [ 10, 20, 30, 40 ] // 20 30 2 [ 10, 20, 30, 40 ] // 30 40 3 [ 10, 20, 30, 40 ] // 40// 有初始化值 let value1=arr.reduce((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; }); console.log(value1); // 10 20 1 [ 10, 20, 30, 40 ] // 20 30 2 [ 10, 20, 30, 40 ] // 30 40 3 [ 10, 20, 30, 40 ] // 40
View Code
// 有初始化值 let arr=[10, 20, 30, 40]; let value=arr.reduceRight((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; },1); console.log(value);// 有初始化值 let value1=arr.reduceRight((pre,cur,index,array)=>{console.log(pre,cur,index,array);return cur; }); console.log(value1);
View Code
十三、sort()
let arr=[10, 5, 60, 40]; arr.sort(); console.log(arr); // [ 10, 40, 5, 60 ] 改变原来数组,默认排序顺序是根据字符串Unicode码点。 let arr1=[10, 5, 60, 40]; arr1.sort((a,b)=>{return a-b; }); console.log(arr1); // [ 5, 10, 40, 60 ] let arr2=[10, 5, 60, 40]; arr2.sort((a,b)=>b-a); console.log(arr2); // [ 60, 40, 10, 5 ]
View Code
十四、splice
1.改变原来数组
2.要添加进数组的元素,从start
位置开始
let arr=[1,2,3,4,5,6]; arr.splice(1); console.log(arr); // [1] 删除后面的所有 let arr1=[1,2,3,4,5,6]; arr1.splice(1, 3); // fromIndex count console.log(arr1); // [ 1, 5, 6 ] let arr2=[1,2,3,4,5,6]; arr2.splice(1, 3, 10, 20, 30); // fromIndex count console.log(arr2); // [ 1, 10, 20, 30, 5, 6 ] 从删除的位置加 let arr3=[1,2,3,4,5,6]; arr3.splice(1, 3, [10,50]); // fromIndex count console.log(arr3); // [ 1, [ 10, 50 ], 5, 6 ] 不打散数组
View Code
十五、reverse
let arr=[1,2,3,4,5,6]; arr.reverse(); console.log(arr); // [ 6, 5, 4, 3, 2, 1 ]
View Code
十六、toString
返回用逗号连接的字符串
let arr=[1,2,3,4,5,6]; let str = arr.toString(); console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] console.log(str); // 1,2,3,4,5,6
View Code
转载于:https://www.cnblogs.com/shangyueyue/p/9988188.html
二 Array 数组常用操作方法相关推荐
- 一维数组和二维数组常用知识
补充一个小知识:从控制台输入一个数进来 import java.util.Scanner //导入jar包 Scanner scanner =new Scanner(System.in) System ...
- C语言二维数组相关操作方法
1. 定义一个二维数组,并赋值: #define ROW 32 #define COL 16 //定义一个32行,16列的数组,并赋值. unsigned char str[ROW][COL] = { ...
- 二维数组常用的赋值方式
静态初始化并赋值 int[][] data = new int[][] { { 1, 2 }, { 2, 3 }, { 2, 3, 4 }, { 1, 2, 3, 4 } };print(data); ...
- python给矩阵赋值_解决Python二维数组赋值问题
解决Python二维数组赋值问题 当我们采用s=[[0]*3]*2初始化一个数组,然后对s[0][0]进行赋值,改变的是第一列所有的值.因为用s = [[0]*3]*2 初始化数组,他表示的是指向这个 ...
- 二维数组在c语言中的作用,C语言中的二维数组
1.二维数组的定义和引用 一. 数据类型 数组名[常量表达式1][常量表达式2]; (1)假如有个二维数组array[n][m],则行下标的取值范围0~n-1 (2)列下标的取值范围0~m-1 (3) ...
- python输入二维数组_Python输入二维数组方法
Python输入二维数组方法 前不久对于Python输入二维数组有些不解,今日成功尝试,记以备忘.这里以输入1-9,3*3矩阵为例 n=int(input()) line=[[0]*n]*n for ...
- Java 数组(三)二维数组
如果一维数组的各个元素仍然是一个数组,那么它就是一个二维数组.二维数组常用于表示表,表中的信息以行和列的形式组织,第一个下标代表元素所在的行,第二个下标代表所在的列. 一.二维数组的创建 1.先声明, ...
- python创建一个n*m的二维数组_Python中创建二维数组
Python中创建二维数组 二维数组 二维数组本质上是以数组作为数组元素的数组,即"数组的数组",类型说明符 数组名[常量表达式][常量表达式].二维数组又称为矩阵,行列数相等的矩 ...
- python画二维矩阵图_Python实现二维数组输出为图片
Python实现二维数组输出为图片 对于二维数组,img_mask [[ 0 0 0 ..., 7 7 7] [ 0 0 0 ..., 7 7 7] [ 0 0 0 ..., 7 7 7] ..., ...
最新文章
- 三下乡辅导孩子计算机知识,【青春“三下乡”】普及家庭教育知识,共促孩子健康成长...
- php读取本地xlsx格式文件的数据并按json格式返回
- 腾讯会议用户突破1亿,发布企业版最高支持2000人同时参会
- 上周新闻回顾:微软补了又漏 思科自找对手
- 传感器c语言开发,Android环境传感器开发教程
- ace nonblock
- 阿里云服务器重启出现An error occurred 如何处理
- poj 1338 Ugly Numbers(丑数模拟)
- 2008技术内幕:T-SQL语言基础 联接查询摘记
- php html script,html script标签怎么用
- 红黑树源码及错误解析
- 三、RabbitMQ消息发布时的权衡
- Expression Blend学习四控件-按钮
- POJ 1647 One-move checkmate
- 为什么我不再和别人比较了?
- 企业微信直播有哪些优势呢?
- matlab交通标志神经网络识别,一种应用于交通标志识别的深度卷积神经网络方法与流程...
- 《计算机系统基础》4-6章 简答题
- 制作可被svchost调用的服务(下)
- 解决linux下svn update 产生Node remains in conflict的问题