ES6(二)

5.iterable

Map

遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,Array、Map和Set都属于iterable类型
具有iterable类型的集合可以通过新的for … of循环来遍历

var a = ['A', 'B', 'C'];
for (var x of a) { // 遍历Array(Set与Map相同)
alert(x);

for … in循环它遍历的实际上是对象的属性名称。
for…of 用于遍历一个迭代器,如数组
一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性
当我们手动给Array对象添加了额外的属性后,for … in循环会将给Array添加的属性一起遍历

let map = new Map();
    map.set('a','apple');
    map.set('b','orange');
//值
    for(let val of map.values()){
        console.log(val);//apple orange 
    }
//键
    for(let key of map.keys()){
        console.log(key);   //a  b
    }
//键--值
    for(let [key,value] of map.entries()){
        console.log(key,value);   //a apple   b orange 
    }

rest

rest参数只能写在最后,前面用…标识,传入的参数先绑定多余的参数以数组形式交给变量rest,所以,不再需要arguments我们就获取了全部参数。

 function func(a,b,...rest){
        console.log('a = ' + a );  //a = 1
        console.log('b = ' + b );  //b = 2
        console.log(rest);         //Array[3,4,5,6]
        }
func(1,2,3,4,5,6);

6.Reduce

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上,它必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算
文字说太多都不好理解,直接上代码

var arr = [1, 3, 5, 7, 9];
  arr.reduce(function (x, y) {
    return x + y;
    });     // 25
var arr = [1, 3, 5, 7, 9];
  arr.reduce(function (x, y) {
  return x * 10 + y;
});      // 13579

7.generator

generator跟函数很像,和函数不同的是它用function*()来定义
调用generator对象有两个方法
一是不断地调用next()方法:
value就是yield的返回值,done表示这个generator是否已经执行结束了。
为true时value就是return的返回值,并且generator对象就已经全部执行完毕,不要再继续调用next()了

/*生成器*/
function* chef(foods){
    for(var i = 0;i<foods.length;i++){
       yield foods[i];
       }
    }
let hh = chef(['tomato','egg']);
    console.log(hh.next());
    //Object { value: "tomato", done: false }
    console.log(hh.next());  
    //Object { value: "egg", done: false }
   console.log(hh.next());  
    //Object { value: undefined, done: true }

第二个方法是直接用for … of循环迭代generator对象,这种方式不需要我们自己判断done:

for (var x of fib(5)) {
console.log(x);} // 依次输出0, 1, 1, 2, 3

generator看上去像一个函数,它就可以一次返回一个数,不断返回多次
函数只能返回一次,必须返回一个Array。

8.filter

filter用于把Array的某些元素过滤掉,然后返回剩下的元素,和map()类似,Array的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;
        });
        alert(r);   //1,5,9,15
var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
   return s && s.trim();
   });         // 注意:IE9以下的版本没有trim()方法
   alert(arr); // ['A', 'B', 'C'] 把数组中的空字符串删掉

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;});

9.class

class的目的就是让定义类更加简单我们先回顾用函数实现Student的方法:

function Student(name) { 
   this.name = name; 
   } 
   Student.prototype.hello = function () {
   alert('Hello, ' + this.name + '!');
   }

如果用新的class关键字来编写Student,可以这样写:

class Student { constructor(name) {
   this.name = name; } 
   hello() {
  } 
  }

用class定义对象的另一个巨大的好处是继承更方便了。
我们从Student派生一个PrimaryStudent需要编写的代码量。现在,原型继承的中间对象,原型对象的构造函数等等都不需要考虑了,直接通过extends来实现

class PrimaryStudent extends Student { 
   constructor(name, grade) { 
   super(name); 
   // 记得用super调用父类的构造方法! 
   this.grade = grade; } 
   myGrade() { 
   alert('I am at grade ' + this.grade);
   }
  }

ES6引入的class和原有的JavaScript原型继承的去区别,
实际上它们没有任何区别,class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之,用class的好处就是极大地简化了原型链代码。
其实对于原型链我自己学得也不是很懂,所以还需好好看看……

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值