个人学习笔记---复习内容

本文主要是介绍个人学习笔记---复习内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

复习一下基础

不喜勿喷

最近在工作中操作数组觉得不爽，决定在复习一下

数组方法

forEach
Filter
Map
Every
Some
Reduce
Reduceright

1. `forEach` 用的很多了直接写例子了

还是稍微说明一下forEach一共四个参数:

currentValue: 必需。当前元素。
index: 可选。当前元素的索引值。
arr: 可选。当前元素所属的数组对象。
thisValue: 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值

`ES5`的基本写法

const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]
arr.forEach(function(ele, index ,self){console.log(ele, index ,self);
})

thisValue,传递给函数的值一般用 “this” 值。

arr.forEach(function(ele, index ,self){console.log(ele, index ,self,this);
},{name:'ccc'})

`ES6`中的基本写法

const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]// 箭头函数
arr.forEach((ele, index ,self)=>{console.log(ele, index ,self,this);
},{name:'ccc'})// ...扩展运算符的写法
arr.forEach((...age)=>{console.log(age);
})

加上如下 JavaScript 脚本测试 this 指向:

// 箭头函数
arr.forEach((ele, index ,self)=>{console.log(ele, index ,self,this);  // 这里this打印为window
},{name:'ccc'})

这里指向 window 主要是因为箭头函数的特殊性所以产生以上代码

// 在今天函数 babel 转化后的 ES5 代码如下

() => console.log(this)// 经过 babel 转化后的 ES5 代码如下var self = this
(function () {console.log(self)
})

用 for 模拟写一个 forEach (es5)


const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]Array.prototype.cccForEath = function(func){const _arr = this;const len = _arr.length;const arg2 = arguments[1] || window;for(let i= 0 ;i< arr.length;i++){func.apply(arg2,[arr[i],len,_arr])}
}arr.cccForEath(function(ele, index ,self){console.log(ele, index ,self,this);
},{name:'ccc'})//打印结果与上方es5一样

跳出forEach循环，return false 在这里起的作用是：只是终止本次继续执行，而不是终止for循环。

// 常规的return终止程序不起作用
const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]arr.forEach(function(ele,index){if(index == 2){return false;}
})
// return false 在这里起的作用是：只是终止本次继续执行，而不是终止for循环。

只能用利用 try…catch 的特性来终止

const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]
try{// 执行到第3次,结束循环arr.forEach(function(ele,index) {if(index == 2){throw "执行到指定位置";}console.log(ele);})
}catch(err){console.log(err);
}
// 下面的代码不影响继续执行
console.log("11111");

2. Filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

和 forEach 一样 forEach 一共四个参数:

currentValue: 必需。当前元素。
index: 可选。当前元素的索引值。
arr: 可选。当前元素所属的数组对象。
thisValue: 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值

基本上用法和 forEach 上差不多


const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]const array = arr.filter(function(ele,index,arr){console.log(ele,index,arr);return ele.age > 20;
})

用 for 模拟写一个 forEach (es5)


const arr= [{name: '小黑',age: '20'},{name: '小白',age: '18'},{name: '小红',age: '22'},{name: '小明',age: '25'}
]Array.prototype.cccFilter = function(func){const _arr = this;const len = _arr.length;const arg2 = arguments[1] || window;let array = [];for(let i= 0 ;i< arr.length;i++){func.apply(arg2,[arr[i],len,_arr]) ? array.push(arr[i]): ''; }return array;
}arr.cccFilter(function(ele, index ,self){console.log(ele, index ,self,this);return ele.age > 20;
})//打印结果与上方es5一样