es6下的高级函数

最新推荐文章于 2022-09-28 20:06:50 发布
最新推荐文章于 2022-09-28 20:06:50 发布
阅读量724 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sy_yan/article/details/108223891
本文介绍了ES6中的高级函数用法，包括filter用于筛选数组元素，map用于对数组元素进行操作并返回新数组，reduce用于对数组进行累积计算。此外，还讲解了如何通过split筛选数组，去除空值以及实现数组去重。同时，探讨了对象操作，如使用Object.keys获取对象的key，Object.values获取对象的value，以及indexOf查找字符串在数组中的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

flter函数 返回一个新的数组 每次会根据条件进行一次判断 支返回为true的一项 。
map函数 对数组的每一项进行操作 返回每一项的数组。
数组对象可以直接取出自己想要的对象

let arr = [{
        id: 1,
        name: "tony",
        class: 1,
        garde: 88
   },{
        id: 2,
        name: "Tom",
        class: 1,
        grade: 90
   },{
        id: 3,
        name: "Jack",
        class: 1,
        grade: 86
   }];
let res = arr.map(({name, id}) => ({ id, name }))
 console.log(res)

reduce 第一参数是上次返回的值 第二个参数是这一次使用的值。
split 筛选数组 arr.splilt(’-’,3);参数二是返回数组的前三项。
去掉空数组空字符串、undefined、null

var newArr = arr.filter(item => item)

数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

//此处的self其实就是arr原数组

对象
Object.keys(arr);可以获取对象的key
Object.values(arr);可以获取对象的value值
indexOf返回某个指定的字符串值在字符串中首次出现的位置。

