• 技术文章 >web前端 >js教程

    一文带你熟练使用最常用的ES6

    青灯夜游青灯夜游2022-09-20 10:20:14转载164
    本篇文章带大家聊聊ES6,带你30分钟熟练使用最常用的ES6,还不学是等着被卷死?

    大前端零基础入门到就业:进入学习

    一. 关于ES6

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

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

    那么它为什么会出现呢?

    每一次标准的诞生都意味着语言的完善,功能的加强;也就是说随着时代的发展,JavaScript 语言的某些弊端已经不满足企业和开发者的需求了。【相关推荐: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:'前端'}

    (学习视频分享:web前端开发编程基础视频

    以上就是一文带你熟练使用最常用的ES6的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript ES6
    上一篇:JavaScript如何改变this指向?三种方法浅析 下一篇:javascript怎么求素数
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 一起来聊聊ES6中的扩展运算符• 归纳整理ES6中的class类知识点• 实例解析ES6 Promise的原理和使用• 一文带你快速详解ES6,认识新增特性!• es6怎么判断字符串是否为数字
    1/1

    PHP中文网