Quick understanding of ES6

Time:2020-7-5

Section 1: for each

Once traversed for, difficult to understand! These are the last ones to come back

var name =  ['Aaron','Ben','Cands','Dade']

for(var i=0; i<name.length; i++)
{
    console.log(name[i])
}

Foreach is very simple. Add a foreach to the object you want to traverse, and batch a name a for all your values, and it will return it to you in order

var name =  ['Aaron','Ben','Cands','Dade']

name.forEach(function(a){
    console.log(a)
})

Small experiment, add 123455678 together
Chicken has these, with a sum chicken nest in turn put in! Finally, 55 chickens were returned

var jj = [1,2,3,4,5,6,7,8,9,10]
var sum = 0
jj.forEach(function(n){
    sum+=n
})

console.log(sum)

Link the same with this method more convenient! Filtering returns to leave the unselected and hide the rest.


Section 2: Map

To put it bluntly, it is to put the originalarrayMake a copy and change the value. Name it again
Once I raised a pile of chickens, and then multiplied the original chicken by 2, and then returned the price with a new name called KFC. Chicken itself is cheap, so it’s expensive to change its name

var jj = [1,2,3,4,5,6,7,8,9,10]

var kfc = jj.map(function(n){
    return n*2
})

console.log(kfc)

Section 3: filter

Commonly known as the filter, simply say the new coronavirus disease positive stand up, this is the filter

var bd = [
    {Name: "Liu busy", type: "Yang"},
    {Name: "Ma Chao", type: "Yin"},
    {Name: "Zhao San", type: "Yin"},
    {Name: "Zhou Min", type: "Yang"}]

var txt = bd.filter(function(a){
    return a.type === 'Yang'
})

console.log(txt)

Section 4: find

Must be looking for meaning, but he is different from upstairs! He will finish when he finds one, and I will not look for the one behind him! For example, the deputy director of Fengtai District in Beijing was removed from office. There are so many officials who choose the most unfortunate to take the blame. Use this method!
You’ll find that the first male version of Zhou Yuqing has been doomed

var bd = [
    {Name: "Liu busy", type: "female"},
    {Name: "Ma Chao", type: "male"},
    {Name: "Zhou Yuqing", type: "male"},
    {Name: "Zhou Yuqing", type: "female"}]

var dm = bd.find(function(a){
    Return a.name = = ='zhou Yuqing '
})

console.log(dm)

There are more practical, such as a lot of prisoners! Bring me the one who meets the conditions

var fr = [
    {Name: "Liu busy", type: "female"},
    {Name: "Zhou Libo", type: "female"},
    {Name: "Ma Chao", type: "male"},
    "Name:" male,
    {Name: "Ma Rong", type: "female"}
]

Var sb = {Name: "Zhou Libo", type: "male"}

var dm = fr.find(function(a){
    return a.name == sb.name && a.type == sb.type
})

console.log(dm)

Section 5: every

Otherwise, No
Every simply said: a person infected, the whole village was isolated.
All must be met, and one who fails to meet the requirements is doomed

var cz = [
    {Name: "Liu busy", type: "no"},
    {Name: "Jiang Libo", type: "no"},
    {Name: "Zhang Chao", type: "yes"},
    {Name: "Zhou Libo", type: "no"},
    {Name: "Ma Rong", type: "no"}
]

var txt = cz.every(function(n){
    return n.type == "no"
})

console.log(txt)

Section 6: some

True is true
There is a satisfaction for you!
At that time, I wanted to work in the government, but I needed conditions to get in. As long as you satisfy one person in your family, you can get your family into the government

var cz = [
    {Name: "Liu busy", type: "10W"},
    {Name: "Jiang Libo", type: "2W"},
    {Name: "Liu Chao", type: "9W"},
    {Name: "Liu Jiji", type: "30W"},
    {Name: "Liu Rong", type: "1W"}
]

var txt = cz.some(function(n){
    return n.type >= "30W"
})

console.log(txt)

Section 7: reduce

Before the chicken coop upgrade version, the first section also needs to build a chicken coop outside, but alsoAdd etc
This time, a KFC artifact will be used. The first value (chicken nest): JW, and the second (original chicken): num
You’ll find that you only need to add it once

