记博客,时常回顾.尤其是面试之先回顾
阮一峰标准库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对象
- Object()和new Object()分别返回一个空对象.
- 除了Object()用不用new都是对象之外,其他的标准库函数跟Object不一样
- 直接用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中函数的第一个参数表示的是累计值,第二个参数是每次遍历数组时的每一个当前值.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
网友评论