ES6学习——数组方法

ES6与javaScript的关系

ECMAScript是javaScript的标准（语法规范），JavaScript用于遵循这个规范。
部分浏览器没有支持ES6的语法，如果他不知道，我们可以用babel进行转换。

ES6中的数组方法

ES6中的数组方法有：forEach、map、filter、 find、 every、 some 、reduce等
下面将对其与ES5语法进行对比学习：

forEach

var color =['red','blue','yellow'];
 //ES5遍历数组
 for(var i=0;i< color.length;i++){
   console.log(color[i]);
 }

 //ES6  foreach
 color.forEach(function(color){
   console.log(color);
 });

 //遍历数组里的值
 var numbers=[1,4,2,5,7]
 var sum=0;
numbers.forEach(function(number){
   sum+=number
 });
 //遍历数组里的值
 var numbers=[1,4,2,5,7]
 var sum=0;
 numbers.forEach(function(number){
 sum+=number
 });

filter

/*
*假定有一个对象数组A，获取数组中的指定类型的对象放到B数组中
* 过滤：filter
 */

 var products= [
     {name:"cucumber",type:"vegetable"},
 {name:"banana",type:"fruit"},
  {name:"celery",type:"vegetable"},
   {name:"orange",type:"fruit"},
]
 //ES5
 var filteredProducts=[];
  for(var i=0;i<products.length;i++){
   if(products[i].type ==="fruit"){
      filteredProducts.push(products[i]);
   }
 }
 console.log(filteredProducts);
 //ES6
 var  filtered2=products.filter(function(product){
   return product.type ==="vegetable";
 })
 console.log(filtered2);

/*
*假定有一个对象数组A，获取数组中的指定类型的对象放到B数组中
* 过滤：filter
 */

var products= [
  {name:"cucumber",type:"vegetable",quantity:0,price:1},
  {name:"banana",type:"fruit",quantity:8,price:10},
  {name:"celery",type:"vegetable",quantity:3,price:3},
  {name:"orange",type:"fruit",quantity:8,price:8},
]

products = products.filter(function(product){
  return product.type === "vegetable"
  && product.quality > 0
      && product.price < 10
})
console.log(products);
/*
*假定有两个数组（A,B）,根据A中的Id值，过滤掉B数组中不符合的数据
*
 */
var post={id:4,title:"java"}
var comments=[
  {postId:4,content:"javavaaa1"},
  {postId:2,content:"javavaaa3"},
  {postId:3,content:"javavaaa5"},
  {postId:4,content:"javavaaa7"},
]
function f(post,comments) {
  return comments.filter(function(comment){
    return comments.postId ===post.id;
  })

}
console.log(f(post,comments));

find

/*
*假设有一个对象数组，找到符合条件的对象
 */
var users = [
  {name:'liya'},
  {name:'lucy',id:2},
  {name:'bob'},
  {name:'lucy'},
]

//ES5
var user;
for(var i= 0;i<users.length;i++){
  if(users[i].name === 'lucy'){
    user=users[i];
    break;//找到结果后退出
  }
}
console.log(user);

//ES6 find
//优点：当程序执行到我们所想要的v结果时，他便不会在去执行
user = users.find(function (user) {
  return user.name === 'lucy'
})
console.log(user);

/*
*个顶一个数组，根据指定对象的条件找到数组中符合条件的对象
*
 */
var posts=[
  {id:1,title:"11111"},
  {id:2,title:"33333"}
];

var comment ={postId:1,content:"helloWorld"};

function postForComment (posts,comment) {
  return posts.find(function(post){
    return post.id === comment.postId;
  })
}

console.log(postForComment(posts,comment));

reduce

/*
*计算数组中所有值的总和
* reduce 函数拥有两个参数第一个参数必须进行初始化
 */
var numbers = [20,50,70]
var sum=0
//ES5
for(var i= 0;i<numbers.length;i++){
  sum+=numbers[i]
}
console.log(sum);

//es6
 var sumValue = numbers.reduce(function(sum,number){
  return sum+number;
},0)
console.log(sumValue);

/*
*数组中的对象中的某一个属性抽离到另外一个数组中去

 */
var primaryColors=[
  {color:'red'},
  {color:'yellow'},
  {color:'blue'},
  {color:'pink'}
]
var colors = primaryColors.reduce(function(privies,primaryColor){
  privies.push(primaryColor.color);

  return privies;
},[])

console.log(colors);

/*
*判断字符串中的括号是否对称
 */
function banlance(String){
return !String.split("").reduce(function(previous,char){
  if(previous<0){return previous}
if(char === "(") {return ++previous}
if(char ===")") {return --previous}
return previous
},0)

}

console.log(banlance("()(())"))

模板字符串

模板字符串[单引号]可以解决我们在书写在拼接字符串中出现拼接错误的问题。
在我们的模板字符串里面无需进行代码的拼接，我们只需要在模板字符串里面按照正常的结构来书写我们的代码，也可调用我们所需要调用的方法变量等。

模板字符串：`    `

举个列子：

let name='lucy'
let telement =
  `
  <h1>hello word</h1>
    <h1>hello ${name}</h1>
  <p>五月份要加油啊有，冲啊啊啊啊啊啊啊啊</p>
  <ur>
  <li>1</li>
    <li>2</li>
      <li>3</li>
        <li>4</li>
</ur>
  `;
document.getElementById('telement').innerHTML =telement

增强对象字面量

能解决的问题：缩减代码

function creatbookShop(inventory){
  return {
    inventory:inventory,
    inventoryValue:function(){
      return this.inventory.reduce((total,book) => total+book.price,0);
    },
    priceForTitle:function(title){
     return this.inventory.find(book => book.title ===title).price;
    }
  }
}

const inventory=[
  {title:"vue",price:13},
  {title:"javaScript",price:12}
];

const bookshop =creatbookShop(inventory);
console.log(bookshop.inventoryValue());
console.log(bookshop.priceForTitle("vue"));

spread operator 展开运算符

优点:更快，更便捷的操作数组。
展开运算符（spread）是三个点（…）,可以将可迭代对象转为用逗号分隔的参数序列

// function addNumbers(q,e,b,h) {
//   var numbers= [q,e,b,h]
//   return numbers.reduce((sum, number) => {
//     return sum + number
//   }, 0)
// }
//
// console.log(addNumbers(1,4,6,8,9));
/*
*用法一：
 */
function addNumbers(...numbers) {
  //var numbers= [q,e,b,h]
  return numbers.reduce((sum, number) => {
    return sum + number
  }, 0)
}

/*
*用法二：替代push的操作
 */
var defaultColor = ["red","pink"]
var favorColor = ["black","blue"]
//concat
//defaultColor = defaultColor.concat(favorColor);
//console.log(defaultColor);
console.log([...defaultColor, ...favorColor]);

var fallColor = ["red","yellow"]
console.log([...defaultColor, ...favorColor,...fallColor]);