VUE基础知识1:数组forEach

vue是数据驱动,vue主要操作的是数据

1、JS中有哪些数据类型

(1)基本数据类型:number,string,boolean,null,undefined

(2)引用数据类型: Object, function, Symbol(ES6)

 

2、{} 和 []

操作数组的方法有哪些:

ES4: pop,push,unshfit,shfit,slice,splice,reverse,sort,indexOf,lastIndexOf,concat

(pop push unshift shift splice reverse sort ) 括号中的能改变原数组,叫数组的变异

3、用的比较多的方法

forEach,filter,map,find,some,every,includes,reduce

some,every 是 ES5的

ES6:(includes,find),其余都是ES5的

filter(过滤),map(映射)

4、node版本

版本最好升级到 8.5以上

5、for

for循环和forEach是等价的,都是循环数组

例子:

 

5、forEach

例子:

 

注意:forEach不支持return

6、 for of

for of 支持return,并且是只能遍历数组,不能遍历对象

for of 是ES6语法

例子:

 

7、如何用for of 遍历对象呢?

本来for of 不支持遍历对象。

Object.keys将对象的key作为新的数组

例子:

 

8、filter

filter是过滤的意思,filter不会操作原数组,返回的是过滤后的新数组。

回调函数返回的结果,如果返回true,表示这一项放到新数组中。

例子:

过滤出来大于2,小于5的值

 

9、map

map是映射的意思,将一个数组映射成一个新数组。

map不操作原数组,返回一个新数组。

回调函数中返回什么,这一项就是什么。

例子:

[1,2,3] 映射成 <li>1</li><li>2</li><li>3</li>

 

join() 方法用于把数组中的所有元素放入一个字符串。

 是ES6中的模板字符串,遇到变量用${ } 取值。

filter一般用于删除数组中的某一项。而map一般用于把这个数组修改一下。

10、includes

includes 数组是否包含的意思,返回的是boolean

includes 是ES6的方法

some、every 是ES5的方法

例子:

 

11、find

find 是找出数组中的某一项。 返回找到的那一项。

find 是ES6的语法。

find 不会改变原数组。回调函数中返回true表示找到了。

找到后停止循环。找不到返回的是 undefined。

 

indexOf() > -1 表示找到了。

12、some 和 every

some 和 every 是ES5的语法

some 找true, 找到true后停止,返回true。 找不到返回false。

every 找false, 找到false后停止,返回false。

这两个,都是找到后就停止循环。

例子:

 

 

13、reduce

reduce 收敛,有4个参数。

返回的是叠加后的结果。

回调函数返回的结果

不操作原数组。

例子:

 

输出结果:

 

prev 代表的是数组的第一项,next是数组的第二项。

item 是原数组。

例子:

 

输出结果:

 

例子:

求和

 

例子:

求和

 

例子:

将二维数组变成一维数组

 

14、箭头函数

箭头函数中,不具备this 和 arguments

自己家没有this,就找上一级的this

箭头函数中的this, 就是上一级的this。

面试题:

如何更改this指向?

(1) call apply bind

(2) var that = this;

(3)  => (箭头函数)

如何确定this是谁?

和在哪定义没有关系,看谁调用的, .前面是谁,this就是谁。

例子:

 

参数有一个可以省略小括号。

有大括号 {} 必须要写 return。

如果没有大括号则直接是返回值。

例子:

 

15、ES4操作数组的方法

ES4操作数组的方法:

ES4: pop,push,unshfit,shfit,splice,reverse,sort,indexOf,lastIndexOf,concat,slice

(pop push unshift shift splice reverse sort ) 括号中的能改变原数组,叫数组的变异

 

from:https://blog.csdn.net/qq_25354709/article/details/86548332