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 也可以使用非数字，如： 。

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=" 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 对象的日期部分转换为字符串。