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

2401_84434442

于 2024-06-15 19:36:02 发布

阅读量351

点赞数 3

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/2401_84434442/article/details/139707180

版权

二. 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] 的方式去访问数组内部

而现在，我们有了更多的方式




### 最后

推荐一些系统学习的途径和方法。  

![路线图](https://img-blog.csdnimg.cn/img_convert/abffda3a0cfe5b9baa70f132ab55f248.png)

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。



HTML 和 CSS：

![html5知识](https://img-blog.csdnimg.cn/img_convert/2ee0d943c2e65e1bf84360c1c8a40cf6.png)

![css基础知识](https://img-blog.csdnimg.cn/img_convert/f660a2fef40322a6e2c45716d4a97e02.png)