const arr = [1,2,3,4,5,6,7]
const list = [
    {openId: 1, timelineId: 1, showNo: 1, uid: 1},
    {openId: 2, timelineId: 1, showNo: 1, uid: 1},
    {openId: 9, timelineId: 1, showNo: 1, uid: 1},
    {openId: 4, timelineId: 1, showNo: 1, uid: 1},
    {openId: 5, timelineId: 1, showNo: 1, uid: 1}
]
const params = list.filter(item=> arr.indexOf(item.openId) > -1)
console.log(params)
sy_yan
关注
JS(第二十四课)JS高级Es6语法
qq_56248592的博客
11-27 895
ES6
ES6中的高阶函数：如同 a => b => c 一样简单
weixin_33892359的博客
04-12 299
作者：Sequoia McDowell 2016年01月16日 ES6来啦！随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6，以往被认为是“仅需了解”的ES6特性变成了必需的代码常识。这不仅仅是新的语法学习 - 在许多范例中, ES6中新的语言特性可以让在ES5中写起来非常麻烦的表达变得更加简单，进而鼓励了新表达方式的使用。下...
ES6的高阶函数
weixin_43961117的博客
05-30 1436
ES6的高阶函数的三个高阶函数 文章目录ES6的高阶函数的三个高阶函数前言1.filter是一个数据的过滤器，他的回调参数是布尔值，他的主要功能就是过滤数据，将过滤的数据存储起来2.map参数是映射函数，他的回调是修改的数据，对数组中的数据进行修改，再将他们替换3.reduce()函数是聚合函数。reduce中有两个参数，一个function()，一个是自己设置的 前言 最近在学vue，发现ES6的高阶函数很好用，Mark一下，以免忘记 1.filter是一个数据的过滤器，他的回调参数是布尔值，他的主要功能
ES6 —— 高阶函数
HuoZhiyan 的博客
04-28 628
文章目录一、什么是高阶函数？ 一、什么是高阶函数？ 高阶函数是对其他函数进行操作的函数，它 接收函数作为参数 或 将函数作为返回值输出。 函数可以作为参数传递 function fn(a, b, callback){ console.log(a + b) callback && callback() } fn(1, 2, function(){ console.log('最后被调用') }) 将函数作为返回
ES6之高阶函数
猫老板的豆
03-15 1780
能够接收一个或多个函数作为参数。可以返回一个函数。Array扩展：forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex。
fackAchieve:手写ES6高级函数，手写Promise，模拟数据结构 ,手写常用工具库函数及框架源码模拟实现
05-14
手写 es6 函数，Promise 特性，lodash 库的函数实现,模拟 vue,React 等前端框架的实现和原理的理解。 functions 文件夹 手动实现各种函数，包括不限于 ES6 等函数的方法 内容对应表 Array 方法名称(name) 位置...
ES5实现ES6生成器函数的模拟方法
需要注意的是，这只是一个非常基础的模拟实现，真正的ES6生成器函数还支持诸如 `yield*` 表达式、传递给生成器的值、迭代器协议等高级功能。 以上就是用ES5模拟实现ES6生成器函数的基本方法和思路。通过这种技术，...
深入学习ES6中的函数式编程与实践指南
代理是ES6引入的另一个高级特性，它允许你拦截并定义对一个对象的基本操作的行为。通过代理，你可以拦截属性的访问、赋值、枚举、函数调用等操作，这为创建复杂的数据结构提供了极大的灵活性。 文档中还提到了如何...
es6笔记es6笔记es6笔记
04-03
ES6的`extends`关键字用于创建一个新类作为现有类的子类，`super`关键字用于引用父类的构造函数和其他方法。 ```javascript class Student extends Person { constructor(name, grade) { super(name); // 调用...
es6箭头函数的高级语法
05-19
下面是一些ES6箭头函数的高级语法： 1. 箭头函数的基本语法： ``` (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression ``` 2. 省略圆括号： 如果箭头函数只有一个参数...
ES6高阶函数Filter,Map,Reduce
qq_43440751的博客
03-17 258
ES6高阶函数Filter,Map,Reduce filter方法 定义：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter不会对空数组进行检测 注意：filter不会改变原数组 const nums=[15,26,87,44,22]; let new_nums=[]; function checknums(nums) { return nums >= 25; }; new_nums = nums.filter(checknums
ES6 高阶函数的使用详解
ScottePerk的博客
09-12 519
高阶函数是ES6提供的新方法。只所以叫高阶函数是因为这些方法参数都是函数，也就是在函数里面传函数。这就是所谓的函数式编程，函数是一等公民。而传统的面向对象编程，对象是第一公民。主要高阶函数有filter,map和reduce。这三个函数实际上就是用来替代for循环，更加的高效方便。
es6中的一些高级函数的总结
QTATQ的博客
12-09 260
es6中的一些高级函数的总结 find() 主要用于查找第一个符合条件的元素，返回值为该元素，而且不改变原数组。 filter() 是查找满足条件的所有元素，而且返回时的是一个数组， 也不改变原来数组。 ...
ES6 js高级
qq_45465689的博客
09-17 371
每一个对象都是功能中心，具有明确分工。灵活 面向对象的特性：封装性，继承性，多态性。 创建类和对象：通过class关键字来创建类，类名首字母大写，类里面有constructor函数，可以接受传递过来的参数，同时返回给实例对象。创建类后面不要小括号，类里面函数都不要加function 类添加方法：类里面所有的函数省略function。多个函数之间不需要逗号分隔。 类的继承：子承父业class So...
学习JavaScript（三）之高阶函数
Ww931的博客
10-14 316
文章目录高阶函数 ** 高阶函数 ** JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。 ...
ES6的高阶
m0_59029708的博客
09-28 1956
提示：ECMAScript6新的javascript标准：提示：以下是本篇文章正文内容，下面案例可供参考。
JS高级(ES6)
weixin_43200099的博客
03-26 1759
面向过程即分析好步骤，按照步骤编程。找出对象，以对象功能来划分问题。 面向对象的特点：封装性 继承性 多态性 易维护、易复用、易扩展，性能比面向过程稍微低一点。类是泛指的，抽象了对象的公共部分； 对象是特指某一个，通过实例化具体的对象。 类的继承 包括extends spuer() 类的注意事项01 构造函数和原型 静态成员和实例成员 注意简单数据类型、复杂数据类型 构造函数存在内存浪费的问题，我们的方法function(){}是复杂数据类型，有多少个对象就会重复开辟多少个内存来存放方法。 每个构造函数都
es6中常用的三个高级函数
qq_44727409的博客
02-09 1032
在es6中我们会常用到三个高级函数，他们可以大大的减少你的工作量 他们分别是 filter，map，reduce 1.filter是一个数据的过滤器，他的回调参数是布尔值，他的主要功能就是过滤数据，将过滤的数据存储起来 let num=[10,20,30,40,50,100,200,300] let nums=num.filter(function(n){ return n<100; })...
JavaScript高级（ES6）
李泽言的博客
10-16 373
JavaScript高级（ES6） 创建类 <script> //创建类class，创建一个明星类 class star { //类的共有属性放在constructor constructor(uname,age){ this.uname = uname; this.age = age; }
Es6常用的函数
最新发布
07-16
<think>首先，用户查询是关于ES6中常用的函数或方法总结。我需要基于提供的引用内容来构建回答，因为系统指令要求参考站内引用。这些引用来自[^1]、[^2]、[^3]和[^4]，内容涉及ES6的各种特性，如模板字符串、对象简写、箭头函数、数组方法等。 回顾引用： - 引用[^1]：讨论了模板字符串、声明对象简写、对象拓展运算符和箭头函数。 - 引用[^2]：提到了flat()方法用于数组扁平化。 - 引用[^3]：比较了indexOf()和findIndex()方法。 - 引用[^4]：涵盖了Array.of()、find()和Array.from()方法。 我的回答需要结构化清晰，逐步解释ES6的常用函数和方法。系统指令还要求： - 使用中文回答。 - 行内数学表达式用$...$，但这里可能不涉及数学，所以可能不需要。 - 独立公式用$$...$$，但同样可能不适用。 - 生成相关问题。 - 在回答末尾自然地添加引用标识。 - 回答结构清晰，帮助用户逐步解决问题。 结构化回答： 1. **引言**：简要介绍ES6及其重要性。 2. **核心内容**：分类总结ES6常用函数和方法，基于引用。 - 字符串相关：模板字符串。 - 对象相关：声明对象简写、对象拓展运算符。 - 函数相关：箭头函数。 - 数组相关：flat()、find()、findIndex()、Array.of()、Array.from()等。 3. **示例**：提供代码示例来演示用法，就像示例中的Python代码那样。 4. **总结**：简要重申关键点。 5. **相关问题**：生成2-3个相关问题。 6. **引用**：在结尾添加引用标识。 确保内容真实可靠：基于提供的引用，不添加外部知识。 生成相关问题： - 基于内容，例如： 1. ES6中箭头函数与传统函数的区别是什么？ 2. 如何使用ES6方法处理数组扁平化？ 3. ES6的模板字符串有哪些高级用法？ 最后，添加引用标识：[^1][^2][^3][^4] 现在，构建回答大纲： - **开头**：回答用户查询。 - **分类总结**： - 字符串方法：模板字符串。 - 对象方法：简写声明、拓展运算符。 - 函数方法：箭头函数。 - 数组方法：flat(), find(), findIndex(), Array.of(), Array.from()。 - **示例**：为每个方法提供简短代码示例。 - **结尾**：总结并生成相关问题。</think>### ES6常用函数和方法总结 ES6（ECMAScript 2015）引入了许多强大的函数和方法，显著提升了JavaScript的开发效率。基于站内引用内容，我将ES6常用函数和方法分为字符串、对象、函数和数组四大类，逐步解释其语法、用途和示例。所有方法均基于真实可靠的引用来源，确保内容准确。 #### 1. **字符串相关方法** ES6增强了字符串处理能力，主要通过模板字符串实现。 - **模板字符串**：使用反引号 `` ` `` 定义，支持多行文本、嵌入变量和表达式。 - **语法**：`${变量或表达式}`，变量名或表达式写在花括号内。 - **用途**：简化字符串拼接，支持动态内容。 - **示例**： ```javascript let name = "Alice"; let age = 25; // 嵌入变量 let info = `我的名字是${name}, 我的年纪是${age}`; // 输出: "我的名字是Alice, 我的年纪是25" // 嵌入函数调用 function greet() { return "Hello"; } let d = `自我介绍${greet()}`; // 输出: "自我介绍Hello" ``` 引用说明：模板字符串允许在字符串中直接插入变量和函数，避免了传统拼接的繁琐[^1]。 #### 2. **对象相关方法** ES6简化了对象操作，包括声明简写和拓展运算符。 - **声明对象简写**：当属性名和变量名相同时，可直接赋值。 - **语法**：`const obj = { key }`，省略重复的键值对。 - **用途**：减少冗余代码，提升可读性。 - **示例**： ```javascript const name = "Bob"; const age = 30; // 简写声明对象 const person = { name, age }; // 等价于 { name: name, age: age } console.log(person); // 输出: { name: "Bob", age: 30 } ``` 引用说明：这种简写方式在定义对象时更高效，尤其适用于数据组装场景[^1]。 - **对象拓展运算符**：使用 `{ ... }` 复制或合并对象。 - **语法**：`let newObj = { ...obj1, ...obj2 }`。 - **用途**：浅拷贝对象属性，支持对象合并。 - **示例**： ```javascript const obj1 = { a: 1 }; const obj2 = { b: 2 }; // 合并对象 const merged = { ...obj1, ...obj2 }; // 输出: { a: 1, b: 2 } ``` 引用说明：拓展运算符提取所有可遍历属性，适用于对象克隆和组合[^1]。 #### 3. **函数相关方法** ES6引入了箭头函数，优化了函数定义。 - **箭头函数**：提供简洁的函数语法。 - **语法**：`(参数) => 表达式` 或 `(参数) => { 代码块 }`。 - 无参数或多个参数时用 `( )` 包裹。 - 单行表达式可省略 `{ }`，自动返回结果；多行需用 `{ }`。 - **用途**：简化回调函数，避免 `this` 绑定问题。 - **示例**： ```javascript // 单行箭头函数（省略 { }） const add = (a, b) => a + b; console.log(add(2, 3)); // 输出: 5 // 多行箭头函数（使用 { }） const greet = (name) => { const message = `Hello, ${name}!`; return message; }; console.log(greet("Tom")); // 输出: "Hello, Tom!" ``` 引用说明：箭头函数让代码更简洁，特别适合数组遍历和事件处理[^1]。 #### 4. **数组相关方法** ES6新增了多个数组方法，提升数据处理能力。 - **flat()**：扁平化嵌套数组。 - **语法**：`arr.flat(depth)`，`depth` 指定扁平层级，`Infinity` 表示完全扁平。 - **用途**：处理多维数组，去除空位。 - **示例**： ```javascript const arr = [1, 2, [3, [4, 5]]]; const flatArr = arr.flat(Infinity); // 完全扁平化 console.log(flatArr); // 输出: [1, 2, 3, 4, 5] ``` 引用说明：`flat()` 方法跳过空位，简化了数组结构处理[^2]。 - **find()**：查找满足条件的第一个元素。 - **语法**：`arr.find(callback)`，回调函数返回布尔值。 - **用途**：替代传统循环，快速定位元素。 - **示例**： ```javascript const numbers = [10, 20, 30]; const result = numbers.find(num => num > 15); console.log(result); // 输出: 20 ``` 引用说明：`find()` 返回第一个匹配值，未找到则返回 `undefined`[^4]。 - **findIndex()**：查找满足条件的第一个元素索引。 - **语法**：`arr.findIndex(callback)`。 - **用途**：比 `indexOf()` 更灵活，支持复杂条件。 - **示例**： ```javascript const data = [{ id: 1 }, { id: 2 }]; const index = data.findIndex(item => item.id === 2); console.log(index); // 输出: 1 ``` 引用说明：`findIndex()` 允许回调函数定义条件，适用于对象数组搜索[^3]。 - **Array.of()**：创建数组，避免参数歧义。 - **语法**：`Array.of(values...)`。 - **用途**：将一组值转为数组，参数数量决定数组长度。 - **示例**： ```javascript const arr = Array.of(1, 2, 3); // 输出: [1, 2, 3] const empty = Array.of(); // 输出: []（空数组） ``` 引用说明：`Array.of()` 解决了 `new Array()` 的行为不一致问题[^4]。 - **Array.from()**：将类数组对象转为真正数组。 - **语法**：`Array.from(arrayLike)`。 - **用途**：处理 DOM 集合或参数对象。 - **示例**： ```javascript const json = { '0': 'a', '1': 'b', length: 2 }; const realArray = Array.from(json); // 输出: ["a", "b"] ``` 引用说明：`Array.from()` 支持可遍历对象转换，增强数据兼容性[^4]。 #### 总结 ES6的这些函数和方法（如模板字符串、箭头函数、flat() 和 findIndex()）显著提升了代码简洁性和功能性。它们广泛应用于前端开发、数据处理和API交互中，例如在React或Vue项目中简化状态管理[^1][^2][^3][^4]。建议在实际编码中结合场景选择合适方法，以优化性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值