步坦协同（前后端协同开发）之前端总结

后端最常用的####

本人是专注于后端开发的开发人员，所以对于前端熟练度较为一般。基本知道前端怎么处理，毕竟编程语言都是相近趋同的。

一、请求发起

情景一

Ajax-JSON请求

参数实体

@Data
@EqualsAndHashCode(callSuper = true)
@Accessors(chain = true)
@ApiModel(value="ObjectVO 对象")
public class ObjectVO implements Serializable {
    
    @ApiModelProperty(value = "column")
    @TableField("column")
    private String column;

    private List<Mapping> mappingList;

}

 后端接口

    @PostMapping("/add")
    public Resp add(@RequestBody ObjectVO entity)

                        var main = {};
                        main.id = "";
						var tempSnowflake = new Snowflake(1, 1, 0);

						//一对多
						var  data = that.tableData;
						for(var i = 0; i<data.length; i++){
							var referenceId = tempSnowflake.nextId();
							data[i].id = id;
						}
						main.dataList= data;

						$.ajax({
							type : "POST",
							url : baseURL+"update",
							data : JSON.stringify(main),
							contentType : "application/json",
							dataType : "json",
                            async: false,//false时是同步的
							success: function (data) {

							},
							complete:function(msg) {

							}
						});

 情景二

    @PostMapping("/delete")
    public Resp delete(@RequestParam(value = "ids[]")String[] ids)

var ids= [];
if(dataSelection && dataSelection.length > 0){
	$.each(dataSelection,function(i,e){
		ids.push(e.id);
	});
}				
$.post(baseURL+"delete",{"ids":ids},function(data){

});

二、循环处理

1.for循环

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

for(var i = 0; i<data.length; i++){
	var id = data[i].id;
}

2.foreach循环

遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE

//1 没有返回值
arr.forEach((item,index,array)=>{
    //执行代码
})
//参数：value数组中的当前项, index当前项的索引, array原始数组；
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；

 

3.map循环

有返回值，可以return出来map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

arr.map(function(value,index,array){
 
　　//do something
　　return XXX
})

var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,ary ) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]；  原数组并未发生变化

4.forof遍历 

for (var value of myArray) {
console.log(value);
}

三、数组操作

1.filter过滤

var list= that.operaOpt.filter(item => item.value == 'x');

//ES5
arr.filter(function (item) {
  return item.done;
});

 2.find( ) 方法

查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

findIndex( )

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3 
// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined

3.push 、 pop、unshift、 shift

push:将一个或者更多的参数添加在数组的尾部,返回添加后的数组的长度，原数组发生改变

var arr=[1,2,3,4];
var a=arr.push(9,8,7);
console.log(a,arr);//1,2,3,4,9,8,7；

unshift( )方法：

将一个或者更多的参数添加在数组的头部；返回添加后的数组的长度，原数组发生改变。

var arr=[1,2,3,4];
var a=arr.unshift(9,8,7);
console.log(a,arr);//9,8,7,1,2,3,4；

pop( )方法：从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。

var arr=[1,2,3,4];
var a=arr.pop();
console.log(a,arr)//4；1,2,3，

 shift( ) 方法：从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。

var arr = [1,2,3,4];
var a = arr.shift();
console.log(a,arr)//1；2,3,4，

array.slice(start, end)

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
console.log(citrus )//Orange,Lemon

array.splice(index,howmany,item1,…,itemX)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
console.log(fruits )//Banana,Orange

reverse( )方法：用于颠倒数组中元素的顺序。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits)//Mango,Apple,Orange,Banana

sort( ) 方法：用于对数组的元素进行排序。

var Array = [1,2,3,4,5];
var fruits = Array.sort(function(a,b){
	//return a - b; //从小到大
	return b-a; //从大到小
})

join( ) 方法：于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的。

var arr = [1,2,3,4]
var bbc = arr.join()
console.log(bbc)//1,2,3,4

concat( ) 方法：属于字符串的方法，数组也可以用

var arr = [1,2,3,4];
arr.concat([5,6,7])//[1,2,3,4,5,6,7]

indexOf（）

var arr = [1,2,3,4];
arr.indexOf(1) // 0
arr.indexOf(5) // -1 

every()/some()

四、简单数组处理方法

1.去重

//联合属性-去除重复表
for(var i = 0; i<data.length; i++){
	    var tableName1 = data[i].sysId + data[i].usrId + data[i].tblId
  
		for(var j=i+1; j<data.length; j++){
			var tableName1 = data[j].sysId + data[j].usrId + data[j].tblId

					if(tableName1 ==tableName2 ){
						data.splice(j,1)
						j--
					}

		}
}

2.根据组编号-子元素归队