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

  • 19
    点赞
  • 56
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

Razas

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值