30分钟熟练使用最常用的ES6,还不学是等着被卷死?

简介: 30分钟熟练使用最常用的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 指向父级

弊端:

  1. 箭头函数没有原型 prototype,因此箭头函数没有 this 指向
  2. 箭头函数不会创建自己的 this,如果存在外层第一个普通函数,在定义的时候会继承它的 this
  3. 箭头函数外层没有函数,严格模式和非严格模式下它的 this 都会指向 window 全局对象

基本写法:

//没有参数,写空括号
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:'前端'}

 

总结给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

相关文章
|
7月前
|
自然语言处理 JavaScript 前端开发
|
2天前
|
前端开发 JavaScript 调度
小型的编程项目有哪些值得推荐?这本神书写了 22 个,个个了不得
小型的编程项目有哪些值得推荐?这本神书写了 22 个,个个了不得
22 1
|
2天前
|
数据采集 算法 Java
业余爱好者想入门编程,一定远离那些只会说No的家伙,尤其程序员
业余爱好者想入门编程,一定远离那些只会说No的家伙,尤其程序员
30 1
|
2天前
|
XML Java 数据格式
🚀今天,我们来详细的聊一聊SpringBoot自动配置原理,学了这么久,你学废了吗?
🚀今天,我们来详细的聊一聊SpringBoot自动配置原理,学了这么久,你学废了吗?
74 0
|
2天前
|
移动开发 前端开发 决策智能
从0到前端大佬终极完全教程-找工作这一篇就够了
从0到前端大佬终极完全教程-找工作这一篇就够了
70 0
|
9月前
|
数据采集 XML 人工智能
|
11月前
|
前端开发 自动驾驶 算法
这个知识点99%的前端都没有听过,不信你进来看?
这个知识点99%的前端都没有听过,不信你进来看?
68 0
|
算法 NoSQL API
到底该不该看源码(懂这三点儿就够了)
1、不要为了看源码而看源码 2、代码积累到一定程度,遇到问题自然就去查源码了,然后你就看懂了 3、两年内不要刻意去看源码,可以点开简单了解一下就行,前两年疯狂做项目就行了,后期项目做的多了,你自己就会有疑问,每次写代码就会问自己为什么要这样写?底层的原理是什么?很自觉的带着问题就去看源码了,如果你没有这样的疑问,那说明你也不适合去看源码了,写写业务代码,了了一生
150 0
|
测试技术
初级软件测试面试题怎么找?提供的这两个地方你肯定用得上
最近几年,随着电子产品和互联网的蓬勃发展,各类科技公司如雨后春笋般出现,而软件公司作为科技类公司中的重要组成部分,在这支互联网大军中也占据了重要一席。因而,负责软件问题质检的软件测试岗位也逐渐成了这几年炙手可热的就业岗位之一。
109 0
|
开发者 Python
一日一技:8行炫技代码,知识点多得不得了
一日一技:8行炫技代码,知识点多得不得了
252 0
一日一技:8行炫技代码,知识点多得不得了