isArray()

定义和用法

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true,否则返回 false。

语法

Array.isArray(obj)

参数

object:要检测的内容

返回值:

返回值是布尔类型的。
如果传进来的object是数组,返回true,如果不是数组,则返回false。

举例


Array.isArray([1, 2, 3, 4]);  // --> truevar obj = {a: 1,b: 2
};
Array.isArray(obj);  // --> falseArray.isArray(new Array);  // --> trueArray.isArray("Array");  // --> false

注意:Array.isArray是ES 5.1推出的,不支持IE6~8,所以在使用的时候也应注意兼容问题。

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为 7 的空数组(注意:这是指一个有 7 个空位 (empty) 的数组,而不是由 7 个undefined组成的数组)。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

语法

Array.of(element0[, element1[, ...[, elementN]]])

参数

elementN
任意个参数,将按顺序成为返回数组中的元素。

返回值

新的 Array 实例。

Array.of()方法的使用:

Array.of()方法用于将一组数值转换为数组

const a = Array.of(2,4,6,8);
console.log(a);         // [2,4,6,8]const b = Array.of(1);
console.log(b);         // [1]const c = Array.of(1).length;
console.log(c);         // 1

Array.of()可以用以下的代码模拟实现:

function ArrayOf() {return [].slice.call(arguments);
}

Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

语法

Array.from(arrayLike[, mapFn[, thisArg]])

参数

  • arrayLike:必传参数,想要转换成数组的伪数组对象或可迭代对象。
  • mapFn:可选参数,mapFunction(item,index){…} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。
  • thisArg:可选参数,执行回调函数 mapFunction 时 this 对象。这个参数很少使用。

返回值

一个新的数组实例。

例子

//从 String 生成数组
Array.from('foo');
// [ "f", "o", "o" ]//从 Set 生成数组
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]//从 Map 生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];Array.from(mapper.keys());
// ['1', '2'];//从类数组对象(arguments)生成数组
function f() {return Array.from(arguments);
}f(1, 2, 3);// [ 1, 2, 3 ]

Array.from() 五个超好用的用途

Array.from() 五个超好用的用途

  • 将类数组转换成数组

Array.from(arguments) 将类数组对象 arguments 转换成一个数组,然后使用数组的 reduce 方法求和。

function sumArguments() {return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6
  • 克隆一个数组
    在 JavaScript 中有很多克隆数组的方法。正如你所想,Array.from() 可以很容易的实现数组的浅拷贝。
const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);numbers === numbersCopy; // => false

Array.from(numbers) 创建了对 numbers 数组的浅拷贝,numbers === numbersCopy 的结果是 false,意味着虽然 numbers 和 numbersCopy 有着相同的项,但是它们是不同的数组对象。

   let arr = [1, [2, [3, 4, 5]]];let arr2 = Array.from(arr);console.log(arr2); //[1, [2, [3, 4, 5]]]这个毋庸置疑arr[0] = 200; console.log(arr);//此时 arr=[200, [2, [3, 4, 5]]]console.log(arr2);//此时 arr2=[1, [2, [3, 4, 5]]]

下面两个输出打印的结果如下:

由上面输出我们可以看出arr的第一层改变了,arr1的第一层并没有改变,说明只有一层的时候,是深拷贝。接着我们

 let arr = [1, [2, [3, 4, 5]]];let arr2 = Array.from(arr);// console.log(arr2); //[1, [2, [3, 4, 5]]]这个毋庸置疑arr[0] = 200;// console.log(arr);  //此时 arr=[200, [2, [3, 4, 5]]]  // console.log(arr2); //arr2=[1, [2, [3, 4, 5]]]arr[1][1] = 100;console.log(arr);  //此时 arr=[200, [2, 100]]  console.log(arr2); //arr2=[1, [2, 100]]


由此我们可以看出
arr的第二层为 [2, [3, 4, 5]]===>[2,100]
arr2的第2层是浅拷贝,所以arr改变,arr2也改变
综上:这就是浅拷贝的含义,只能复制第一层的地址,核心算法没有递归,所以就拷贝一层。深拷贝核心算法会递归,会拷贝每一层。

这就回到最初为什么下面这个双等和三等都是false,因为只有一层的话是深拷贝,拷贝之后就不共享同一块内存地址,最后引用类型是否相等对比的是地址,所以最后双等和三等均为false

    const numbers = [3, 6, 9];const numbersCopy = Array.from(numbers);console.log(numbers === numbersCopy); // => falseconsole.log(numbers == numbersCopy); //=>false
  • 使用值填充数组
    我们来定义一个函数,创建一个填充相同默认值的数组:
const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);
result; // => [0, 0, 0]

result 是一个新的数组,它的长度为3,数组的每一项都是0。调用 Array.from() 方法,传入一个类数组对象 { length } 和 返回初始化值的 mapFunction 函数。

