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方法构造出来的那个对象,就是数组

为什么没有声明pushkey,就可以用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 + ba.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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342