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
});

输出结果：

例子：

求和

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 ) 括号中的能改变原数组，叫数组的变异

VUE基础知识1：数组forEach

猜你喜欢