Vue使用日常记录
1、截取字符串
（1）slice(start,[end])
//用slice删除字符串前几位字符，和删除最后一个字符 this.allId = this.allId.slice(0,this.allId.length - 1); //删除最后一个字符串 this.allId = this.allId.slice(4); //删除前四个 this.allId = this.allId.slice(-4); //删除后四个
（2）substring(start,[end])
this.allId = this.allId.substring(0,this.allId.length - 1); //删除最后一个字符串
（3）substr(start,[length])
2、JS替换指定字符
（1）split("XX")：切割字符串，返回数组
（1）replace()：替换字符串中第一个指定字符（只能替换第一个）
str.replace("Item",""); //只能替换第一个Item
想要全部替换的办法：使用正则（单纯替换字母可以）
str.replace(/Item/g,""); //结合正则表达式，“/xxx/g”，xxx为指定字符
//类似于replaceall的方法，js里面没dao有单独的replaceall方法但是用正则实现replaceall,写法就是values.replace(/你要替换成的新字符串/g, "老的字符串");当然替换成“”就是去掉为空了
3.JS多个条件判断
目的：判断变量是否在数组中存在
// （1）对象序列(Object) 推荐使用这一种 var obj = {'CJ':'成交', 'WCJ':'未成交'}; if (key in obj) { // …… } // （2）数组序列(Array) var array = ['CJ', 'WCJ']; if ($.inArray(value, array) != -1) { // …… } if (array.indexOf(value) != -1) { // …… }
4-1.判断字符串中是否包含某个字符串
（1）方法一: indexOf() (推荐)
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
var str = "123"; console.log(str.indexOf("3") != -1 ); // true
（2）方法二: search()
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。
var str = "123"; console.log(str.search("3") != -1 ); // true
（3）方法三:match()
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
var str = "123"; var reg = RegExp(/3/); if(str.match(reg)){ // 包含 }
4-2.判断数组中是否包含某个值
（1）array.indexOf
此方法判断数组中是否存在某个值，如果存在，则返回数组元素的下标，否则返回-1。
var arr=[1,2,3,4]; var index=arr.indexOf(3); console.log(index);
（2）array.includes(searcElement[,fromIndex])
此方法判断数组中是否存在某个值，如果存在返回true，否则返回false
var arr=[1,2,3,4]; if(arr.includes(3)) console.log("存在"); else console.log("不存在");
（3）array.find(callback[,thisArg])
返回数组中满足条件的第一个元素的值，如果没有，返回undefined
var arr=[1,2,3,4]; var result = arr.find(item =>{ return item > 3 });
（4）array.findeIndex(callback[,thisArg])
返回数组中满足条件的第一个元素的下标，如果没有找到，返回-1
var arr=[1,2,3,4]; var result = arr.findIndex(item =>{ return item > 3 });
5.字符串转Json
（1）字符串转Json对象
var obj = JSON.parse(str); //方法一 var obj = str.parseJSON(); //方法二 var obj = $.parseJSON(data); //方法三 var obj = eval('(' + str + ')'); //方法四
然后，就可以这样读取：Alert(obj.name);
注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）
（2）JSON对象转JSON字符串
var last=JSON.stringify(obj); //方法一 var last=obj.toJSONString(); //方法二
注意：使用JSON.parse时，返回来的数据一定是严格的json格式，key值一定要用【双引号】包起来，否则浏览器会抛出异常。
另外，对于不标准的json字符串，如第一种示例，使用eval()虽然可以正常解析，但是从安全的角度来讲，一定要谨慎使用eval方法。规范json格式。
1、jQuery插件支持的转换方式：
示例：
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
2、浏览器支持的转换方式(Firefox，chrome，opera，safari，ie)等浏览器：
示例：
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。
3、Javascript支持的转换方式：
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
4、JSON官方的转换方式：
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
-------
（19）JSON.stringify()
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
语法：JSON.stringify(value[, replacer[, space]])
参数说明：
value:必需， 要转换的 JavaScript 值（通常为对象或数组）。
replacer:可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
6.div控件中元素操作
（1）循环遍历div下的所有元素
var nodes = $("table.form input"); for (var i = 0; i < nodes.length; i++) { var hid = nodes[i].id; if ($("#" + hid).val().length <= 0 && hid != "ContractId" && hid != "B_6") { ValidationMessage($("#" + hid), "不能为空！") return false; } } //JS选中除某个元素外的其他元素 使用jQuery 遍历中的 not() 方法 $("div.content *").not(".keep"); // 表示content类的div下除keep类以外的所有元素
（2）选中除某个以外控件
$("div.content *").not(".keep");
7.删除数组中的指定元素
var index = RemarkList.indexOf(data.Remark); //获取元素所在的位置 if (index > -1){ //结合索引和splice()方法 this.splice(index, 1); }
参考地址：https://www.cnblogs.com/mmzuo-798/p/7551917.html
8.JS中的日期处理
（1）获取当前日期
var date = new Date(); date.getFullYear() /getMonth() /getDate() //年月日 date.getDay()/.getMinutes()/getSeconds() //星期几； //获取yyyy-mm-dd字符串的值代码如下： var date = new Date("你需要的日期例如：2015-10-1"); var mon = date.getMonth() + 1; var day = date.getDate(); var nowDay = date.getFullYear() + "-" + (mon<10?"0"+mon:mon) + "-" +(day<10?"0"+day:day); //mon变量就是月份；day变量就是日子；变量nowDay就是输出的yyyy-mm-dd格式的日期字符串。 //(mon<10?"0"+mon:mon)当月份小于10月的时候就会在月份前加0； //(day<10?"0"+day:day)当日子小于10号时会在前加0； //date.getFullYear()就是年份；输出nowDay就会获得想要的日期字符串了。
（2）dateTime加一年
//起始日期如果是2012.1.1,则结束日期是2012.12.31 //起始日期如果是2012.1.2,则结束日期是2013.1.1，以此类推。 //实现： var d1=new Date("2012/01/1"); var d2=new Date(d1); d2.setFullYear(d2.getFullYear()+1); d2.setDate(d2.getDate()-1); alert(d2.toLocaleString());
9.向json数组中添加数据
（1）往数据里添加json字符串
var arr = [] var json = {"name":"chao","sex":"男"} arr.push(json) console.log(arr) //结果：[{"name":"chao","sex":"男"}]
（2）往数组的json字符串里新增数据
var j =[{"name":"chao","sex":"男"}]; j[0].age='18' console.log(j) //结果：{name: "chao", sex: "男", age: "18"}
10.给 json对象添加属性的5种方式
var test={name:"wang",age:"12"};
（1） 直接 json对象 打点 属性添加
test.id = "12345"; //{ name : 'wang' , age : 12 , id : '12345' }
//例如：
var queryJson = $("#filter-form").GetWebControls();//获取form内所有控件内容
queryJson.LockMark = "1";
（2）json对象 ["属性"] 添加
test["id"] = "12345";
（3）newParam 添加
test.newParam = 'sex';//添加一个 sex属性: test.sex = '男''; console.log(test); //{ name : 'wang' , age : 12 , sex : '男' }
（4）使用 Object.assign() 函数
用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，然后返回目标对象。
※Object.assign(target, …sources)：目标对象有1个，后边可以有多个源对象。
※注意：Object.assign()是浅拷贝，执行该操作后目标对象自身会被改变。
浅拷贝：新对象赋值，只是取的旧对象栈中的值，也就是引用对象的值（当一个对象赋给另一个对象时，修改另一个对象的值会影响前一个对象的值）
深拷贝：会在堆里边开辟一个空间，存放自己的对象值
具有相同属性的对象，同名属性，后边的会覆盖前边的
var o1 = {a:1}; var o2 = {b:2}; var o3 = {c:3}; var obj = Object.assign(o1,o2,o3); console.log(obj);//{a: 1, b: 2, c: 3} //注意目标对象自身也会改变 (第一个参数为目标参数,其余不会变) console.log(o1);//{a: 1, b: 2, c: 3}
（5）使用 Jquery 的继承方法
a={'a':1};
b={'b':2};
c=$.extend(a,b)
//或者
c=$.extend({},a,b)
console.log(c); //{a: 1, b: 2}
11-1.Vue合并两个数组的方法
（1）jQuery中的merge()方法
$.merge() 函数用于合并两个数组内容到第一个数组。
$.merge( first, second ) //first Array类型 第一个用于合并的数组，合并后将包含第二个数组的内容 //second Array类型 第二个用于合并的数组，该数组不会被修改
注意：merge虽然是合并数组的方法，但是不能直接用merge，要写$.merge()。merge方法执行后直接返回a1，a1得到的是把a2合并到a1里的两个数组的数组，a2本身不发生变化
（2）concat()方法
arrC=arrA.concat(arrB)
11-2.Vue合并两个json的方法
var newJSON = Object.assign(param1,param2) 返回一个新对象= Object.assign(被追加的对象A,往A里追加的新对象) // 例如： 被追加的对象= { a: 1, b: 2 }; 所叠加的对象= { b: 4, c: 5 }; 返回的新对象= Object.assign(被追加的对象, 所叠加的对象); // 运行完毕后 被追加的对象 = { a: 1, b: 4, c: 5 } // 运行完毕后 返回的新对象 = { a: 1, b: 4, c: 5 } // 即：执行完毕后，newJSON和param1相同，都会是param1,param2的结合体。
参考：https://blog.csdn.net/qq_35641337/article/details/109677399
12.JS中<a>标签内文字修改
GFlag = GFlag == "P" ? "D" : "P"; var a = document.getElementById("lr-changegrid").innerText; document.getElementById("lr-changegrid").innerText = a == "切换到月" ? "切换到年" : "切换到月";
13.给input标签赋值
给input标签赋值时。要用$("#B_2").val(m);而不是$("#B_2").val=m；
//限制input只能输入数字： <input id="B_2" type="text" class="form-control" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')" >
14.外部调用的js文件写法
JS文件需注意：当会影响其他文件时，要把function XXXX()改成checkedRow = function XXX()
调用时定义一个变量接收，如var result=function XXX()即可实现调用
15.查找table中tr的数量
var files = $("#fileupload table").find("tr").length;
16.有关jqGrid
（1）通过点击获取当前行数据
ondblClickRow: function(rowid, iRow, iCol, e){ var rowData = $(grid_selector).jqGrid("getRowData", rowid); ... }
（2）jqgrid多选框
//1.方法开头定义
var selectedRowIndex = 0; //2.jqgrid中加入属性 multiselect: true, onSelectRow: function () { SelectRowIndx = GetJqGridRowIndx("#" + this.id); }, gridComplete: function () { $("#" + this.id).jqGrid('setSelection', SelectRowIndx); }
17.JSON动态赋值——当不知道属性名时
var queryJson = {}; var condition = $("#queryCondition").find('.dropdown-text').attr('data-value'); var keyword = $("#txt_Keyword").val(); queryJson[condition] = keyword;
18.获取select控件选中值
//控件： <select name="slTradingState" id="slTradingState" class="sui-select" style="width: 200px;"> <option selected="selected" value="">--请选择--</option> <option value="博内尔">博内尔</option> <option value="国(地)别不详">国(地)别不详</option> </select>
//取值： $("#slTradingState option:selected").text() //赋值： $("#slTradingState option:selected").text(“hello world”)
19.JS前端调用后台代码
注意点：1.方法前添加[WebMethod]; 2.必须生命static静态方法 3.jQuery.ajax 4.注意传参格式："{'str:'" + A + "}"
//前端： jQuery.ajax({ url: "ContractDetail.aspx/PostThreeC", data: "{'varchk3C':‘" + varchk3C + "’}", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { } });
//后台: [WebMethod] public static bool PostThreeC(string varchk3C) { var strsql = "update A_HKOut_m set is3C=1 where HKout_m_id in (" + varchk3C + ")"; DbHelperSQL.ExecuteSql(strsql); return true; }
20.当使用ajax提交数据调用Action报错：不存在所需的防伪表单字段“__RequestVerificationToken”
对应解决办法：
1.在提交的entity数据中添加["__RequestVerificationToken"]属性
2.在ajax参数中添加__RequestVerificationToken参数。
//JS代码： var entity = { Id: id, B_6: result }; entity["__RequestVerificationToken"] = $("[name=__RequestVerificationToken]").val(); $.ajax({ url: "/CustomsManage/CustomsBizLicence/SaveEntity", data: { entity: entity, __RequestVerificationToken: entity["__RequestVerificationToken"] }, type: "post", dataType: "json", async: false, success: function (data) { ReloadTableGrid(layui.table.cache.InspectionTable); } });
//调用的Action： [HttpPost] [ValidateAntiForgeryToken] [AjaxOnly] public ActionResult SaveEntity(CustomsBizLicenceEntity entity) { customsbizlicencebll.SaveEntity(entity); return Success("操作成功。"); }
21.URL地址中包含带有“#”等特殊字符的处理方法
如果在页面跳转参数中的参数包含“#”等特殊字符，需要先转换一下，转换方式是：
使用js的内置函数escape，escape会将“#”转换为“%23”；
在另外一个页面调用是再利用逆向函数unescape将“%23”转换为“#”；
22.indexOf() 方法
//indexOf() 方法的四种形式： public int indexOf(int ch): //返回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。 public int indexOf(int ch, int fromIndex): //返回从 fromIndex 位置开始查找指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。 int indexOf(String str): //返回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。 int indexOf(String str, int fromIndex): //返回从 fromIndex 位置开始查找指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。
23.JQuery获取勾选行的列值
function GetCheckListObject() { var ids = $("#gridTable").jqGrid('getGridParam', 'selarrrow') var res = []; if (ids.length > 0) { for (var i = 0; i < ids.length; i++) { res.push($("#gridTable").jqGrid('getRowData', ids[i])) } } return res; }
JavaScript push() 方法
JavaScript Array 对象
定义和用法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法:arrayObject.push(newelement1,newelement2,....,newelementX)
//newelement1 必需。要添加到数组的第一个元素。
//newelement2 可选。要添加到数组的第二个元素。
//newelementX 可选。可添加多个元素。
//注释：该方法会改变数组的长度。
提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。
24.placeholder属性
提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
//例子：
<input type="search" name="user_search" placeholder="请输入邮箱" />
25.将ViewBag的值传递给js变量
//后端： ViewBag.id=“张三”; //前端： var id = "@ViewBag.id";
//或者 var id='@ViewBag.id'
26.JS 页面之间传递json数据
一般情况下两个页面之间的简单的数据传递，可以通过url后边添加参数的方式赋值，但如果是比较复杂的json串的数据，通过这种方式就会有各种问题，浏览器的地址栏会对url中的字符串进行一些默认处理，一些直接将对象转换成字符串传递，接收到字符串不能直接转换成对象(比较头疼的问题)；还有页面加载先后的问题。
我是通过sessionStorage进行存储传递数据的。
1.存储数据
sessionStorage.setItem("allJson", JSON.stringify(json));//将获取到的json字符串，保存到键为allJson中。
2.获取数据
var hh = sessionStorage.getItem("allJson");//获取键为allJson的字符串 var pp = JSON.parse(hh);//将字符串抓换成对象
3.对象与字符串的相互转换
var str=JSON.stringify(json);//对象转换成字符串 var aa=JSON.parse(str);//字符串转成对象
27.Vue父组件修改子组件值
<son ref="son"></son> //父组件点击事件 clickFunc(){ //若更新子组件里a的值 this.$refs.son.a = 'xx'; //若调用子组件里b方法 this.$refs.son.b(); }
28.字符串补全长度
padStart()用于头部补全，padEnd()用于尾部补全
'a'.padStart(3, '0') // '00a' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' // padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。 // 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。 'xxx'.padStart(2, 'ab') // 'xxx' 'xxx'.padEnd(2, 'ab') // 'xxx'
29.Vue中监听失效
问题：一个树形封装成组件，在页面引用。树形放在v-if隐藏的div中，需要点击btn才会更改v-if绑定条件、渲染数据。此时使用watch监听不到树形绑定数据的变化。
但是如果给树形放在默认显示的div中则能监听得到。
解决方法：使用深层监听，deep: true,
30.json数组如何根据条件来查找元素
假如this.questions是json数组，现在查找数组中id为1的json元素
var quest = this.questions.find((item)=> item.id === 1);// 只能放回满足条件的第一个元素 var quest = this.questions.filter((item)=> item.id === 1); //返回满足条件的所有元素
31.批量操作数组中元素
var arr = ["你", "我", "他", "它"]; arr = arr.map(function(e){ return e + '不是'; }); // 结果： arr ["你不是", "我不是", "他不是", "它不是"] // 注意：map并不会改变原数组，所以需要设置数组接收改变后的值。
32.vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程
// 简化前： switch (day) { case 1: x="支付成功"; break; case 2: x="支付失败"; break; case 3: x="已发货"; break; } // 简化后： let obj = { 1:"支付成功", 2:"支付失败", 3:"已发货", } return obj[val]|| '未定义'
33.Vue中变量后加问号的作用
let A = null let B = A.id //报错 let C = A?.id //不会报错，C = undefined // 例子： let mm=[] let cc=null cc?.items.forEach(e => { mm.push(e.id) }); // 最终结果为mm=[]。这种方法可避免变量为null时报错
34.vue前端如何把对象转化成数组（es6的新方法）
const a = { a: 1, b: 2, c: 3, } console.log(Object.keys(a)) // ["a","b","c"] console.log(Object.values(a)) // [1,2,3]
35.Vue数组记录去重
1.用... new set 实现
that.new_Positions = [...new Set(that.new_Positions)];
2.过滤
let res=this.orgList.filter((e) => !res.has(e.orgId) && res.set(e.orgId, 1))
36.Vue使用watch监听一个对象中的属性
// 对象 queryData: { name: '', age: '', }, // 监听 watch: { 'queryData.name': { deep: true, handler: function(val) { console.log(val) } }, }
37.Vue中如何快速初始化一个大的数组？
// 如初始化1到1000到一个list Array(1000).fill().map((e,i)=>i+1)
38.vue中如何将将时间类型转换为字符串
var testDate = new Date(); // toString() 把 Date 对象转换为字符串。 // toTimeString() 把 Date 对象的时间部分转换为字符串。 // toDateString() 把 Date 对象的日期部分转换为字符串。 // toUTCString() 根据世界时，把 Date 对象转换为字符串。 // toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 // toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 // toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
