通过浏览器控制台 console 可查看到 Array 数组上原型的所有方法(如下图)。对于原型问题此文章暂不过多叙述,单针对对象中的方法进行自我看法的总结;细心的同学可以发现对象原型上所携带的方法基本上是我们敲代码时所使用过的,文章部门叙述引用于MDN;第一篇章,后面会陆续发布第二篇第三篇预计在8月15号左右总结完数组的所有方法,总结起来发现很多方法在之前工作中某个场景使用很合适但是当时总是想不起来,想在趁有空对一些方法进行重新回顾,温故而知新

Array.prototype.at() 

 at() 方法接收一个下标并返回该下标所对应的数组的数据,下标值允许是正数或者负数。如果是负整数则会从数组的最后开始向前进行搜索并返回对应下标的数组数据,如果下标值超过数组的长度则返回 undefined

let arr = ['aaa','bbb','ccc','ddd','fff'];
console.log(arr.at(0)); // 'aaa'
console.log(arr.at(1)); // 'bbb'
console.log(arr.at(-1)); // 'fff'
console.log(arr.at(5)); // undefined

Array.prototype.concat() 

  concat() 方法用于合并两个或多个数组,并且此方法不会更改原数组,而是返回一个新数组由被调用的对象中的元素组成,每个参数的顺序依次是该参数的元素或参数本身。嵌套数组不会对里面的数组进行展开合并,仅对数组的单层数据进行合并处理,而且改方法不会改变this或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。 原始数组的元素将复制到新数组中。

  • 对象引用(而不是实际对象):concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。
  • 数据类型如字符串,数字和布尔:concat将字符串和数字的值复制到新数组中。

例:

let arr = ['aaa','bbb'],
arr2 = ['ccc','ddd','fff'];
console.log(arr.concat(arr2)); // ['aaa', 'bbb', 'ccc', 'ddd', 'fff'] // 可定义一个新的变量进行接收

let arr = ['aaa','bbb']
console.log(arr.concat(1,[2,3])); // ['aaa','bbb',1,2,3]

let arr = ['aaa','bbb'],
arr2 = ['ccc','ddd','fff'],
   arr3 = [1,2,3],
arr4 = arr.concat(arr2,arr3);
console.log(arr.concat(arr2,arr3)); // ['aaa', 'bbb', 'ccc', 'ddd', 'fff',1,2,3]
console.log(arr4); // ['aaa', 'bbb', 'ccc', 'ddd', 'fff',1,2,3]

var num1 = [[1]],  num2 = [2, [3]],  num3=[5,[6]];

var nums = num1.concat(num2);
console.log(nums); // [[1], 2, [3]] var nums2=num1.concat(4,num3);
console.log(nums2); // [[1], 4, 5,[6]];

Array.prototype.constructor()

 consrtuctor() 不做过多叙述可 点击此处 前往了解具体描述;

Array.prototype.copyWithin()

    copyWithin() 方法会浅复制数组的一部分到同一数组中的另一个位置,并返回一个新的数组,不会改变原数组的长度。
   例:

let  arr = ['a',1,'b',2,'c',3];
console.log(arr.copyWithin(0,3,4)); // [2,1,'b',2,'c',3] 此处是将原数组中的第3项赋值给第0项
console.log(arr.copyWithin(1,3)); //  [2, 2, 'c', 3, 'c', 3]

Array.prototype.copyWithin() 

 copyWithin() 方法会浅复制数组的一部分到同一数组中的另一个位置,并返回一个新的数组,不会改变原数组的长度。

let  arr = ['a',1,'b',2,'c',3];
console.log(arr.copyWithin(0,3,4)); // [2,1,'b',2,'c',3] 此处是将原数组中的第3项赋值给第0项
console.log(arr.copyWithin(1,3)); //  [2, 2, 'c', 3, 'c', 3]

 Array.prototype.entries()

 entries() 方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对。其原型上有一个 next方法可供调用,可用于获取原数组的 【key value】;

let arr = ['aaa','bbb','ccc'],
  arr2 = arr.entries();
console.log(arr2); // 得到一个 Array Iterator
console.log(arr2.next()); // 可复制到浏览器控制台中进行测试
console.log(arr2.next().value); // [0,'aaa']
console.log(arr2.next().value); // [1,'bbb']

//

Array.prototype.every()

   every() 方法用于测试调用其的数组是否通过传入的函数的校验;

