This article will teach you how to use the most commonly used ES6

This article will talk about ES6 and give you 30 minutes to master the most commonly used ES6. If you don’t learn it, are you waiting to be killed?

1. About ES6

The best way to understand a technology or language is to know What it can do

ES6 It is a standardized specification for scripting languages ​​formulated by the ECMA International Organization for Standardization

So why does it appear? Woolen cloth?

The birth of every standard means the improvement of the language and the strengthening of functions; that is to say, with the development of the times, some of the disadvantages of the JavaScript language no longer meet the needs of enterprises and developers. . [Related recommendations: javascript learning tutorial]

For example:

• The variable promotion feature increases the unpredictability of the program during runtime
• Syntax Too loose

and ES6 The purpose of the new standard is:

Make JS can be used to develop large-scale Web applications and become an enterprise-level development language

The enterprise-level development language is: suitable for modular development, with good dependency management

Then next, we will spend a small amount of time to learn common development and interview popular languages ES6 Right?

2. ES6 template string

Before there is no template string, we splice the string Variables usually look like this

let a = '小明'

let b = '?'

let c = a + '爱吃' + b    // 小明爱吃?

But now we have moreES6 template string methods provided

let a = '小明'

let b = '?'

let c = ` ${a} 爱吃 ${b}`    // 小明爱吃?

3. ES6 judgment string Whether it contains certain values

The most commonly used ones in development, I won’t go into too much explanation. I will list all the commonly used methods and students can choose for themselves

1. indexOf()

The method can return the position where a specified string value first appears in the string

If the string value to be retrieved does not appear, Then the method returns -1

let str = '?????'

console.log( str.indexOf('?') != -1 );   // false

2. includes()

Returns a Boolean value indicating whether the parameter string

let str = '?????'

str.includes('?') ? console.log( true ) : console.log( false )    // true

## is found #3. startsWith()

is used to determine whether the current string starts with another given value, and returns true or false based on the judgment result

参数：

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()

is used to determine whether the string ends with a given value, and returns true or false based on the judgment result

let str = "熊猫开发团队"; 

console.log( str.endsWith("队") );              // true

IV. ES6 Arrow function

The emergence of arrow function simplifies the definition of functions, making the code more concise, eliminating the need for keywords

function

But you should also pay attention The limitations of the arrow function, and the arrow function itself does not have

this, this points to the parent

Disadvantages:

• Arrow functions do not have a prototype

  prototype, so arrow functions do not have this pointing to

• Arrow functions do not create their own

  this , if there is the first ordinary function in the outer layer, it will inherit its this

• arrow function when it is defined. There is no function in the outer layer, strict mode and non-strict mode In mode, its

  this will point to the window global object

Basic writing method:

//没有参数，写空括号
let getTitle = () => {
    return '熊猫开发团队'
};

//只有一个参数，可以省去参数括号
let getTitle = title => {
    return title
};

//如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中
let getTitle = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}

5. ES6 object expression

If the object attribute and value are the same, you can omit writing the value when reusing

let a = '?';
let b = '?';

const obj1 = {
    a: a,
    b: b,
}

const obj2 = {
    a,
    b,
}

6. ES6 is Determine whether two values ​​are equal

In addition to the most commonly used

=== and == are used to compare the results of two values, ES6 There is a new one

Object.is(val1,val2)

console.log( Object.is(88, 88) )                // true
console.log( Object.is('熊猫', '?') )         // false

7. ES6 Object.assign() copy object

let obj = {};

Object.assign( obj, { name: '熊猫' } );

console.log( obj )    // { name: '熊猫' }

8. ES6 block-level scope

First of all, we must understand what a scope is?

Scope is the range within which a variable can be used

Before there was no

let of ES6, there was only var## The global scope and function scope of # and the block-level scope actually means a

{}

(code block), and the variables are only in {} Effective

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

The

var

keyword is used above to define variable b in the block, which can be accessed globallyBut in actual application scenarios, we We will worry about variable leakage or duplicate names. We only want this variable to be accessible in the current block, so we need to use the

let

keyword

9 . ES6 destructuring operator For example, to define an array

arr

, before ES6 destructuring the array, we may use arr [0] way to access the interior of the arrayAnd now, we have more ways

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前端开发、编程基础视频）

The above is the detailed content of This article will teach you how to use the most commonly used ES6. For more information, please follow other related articles on the PHP Chinese website!