资讯专栏INFORMATION COLUMN

JS中ArrayAPI学习笔记

tolerious / 1377人阅读

摘要:如果该函数的返回值大于,表示第一个成员排在第二个成员后面其他情况下,都是第一个元素排在第二个元素前面。第三次执行,为上一轮的返回值,为第四个成员。第四次执行,为上一轮返回值,为第五个成员。

JS中ArrayAPI学习笔记

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

1 一些标准库回顾


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

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

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

Object()和new Object()分别返回一个空对象.

除了Object()用不用new都是对象之外,其他的标准库函数跟Object不一样

直接用String()函数返回的是一个字符串,而new String("1")则会返回一个对象.

其他标准库函数同理


NaN也是数

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

为什么没有声明pushkey,就可以用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 + ba.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)

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

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

相关文章

  • Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)

    摘要:有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱,之后会进行整理优化。 上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本...

    DobbyKim 评论0 收藏0
  • CSS Variables学习笔记

    摘要:注本文首发于个人博客学习笔记。最近看了下变量,又名自定义属性,跟大家分享一下我的学习笔记。使用自定义属性来设置变量名,并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单,如下,声明了一个名叫的变量。 注:本文首发于个人博客 《CSS Variables学习笔记》。 最近看了下CSS Variables(CSS变量,又名CSS自定义属性),跟大家分享一下我的学习笔记。 ...

    mudiyouyou 评论0 收藏0
  • React学习笔记1:环境搭建

    摘要:新搭建的个人博客,本文地址学习笔记环境搭建本文的书写环境为,之后会补充下的差异创建学习目录初始化项目根据相关提示完善信息,入口文件安装相关包,并且使用也就是支持,需要包,因为我之前做个一些相关项目,所以部分包已经全局安装,比如等等,大家 新搭建的个人博客,本文地址:React学习笔记1:环境搭建 本文的书写环境为mac,之后会补充windows下的差异 1、创建学习目录 mkdir l...

    Sourcelink 评论0 收藏0
  • JS学习笔记 - 分析 JavaScript 的执行顺序

    摘要:浏览器在解析文档流的时候,如果遇到一个标签,则会等到这个代码块都加载完之后再对代码进行预编译,然后在执行。执行完毕后,浏览器会继续解析西门的文档流,同时也准备好处理下一个代码块。同时,也避开了文档流对执行的限制。 本文章记录本人在学习 JavaScript 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。 在 html 文档中的执行顺序 js代码执行顺序...

    Keagan 评论0 收藏0
  • 我的webpack学习笔记(一)

    摘要:前言在上一篇文章中我介绍了学习前的准备工作,下面开始的学习。目标一般我们接触到的关于的文章,都是以解读官方文档为主,而且是针对单页面项目的应用。我先在假设要做一个多页面应用,该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作,下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

    wh469012917 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<