文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ES6的使用方法有哪些

2024-04-02 19:55

关注

这篇文章主要介绍“ES6的使用方法有哪些”,在日常操作中,相信很多人在ES6的使用方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ES6的使用方法有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一. 关于ES6

了解一门技术或者语言,最好的方法就是知道它能做些什么

ES6 , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范

那么它为什么会出现呢?

每一次标准的诞生都意味着语言的完善,功能的加强;也就是说随着时代的发展,JavaScript 语言的某些弊端已经不满足企业和开发者的需求了。

比如:

ES6 新标准的目的是:

使得JS可以用来开发大型的Web应用,成为企业级开发语言

而企业级开发语言就是:适合模块化开发,拥有良好的依赖管理

那么接下来,我们就来花少量时间,学习开发常用和面试热门的 ES6 吧 ?

二. ES6 模板字符串

在没有模板字符串前,我们拼接字符串变量一般会这样

let a = '小明'

let b = '?'

let c = a + '爱吃' + b    // 小明爱吃?

而现在我们多了 ES6 提供的 模板字符串的方法

let a = '小明'

let b = '?'

let c = ` ${a} 爱吃 ${b}`    // 小明爱吃?

三. ES6 判断字符串里是否包含某些值

开发中最常用的,就不做过多说明了,把常用的方法通通列举出来,同学们自取

1. indexOf()

方法可返回某个指定的字符串值在字符串中首次出现的位置

如果要检索的字符串值没有出现,则该方法返回 -1

let str = '?????'

console.log( str.indexOf('?') != -1 );   // false

2. includes()

返回布尔值,表示是否找到了参数字符串

let str = '?????'

str.includes('?') ? console.log( true ) : console.log( false )    // true

3. startsWith()

用来判断当前字符串是否是以另外一个给定的值开头的,根据判断结果返回 true 或 false

参数:

str.startsWith( searchString , [position])

searchString : 要搜索的值

position: 在 str 中搜索 searchString 的开始位置,默认值为 0


例子:

let str = "前端,熊猫开发团队"; 

console.log( str.startsWith("前端") );              // true 
console.log( str.startsWith("熊猫开发团队") );      // false 
console.log( str.startsWith("熊猫开发团队", 3) );   // true

4. endsWith()

用于判断字符串是否以给定的值结尾,根据判断结果返回 true 或 false

let str = "熊猫开发团队"; 

console.log( str.endsWith("队") );              // true

四. ES6 箭头函数

箭头函数的出现简化了函数的定义,让代码更简洁,省去关键字 function

但是也要注意箭头函数的局限性,以及箭头函数中自身没有 thisthis 指向父级

弊端:

基本写法:

//没有参数,写空括号
let getTitle = () => {
    return '熊猫开发团队'
};

//只有一个参数,可以省去参数括号
let getTitle = title => {
    return title
};

//如果箭头函数有多个参数,将参数依次用逗号(,)分隔,包裹在括号中
let getTitle = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}

五. ES6 对象表达式

如果对象属性和值一样,那么复用时可以省略写值

let a = '?';
let b = '?';

const obj1 = {
    a: a,
    b: b,
}

const obj2 = {
    a,
    b,
}

六. ES6 is 判断两个值是否相等

除了最常用的 ===== 用来比较两个值的结果, ES6 又出了新的啦

Object.is(val1,val2)

console.log( Object.is(88, 88) )                // true
console.log( Object.is('熊猫', '?') )         // false

七. ES6 Object.assign() 复制对象

let obj = {};

Object.assign( obj, { name: '熊猫' } );

console.log( obj )    // { name: '熊猫' }

八. ES6 块级作用域

首先要搞清楚什么是作用域?

作用域就是一个变量可以使用的范围

在没有 ES6let 之前 ,只有 var 的 全局作用域 和 函数作用域

而块级作用域的意思其实就是一个 {} (代码块),变量只在 {} 中有效

{
  let a = '?️?️';
  var b = '1️⃣2️⃣';
  
  console.log( a )   a // '?️?️'
}

console.log( a )   a // ReferenceError: a is not defined.
console.log( b )   b // '1️⃣2️⃣'

上面使用了 var  关键字在块中定义了变量 b ,全局都可以访问得到

但是在实际应用场景中,我们会担心变量泄露,或者重名等问题,我们只想这个变量在当前块中能访问,那么就需要使用到 let 关键字

九. ES6 解构运算符

比如定义一个数组 arr ,在没有 ES6 解构数组前,我们可能会使用 arr[0] 的方式去访问数组内部

而现在,我们有了更多的方式

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

可能有的同学会问了,既然 ES6 有解构数组,那有解构对象吗 ?

那你往下看

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

十. ES6 展开操作符

直接看代码啦

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊猫' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊猫' , job:'前端'}

到此,关于“ES6的使用方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