当初始化数组的每个项都应该是一个新对象时,Array.from() 是一个更好的解决方案:

const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true

由 Array.from 返回的 resultA 使用不同空对象实例进行初始化。之所以发生这种情况是因为每次调用时,mapFunction,即此处的 () => ({}) 都会返回一个新的对象。

  • 生成数字范围
function range(end) {return Array.from({ length: end }, (_, index) => index);
}range(4); // => [0, 1, 2, 3]

在 range() 函数中,Array.from() 提供了类似数组的 {length:end} ,以及一个简单地返回当前索引的 map 函数 。这样你就可以生成值范围。

  • 数组去重
    由于 Array.from() 的入参是可迭代对象,因而我们可以利用其与 Set 结合来实现快速从数组中删除重复项。
function unique(array) {return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

首先,new Set(array) 创建了一个包含数组的集合,Set 集合会删除重复项。

因为 Set 集合是可迭代的,所以可以使用 Array.from() 将其转换为一个新的数组。

这样,我们就实现了数组去重。

【JavaScript面试】isArray() 、Array.of()、Array.from() 方法相关推荐

  1. javascript(String, Array, Math, Date, Object)方法整理

    String .length 字符串的长度 .charAt(索引) 返回值是指定索引位置的字符串,超出索引,结果为空字符串 .fromCharCode(数字值,数字值-),返回的是ASCII码对应的值 ...

  2. javascript中的array对象属性及方法

    Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...

  3. 创建健壮的isArray()函数(JavaScript中判断对象类型的种种方法)

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  4. 对象数组参数_【JavaScript 教程】标准库—Array 对象

    作者 | 阮一峰 1.构造函数 Array是 JavaScript 的原生对象,同时也是一个构造函数,可以用它生成新的数组. var arr = new Array(2);arr.length // ...

  5. 【JavaScript笔记 · 基础篇(五)】Array全家桶(引用数据类型中的数组 / Array对象 / Array.prototype)

    文章目录 一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...

  6. Object、Function、String、Array原生对象扩展方法

    JavaScript原生对象的api有些情况下使用并不方便,考虑扩展基于Object.Function.String.Array扩展,参考了prototype.js的部分实现,做了提取和修改,分享下: ...

  7. Array的内置方法api

    Array的内置方法api 判断数组与转换数组 Instanceof:是一个关键字用来判断A类型是否是B类型 返回值类型:boolean var arr1 = [1,2,3];var arr2 = n ...

  8. PHP中把stdClass Object转array的几个方法

    2019独角兽企业重金招聘Python工程师标准>>> 方法一: //PHP stdClass Object转array function object_array($array) ...

  9. doctrine find的对象转换成数组_「ES6基础」Array数组的新方法(上)

    在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法? 本篇文章将从以下几个方面进行介绍: A ...

最新文章

  1. Python炫技操作:模块重载的五种方法
  2. 李开复口中的“联邦学习” 到底是什么?| 技术头条
  3. 代码规范+设计模式落地之路
  4. WWDC 2018:iOS 内存深入研究
  5. 【Rollo的Python之路】Scrapy Selector选择器的学习
  6. 现代密码学4.1--消息完整性
  7. [蓝桥杯][算法提高VIP]密码锁(BFS)
  8. fork join框架_Fork / Join框架vs.并行流vs.ExecutorService:最终的Fork / Join基准
  9. springboot与任务(邮件任务)
  10. Android中Activity启动模式
  11. Oracle正则表达式的用法
  12. 用matlab时提示数据写入文件期间被裁剪_用C语言简单开发学生成绩管理系统
  13. linux查看vnc进程命令_linux命令:VNC服务的配置及使用
  14. 秋叶一键重装系统连接服务器失败,如何解决远程桌面无法连接
  15. 剑指 Offer II 042. 最近请求次数【队列方法】
  16. 计算机中函数counta是什么意思,excel中counta函数和count函数的区别是什么?
  17. 活动目录概念和灾难恢复
  18. 使用 LaTeX 语言对 MATLAB 中的图片进行标注
  19. JAVA视频MP4文件加密,Html5播放器调用
  20. layui爬坑之路——input value属性绑定函数返回值

热门文章

  1. IF: 25+ 单细胞转录组学揭示肝实质和非实质细胞系的早期出现
  2. Jordan矩阵、可逆矩阵、最小多项式的求法,对角化的判断
  3. SQL server 一张表随另一张表变化,建立触发器
  4. 铁磁共振到底是什么情况?
  5. 计算机语言词汇量,词汇量最多的10种语言,会一种算你赢!
  6. leetcode:求众数
  7. 快递退件、转件、滞留件、破损件、拦截件、无头件管理系统
  8. Windows 使用 rasterio 读取 tif 图像
  9. jsp遇到异常转到错误页面
  10. 万字长文 | 2023届推荐算法岗面经总结!