189 8069 5689
这篇文章主要介绍“ES6的使用方法有哪些”，在日常操作中，相信很多人在ES6的使用方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ES6的使用方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联公司专业为企业提供武都网站建设、武都做网站、武都网站设计、武都网站制作等企业网站建设、网页设计与制作、武都企业网站模板建站服务，10年武都做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
一. 关于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 ); // false2. includes()
返回布尔值，表示是否找到了参数字符串
let str = '?????'
str.includes('?') ? console.log( true ) : console.log( false ) // true3. 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) ); // true4. 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:'前端'}到此，关于“ES6的使用方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！