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是等价的，都是循环数组

例子：

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

5、forEach

例子：

let arr = [1, 2, 3, 4, 5];

arr.forEach(function (item, index) {

console.log(item);

});

注意：forEach不支持return

6、 for of

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

for of 是ES6语法

例子：

let arr = [1, 2, 3, 4, 5];

for(let val of arr) {

console.log(val);

}

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

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

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

例子：

let obj = {school: 'name', age: 8};

for (let val of Object.keys(obj)) {

console.log(obj[val]);

}

8、filter

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

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

例子：

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

let newAry = [1, 2, 3, 4, 5].filter(function (item, index) { //index是索引

return item > 2 && item < 5;

});

console.log(newAry); // [3, 4]

9、map

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

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

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

例子：

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

let arr1 = [1, 2, 3].map(function (item, index) {

return 2;

});

console.log(arr1); // [2,2,2]

let arr2 = [1, 2, 3].map(function (item, index) {

return item *= 3;

});

console.log(arr2); // [3,6,9]

let arr3 = [1, 2, 3].map(function (item, index) {

return `<li>${item}</li>`;

});

console.log(arr3); // [ '<li>1</li>', '<li>2</li>', '<li>3</li>' ]

console.log(arr3.join('')); // <li>1</li><li>2</li><li>3</li>

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

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

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

10、includes

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

includes 是ES6的方法

some、every 是ES5的方法

例子：

let arr3 = [1,2,3,4,55];

console.log(arr3.includes(5)); // false

11、find

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

find 是ES6的语法。

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

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

let arr3 = [1, 2, 3, 4, 55, 56];

let result = arr3.find(function (item, index) {

return item.toString().indexOf(5) > -1

});

console.log(result); // 55

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

12、some 和 every

some 和 every 是ES5的语法

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

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

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

例子：

let arr3 = [1, 2, 3, 4, 55, 56];

let result = arr3.some(function (item, index) {

return item.toString().indexOf(5) > -1

});

console.log(result); // true

let arr3 = [1, 2, 3, 4, 55, 56];

let result = arr3.every(function (item, index) {

return item.toString().indexOf(5) > -1

});

console.log(result); // false

13、reduce

reduce 收敛，有4个参数。

返回的是叠加后的结果。

回调函数返回的结果

不操作原数组。

例子：

[1, 2, 3, 4, 5].reduce(function (prev, next, index, item) {

console.log(arguments);

});

输出结果：

{ '0': 1, '1': 2, '2': 1, '3': [ 1, 2, 3, 4, 5 ] }

{ '0': undefined, '1': 3, '2': 2, '3': [ 1, 2, 3, 4, 5 ] }

{ '0': undefined, '1': 4, '2': 3, '3': [ 1, 2, 3, 4, 5 ] }

{ '0': undefined, '1': 5, '2': 4, '3': [ 1, 2, 3, 4, 5 ] }

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

item 是原数组。

例子：

[1, 2, 3, 4, 5].reduce(function (prev, next, index, item) {

console.log(prev, next);

return 100; // 本次的返回值，会作为下一次的prev

});

输出结果：

1 2

100 3

100 4

100 5

例子：

求和

let sum = [1, 2, 3, 4, 5].reduce(function (prev, next, index, item) {

console.log(prev, next);

return prev + next; // 本次的返回值，会作为下一次的上一个

});

console.log(sum); // 15

例子：

求和

let sum2 = [{price: 30, count: 2}, {price: 30, count: 3}, {price: 30, count: 4}].reduce(function (prev, next) {

return prev + next.price * next.count;

}, 0);

console.log(sum2); // 270

例子：

将二维数组变成一维数组

let result = [[1, 2, 3], [4, 5, 6], [7, 8, 9]].reduce(function (prev, next) {

return prev.concat(next);

});

console.log(result); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

14、箭头函数

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

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

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

面试题：

如何更改this指向？

(1) call apply bind

(2) var that = this;

(3) => (箭头函数)

如何确定this是谁？

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

例子：

// ES5

function a(b) {

return b + 1;

}

// 箭头函数

let a = (b) => {

return b+1;

}

// 或者

let a = b => b+1;

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

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

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

例子：

// ES5

function a(b) {

return function (c) {

return b + c;

}

a(1)(2); // 3

// 箭头函数

let a = b => {

return c => {

return b+c;

}

};

//或者

let a = b => c => b + c;

console.log(a(1)(2)); // 3

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

M	T	W	T	F	S	S
« Mar
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30