JS中的Array数组及数组API

记博客,时常回顾.尤其是面试之先回顾
阮一峰标准库Array对象

一些标准库

image.png

栈,堆,栈里面存一个window/global对象的地址,指向堆内存,堆内存存一个hash表.里面有标准库.
标准库里有Object()函数,String()函数,Number(),Boolean().这篇文章记录Array(),Function()

回忆：简单类型(原始类型)Number,String,Boolean加不加new 结果是不一样的,加new就是生成对象，不加new就是生成简单类型(原始类型)。而对象(复合类型)array,function,狭义object加不加new都是生成object。比如new Function()和不加new的Function()

在下面做一些例子介绍一下

image.png Function

function与Function的区别

function与Function的区别

function是关键字,和var if let这些一样,是用来声明一个函数的关键字
而Function是window的全局对象
window.Function
只不过大写的Function也可以创建一个函数
详细看阮一峰的三种声明函数的方法

String(),Number()等简单类型与Object()复合类型

Object

Object(1)和Object('sss')分别返回Number对象和String对象,同理,Object(true)返回Boolean对象

1. Object()和new Object()分别返回一个空对象.
2. 除了Object()用不用new都是对象之外,其他的标准库函数跟Object不一样
3. 直接用String()函数返回的是一个字符串,而new String('1')则会返回一个对象.

其他标准库函数同理

Number Boolean

五个false值

0 ,'' ,NaN ,undefined ,Null

Boolean({})//ture
Boolean('    ')//ture,空格也算ture

详细了解请看这篇博客
在上面的博客中了解一下数据类型有哪些？

image.png

symbol为新加的
学习地址:MDNArray或阮一峰标准库Array对象

数组的声明

let f1 = ['a','b'];
let f2 = new Array('a','b');

image.png

两种方法等价

JS坑一

声明 var a = Array(3)

var a = Array(3);//参数为数组长度

那么a就是一个长度为3,但里面每一个内容都是undefined的数组。
换句话说：生成一个长度为3，每个元素都是Undefined的数组对象。

且a[0]、a[1]、a[2]这三个元素都是不存在的,下面通过内存图来看看为什么会这样、

image.png

这个a里面在栈中存了一个地址,比如说是99,指向堆里的一块内存空间,但是这个堆里只存了一个length:3的键值对和proto指向Array.Prototype,里面有一些shiftpush的函数.
所以才undefined.因为没有存下来
如图

image.png

var 声明一个变量的时候是一个语句,语句返回的值是undefined,但表达式返回的值随着表达式变化

声明 var a = Array(3,3);

两个参数的时候,里面的参数都是数组内部的值

image.png image.png

到底什么是数组

用Array方法构造出来的那个对象,就是数组

为什么没有声明push的key,就可以用a.push呢,因为a.__proto__连接到了一个共用对象,Array.prototype
原型链
Array有很多API怎么做到体积小,功能强大呢?原型链,共用属性,共用方法,通过__proto__量过去就好了

image.png

var a  = Array(1,1);
a.__proto__ ===Array.prototype//true
a.__proto__.__proto__===Object.prototype//true
Array.prototype.__proto__=== Object.prototype//true

image.png

对象和数组的本质区别:

image.png

__proto__指向的不一样,共用属性不一样,里面所拥有的API不一样.区别就在于原型不一样.
数组和对象都是对象,只不过是原型链不同的对象.
换句话说就是

原型不同。数组和对象不同，其中之一就是两者的公有属性不同。数组之所以是数组，是因为它有数组的特点，而对象没有数组的特点。它们二者的原型是不一样的。

数组之于对象

image.png

length还是3,但是却有新加入的属性,就像对象一样.

遍历数组的几种方式

第一种方式,把数组当作真数组,故意去访问数组的下标
第二种,打印出所有的的key.

image.png

总结:数组只不过是拥有特殊原型链的对象.

image.png

for in遍历 只关心里面有所有的键值对,for i循环只关心循环的标序.

伪数组

__proto__中没有Array.prototype,就是伪数组.
例如:只关心他的下标,可以完全用hash键值对来表示.

image.png

JS里面只有一个伪数组arguments
arguments代表函数里面所传入的所有的参数,是伪数组.
因为没必要在伪数组里push和pop东西,所以没有那些Array.prototype里面的方法.

image.png

数组api

forEach()

a.forEach()需要接受一个函数,这个函数必须接受两个参数.第一个参数对应数组的value,第二个参数对应数组的key。函数参数可以有第三个参数，第三个参数就是数组a本身。实际上通过 .已经把数组a传入到forEach当中。

image.png

如何理解函数参数

image1.png image2.png image3.png image4.png

上图中的arguments是这个函数接收到的参数

所以forEach实际上类似于下面的实现方法

image.png

数组的api中,a.forEach之所以没有把array传进去,是因为用了this指代当前的对象.用this就可以找到那个调用它的数组.所以forEach原理:

image.png

forEach中函数传的第三个参数是他自己

image.png

数组的sort()

a.sort() 传函数参数，函数参数必须有两个参数，分别对应数组a的第一、第二个数。函数体return回的值决定排序顺序，默认采用快排。return回的值是正值表示从大到小排，负值表示从小到大排，0表示fn和sn相等，fn-sn表示从小到大排，sn-fn表示从大到小排。排完序后是覆盖原来的a数组，即存回原来a的内存处。
内置快排.
阮一峰标准库Array.sort()

image.png

排序后原数组也会改变,只有sort改变了原值

sort方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。
如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数。

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

上面代码中，sort的参数函数本身接受两个参数，表示进行比较的两个数组成员。如果该函数的返回值大于0，表示第一个成员排在第二个成员后面；其他情况下，都是第一个元素排在第二个元素前面。

[
  { name: "张三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "张三", age: 30 }
// ]

里面的参数是两个比较的数组成员

image.png

join&concat&map&filter&reduce

a.join('连接符')

用间隔符间隔连接。
阮一峰

image.png

a.contact

两个数组合并成一个数组，常用于数组复制。

image.png

数组中a + b是a.toString() + b.toString()

特殊用法,复制数组

image.png

内容一样,地址不一样

a.map

map是映射的意思
map和forEach一样,可以遍历数组,但是与forEach不同的是可以有返回值,可以将传递进去的函数的返回值在收集起来,返回一个新数组

image.png

上面是箭头函数,参数=>返回值

也可以返回对象

image.png

a.filter()

filter是过滤的意思

image.png image.png

备注：filter和map一起使用的小技巧

image.png

链式操作

image.png

总结:forEach,map,filter都可以传入一个函数,这个函数都可以接受三个参数,分别是值,键,数组本身,forEach没有返回值,
map,filter分别返回一个新数组,map为映射返回,filter为过滤返回

reduce()

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。----MDN
MDN:Array.prototype.reduce()

阮一峰reduce()

高级用法
reduce中函数的第一个参数表示的是累计值,第二个参数是每次遍历数组时的每一个当前值.return的是下一次开始循环的累积值.所以：

image.png

reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

map(),filter(),reduce()题目

计算所有偶数的平方,并将其返回成一个新数组

image.png

var a = [1,2,3,4,5,6,7,8,9]
a.filter((value)=>(value%2===0)).map((value)=>(value*value))//(4) [4, 16, 36, 64]

filter()和map()里面传递函数的参数,第一个为value,第二个为key.

计算所有奇数的和

image.png

var a = [1,2,3,4,5,6,7,8,9]
a.reduce((sum,a)=>{if(a%2===1){return sum+a}else{return sum}},0)//25