/* 语法 arr.every(callback(element[index[array]])[thisArg])
  callback 回调函数;可接受三个参数
             1. element 用于测试的当前的值;
             2. index 用于测试的当前的索引值;
             3. array 调用 every 的函数;
  thisArg 执行 callback 时的 this 值;

  every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个会使 callback 返回 falsy(虚值假值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 trueevery 就会返回 truecallback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。

  callback 在被调用时可传入三个参数:元素值,元素的索引,原数组。

  如果为 every 提供一个 thisArg 参数,则该参数为调用 callback 时的 this 值。如果省略该参数,则 callback 被调用时的 this 值,在非严格模式下为全局对象,在严格模式下传入 undefined

  every 不会改变原数组。

  every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

  every 和数学中的"所有"类似,当所有的元素都符合条件才会返回 true。正因如此,若传入一个空数组,无论如何都会返回 true。*/

---------------------------------------------------------------
let arr = ['aaa','bbb','ccc'];
let fn = (value)=> !value;
console.log(arr.every(fn)); // false

let arr = ['aaa','bbb','ccc'];
 let fn = (value)=> typeof value === 'string';
 console.log(arr.every(fn));   // true


let arr = ['aaa','bbb','ccc',111];
let fn = (value)=> typeof value === 'string';
console.log(arr.every(fn)); // false

 Array.prototype.fill()

  fill() 方法用于固定一个值并填充数组从开始下标到结束下标的全部元素,且不包括结束索引;并返回操作后的数组;

/* 语法 arr.every(value(start[end]))
  value 用来填充数组元素的值;
  start 起始下标;
  end 结束下标;

  fill 方法接受三个参数 valuestart 以及 endstart 和 end 参数是可选的,其默认值分别为 0 和 this 对象的 length 属性值。

  如果 start 是个负数,则开始索引会被自动计算成为 length + start,其中 length 是 this 对象的 length 属性值。如果 end 是个负数,则结束索引会被自动计算成为 length + end

  fill 方法故意被设计成通用方法,该方法不要求 this 是数组对象。

  fill 方法是个可变方法,它会改变调用它的 this 对象本身,然后返回它,而并不是返回一个副本。

  当一个对象被传递给 fill 方法的时候,填充数组的是这个对象的引用。*/

---------------------------------------------------------------

Array.prototype.filter()

  filter() 方法经常用于过滤一个数组;并返回一个新的数组,其包含过滤后的所有元素;

