【ES6】map、reduce、filter、sort、箭头函数、class继承、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

这个函数必须接受连个参数，reduce()把结果继续和序列的下一个元素做累积计算

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)

//结果是25

filter

和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false 决定 保留还是丢弃该元素

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接受的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接受另外两个参数，表示元素的位置和数组本身

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

这是因为Array的sort()方法默认把所有元素先转换成String再排序，结果‘10‘排在‘2‘的前面，因为字符‘1‘比字符‘2‘的ASCII码小。

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()方法会直接对Array进行修改，它返回的结果仍是当前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? 因为它的定义用的是一个箭头：

x => x * x;

上面的箭头函数等同于

function (x){
      return  x * x;
}

我们还可以这样使用

//两个参数:
(x,y) => x * x + y * y

//无参数
() => 3.14

//可变参数：
(x, y, ...rest) => {
       var i, sum = x + y;
       for(i=0;i<rest.length; i++){
            sum += rest[i]
     }
      return sum;
}

如果要返回一个对象

x => ({ foo: x})

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数的内部的this是词法作用域，由上下文确定。

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继承

    class Student {
        constructor(name){
            this.name = name;
        }
        hello() {
            console.log(‘Hello, ‘ + this.name + ‘!‘ )
        }
    }
    var xiaoming = new Student(‘小明‘);
    xiaoming.hello();

    class PrimaryStudent extends Student {
        constructor(name,grade){
            super(name); //记得用super调用父级的构造方法
            this.grade = grade;
        }

        myGrade(){
            console.log(‘I am at grade ‘ + this.grade)
        }
    }

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

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

yield

function * fibonacci(){
    yield 1;
    yield 2;
    return 2 ;
}

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

var itt = fibonacci();
//而且Itrrator的return的值不会被for...of循环到，也不会被扩展符遍历到
for(var per of itt){
    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

原文地址：https://www.cnblogs.com/tommymarc/p/12100045.html