标签：polyfill polyfills 代码 参数 地图 函数

介绍

在这篇博客中，我们将了解如何 ，并通过为它们编写 polyfils 来工作。mapfilterreduce

polyfill 是一段代码（通常是 Web 上的 JavaScript），用于在本机不支持它的旧浏览器上提供现代功能。

地图

map（） 方法创建并返回一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

参数

返回值

const array = [1, 2, 3, 4];

// pass a function to map
const mapResult = array.map(x => x * 2);

console.log(mapResult);
// output: Array [2, 4, 6, 8]

让我们通过为 编写一个 polyfill 来理解这一点。map

Array.prototype.myMap = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

                newArray.push(callbackFunction(this[i], i, this))

        } 
    return newArray
}

滤波器

该方法创建一个新数组，其中填充了传递提供的回调的元素。它创建给定数组的一部分的浅拷贝，过滤到给定数组中通过提供的回调函数实现的测试的元素。filter()

参数

返回值

const array = [1, 2, 3, 4];

// pass a function to filter
const filterResult = array.map(x => x > 2);

console.log(filterResult);
// output: Array [1,2]

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

让我们通过编写一个 polyfill 来理解这一点filter

Array.prototype.myFilter = function (callbackFunction) {
        let newArray = []

        for ( let i = 0; i < this.length; i++ ) {

              if(callbackFunction(this[i], i, this)) {
                        newArray.push(this[i])
                }

        } 

   return newArray
}

减少

reduce（） 方法按顺序对数组的每个元素执行“reducer”回调函数，传入前一个元素计算的返回值。跨数组的所有元素运行化简器的最终结果是单个值。

第一次运行回调时，没有“上一次计算的返回值”。如果提供，可以使用初始值代替它。否则，索引 0 处的数组元素用作初始值，迭代从下一个元素（索引 1 而不是索引 0）开始。

让我们通过添加数字数组来理解这一点

const array = [1, 2, 3, 4];

const initialValue = 0;

const reducer = (previousValue, currentValue) => previousValue + currentValue

// 0 + 1 + 2 + 3 + 4
const sum = array.reduce(reducer,initialValue);

console.log(sum);
// expected output: 10

参数

返回值

让我们通过编写一个 polyfill 来理解这一点reduce

Array.prototype.myReduce = function (reducerCallback, initialValue) {
        let accumulator = initialValue 

        for ( let i = 0; i < this.length; i++ ) {

              accumulator = accumulator ? reducerCallback(accumulator, this[i], i, this) : this[0]

        } 

   return accumulator
}

地图与每个

两者都是允许我们循环遍历数组并执行回调函数的方法。mapforEach

和之间的主要区别在于map返回一个数组，但forEach不返回。mapforEach

const array = [1,2,3,4,5]

const mapResult = array.map(x => x + 1)

const forEachResult = array.forEach(x => x + 1)

console.log(mapResult) // [2,3,4,5,6]

console.log(forEachResult) // undefined 

forEach 回调函数仍在运行，但它只是不返回任何内容，它返回undefined.

结论

• map（） 方法创建并返回一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。
• 该方法创建一个新数组，其中填充了传递提供的回调的元素。它创建给定数组的一部分的浅拷贝，过滤到给定数组中通过提供的回调函数实现的测试的元素。filter()
• reduce（） 方法按顺序对数组的每个元素执行“reducer”回调函数，传入前一个元素计算的返回值。跨数组的所有元素运行化简器的最终结果是单个值。
• 两者都是允许我们循环遍历数组并执行回调函数的方法。和之间的主要区别在于map返回一个数组，但forEach不返回。mapforEachmapforEach

标签：polyfill,polyfills,代码,参数,地图,函数
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。