var jj = [1,10,20,30,40]

var KFC = jj.reduce(function(jw, num){
    console.log(jw)
    return jw + num
}, 0)

console.log(KFC)

Section 8: template string

In the past, it was very troublesome to insert something into a field, and there was often a single quotation mark and double quotation mark error

Let Name: 'Andy Lau'
Let nabob = "< H2 > who is the most handsome millionaire in the world? </h2><p>'+name+'</p>"

With this artifact, my mother no longer has to worry about my study.

Let Name: 'Andy Lau'
function baby(val)
{
 return val.toUpperCase()
}
let nabob = `
<h2>Who is the most handsome millionaire in the world? </h2>
<p>${baby('hello')}</p>
<p>${name}</p> `

Section 9: arrow function

It is the upgrade version of the previous function, the new arrow function has two advantages, shorten the code and this point
You don’t need to return in F3 F4 line
Multiple parameters must be bracketed

const f1 = function(num){ return num*10 }
const f2 = (num)=>{ return num*10 }
const f3 = (num)=> num*10
const f4 = num => num*10 
const f5 = (num,val) => num*10 + val 

console.log(f4(25))

The arrow points to each other in the data in Vue. Why? Because they are one family here. So in this lesson, the arrow points directly to the line! It’s not like I used to have a VAR out there_ This and then put it in!

let sb = {
   City: 'Beijing',
   Area: 'Fangshan District',
   temp(){
      return this.city+`${this.Area}` 
   }
}

console.log(sb.temp())

Section 10: default values of function parameters

In short, function xboy (a, b) {}
If you put only a and no B, you will be prompted with an error
And the bottom is right, there is! It’s ok if there is none.

//It indicates that the report is wrong
function xBox(a, b)
{
    return a+b
}

console.log(xBox('gogogo.com'))

//Right
function xBox(a, b = '')
{
    return a+b
}

console.log(xBox('gogogo.com'))

Section 11: expansion operator

Because there are n parameters in function box (a, B, C, D, e, f), what can be ignored? How many are there?

function xBox(...Num)
{
    //It was originally Xbox (a, B, C, D, e), and it let you var num = [a, B, C, D], and then put it down
    return Num.reduce((a,b)=>{
        return a + b
    },0)
}

console.log(xBox(1,2,3,4,5,6))

In other words, it is to put the array shrinking mode into three points quickly

var a = ['aaa', 'bbbb', 'ccc']
var b =['ddd','eeee', 'ffff']

console.log([...a, ...b])

Section 12: Deconstruction object

The traditional way is this

var a = {
  type:'POST',
  method:'is No default'
}

var b = a.type
var c = a.method

console.log(b,c)

The new method is to take out the contents directly and use them directly! But the name can’t be changed

var a = {
  xtype:'POST',
  xmethod:'is No default'
}

var {xtype, xmethod} = a;

console.log(xtype, xmethod)

There are also several ways to batch use in arrays

var name = ['God','Aaron','barty','carty','yaoming']
var [name1, name2, name3, name4, name5] = name
console.log(name1,name2,name3,name4,name5)

var name = ['God','Aaron','barty','carty','yaoming']
var {length} = name
console.log(length)

let a,b
[a,b] = [10,250]
console.log(b)

const a  =[
    [12,45],
    [34,71],
    [75,35],
    [22,69],
    [31,70]
];
let b = a.map(([xx,oo])=>{
    return {X:xx,Y:oo}
});
console.log(b)
//First of all, there are patterns of a and B in a, so when you use map, you can traverse it along with itself, so that the two values of xxoo can be possible! And then return XY, which is written in a blind way for the console.log It shows

Section 13: class everything is an object

constructorIt must be

class Car{
    constructor({txt}) {
        this.txt = txt
    }
}

Const car = new car ({TXT: 'I'm just XXXXXXXX'})
console.log(car)

Recommended Today

ASP.NET Example of core MVC getting the parameters of the request

preface An HTTP request is a standard IO operation. The request is I, which is the input; the responsive o is the output. Any web development framework is actually doing these two things Accept the request and parse to get the parameters Render according to the parameters and output the response content So let’s learn […]