Javascript -- 数组方法学习

1、Array.from()

参考文献

这个方法比较有意思,可以将一个类似数组或可迭代对象分割,然后将值返回为一个新数组

伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)

可迭代对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/iterable)(可以获取对象中的元素,如 Map和 Set 等)

这个方法有三个参数,第一个就是要转换成数组的伪数组或者可迭代对象,第二个参数就是相当于一个map方法,第三个参数就是map函数执行时里面的的this指向对象,有点类似bindcallapply,可以将数据和处理数据的对象方法分开

const DObj = {
  handleArr: function (x) {
    return x+'1'
  }
}
Array.from('Hello World !',function (v) { return this.handleArr(v)}, DObj)

// 打印结果
["H1", "e1", "l1", "l1", "o1", " 1", "W1", "o1", "r1", "l1", "d1", " 1", "!1"]

Tips 使用第三个参数时,map函数方法不要使用箭头函数,否则this指向不会改变,如果不涉及第三个参数,可以使用箭头函数

Map

let m = new Map()
m.set('one', 'H')
m.set('tow', 'a')
m.set('three', 'a')
const DObj = {
  handleArr: function (x) {
    return x + '1'
  }
}
newData = Array.from(m, function (v) { return this.handleArr(v)}, DObj)
console.log( newData)
// 打印结果
["one,H1", "tow,a1", "three,a1"]

Set

let m = new Set()
m.add('H')
m.add('a')
m.add('o')
const DObj = {
  handleArr: function (x) {
    return x + '1'
  }
}
newData = Array.from(m, function (v) { return this.handleArr(v)}, DObj)
console.log( newData)
// 打印结果
["H1", "a1", "o1"]

类数组对象

只要对象的key是数值,并且value不能为数字,就可以视作类数组对象,key就是索引

2、Array.isArray()

这个方法是用来检测某个数据或者变量是否是数组,如果是则返回true,否则返回false

const arr = [1,2,3,4,5];
const obj = {name: '李狗蛋'};
const str = 'Hello World';
console.log(Array.isArray(arr))
console.log(Array.isArray(str))
console.log(Array.isArray(obj))

// 打印结果
true
false
false

Tips typeof用来检测数据或变量的类型,但是只是返回个类型,并不精准,instanceof用来检测数据或者变量是否某个对象的实例,但是数组也会返回true

3、Array.of()

这个放个和Array构造函数有点类似,都可以根据里面的参数创建数组,不过不同的是:

1.of方法是把里面的每一个参数作为数组的项,如果只是一个数字参数,依旧也是一个数组的项

2.Array构造函数会把里面的每一个参数作为数组的项,如果只是一个数字参数,则会创建一个该长度的空数组

原文地址:https://www.cnblogs.com/zjh-study/p/10958455.html

时间: 2024-11-02 17:18:13

Javascript -- 数组方法学习的相关文章

JavaScript数组方法对比(深度学习数组)

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]

JavaScript数组方法详解

JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中原型上的方法,本文举例介绍了从ES3到ES7几乎所有的数组方法.这大概是最全的数组方法详解了.希望读者能从中有所收获. 一.各版本数组方法一览表 数组方法名 对应版本 功能 原数组是否改变 pop() ES3- 删除最后一位,并返回删除的数据 是 push() ES3- 在最后一位新增一或多个数据,

4个错误使用JavaScript数组方法的案例

译者按: 做一个有追求的工程师,代码不是随便写的! 原文: Here's how you can make better use of JavaScript arrays 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java线上bug实时监控.真的是一个很好用的bug监控服务,众多大佬公司都在使用. 我保证这是一篇可以快速阅读并吸收的文章

JavaScript权威设计--JavaScript数组(简要学习笔记九)

1.数组的创建 如: var a=[1.1,null,"a"]; var b=[1, ,3]; //中间的那个元素是undefined var c=[ , , ] 这里c.length你是不是以为是3? 哈哈,长度应该是2.因为数组直接量的语法允许有可选的结尾逗号. 2.数组索引的其他种类 a[-1.23]=true    //创建一个名为-1.23的属性 a["1000"]=0    //如果是字符串,它就转换为数组的索引 a[1.000]    //和a[1]相

JavaScript数组方法总结

由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在一起,并以字符串形式返回参数:可选,指定元素之间的分隔符,没有参数则默认为逗号返回值:字符串对原数组的影响:无2.reverse()将数组的元素顺序变成倒序返回参数:无返回值:数组对原数组的影响:原数组被修改为倒序排列之后的数组3.sort()对数组元素进行排序并返回参数:可选,排序的方法函数,没有

JavaScript - 数组方法应用

数组方法应用 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

javascript数组方法

javascript有许多数组方法,今天整理了一下: var a=[1,2,3]; a.join();//将数组中所有元素都转化为字符串并连接在一起,参数作为分隔符. a.reverse();//将数组中的元素点到顺序,返回逆序数组. a.sort();//将数组中的元素排序并返回排序后的数组. a.concat();//创建并返回一个新数组,其中返回数组包括a中元素和参数. a.slice();//方法返回制定数组的一个片段或子数组,通过下标作为参数截取. a.splice();//在数组中插

JavaScript数组方法大全(第二篇)

数组方法大全(第二篇) 注意:如有错误欢迎指出,如有雷同纯属巧合,本博客参考书籍JavaScript权威指南,有兴趣的小伙伴可以去翻阅一下哦 forEach()方法 遍历数组,里面可以传递一个方法 var arr = [1,2,3]; arr.forEach(function (item,index,array) { //item:表示数组中元素的每一项 //index:表示每一项所对应的索引 //array:表示原数组 }) map()方法 将调用数组的每个元素传递给指定的函数,并返回一个新的

JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实非常好用.在过去,我会为了兼容性尽量不用这些方法.但是,总不能为了旧的丢了新的吧?!虽然说jQuery已经集成好了不少语法糖,但jQuery体积太庞大,作为一名志于体面的前端儿得知道原生的兼容性写法要怎么写.于是这几天,我开始在琢磨这些方法的兼容性写法.其实并不难,就是以前不够自信不敢写.写完以后,