您的位置: 翼速应用 > 业内知识 > web前端 > 正文

ES6教程来了!进来学习

ES6是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范,随着时代的发展,JavaScript 语言的某些弊端已经不满足企业和开发者的需求了,于是就有了ES6。下面一起来了解详细资讯。


ES6教程来了!进来学习


详解ES6


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


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


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:'前端'}


今天的ES6教程解析就到这里,翼速应用平台内有更多相关资讯,欢迎查阅!

我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题