前端es6常用语法，一起来看看吧

已于 2022-05-27 11:37:41 修改
阅读量1.2k 收藏 76
点赞数 12
分类专栏： javascript HTML5 文章标签： javascript html5 es6
于 2021-10-19 16:32:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45850095/article/details/120842093
版权

JS干货分享 —— 一篇学会ES6

ES6简介

  ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版

  15年就有正式版本了，但是国内普遍商用是在2018年之后去了，甚至到现在有很多前端仍然搞不懂ES6 ES6 的出现主要是为了解决 ES5
的先天不足，比如 JavaScript 里并没有类的概念

  目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6

   ES6提供了大量的语法糖，让你写代码的时候简直不要太爽！

  你必须要知道的是：现在各企业都在普遍的使用，不会ES6意味着你很难找到工作，上班了你可能连别人的代码都看不懂
   ES6中出现了很多新的方法，熟练的使用这些方法可以有效地提升我们的工作效率，让我们尽早的完成工作任务！

请添加图片描述

ES6常用方法

forEach

  用于循环遍历数组，对for循环的封装，没有返回值
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    arr.forEach((element,index,self)=>{
        console.log('当前元素：',element,'下标:',index,'当前调用数组：',self);
    })
    arrObj.forEach((element)=>{
        console.log('名称:',element.name);
    })

  运行结果：
在这里插入图片描述

filter

  用于筛选过滤数组，返回符合筛选条件的数据，不会改变原数组。
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrFilter = arr.filter((element,index,self) =>{
        // console.log(ele,index,self);// 自己测试
        return element>20
    })
    console.log('arrFilter',arrFilter);
    let arrFilter2 = arrObj.filter((element)=>{
        return element.age>15
    })
    console.log('arrFilter2',arrFilter2);

  运行结果：
在这里插入图片描述

map

  用于循环遍历数组，也可以根据某些条件筛选数据，不会改变原数组。
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrMap = arr.map((element,index,self)=>{
        // console.log(element,index,self);// 自己测试
        return element*10
    })
    console.log('arrMap',arrMap);
    let arrMap2 = arrObj.map((element)=>{
        return element.age+1
    })
    console.log('arrMap2',arrMap2);

  运行结果：
在这里插入图片描述

find

  查找第一个符合条件的数组元素。当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。不会改变原数组。
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrFind = arr.find((element,index,self)=>{
        // console.log(element,index,self);// 自己测试
        // return element === 20
        return element === 54
    })
    console.log("arrFind",arrFind);
    let arrFind2 = arrObj.find((element)=>{
        // return element.sex === 20
        return element.sex === '女'
    })
    console.log("arrFind2",arrFind2);

  运行结果：
在这里插入图片描述

findIndex

  findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined。不会改变原数组。
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrFindIndex = arr.findIndex((element,index,self)=>{
        // console.log(element,index,self);// 自己测试
        // return element === 20
        return element === 54
    })
    console.log("arrFindIndex",arrFindIndex);
    let arrFindIndex2 = arrObj.findIndex((element)=>{
        // return element.sex === '11'
        return element.sex === '男'
    })
    console.log("arrFindIndex2",arrFindIndex2);

  运行结果：
在这里插入图片描述

reduce

  对元素进行数据处理，返回最终处理的结果，不会改变原数组。
  用法（累加器）：

    let arr = [10,20,30,40]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // preValue表示上一次的元素，element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrReduce = arr.reduce((preValue,element,index,self)=>{
        // console.log(preValue,element,index,self);// 自己测试
        return element+preValue
    },10)//10表示preValue初始化的值
    console.log('arrReduce',arrReduce);
    // 如果没有初始化preValue，则preValue是一个空对象，第一次不执行
    let arrReduce2 = arr.reduce((preValue,element,index,self)=>{
        // console.log(preValue,element,index,self);// 自己测试
        return element+preValue
    })//10表示preValue初始化的值
    console.log('arrReduce2',arrReduce2);
    let arrReduce3 = arrObj.reduce((preValue,element)=>{
        // console.log(preValue,element);// 自己测试
        return element.age+preValue
    },10)//10表示preValue初始化的值
    console.log('arrReduce3',arrReduce3);
    // 如果没有初始化preValue，则preValue是一个空对象
    let arrReduce4 = arrObj.reduce((preValue,element)=>{
        // console.log(preValue,element);// 自己测试
        return element.age+preValue
    })//10表示preValue初始化的值
    console.log('arrReduce4',arrReduce4);

  运行结果：
