[ES6] map, reduce, filter, sort, arrow function, class inheritance, yield

map

var arr = [1,2,3,4,5,6,7,8,9];
var s = arr.map(String);
console.info(s)


function pow(x){
        return x * x;
}

var results = arr.map(pow);
console.info(results);

const arr =  [1,2,3,4,5,6,7,8,9];
const arr = arr.map(String);
console.log(s);

const results = arr.map(x=>x*x);
console.log(results)

//(9) ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
//(9) [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce

This function must accept even a parameter, reduce () and the results continue to the next element in the sequence is calculated as the accumulator

var func = function(x,y){
      return x + y;
}

var arr = [1,3,5,7,9];
var result = arr.reduce(func);

console.log(result)

const arr = [1,3,5,7,9];
const result = arr.reduce((x,y)=>x+y)

// result is 25

 

filter

And map () is different, filter () function is passed the sequentially applied to each element, based on the returned value is true or false decision to retain or discard the element

var arr = [1,2,4,5,6,9,10,15];
var r = arr.filter(function(x){
      return x%2 !== 0;
})
console.log(r);

const arr = [1,2,4,5,6,9,10,15];
const r = arr.filter(x => x%2 !== 0);
console.log(r);

//(4) [1, 5, 9, 15]

filter accepts callback function, in fact, can have multiple parameters. Usually we use only the first parameter that indicates an element of the Array. The callback function can also accept two other parameters, and represents the position of the element array itself

var arr = ['A','B','C'];
var r = arr.filter(function(element,index,self){
      console.log(element); //  'A' , 'B' , 'C'
      console.log(index);    //  0 , 1 , 2
      console.log(self);       //self 就是变量 arr
      return true;
});
console.log(r);


/*
A
0
["A", "B", "C"]
B
1
["A", "B", "C"]
C
2
["A", "B", "C"]

["A", "B", "C"]
*/

sort

This is because the Array sort () method by default all the elements first converted into String reordering result '10' ahead of '2', because the character '1' characters smaller than '2' in ASCII code.

var arr = [10,20,1,2];

arr.sort(function(x,y){
      if(x < y){ return -1;}
      if(x > y){ return 1 ;}
      return 0 ;
});
console.log(arr)

var arr = [10,20,1,2];

arr.sort((x,y) => x > y ? 1 : x < y ? -1 : 0);

console.log(arr);

//[1,2,10,20]

sort () method of the Array can be modified directly, it returns the result is still the current Array

var a1 = ["B", "A", "C"];
var a2 = a1.sort();
a1;     //["A", "B", "C"];
a2;     //["A", "B", "C"];
a1 === a2;  //true     a1和a2是同一个对象

 

Arrow function

Why is it called Arrow Function as it is defined by an arrow?:

x => x * x;

The above function is equivalent to the arrow

function (x){
      return  x * x;
}

We can also use this

// two parameters: 
(X, Y) => X * X + Y * Y 


// no parameter 
() => 3.14 @ Variable Parameters: 
(X, Y, ... REST) => {
        var I , SUM = X + Y;
        for (I = 0; I <rest.length; I ++ ) { 
            SUM + = REST [I]   
     }    return SUM; 
}



      

If you want to return an object

x => ({ foo: x})

Arrow function appears to be a shorthand anonymous function, but in fact, arrow functions and anonymous functions have a clear distinction: this function is inside the arrow lexical scope is determined by the context.

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

var ret = obj.getAge()
console.info(ret)

//NaN

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
var ret = obj.getAge(); 
console.info(ret)

//28

 

class inheritance

    Student {class 
        constructor (name) { 
            the this .name = name; 
        } 
        Hello () { 
            the console.log ( 'the Hello,' + the this .name + '!' ) 
        } 
    } 
    var Xiaoming = new new Student ( 'Bob' ); 
    Xiaoming .hello (); 

    class PrimaryStudent the extends Student { 
        constructor (name, grade) { 
            super (name); // remember super constructor method call parent 
            the this .grade = grade; 
        } 

        myGrade () { 
            the console.log ( 'the I We are at grade '+this.grade)
        }
    }

    var xiaohua = new PrimaryStudent('小华',1);
    xiaohua.hello();
    xiaohua.myGrade();

//Hello, 小明!
//Hello, 小华!
//I am at grade 1

 

yield

function * Fibonacci () { 
    the yield . 1 ; 
    the yield 2 ;
     return 2 ; 
} 

var IT = Fibonacci (); 
the console.log (IT);         // "Generator {}" 
the console.log (it.next ()); // . 1 
the console.log (it.next ()); // 2 
the console.log (it.next ()); // undefined 


var ITT = Fibonacci ();
 // and the return value is not for Itrrator .. .of the cycle, the extension will not be traversed 
for ( var per of ITT) { 
    the console.log (per); 
} 

//fibonacci {<suspended>}
// {value: 1, done: false}
// {value: 2, done: false}
// {value: 2, done: true}
// 1
// 2

function * foo(){
    yield 0;
    yield 1;
}

function * bar(){
    yield 'x';
    yield* foo();
    yield 'y';
}
for(let v of bar()){
    console.log(v);
}

//x
//0
//1
//y