ES6基础知识1

数组对象 

1.forEach
      代替es5中的for循环
2.map
     循环遍历原数组 遍历的过程中对每个元素进行操作 最后返回一个新的数组
3.filter
     按照条件过滤返回值为True的元素 同时返回一个新的数组
4.find
    匹配到第一个元素的时候就不会继续循环后面的其他元素 只返回一条记录
5.every

   every方法 返回的是个boolean值     判断当前数组中的所有元素必须全都满足条件才返回True

   一旦在某个位置返回False 就不会继续往下循环

6.some

   返回的是个boolean值       数组中只要有任意一个元素满足条件就返回True

   一旦在某次返回True 就不会继续循环处理

7.reduce

   reduce函数是可以用来代替foreach和map函数的

var colors=['red','blue','green'];
//es5
for(var i=0; i< colors.length;i++)
{
  //console.log(colors[i]);
}

//es6
colors.forEach(function(color){
    //console.log(color);
}); 

var numbers=[1,2,3,4,5];
var sum=0;
numbers.forEach(function(number){
   sum+=number;
});

//console.log(sum);

//map 返回一个新的数组
var nums=[1,2,3];
var nums2=[];

//es5
for(var i=0;i<nums.length;i++)
{
 // nums2.push(nums[i]*2);
}
//console.log(nums2);

nums2=nums.map(function(num){ return num*2});
//console.log(nums2);


var cars=[{model:'bk',price:'cheap'},{model:'cc',price:'gui'}];
var prices = cars.map(function(car){ return car.price});
//console.log(prices);

var products=[{
   name:"aaa",type:'abb'
},{
  name:'bbb',type:"bbc"
},{
  name:'ccc',type:'abb'
},{
  name:'ddd',type:'bbc'
}];

var pros=products.filter(function(pro){ return pro.type=='abb'});
//console.log(pros);

var users=[
  {name:'aa'},
  {name:'aa',id:'2'},
  {name:'bb'},
  {name:'cc'}
];
console.log(users);
var re=users.find(function(user){ return user.name=='aa';});
console.log(re);

View Code

var computers =[
   {name:"Apple",ram:16},
   {name:"IBM",ram:4},
   {name:"Acer",ram:32}
];

//some方法 返回的是个boolean值
 //数组中只要有任意一个元素满足条件就返回True
var res = computers.some(function(computer){
   return computer.ram >30;
});
//console.log(res);
//every方法 返回的是个boolean值
 //判断当前数组中的所有元素必须全都满足条件才返回True
//every 一假及假 一旦在某个位置返回False 就不会继续往下循环
//some  一真及真 一旦在某次返回True 就不会继续循环处理
//都只循环最小次数提高程序执行效率

var res2=computers.every(function(computer){
   return computer.ram > 30;
});

//console.log(res2);

//reduce函数是可以用来代替foreach和map函数的

var numbers=[10,20,30];
var sum=0;
for(var i=0;i<numbers.length;i++)
{
  sum +=numbers[i];
}
//console.log(sum);
var res=numbers.reduce(function(sum2,number){
  return sum2+=number;
},0);

console.log(res);

var primaryColor=[
   {color:'red'},
   {color:'yellow'},
   {color:'blue'}
];

var colors=primaryColor.reduce(function(prevs,color)
{
   prevs.push(color.color);
   return prevs;
},[]);
console.log(colors);

View Code

 

定义变量的方式

     let和var的区别

     let定义的变量有块级作用域和后台语言定义变量的语法一致

 

模板字符串

    定义语法``              代替es5中复杂的字符串拼接语法

 

箭头函数

    1.减少函数代码量   

    2.改变函数中this的指向        箭头函数中的this指向的是最近父级函数中this不为undefined的this对象

//let和var的区别
//let定义的变量有块级作用域和后台语言定义变量的语法一致

//定义语法``
let element = '<h1>hello world</h1><p>Es6</p>';
let element2=`aaaa
bbbb ${element}
ccc`


//箭头函数
  //1.可以缩减代码
  //2.改变this的指向

const double =function(number)
{
  return number * 2;
}
console.log(double(2));

const double2 = (number) => {
  return number * 2;
}

const double3 =(number) => number *2;

const team ={
   members:['herry','elyse'],
   teamName:'es6',
   teamSummary:function(){
      return this.members.map()
   }
}

View Code