Vue进阶（幺叁贰）：ES数组操作：数组合并

1. ES5中concat合并数组

var array_1 = ['reese','root','fusco'];
//["finch", "shaw", "bear", "reese", "root", "fusco"]
var array_2 = ['finch','shaw','bear'].concat(array_1);

  

 

  
1
  
2
  
3
 

这样就实现了2个数组的合并。

2. ES6中拓展符...合并数组

var array_1 = ['reese','root','fusco'];
//["finch", "shaw", "bear", "reese", "root", "fusco"]
var array_2 =['finch','shaw','bear',...array_1];

  

 

  
1
  
2
  
3
 

ps: ...运算符在ES6默认参数中也有用到。

注：Vue中es5和es6语法区别

1. 对象写法
   es5中对象： {add:add,substrict:substrict}
   es6中对象： {add,substrict}

2. 在对象中方法写法
   es5中对象： {add:function(){},substrict:function(){}}
   es6中对象： {add(){},substrict(){}}

3. 对象导出写法
   es5两种形式：

• module.exports = fucntion (){};

• exprots.add = fucntion (){};

  es6中写法：
  写法1：

  export default{ add(){}
  }
  
      
  
     
  
      
  1
      
  2
      
  3
     

  2、export fucntion add(){} 相当于将add方法当做一个属性挂载到exports对象上。

4. 对象的导入
   es5: var add = require('./calc.js');
   es6:
   如果导出的是：export default{ add(){}}
   那么可以通过 import obj from './calc.js'

如果导出的是：

	// 写法一
	export fucntion add(){} 
	export fucntion substrict(){} 
	export const PI=3.14 // 写法二
	var m = 1;
	export {m};
	// 写法三
	var firstName = 'Michael';
	var lastName = 'Jackson';
	var year = 1958;
	export {firstName, lastName, year};

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

那么可以通过按需加载 import {add,substrict,PI} from './calc.js'

5. es6中箭头函数写法

   //需求：利用函数实现倒序排列
   [2,1,3].sort(function(x,y){return y - x;});
   
   //用箭头函数实现 =>读 goes to
   [2,1,3].sort((x,y)=>{return y - x;});
   [2,1,3].sort((x,y)=> {x++;y++; y - x;});
   [2,1,3].forEach(x=> {console.log(x)});
   
       
   
      
   
       
   1
       
   2
       
   3
       
   4
       
   5
       
   6
       
   7
      

附 更多数组操作方法

• 《Vue进阶（五十七）：ES数组操作：find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()》

• 《Vue进阶（五十九）：ES数组操作：使用splice方法实现数组中删除、替换、增加指定元素》

• 《Vue进阶（八十）：ES数组操作：push、pop、shift、unshift、splice、delete、concat、split、sort、reverse、slice、map等》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/106793143