JS中ArrayAPI学习笔记

JS中ArrayAPI学习笔记

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

1 一些标准库回顾

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

1.1 Object(),String(),Number()等

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

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

1. 其他标准库函数同理

NaN也是数

1. Boolean()

五个false值
0 ,'' ,NaN ,undefined ,Null

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

2 新api Array

JS的七种数据结构
number,string,boolean,object,undefined,null,symbol

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

2.1 声明数组

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

两种方法等价

3 声明数组加不加new

3.1 JS坑一:var a = Array(3)

如果直接

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

那么a就是一个长度为3,但里面每一个内容都是undefined的数组

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

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

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

3.2 var a = Array(3,3)

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

3.3 加new

总结,加不加new都一样

4 原始类型和和合成类型不同点

原始类型Number,String,Boolean加不加new 不 一样,复合类型object,array.function加不加new一样
比如new Function()和不加new的Function()

4.1 function与Function的区别

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

5 到底什么是数组

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

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

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

5.1 对象和数组的本质区别:

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

5.2 数组之于对象

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

5.3 遍历数组的几种方式

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

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

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

6 伪数组

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

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

7 数组api forEach()

a.forEach()需要接受一个函数,这个函数必须接受两个参数.

7.1函数参数可以为函数理解

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

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

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

8 数组的sort() api

内置快排.
阮一峰标准库Array.sort()

排序后原数组也会改变,只有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 }
// ]

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

9 join&concat&map&filter&reduce

9.1 join

阮一峰

9.2 concat

一般用法,连接数组

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

特殊用法,复制数组

内容一样,地址不一样

9.3 map

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

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

也可以返回对象

所有的value都会一一映射

9.4 filter

filter是过滤的意思

与map的区别,过滤.不是一一映射了

9.5 filter和map一起用

链式操作

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

[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

9.6 reduce

9.6.1 mdn

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

9.6.2 阮一峰教学

阮一峰reduce()
下面是阮一峰的教学:
reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

上面代码中，reduce方法求出数组所有成员的和。第一次执行，a是数组的第一个成员1，b是数组的第二个成员2。第二次执行，a为上一轮的返回值3，b为第三个成员3。第三次执行，a为上一轮的返回值6，b为第四个成员4。第四次执行，a为上一轮返回值10，b为第五个成员5。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15。

reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。

累积变量，默认为数组的第一个成员
当前变量，默认为数组的第二个成员
当前位置（从0开始）
原数组
这四个参数之中，只有前两个是必须的，后两个则是可选的。

如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  return a + b;
}, 10);
// 25

上面代码指定参数a的初值为10，所以数组从10开始累加，最终结果为25。注意，这时b是从数组的第一个成员开始遍历。

上面的第二个参数相当于设定了默认值，处理空数组时尤其有用。

function add(prev, cur) {
  return prev + cur;
}

[].reduce(add)
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1)
// 1

上面代码中，由于空数组取不到初始值，reduce方法会报错。这时，加上第二个参数，就能保证总是会返回一个值。

由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。比如，找出字符长度最长的数组成员。

function findLongest(entries) {
  return entries.reduce(function (longest, entry) {
    return entry.length > longest.length ? entry : longest;
  }, '');
}

findLongest(['aaa', 'bb', 'c']) // "aaa"

上面代码中，reduce的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员。

9.6.3 高级用法

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

9.7 reverse()

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

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

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

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

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

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

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

计算所有奇数的和

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

1+3+5+7+9//25

![CgsCNT.png](https://s1.ax1x.com/2018/05/20/CgsCNT.png)