在这里插入图片描述

every

  只要有一个不满足，就不通过，返回Boolean值，不会改变原数组。
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrEvery = arr.every((element,index,self)=>{
        // console.log(element,index,self);// 自己测试
        // return element>0
        return element>50
    })
    console.log('arrEvery',arrEvery);
    let arrEvery2 = arrObj.every((element)=>{
        // return element.age>0
        return element.age>20
    })
    console.log('arrEvery2',arrEvery2);

  运行结果：
在这里插入图片描述

some

  只要有一个满足，就通过，返回Boolean值，不会改变原数组。
  用法：

    let arr = [23,4,54,456,234,65,2,12]
    let arrObj = [
        {name:'张三',age:18,sex:'男'},
        {name:'李四',age:13,sex:'女'},
        {name:'王五',age:7,sex:'女'},
        {name:'老六',age:70,sex:'男'},
    ]
    // element表示当前元素，index表示当前元素所在下标，self表示当前调用的数组arr
    let arrSome = arr.some((element,index,self)=>{
        // console.log(element,index,self);// 自己测试
        // return element>1000
        return element>100
    })
    console.log('arrSome',arrSome);
    let arrSome2 = arrObj.some((element,index,self)=>{
        // console.log(element,index,self);// 自己测试
        // return element.age>20
        return element>100
    })
    console.log('arrSome2',arrSome2);

  运行结果：
在这里插入图片描述

reduce

  includes 接收一个回调函数作为累加器，对数据进行相应的计算
  用法：

    let arr = [3,4,7,8]
    // pre:上一个的值(一般为数字), current:当前值, index:下标（非必填）, self:当前数组（非必填）
    let filterArr = arr.reduce((pre, current, index , self) => {
        console.log(pre, current, index, self)
        return pre + current
    }, 20)// 20为定义的初始值（非必填）
    console.log(filterArr)
    
    let arr2 = [{count: 3},{count: 4},{count: 7},{count: 8}]
    // pre:上一个的值(一般为数字), current:当前值, index:下标（非必填）, self:当前数组（非必填）
    let filterArr2 = arr2.reduce((pre, current, index , self) => {
        console.log(pre, current, index, self)
        return pre + current.count
    }, 20)// 20为定义的初始值（非必填）
    console.log(filterArr2)

  运行结果：
在这里插入图片描述

  如果没有放入初始值，会以数组中的第一个元素为初始值

let arr = [3,4,7,8]
// pre:上一个的值, current:当前值, index:下标（非必填）, self:当前数组（非必填）
let filterArr = arr.reduce((pre, current, index , self) => {
    console.log(pre, current, index, self)
    return pre + current
})// 去除初始值
console.log(filterArr)

  运行结果：
在这里插入图片描述

includes

  includes 可以判断一个数组中是否包含某一个元素，并返回true 或者false
  用法：

    // 原生方法
    let arr = ['a', 'b', 'c']
    let flag = false
    arr.forEach(item => {
        if (item === 'd') {
            flag = true
        }
    })
    if (flag) {
        console.log('arr中包含该数')
    } else {
        console.log('arr中不包含该数')
    }
    // 结果：arr中不包含该数

    // includes方法
    let arr = ['a', 'b', 'c']
    if (arr.includes('d')) {
        console.log('arr中包含该数')
    } else {
        console.log('arr中不包含该数')
    }
    // 结果：arr中不包含该数

补充：includes可以包含两个参数，第二个参数表示判断的起始位置

    console.log(['a', 'b', 'c'].includes('b',1)) // true
    console.log(['a', 'b', 'c'].includes('b',2)) // false

Object.key， Object.values， Object.entries

  获取对象的属性名，属性值
  用法：

    let obj = {
        age: '18',
        name: '张三',
        love: '打篮球'
    }
    console.log(Object.keys(obj))
    console.log(Object.values(obj))
    console.log(Object.entries(obj))

  运行结果：
在这里插入图片描述

