记录开发常用javascripts函数----持续补充

记录日常开发中常用的JavaScript函数和使用

操作数组

• 在数组最前面添加元素，返回新的长度

arrayObject.unshift(newelement1,newelement2,....,newelementX)

• 在数组后面添加元素，返回新的长度

arrayObject.push(newelement1,newelement2,....,newelementX)

• 根据指定下标删除数组中数据

this.says.splice(下标,指定删除条数);

• 筛选数组符合条件内容

		//会将每个都过滤一遍，数组中每个元素都调用函数进行过滤
		Array.filter(function(item){
	     	return 过滤条件（比如：item>=3）;
	     })
	     * Array：数组
	     * item：每次取到的数组元素，
	    //第二种用法
	    Array.filter(item=>item>=3)//效果一样，肯定用这个啦(ES6中扩展的lambda表达式，箭头函数)

• 遍历数组

	Array.forEach(function(item,index){
     	return “下标：”+index+“元素值”+item
   	})
   	//箭头函数形式
    this.items.forEach(item=> “元素值”+item);

数组计算函数

Array.reduce(function(total,item){
	if(item.flag==true) return total+1;
	else return total;
},functionItem)
* total：初始值和返回值，默认Object，在整个执行过程中，值不会丢失
* item：当前数组元素
* functionItem：回调函数初始值，初次调用将值赋值给total，之后不会作用
* 回调函数执行次数和数组元素数量相同，functionItem会在第一次调用时赋值给total，total会根据函数体做出相应改变，最终total是整个函数返回值
return this.items.reduce((total,item)=>item.flag==true?total+1:total,0);

鼠标事件

@mousedown:当用户单击鼠标按钮而元素有焦点时触发。
@mousemove:当鼠标移动而指针指向元素时触发。
@mouseout:当鼠标指针离开元素时触发。
@mouseover:当鼠标指针移动到元素上时触发。
@mouseup:当元素有焦点时，用户释放鼠标按钮时触发。
@mousewheel:当用户旋转鼠标滚轮而元素有焦点时触发。
@mouseenter:当鼠标指针进入元素时触发。
@mouseleave:当鼠标指针离开元素时触发。

移动端触摸滑动事件

touchstart事件：当手指触摸屏幕时候触发

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：触摸结束时触发。
touchcancle事件：触发意外中断

键盘事件

keyup.enter//回车事件，
@keyup.enter.native//vue需要这样用，.native表示不是自定义事件，而是系统事件

操作本地文件（来源于菜鸟教程）

• 使用Js原生函数Window localStorage 属性
  localStorage 可以创建一个本地存储的 name/value 对

保存数据语法：
window.localStorage.setItem("key", "value");
读取数据语法：
var lastname =window.localStorage.getItem("key");
删除数据语法：
window.localStorage.removeItem("key");

操作Json（来源于菜鸟教程）

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

JSON.parse(text[, reviver])
		参数说明:
		text:必需， 一个有效的 JSON 字符串。
		reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

语法
JSON.stringify(value[, replacer[, space]])
参数说明：

value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。

replacer:
可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

获取dom节点，和一些操作

/*获取页面中class="example"的节点*/

	var x = document.querySelector(".example");

/*获取页面中所有class=“example”的节点，返回一个数组*/

var x = document.querySelectorAll(".example");

/*获取y节点中所有div节点，返回一个数组*/

var x = y.querySelectorAll('div');

/*获取y节点中所有class="router"的div节点，返回一个数组*/

var x = y.querySelectorAll('div.router');

/*获取x节点中第一个子节点*/

var y = x.firstChild

/*获取x节点中最后一个子节点*/

var y = x.lastChild

/*精确拷贝x节点，包括属性*/

var y=x.cloneNode(true)；

/*在x节点内部末尾插入节点y*/

x.appendChild(y)

/*在x节点内部的子节点y的前面插入一个节点z*/

x.insertBefore(z,y);  

获取x节点的宽度

x.offsetWidth

动态添加事件为 <button> 元素添加点击事件。 当用户点击按钮时，在 id="demo" 的 <p> 元素上输出 "Hello World" :

document.getElementById("myBtn").addEventListener("click", function(){
	    	document.getElementById("demo").innerHTML = "Hello World";
	});

操作class，添加元素等

for(let i =0;i<a_all.length;i++){
	a_all[i].classList.remove("active_a");//移除class某项
}

setTimeout(function(){
	a_all[page+1].classList.add("active_a");//添加class某项
},20)

//操作子节点
let c_s_dl_childNodes = c_s_dl.childNodes;//获取容器所有子节点
				
if(index == 0){//如果是点击根层级，清除根层级以外所有子层级
	for(let i = c_s_dl_childNodes.length-1;i >= 1;i--){//倒着删，因为删一个length都会变化，这里删除所有不会影响
		c_s_dl.removeChild(c_s_dl_childNodes[i])
	}
}

let dl = document.createElement("dl");//创建一个dl节点

a.innerHTML=cloneData[i].title+"";//为a标签中添加内容

dl.appendChild(dd);//dd添加到dl

判断类型

isNaN(value) //判断一个值是否为数字，会将null，空格，空串当成0处理，如果是数组返回true
typeof value === 'number' //判断一个值是否是只等类型
parseFloat(val).toString() == "NaN" //判断一个值是否为NaN，如果是，它不是字符串

获取视口尺寸

一、pc端，只有一个视口，它会随着你的放大缩小而改变，影响布局
	document.documentElement.clientWidth //获取视口宽度
	document.documentElement.clientHeight//获取视口高度
二、移动端（以下都是获取宽度，获取高度将Width换成Height即可）
	//布局视口，移动端，无论你怎么放大缩小，这个视口的大小永远不变
	var layout = document.documentElement.clientWidth;//layout(布局视口)的宽度，没有兼容性问题
	var visual = window.innerWidth;//visual(视觉视口)的宽度，接近全部支持
	var dream = screen.width;//一半代表理想视口的宽度，一半代表设备的分辨率! !有很大的兼答性问题

前后端使用数组批量删除

    @ApiOperation("批量删除菜单")
    @DeleteMapping("/ids")
    public Result deleteRoleList(String ids){
        System.out.println(ids);
        String[] split = ids.split(",");
        if(ddMenuService.removeByIds(Arrays.asList(split.clone()))){
            return Result.ok().message("删除成功");
        }
        return Result.error().message("删除失败");
    }

//arr.join(',')可以将数组[1,2,3,4]搞成，'1,2,3,4'
//传参时，前后端参数名ids要一致
deleteMenuList({ids:arr.join(',')})