这是我在github 上发现的一个原生js挑战项目,由于是js小白,希望通过这次的项目加深对js的理解
第4天主要是一些关于数组的操作
*filter
map
sort
reduce
新的调试方式
以往我们习惯于用console,log()
来输出,本次练习出现了console.table()
这种新方式,将数据以表格的形式显示
js数组的操作(重点)
- filter
正如英文名一样,这是一个过滤器,filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。MDN中给出的例子是这样子的:
function isBigEnough(value) {
return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
// ES6 way
const isBigEnough = value => value >= 10;//类似function(value){return value>=10}
let [...spraed]= [12, 5, 8, 130, 44];//...代表不定参数
let filtered = spraed.filter(isBigEnough);
// filtered is [12, 130, 44]
该例子是筛选出数组中大于10的元素
- map
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。(即把数组中的每个元素进行处理后,返回一个新的数组)
// 使用三个参数
const numbers = [1, 2, 3, 4, 5];
let arr = numbers.map((currentValue, index, array) => {
console.log(`currentValue = `, currentValue);
console.log(`index = `, index);
console.log(`array= `, array);
return currentValue * 2;
}, numbers);
console.log(`arr `, arr);
let numbers = [1, 5, 10, 15];
let doubles = numbers.map((x) => {
return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]
//即map()不改变原数组
- sort
sort()是一种冒泡排序,默认排序顺序是根据字符串Unicode码点
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort();
// ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
scores.sort();
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前
var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort();
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.
如果想要升序或者降序,我们需要价格比较函数,例如
function compareNumbers(a, b) {
return a - b;
}
- reduce
reduce这是一个归并数组的方法,它接受一个函数作为参数(这个函数可以理解成累加器),它会遍历数组的所有项,然后构建一个最终的返回值,这个值就是这个累加器的第一个参数,第二个参数为可选项,其值用于第一次调用 callback 的第一个参数。如果没有设置初始值,则将数组中的第一个元素作为初始值。空数组调用reduce时没有设置初始值将会报错。
var total = [0, 1, 2, 3].reduce(function(sum, value) {
return sum + value;
}, 0);
// total is 6
以上就是我在day4中学到的知识,这里我参考了soyaine的中文指南