flat

  用于将嵌套的数组“拉平”，flat参数为几，那么是将几层数组拉平到一层数组，Infinity为无限层级（Infinity表示无穷大）
  用法：

    let arr = [1, 2, ['a', 'b'], 'a', [1, [1, 2, [1]]]]
    console.log(arr.flat(1))
    console.log(arr.flat(2))
    console.log(arr.flat(3))
    console.log(arr.flat(1000))
    console.log(arr.flat(Infinity))
    console.log([...new Set(arr.flat(Infinity))])// 利用Set方法去重

  运行结果：

在这里插入图片描述

小苏(º﹃º )
关注
  • 12
    点赞
  • 踩
  • 76
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端ES6基础语法
TwForDream的博客
07-18 431
ES6基础语法
前端开源库-es6-promisify-all
08-30
ES6 引入了一种新的语法特性——Promise，它为处理异步操作提供了更优雅的方式，避免了传统的回调函数地狱（Callback Hell）。`es6-promisify-all` 是一个前端开源库，旨在帮助开发者将所有非 Promise 的异步方法...
ES6 前端语法
小弱鸡
07-09 254
1. let 1.1新增加的声明变量的关键字，与var声明变量有以下不同 <script> //var 声明的变量会越域 //let 声明的变量有严格局部作用域 { var a=1; let b=1; } //let b=2; console.log(a); //1 console.log(b); //Referenc
前端ES6的语法整理
程序员的日常学习
06-20 493
ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6）,已经在2015年6月正式发布了，所以ES6也称为ES2015。 这个东东出很久了，一直没时间完整的学习整理一下。 加上现在前端的更新又特别的快，新的前端框架的东西，都需要用这个语法了，不然很多东西甚至就开始看不懂了。...
【前端技术】 ES6 介绍及常用语法说明
最新发布
傲泣龙腾的博客
06-04 4714
ES6 引入了许多新特性和改进，使 JavaScript 更加现代化和强大。通过使用这些特性，开发者可以编写出更加简洁、高效和可维护的代码。这种变化和改进不仅提高了代码的可读性和可维护性，也使得开发者能够更轻松地实现复杂的功能。通过学习和掌握这些新特性，您将能够更加高效地编写 JavaScript 代码，适应现代 web 开发的需求。 最后希望本文对小伙伴们了解 ES6 及其语法有所帮助～ 欢迎一起评论交流！
前端es6基础语法
weixin_30279751的博客
12-03 103
1、let、const、var var是声明全局的变量，作用域是全局，const是声明全局的常量，不能修改,而let是块级变量只在当前声明的作用域中生效: { var a = 10; let b = 20; } console.log(a); // 打印a的值 console.log(b); // 报错：ReferenceError: b is not defined 2、var...
前端必知 ES6语法
欢迎来到我的博客
11-02 427
1、ES6常用语法 1、let 特点： 在块作用域内有效 不能重复声明 不会预处理, 不存在提升 应用：循环遍历加监听 //console.log(age);// age is not defined let age = 12; //let age = 13;不能重复声明 console.log(age); let btns = document.getElementsByTagName('button'); for(let i = 0;i<btns.lengt
前端项目-es6-promise.zip
09-02
在现代前端开发中，异步操作是不可或缺的一部分，而ES6引入的Promise对象就是处理异步操作的一种强大工具。Promise是JavaScript中的一个内置对象，用于处理异步操作的最终完成或失败，并允许进行链式调用，极大地...
js文件 ES6转换为ES5
03-14
本教程将指导你如何通过一个简单的流程将JS文件中的ES6语法转换为ES5。 首先，解压缩文件后，你会看到一个包含`package.json`的目录。这个文件是Node.js项目的配置文件，它定义了项目依赖和其他元数据。`npm ...
ES6：ES6
02-24
ES6引入了类的概念，尽管它们在语法上看起来与传统面向类的语言类似，但本质仍然是基于原型的。类提供了更简洁的语法来定义构造函数和方法，使得代码更加易读。 ```javascript class Person { constructor(name) {...
dev2_study_react:React和ES6练习
03-15
`.js`文件可能包含了ES6语法的业务逻辑；`package.json`会记录项目的依赖和配置信息。 - 项目可能包含Webpack或Create React App等工具的配置，用于构建和打包代码。 - 通过学习和实践这个项目，你可以深入了解...
《前端》ES6基础语法
BelleDiao的博客
06-23 353
ECMAScript6简称ES6。ECMAScript和JavaScript的术语是通用的。在2015年，ECMAScript 发布了被称为 ECMAScript 6 (ES6) 的最新版本。 箭头函数 类 模块 Promises 对象 异步生成器 Generators let以及const语法 1 var和let关键字之间的区别 使用var关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。 当使用let的时候，同一名字的变量只能被声明一次。（和java一样，存在全局变量...
【前端】ES6 语法精简整理
loyd3的博客
10-21 199
ECMAScript 总结 简介 ECMAScript中的变量无特定的类型，定义变量时只用var运算符 每行结尾的分号可有可无，但为了保持良好的编程习惯，最好总是加入分号 注释与 Java、C 和 PHP 语言的注释相同 括号表示代码块 ECMAScript中的变量并不一定要初始化。 ECMAScript有5种原始类型（primitive type），即Undefined、Null、Boolean、Number和String。 Undefined类型具有唯一的值，即undefined。当声明的变量未初始化时
前端介绍之ES6 语法指南
liuerchong的博客
07-24 5170
ES6 语法指南 后端项目搭建完毕，接下来就是前端页面了。不过在这之前需要一些准备工作。我们需要学习ES6的语法标准。 什么是ES6？就是ECMAScript第6版标准。 4.1.什么是ECMAScript？ 来看下前端的发展历程： web1.0时代： 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 web2.0时代： 1995年，网景工程师Brendan Eich 花了10天时间设计了Ja
前端es6语法 includes用法(看来之后Es6好用)
HuangZeJunXXX的博客
09-16 1511
检测数组 site 是否包含 runoob : let site = [‘runoob’, ‘google’, ‘taobao’]; site.includes(‘runoob’); // true site.includes(‘baidu’); // false includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。 [1, 2, 3].inclu...
[最完整的前端学习手册]——ES6语法
weixin_48683052的博客
08-12 4176
5、有this关键字的不能被解构，会出现指向丢失（当解构的对象方法内部有this关键字参与，该方法不能进行解构，如果强行进行解构，在赋值后，调用时，会导致内部的this指向window）。可以按照数组，对象的形式进行解构赋值操作；​ rest参数，形式为“...变量名”，用于获取函数的多余参数，可以用rest参数取代arguments对象的使用。let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。1. var定义的变量，**没有块的概念，可以跨块访问**, 不能跨函数访问。......
前端知识点 | ES6基础语法
是草莓味的啊
09-29 338
文章目录一、什么是ECMAScript61.ECMAScript与JavaScript的关系二、ES6的基本语法1.声明变量 let2.声明常量 const3.声明对象4. 解构赋值5. 模板字符串6. 对象拓展运算符7.箭头函数 一、什么是ECMAScript6 ECMAScript6.0（简称ES6）是JavaScript语言的下一代标准/规范，2015年6月正式发布 目标：使JavaScript能编写复杂的大型应用，成为企业级开发语言。 1.ECMAScript与JavaScript的关系 ES
前端基础之ES6语法详解
weixin_46036165的博客
04-01 251
ES6语法详解 现在开发都在用ES6进行开发，但是浏览器一般都是支持ES5. 什么是ES6？ 版本规范，JavaScript的下一代标准 js可以面向对象编程 1.变量let & var使用和区别 let 声明变量有作用域 var 声明变量没有作用域 { var a = 88 let b = 99 } console.log(a) console.log(b) /...
ES6新语法（前端必备）
404路西法的博客
05-26 485
（一）模板字符串 使用方法：将字符串写在 ` ` 里->> 就是键盘上tab键上面那个键 允许多行并保留编辑格式（缩进和换行会予以保留） 支持内嵌表达式：语法：${表达式} let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` （二）浏览器加载 defer与async的区别是： de...
es6 常用的数组语法
09-20
ES6中常用的数组语法有forEach、map、some、every、filter和reduce。 1. forEach用于遍历数组，可以替代传统的for循环。 2. map用于对数组中的每个元素进行处理，并返回一个新的数组。 3. some用于判断数组中是否...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值