js 数据处理 操作数组
这是一篇关于数组的操作的个人理解,目的是让你更加方便的操作数组
forEach
forEach 大家应该都不陌生 就是循环一个数组。
- 参数1 是数组的每一条数据
- 参数2 是数组的索引
- 参数3 是数组自己本身
const arr = [{name: '张三'}, {name: '李四'}, {name: '王五'}];
arr.forEach((item,idx) => console.log(`我是${item.name}, 在数组的第 ${idx}位`))
/*
* 我是张三, 在数组的第 0位
* 我是李四, 在数组的第 1位
* 我是王五, 在数组的第 2位
*/
复制代码
那么怎么自己实现一个数组自己的forEach呢
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是myForEach
//1、在myForEach内部的this 就是咱们循环的数组 this = [{name: '{name: '张三'}, {name: '李四'}, {name: '王五'}'}]
//2、参数cb 也就是咱们传的函数了 需要咱们调用下输出结果
Array.prototype.myForEach = function(cb) {
console.log(this,'this')
for (let i = 0; i < this.length; i++) {
cb(this[i], i, this)
}
}
const arr1 = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
arr1.myForEach((item,idx) => {
console.log(`我是${item.name}, 在数组的第 ${idx}位`)
})
/*输出
* 我是张三, 在数组的第 0位
* 我是李四, 在数组的第 1位
* 我是王五, 在数组的第 2位
*/
复制代码
接下来咱们在完善下咱们的myforEach break;
Array.prototype.myForEach = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
console.log(this,'this')
for (let i = 0; i < this.length; i++) {
if(!cb(this[i], i, this)) {
break;
}
}
}
const arr1 = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
arr1.myForEach((item,idx) => {
if(idx === 1) return false;
console.log(`我是${item.name}, 在数组的第 ${idx}位`)
})
//输出:
//我是张三, 在数组的第 0位
//其他的就不会输出了
复制代码
filter
filter 是做数组过滤用的
- 参数1 该数据项
- 参数2 索引
- 返回一个新数组 不改变原数组
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const filterArr = arr.filter(item => item.name === '张三')
//输出 [{name: '张三'}]
复制代码
自己实现一个 myfilter
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是myFilter
- 返回过滤后的新数组
Array.prototype.myFilter = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myFilter api only support function!')
let arr = [];
for (let i = 0; i < this.length; i++) {
if(cb(this[i], i, this)) {
arr.push(this[i]);
}
}
return arr;
}
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const filterArr = arr.myFilter((item,idx) => item.name === '张三')
console.log(filterArr,'filterArr')
//输出 [{name: '张三'}]
复制代码
map
- 参数1 该数据项
- 参数2 索引
- 返回一个自己想定义的新数组
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const newArrMap = arr.map(item => item.name);
console.log(newArrMap)
// 输出 ['张三', '李四', '王五']
复制代码
实现一个自己的myMap
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是myMap
- 返回过滤后的新数组
Array.prototype.myMap = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
let arr = [];
for (let i = 0; i < this.length; i++) {
const newItem = cb(this[i], i, this);
arr.push(newItem);
}
return arr;
}
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const newArrMap = arr.myMap((item,idx) => item.name)
console.log(newArrMap,'newArrMap')
// 输出 ['张三', '李四', '王五']
复制代码
some
- 参数1 该数据项
- 参数2 索引
- 当有一个为真就返回true, 全部为假返回false;
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const result1 = arr.some(item => item.name === '张三');
console.log(result1)
//输出 true
const result2 = arr.some(item => item.name === '赵四');
console.log(result2)
//输出 false
复制代码
实现一个自己的some
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是mySome
- 当有一个为真就返回true, 全部为假返回false;
Array.prototype.mySome = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
let result = false;
for (let i = 0; i < this.length; i++) {
const newItem = cb(this[i], i, this);
if(newItem) {
result = true;
break;
}
}
return result;
}
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const result1 = arr.mySome((item,idx) => item.name === '张三')
const result2 = arr.mySome((item,idx) => item.name === '赵四')
console.log(result1, 'result1');
console.log(result2, 'result2');
//输出 true
//输出 false
复制代码
every
- 参数1 该数据项
- 参数2 索引
- 当有所有为真就返回true, 一个为假返回false;
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const result1 = arr.every(item => item.name !== '张三');
console.log(result1,'result1')
//arr 有一个等于张三的 返回 false
//输出 false
const result2 = arr.every(item => item.name !== '赵四');
//arr 所有都不等于 赵四 返回true
console.log(result2,'result2')
//输出 true
复制代码
实现一个自己的myEvery
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是myEvery
- 当有所有为真就返回true, 一个为假返回false;
Array.prototype.myEvery = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
let result = true;
for (let i = 0; i < this.length; i++) {
const newItem = cb(this[i], i, this);
if(!newItem) {
result = false;
break;
}
}
return result;
}
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const result1 = arr.myEvery((item,idx) => item.name !== '张三')
const result2 = arr.myEvery((item,idx) => item.name !== '赵四')
console.log(result1, 'result1');
console.log(result2, 'result2');
复制代码
find
- 参数1 该数据项
- 参数2 索引
- 查找某条 符合条件的数据 找不到返回 undefined
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const findItem1 = arr.find(item => item.name === '张三');
console.log(findItem1);
//输出:{name: 张三}
const findItem2 = arr.find(item => item.name === '赵四');
console.log(findItem2);
//输出: undefined
复制代码
实现一个自己的 myFind
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是myFind
- 查找某条 符合条件的数据 找不到返回 undefined;
Array.prototype.myFind = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
let findItem;
for (let i = 0; i < this.length; i++) {
const newItem = cb(this[i], i, this);
if(newItem) {
findItem = this[i];
break;
}
}
return findItem;
}
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const findItem1 = arr.myFind((item,idx) => item.name === '张三')
const findItem2 = arr.myFind((item,idx) => item.name === '赵四')
console.log(findItem1, 'result1');
//输出: {name: 张三}
console.log(findItem2, 'result2');
//输出: undefined
复制代码
findindex
- 参数1 该数据项
- 参数2 索引
- 查找某条 符合条件的索引 找不到返回 -1
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const findItem1 = arr.findIndex(item => item.name === '张三');
console.log(findItem1);
//输出:0
const findItem2 = arr.findIndex(item => item.name === '赵四');
console.log(findItem2);
//输出: -1
复制代码
实现一个自己的 myFindIndex
- 确定参数1 function
- 在array原型上面写想要实现的方法 也就是myFindIndex
- 查找某条 符合条件的索引 找不到返回 -1;
Array.prototype.myFindIndex = function(cb) {
if(typeof(cb) !== 'function') throw new Error('myForEach api only support function!')
let index = -1;
for (let i = 0; i < this.length; i++) {
const newItem = cb(this[i], i, this);
if(newItem) {
index = i;
break;
}
}
return index;
}
const arr = new Array({name: '张三'}, {name: '李四'}, {name: '王五'});
const findItem1 = arr.myFindIndex((item,idx) => item.name === '张三')
const findItem2 = arr.myFindIndex((item,idx) => item.name === '赵四')
console.log(findItem1, 'result1');
//输出:0
console.log(findItem2, 'result2');
//输出: -1
复制代码
结束语:
嘿嘿 看到这里希望对您有所帮助 写关于数组的几个循环的作用以及自己实现该方法 有任何问题,有可以优化的点 可以一块沟通讨论吖
源码:稍后贴