前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版

JavaScript原生数组及高阶函数

首页2017-11-07 18:55:24Front-End
JavaScript高阶函数

# 一、map

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

  • callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身
let list = [1, 2, 3, 4, 5];
let other = list.map((d, i) => {
    return d * 2;
});
console.log(other);
// print: [2, 4, 6, 8, 10]
@前端进阶之旅: 代码已经复制到剪贴板

# 二、filter

语法

var new_array = arr.filter(callback[, thisArg])
@前端进阶之旅: 代码已经复制到剪贴板

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

参数

  • callback 返回true表示保留该元素(通过测试),false则不保留
    • 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
    • 返回true表示保留该元素(通过测试),false则不保留
function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]
@前端进阶之旅: 代码已经复制到剪贴板

# 三、some

返回一个boolean,判断是否有元素符合func条件,如果有一个元素符合func条件,则循环会终止

  • some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试
const isBiggerThan10 = (element, index, array) => {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  
// false

[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true
@前端进阶之旅: 代码已经复制到剪贴板

# 四、every

返回一个boolean,判断每个元素是否符合func条件,有一个元素不满足func条件,则循环终止,返回false

  • every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true
function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
@前端进阶之旅: 代码已经复制到剪贴板

# 五、reduce和reduceRight

.reduce从左到右而.reduceRight从右到左循环遍历数组,每次调用接收目前为止的部分结果和当前遍历的值

  • reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值

  • 两种方法都有如下典型用法:.reduce(callback(previousValue, currentValue, index, array), initialValue)。

  • previousValue是最后被调用的回调函数的返回值,initialValue是开始时previousValue被初始化的值。currentValue

  • 是当前被遍历的元素值,index是当前元素在数组中的索引值。array是对调用.reduce数组的简单引用

Array.prototype.sum = function () {
    return this.reduce(function (partial, value) {
        return partial + value
    }, 0)
};

[3,4,5,6,10].sum()
// <- 28
@前端进阶之旅: 代码已经复制到剪贴板

可以使用.reduce作为对象的字符串生成器

function concat (input) {
    return input.reduce(function (partial, value) {
        if (partial) {
            partial += ', '
        }
        return partial + value
    }, '')
}

concat([
    { name: 'George' },
    { name: 'Sam' },
    { name: 'Pear' }
])
// <- 'George, Sam, Pear'
@前端进阶之旅: 代码已经复制到剪贴板

# 六、sort

Array.prototype.sort(fn(a,b))需要一个包含两个测试参数的回调函数,并且要产生一下三种返回值之一

  • 如果a在b前,则返回值小于零
  • 如果a和`b是等价的,则返回值等于零
  • 如果a在b后,则返回值大于零
[9,80,3,10,5,6].sort()
// <- [10, 3, 5, 6, 80, 9]

[9,80,3,10,5,6].sort(function (a, b) {
    return a - b
})
// <- [3, 5, 6, 9, 10, 80]
@前端进阶之旅: 代码已经复制到剪贴板

# 七、forEach

  • 没有返回值,只针对每个元素调用func。
  • 优点:代码简介。
  • 缺点:无法使用break,return等终止循环
  • value 当前操作的数组元素
  • 当前操作元素的数组索引
  • array 当前数组的引用
let list = [1, 2, 3, 4, 5];
list.forEach((d, i) => {
    this.push(d * 2);
});
console.log(other);
// print: [2, 4, 6, 8, 10]
@前端进阶之旅: 代码已经复制到剪贴板

# 八、for in

for-in循环实际是为循环”enumerable“对象而设计的,for in也可以循环数组,但是不推荐这样使用,for–in是用来循环带有字符串key的对象的方法

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// print:  "obj.a = 1" "obj.b = 2" "obj.c = 3"
@前端进阶之旅: 代码已经复制到剪贴板

# 九、for of

for of为ES6提供,具有iterator接口,就可以用for of循环遍历它的成员

  • for of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串

entries

entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于Set,键名与键值相同。Map结构的iterator接口,默认就是调用entries方法

keys

  • keys() 返回一个遍历器对象,用来遍历所有的键名。

values

  • values() 返回一个遍历器对象,用来遍历所有的键值。

这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构

// 遍历数组
let list = [1, 2, 3, 4, 5];
for (let e of list) {
    console.log(e);
}
// print: 1 2 3 4 5

// 遍历对象
obj = {a:1, b:2, c:3};
for (let key of Object.keys(obj)) {
  console.log(key, obj[key]);
}
// print:  a 1 b 2 c 3
//说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。
//一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

// entries
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
@前端进阶之旅: 代码已经复制到剪贴板
fe
  • 一、map
  • 二、filter
  • 三、some
  • 四、every
  • 五、reduce和reduceRight
  • 六、sort
  • 七、forEach
  • 八、for in
  • 九、for of

← react知识点回顾移动端布局适配方案 →