/* 语法 let newArr = arr.filter(callback(element[index[array]])[thisArg])
   callback 回调函数,用于过滤测试数组中的每一个元素的函数。根据定义的校验规则如果通过则返回 ture 保留该元素并添加进返回的新数组中。不通过校验规则返回 false 则不添加进返回的新数组中;其接受三个可选参数
        element 数组中正在处理的元素;
        index 正在处理的元素的下标;
        array 调用其方法filter的数组本身;
  thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------

//从上面图片可以看出filter类似于for循环,循环对数组进行处理;其实现方法也可使用for循环实现,但是为什么还要用filter呢?最直白的理解因为简单省事代码少还凸显开发水平!!

// 例: let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];// 快速过滤出Number类型 
 - filter 实现 两行结束甚至代码优化合并下可以更少 
 - for 循环实现;这一对比结果一目了然;

// 当然filter的功能远不止过滤一个数字出来如此简单

// 过滤出数组中的奇数

let newArr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'].filter(function(item){
  return item%2 && item>0
})
console.log(newArr) //[1,3,5,7,9]
console.log([1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'].filter(item => item%2&&item)) //此处得出的结果和上面是一样的,但是上面的代码太多了,不符合我摸鱼的个性,还是简写成这样更能体现出我的开发水平;

// 去除数组中的重复项
let newArr = [1,1,2,2,3,3,4,4,5,5].filter((element,index,array)=> array.indexOf(element)==index);
console.log(newArr) // [1,2,3,4,5]

Array.prototype.find() 

 find() 方法返回数组中满足提供的测试函数的第一个元素,如果没有返回 undefinedcallback 函数会为数组中的每个索引调用即从 0 到 length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索  引的方法。 em... 似曾相识的 callback 似曾相识的参数

/* 语法 let value = arr.find(callback(element[index[array]])[thisArg])
   callback 回调函数,其接受三个可选参数
        element 数组中正在处理的元素;
        index 正在处理的元素的下标;
        array 调用其方法find的数组本身;
  thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.find(item => item > 1)) // 2 你会发现数组中有好几个大于 1 的值;但是只返回了一个值2

// 也可以快速查找到匹配的对象数据
let arr = [{name: '百度', id: 1},{name: '谷歌', id: 2},{name: 'EDG', id: 3}];
arr.find(value => value.name == '谷歌') // {name: '谷歌', id: 2}
arr.find(value => value.name == '火狐') // undefined 

Array.prototype.findIndex() 

 findIndex() 方法返回匹配到的第一个值得下标,如果没有匹配到则返回 -1find()方法是返回其值,findIndex是返回其下标;调用参数基本上一致

/* 语法 let index = arr.findIndex(callback(element[index[array]])[thisArg])
   callback 回调函数,其接受三个可选参数
        element 数组中正在处理的元素;
        index 正在处理的元素的下标;
        array 调用其方法findIndex的数组本身;
  thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.findIndex(item => item > 1)) // 1

// 也可以快速查找到匹配的对象数据的下标
let arr = [{name: '百度', id: 1},{name: '谷歌', id: 2},{name: 'EDG', id: 3}];
arr.findIndex(value => value.name == '谷歌') // 1
arr.findIndex(value => value.name == '火狐') // -1

Array.prototype.findLast() 

  findLast() 方法返回匹配到的最后一个元素的值,如果没有匹配到则返回 undefiner;find()方法是从前往后查询,findLast是从后往前查询;调用参数基本上一致

/* 语法 let lastValue = arr.findLast(callback(element[index[array]])[thisArg])
   callback 回调函数,其接受三个可选参数
        element 数组中正在处理的元素;
        index 正在处理的元素的下标;
        array 调用其方法findLast的数组本身;
  thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.findLast(item => item > 1)) // 9

Array.prototype.findLastIndex() 

  findLastIndex() 方法返回从后向前查询匹配到的第一个值得下标,如果没有匹配到则返回 -1findIndex()方法是返回从前向后查询匹配其值的下标,findLastIndex是返回从后向前查询匹配其下标的下标;调用方法基本上一致

/* 语法 let lastIndex = arr.findLastIndex(callback(element[index[array]])[thisArg])
   callback 回调函数,其接受三个可选参数
        element 数组中正在处理的元素;
        index 正在处理的元素的下标;
        array 调用其方法findIndex的数组本身;
  thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.findLastIndex(item => item > 1)) // 返回数组中9的下标,打印结果为 10

Array.prototype.flat() 

  flat() 方法按照一个指定的深度递归遍历数组,并将其所有元素遍历到子数组中的元素上进行合并并返回一个新的数组; 将多维数组转为一维数组

/* 语法 let newArr = arr.flat([depth])
   depth 默认为1,指定多层嵌套数组的深度*/
