在我们日常的实际开发中,经常遇到需要各种需要处理的数组,JavaScript中虽然提供了各式各样的方法,但本菜鸟很长一段时间都分不清楚这些是干什么用的,也偷懒不去看……
前一段时间在网上冲浪时,看到一个评论里有人用符号表示了一个方法,觉得十分形象生动,于是便花了半天时间重新学习了一些常见的数组方法,并用符号、图标进行具象化的整理,我觉得本菜鸟今天又博学了一点点。
[●, ●, ■, ●].map(● => ■) → [■, ■, ■, ■]
let arr = ['杜甫', '李白', '李商隐', '白居易'];
let mapArr = arr.map( e => '苏轼' );
// console.log(mapArr): ["苏轼", "苏轼", "苏轼", "苏轼"]
[○, △, □, △].filter( △ => true ) → [△, △]
let arr = [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' }
];
let filterArr = arr.filter( e => e.age === '宋' );
/**
* console.log(filterArr): [
* { id: 3, name: '苏轼', age: '宋' },
* { id: 4, name: '辛弃疾', age: '宋' }
* ]
*/
[○, △, □, △].find( △ => true ) → (first)△
let arr = [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' }
];
let findItem = arr.find( e => e.age === '宋' );
/**
* console.log(findItem): {id: 3, name: "苏轼", age: "宋"};
*/
[○, △, □, △].findIndex( △ => true ) → (first)△
let arr = [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' }
];
let findItem = arr.find( e => e.age === '宋' );
/**
* console.log(findItem): {id: 3, name: "苏轼", age: "宋"};
*/
[○, ○, ○, △].every( ○ => true ) → false
let arr = [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' }
];
let everyFlag = arr.every( e => e.age === '宋' );
/**
* console.log(everyFlag): false
*/
[△, ○, ○, △].some( △ => true ) → true
let arr = [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' }
];
let someFlag = arr.some( e => e.age === '宋' );
/**
* console.log(someFlag): true
*/
[○, □, △].concat([△, ○]) → [○, □, △, △, ○]
let arr = [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' }
];
let newArr = [
{ id: 5, name: '李清照', age: '宋' }
];
let concatArr = arr.concat(newArr);
/*
console.log(concatArr): [
{ id: 0, name: '杜甫', age: '唐' },
{ id: 1, name: '李白', age: '唐' },
{ id: 2, name: '李商隐', age: '唐' },
{ id: 3, name: '苏轼', age: '宋' },
{ id: 4, name: '辛弃疾', age: '宋' },
{ id: 5, name: '李清照', age: '宋' }
]
*/
[○, □, △, ○].join('-') → ○-□-△-○
let arr = ['贝', '加', '尔', '湖', '畔'];
let joinStr = arr.join('-')
/*
console.log(joinStr): 贝-加-尔-湖-畔
*/
[1, 2, 3, 4].reduce((total, current) => total + current , 10) → 20
let arr = [1, 2, 3, 4];
let reduceRes = arr.reduce((total, current) => total + current, 10);
/*
console.log(reduceRes): 20
*/
[●, ●, ■, ●].forEach(● => ■) → [■, ■, ■, ■]
let arr = [
{ id: 0, name: '杜甫' },
{ id: 1, name: '李白' },
{ id: 2, name: '李商隐' }
]
let forEachArr = arr.forEach( e => e.age = '唐' )
/**
* arr: [
* { id: 0, name: '杜甫', age: '唐' },
* { id: 1, name: '李白', age: '唐' },
* { id: 2, name: '李商隐', age: '唐' }
* ]
*
* forEachArr: undefined
*/
[○, □, [△, [△, ○]]].fill(Infinity) → [○, □, △, △, ○]
let arr = [1, 2, [[3], 4]];
arr.flat(Infinity);
/*
console.log(arr): [1, 2, 3, 4]
*/
[○, □, △, ○].fill(☆, 2, 3) → [○, □, ☆, ○]
let arr = [1, 2, 3, 4];
arr.fill('你好', 2, 3);
/*
console.log(arr): [1, 2, '你好', 4]
*/