이 기사에서는 가장 일반적으로 사용되는 ES6을 사용하는 방법을 설명합니다.

이 기사에서는 ES6에 대해 설명하고 가장 일반적으로 사용되는 ES6를 30분 안에 능숙하게 사용할 수 있도록 도와줄 것입니다. 아직 배우지 않았다면 죽기를 기다리고 계십니까?

1. ES6 소개

기술이나 언어를 이해하는 가장 좋은 방법은 그것이 무엇을 할 수 있는지 아는 것입니다. ECMA 조직에서 국제적으로 표준화한

ES6 스크립팅 언어에 대한 표준화된 사양 ​​ES6 ， 它是由 ECMA 国际标准化组织，制定的一项脚本语言的标准化规范

那么它为什么会出现呢？

每一次标准的诞生都意味着语言的完善，功能的加强；也就是说随着时代的发展，JavaScript 语言的某些弊端已经不满足企业和开发者的需求了。【相关推荐：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 的 全局作用域 和 函数作用域

而块级作用域的意思其实就是一个 {} (代码块)，变量只在 {}

그럼 왜 등장한 걸까요?

모든 표준의 탄생은 언어의 개선과 기능의 향상을 의미합니다. 즉, 시대가 발전함에 따라 JavaScript 언어의 일부 단점은 더 이상 기업과 개발자의 요구를 충족하지 못합니다. [관련 권장사항: 자바스크립트 학습 튜토리얼]

예:

변수 승격 기능으로 인해 프로그램 런타임의 예측 불가능성이 증가함
• 구문이 너무 느슨함

그리고 ES6 새 표준의 목적은 다음과 같습니다.

JS를 사용하여 대규모 웹 애플리케이션을 개발할 수 있게 하며 엔터프라이즈급 개발 언어가 됩니다엔터프라이즈급 개발 언어는 모듈형 개발에 적합하고 종속성 관리가 좋습니다

그럼 다음은 시간을 좀 투자해서 면접에서 자주 사용하고 인기가 좋은 ES6를 배워보시죠?

2.ES6 템플릿 문자열

우리는 보통 템플릿 문자열이 있기 전에 스플라이스를 합니다. 이와 같은 문자열 변수

{
  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️⃣'

이제 🎜ES6🎜🎜

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

🎜🎜🎜3에서 제공하는 더 많은 템플릿 문자열 메서드가 있습니다. ES6은 문자열에 특정 값이 포함되어 있는지 여부를 결정합니다.🎜🎜🎜🎜개발에서 가장 일반적으로 사용되는 메서드는 설명하지 않겠습니다. 너무 많이 설명하고 일반적으로 사용되는 방법을 모두 나열하면 학생들이 스스로 선택할 수 있습니다🎜🎜🎜1. indexOf()🎜🎜🎜 메서드는 지정된 문자열 값이 문자열에서 처음 나타나는 위치를 반환할 수 있습니다🎜🎜검색하려는 경우 문자열 값이 나타나지 않으면 메서드는 -1🎜

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

🎜🎜2를 반환합니다. include()🎜🎜🎜는 매개변수 문자열이 있는지 여부를 나타내는 부울 값을 반환합니다. 현재 문자를 결정하는 데 사용됩니다. 문자열이 다른 주어진 값으로 시작하는지 판단 결과에 따라 true 또는 false를 반환합니다🎜

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊猫' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊猫' , job:'前端'}

🎜🎜4. endWith()🎜🎜🎜는 문자열이 주어진 값으로 끝나는지 판단하는 데 사용됩니다. 또는 판단 결과에 따라 true를 반환하거나 false🎜rrreee🎜🎜🎜4. ES6 화살표 함수🎜🎜🎜🎜화살표 함수의 출현으로 함수 정의가 단순화되고 코드가 간결해지며 키워드가 필요 없게 됩니다🎜function🎜🎜 🎜하지만 화살표 함수의 한계에도 주의해야 합니다. 그리고 화살표 함수 자체에는 🎜this🎜, 🎜this🎜가 부모를 가리키는 것이 없습니다. 🎜🎜단점: 🎜

• 🎜화살표 함수에는 프로토타입🎜prototype🎜이 없으므로 화살표 함수에는 🎜를 가리키는 🎜this🎜이 없습니다.
• 🎜화살표 함수는 자체 🎜this🎜를 생성하지 않습니다. . 외부 첫 번째 일반 함수가 있는 경우 🎜this🎜🎜 li>
• 🎜엄격 모드와 비엄격 모드에서는 화살표 함수의 외부 레이어에 함수가 없습니다. this🎜은 🎜window🎜 전역 객체🎜를 가리킬 것입니다.

🎜기본 작성 방법: 🎜rrreee🎜🎜🎜 5. ES6 객체 표현식🎜🎜🎜🎜객체 속성과 값이 동일한 경우 , 재사용 시 값 작성을 생략할 수 있습니다🎜rrreee🎜🎜🎜6. ES6은 두 값이 동일한지 확인하는 것입니다🎜🎜🎜🎜가장 일반적으로 사용되는 === 및 == 는 두 값의 결과를 비교하는 데 사용됩니다. 🎜rrreee🎜🎜🎜7. ES6 Object.sign() 복사 개체 🎜🎜🎜rrreee🎜🎜🎜 8. ES6 블록 -레벨 범위 🎜🎜🎜🎜우선 범위가 무엇인지 알아야 합니다. 🎜

🎜Scope는 변수가 사용할 수 있는 범위입니다🎜🎜🎜ES6🎜의 🎜let🎜이 없기 전에는 🎜var🎜🎜🎜의 전역 범위와 함수 범위만 있었고 블록 수준의 의미는 다음과 같습니다. 범위는 실제로 A {}(코드 블록)이고, 변수는 {}🎜🎜rrreee🎜에서만 유효합니다. 🎜var🎜 키워드는 위에서 변수 b를 정의하는 데 사용되었습니다. 블록, 전역적으로 모두 액세스 가능🎜🎜그러나 실제 응용 시나리오에서는 변수 누출이나 이름 중복 등에 대해 걱정할 것입니다. 우리는 이 변수가 현재 블록에서만 액세스 가능하기를 원하므로 🎜let🎜을 사용해야 합니다. 키워드🎜🎜🎜 🎜9. ES6 구조 분해 연산자🎜🎜🎜🎜예를 들어, 🎜ES6🎜 배열을 구조 분해하기 전에 배열 🎜arr🎜을 정의하면 🎜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:'前端'}

（学习视频分享：web前端开发、编程基础视频）

위 내용은 이 기사에서는 가장 일반적으로 사용되는 ES6을 사용하는 방법을 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!