【JS】JavaScript数组以及数组API学习总结

roundstones 发布于2019-08-21 18:26 / 1224人阅读

摘要：返回数组内容的字符串表示形式将数组中每个元素转为字符串，并用逗号连接。拍照连接符将数组中每个元素转为字符串，用自定义的连接符连接每个元素需要用变量借助。

关于数组篇的记录，纯自己总结，会持续更新～

原生js方法

1:创建数组的几种方法：

var arr = []; 

var arr = new Array();

var arr = [1,2];

var arr = new Array(1,2,3);

var arr = new Array(n);

**注意：new Array定义数组，会根据参数个数不同代表数组不同内容
js中数组越界不报错！而是返回undefined**

2:检测是不是数组：

Array.isArray(arr) // 数组的API

arr instanceof Array      //通过构造函数

Array.prototype.isPrototypeOf(arr)    //通过原型

Object.prototype.toString.call(arr)  //[Object Array]

3:遍历关联数组(哈希hash数组)

for(var key in arr){
    arr[key] 当前属性值
}

4:数组基础API

arr.valueOf() // 返回值为该对象的原始值。

arr.toString() // 返回数组内容的字符串表示形式

String(arr) // 将数组中每个元素转为字符串，并用逗号连接。——拍照

arr.join("连接符") //  将数组中每个元素转为字符串，用自定义的"连接符"连接每个元素,需要用变量借助。

arr.reverse() // 将数组中元素的位置颠倒,并返回该数组,注意：原数组会改变

arr.sort() // 数组排序，按字符串大小排序,会改变原数组

arr.concat(otherArr) // 合并新元素，返回一个新数组需要用变量接住，不会改变原数组

arr.slice(start,end) // 剪切数组，含头不含尾 ,返回新的数组，不会改变原数组

注意：拼接和截取: 都无法直接修改原数组而是返回新数组，用变量接住
arr.split([ 起始位置 | 要删除元素的个数 | 要插入元素的值，可以写入多个值 ] )剪切数组/替    换/新增

arr.indexOf(item) // 返回第一个匹配到的元素在数组中所在的位置 or -1

arr.lastIndexOf(item)
注意：IE6, 7, 8 不支持indexOf与lastIndexOf方法

5:栈和队列相关API

arr.push() //  尾部添加元素，返回被新数组的长度,原数组会改变

arr.pop()  // 尾部删除元素，返回被删除的元素,原数组会改变

arr.unshift(item)  // 头部添加元素，返回新数组的长度,原数组会改变

arr.shift(item) //  头部删除元素，返回被删除的元素,原数组会改变

6:ES5 API:

注意：ES5数组API这些都不会改变原数组，新的数组要用变量接住

参数：[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

arr.every(function(item,index,array){}) // 该函数对每一项都返回true，则返回true,否则返回false

arr.some(function(item,index,array){})  // 该函数对其中一项返回true，则返回true

arr.filter(callback) // 数组过滤，返回满足条件的元素组成的一个新数组，

arr.map(callback) // 对数组每一项进行计算等处理，返回处理结果组成的数组,返回的是一个新数组

arr.reduce(fn) //  前一个元素 | 当前元素，从1开始 | 后一个元素的序列，从1开始计数 | 表示该数组 ] _

var arr = [1,2,3,4,5];
var reduceArr = arr.reduce(function(pre,cur,index,array){
    return prev + cur;
})   //15

7:ES6 API

...[arr] 数组扩展运算符

Math.min(...[arr]) 等同于Math.min.apply(null,arr)  替换数组的apply方法

arr1.push(...arr2) 等同于Array.prototype.push.apply(arr1,arr2) 一个数组添加到另一个数组的尾部

[...arr1,...arr2,...arr3] 等同于arr1.concat(arr2,arr3)  合并数组

let[first,...const]=[1,2,3,4]，结果first=1，const=[2,3,4] 结合解构一起使用

Array.from() 将类数组对象和可遍历的对象转换为真正的数组（包括ES6新增的数据结构Set和Map）

Array.from(“hello”)  [“h”,”e”,”l”,”l”,”o”]
let person={
    0:"张三",
    1:"李四",
    2:"王五",
    length:3 //必须要设置对象长度
};
let arr=Array.from(person); //等同于let arr=[].slice.call(person);

Array.of(1,2,3) [1,3,4] 将一组值转换为数组

Array()会因参数个数导致行为有差异

Array.find(function(val,index,arr))
找到第一个符合条件的数组成员Array.findIndex(function(val,index,arr)) 找到第一个符合条件的数组位置
这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。

 arr.includes(value,[start]) 可以找到NaN

超融合服务器混合云 js数组api视频 java数组本章总结 java数组去重总结 javascript学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90460.html

JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
前端开发周报: CSS 布局方式与JavaScript数据结构和算法

摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

huhud 2019-08-20 18:59 评论0 收藏0
前端开发周报: CSS 布局方式与JavaScript数据结构和算法

摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

?xiaoxiao, 2019-08-29 13:16 评论0 收藏0