---------------------------------------------------------------
let arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
console.log(arr.flat()) //  [1, 2, 3, 4, Array(3)]
console.log(arr.flat(4)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.fiat(100)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 这里就如果不知道数组层数的时候可直接传入一个很高的数值
console.log(arr.flat('a')) // 如果这里传入的不是数字或小于1的数字会使用默认值 0,并返回原来其调用的数组;如果传入小数不会对小数进行处理只对整数值进行处理

Array.prototype.flatMap() 

  flatMap() 方法与 flat 方法几乎相同,但是 faltMap方法会更高效一些

/* 语法 let newArr = arr.flatMap(callback[currentValue[index[]array]],[thisArg])
   callback 回调函数可接收到三个参数
     currentValue 当前正在处理的数组元素
     index 当前正在处理的数组元素的下标
     array 当前调用 flatMap 的数组
   thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined

*/
---------------------------------------------------------------
let arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
console.log(arr.flat()) //  [1, 2, 3, 4, Array(3)]
console.log(arr.flat(4)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.fiat(100)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 这里就如果不知道数组层数的时候可直接传入一个很高的数值
console.log(arr.flat('a')) // 如果这里传入的不是数字或小于1的数字会使用默认值 0,并返回原来其调用的数组;如果传入小数不会对小数进行处理只对整数值进行处理

JavaScript数组方法总结,本文是根据数组原型上的方法进行总结,由于方法太多将会分篇章发布的更多相关文章

  1. JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法

    JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和Chrome上无法动作. (当时,在Chrome35.0上的时候还是可以的,Chrome36.0上就无法动作了 ...

  2. Promise (2) 原型上的方法

    "I'm Captain Jack Sparrow" 加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆). 为了周天能去看电影,要赶紧 ...

  3. JavaScript的json和Array及Array数组的使用方法

    1.关于json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.也可以称为数据集和数组类似,能够存数据! //Ar ...

  4. JavaScript中的内置对象-8--1.Array(数组)-Array构造函数; 数组的栈方法; 数组的转换方法; 数组的操作方法; 删除-插入-替换数组项; ECMAScript为数组实例添加的两个位置方法;

    JavaScript内置对象-1Array(数组) 学习目标 1.掌握任何创建数组 2.掌握数值元素的读和写 3.掌握数组的length属性 如何创建数组 创建数组的基本方式有两种: 1.使用Arra ...

  5. javascript里的几种常见的数组方法

    Array()的几种方法 1.splice(2,3,4)删除数组中任意项(三个参数). 2.splice(1,3)删除从第一项开始的往后三项(两个参数).(splice可以结合pop(),unshif ...

  6. JavaScript利用数组原型,添加方法实现遍历多维数组每一个元素

    原型就是提供给我们为了让我们扩展更多功能的. 今天学习了用js模拟底层代码,实现数组多维的遍历.思想是在数组原型上添加一个方法. // js中的数组forEach方法,传入回掉函数 能够帮助我们遍历数 ...

  7. JavaScript (JS)基础:DOM 浅析 (含数组Array、字符串String基本方法解析)

    ①文本对象document: 例如:document.getElementById()    只获取一个对象          document.getElementsByTagName()   获取 ...

  8. javascript对象深拷贝,浅拷贝 ,支持数组

    javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...

  9. javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

  10. javascript中用闭包递归遍历树状数组

    做公司项目时,要求写一个方法,方法的参数为一个菜单数组集合和一个菜单id,菜单数组的格式为树状json,如下面所示: [{"id":28,"text":&quo ...

随机推荐

  1. Mariadb 在centos 7下的安装配置

    安装Mariadb数据库: sudo yum install mariadb-server 启动数据库: sudo systemctl start mariadb 设置自动启动: sudo syste ...

  2. 在HTML标签<a/>中调用javascript代码

    <a/>标签的“href”属性可以是一个有效的URL,表示跳转的目的地,除此之外,href还可以是一段javascript代码.当为“href”设置javascript代码时,格式如下:& ...

  3. css3选择器一

    在HTML中,通过各种各样的属性可以给元素增加很多附加的信息,了解和掌握css3一些的选择器,是很有必要的. 属性选择器示例: <div><a href="xxx.pdf& ...

  4. AcitonBar 自定义布局

    Android系统中ActionBar默认的布局不美观且难于控制,通过为ActionBar自定义布局的方式可以灵活控制ActionBar. 自定义Activity主题和ActionBar样式 在新建的 ...

  5. iOS之Swift语言的学习

    好久都没有来这个熟悉而又陌生的地方啦, 想想已经有两三个月了吧,不过我相信以后还是会经常来的啦,因为忙碌的学习已经过去啦,剩下的就是要好好的总结好好的复习了,好好的熟悉下我们之前学习的知识点,将他们有 ...

  6. QtQuick桌面应用程序开发指南 4)动态管理Note对象_B 5)加强外观 6)许多其他的改进

    4.2.2 Stateless(不管状态)JavaScript库 为了让开发轻松点, 使用一个JavaScript接口来和数据库交互是个好主意, 它在QML中提供了方便的方法; 在QtCreator中 ...

  7. spark 编程向导

    http://spark.apache.org/docs/latest/programming-guide.html

  8. SLAM for dummies中文翻译

    1.简介 本文的主要目的是简单介绍移动机器人领域中广泛应用的技术SLAM(同步定位与地图绘制)的理论基础以及应用细节.虽然目前存在很多关于SLAM技术的方方面面的论文,但是对于一个新手来说,仍然需要花 ...

  9. 分享二:架构设计分享一:关于API分布式服务提供方式

    一:基于HTTP协议的Web API 1:RESTful API http://www.ruanyifeng.com/blog/2011/09/restful 二:

  10. Wireshark命令行工具tshark详解(含例子)-01

    Wireshark命令行工具tshark使用小记 1.目的 写这篇博客的目的主要是为了方便查阅,使用wireshark可以分析数据包,可以通过编辑过滤表达式来达到对数据的分析:但我的需求是,怎么样把D ...