Home > Article > Web Front-end > 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:
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 resultlet 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 keywordsfunction
But you should also pay attention The limitations of the arrow function, and the arrow function itself does not havethis, this points to the parent
Disadvantages:prototype, so arrow functions do not have this pointing to
this , if there is the first ordinary function in the outer layer, it will inherit its this
this will point to the window global object
//没有参数,写空括号 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 reusinglet 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 novarlet 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
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
letkeyword
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:'前端'}
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!