一. 关于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

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

弊端：

箭头函数没有原型 prototype，因此箭头函数没有 this 指向
箭头函数不会创建自己的 this，如果存在外层第一个普通函数，在定义的时候会继承它的 this
箭头函数外层没有函数，严格模式和非严格模式下它的 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 块级作用域

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

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

在没有 ES6 的 let 之前，只有 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:'前端'}

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

巴特西

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

一. 关于ES6

二. ES6 模板字符串

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

四. ES6 箭头函数

五. ES6 对象表达式

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

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

八. ES6 块级作用域

九. ES6 解构运算符

十. ES6 展开操作符

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

1、前端面试题库（面试必备）推荐：★★★★★

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

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

最新文章

热门文章

巴特西

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

一. 关于ES6

二. ES6 模板字符串

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

四. ES6 箭头函数

五. ES6 对象表达式

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

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

八. ES6 块级作用域

九. ES6 解构运算符

十. ES6 展开操作符

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

1、前端面试题库 （面试必备） 推荐：★★★★★

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

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

最新文章

热门文章

1、前端面试题库（面试必备）推荐：★★★★★

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

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