• 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) {
        // ……
    }
    View Code

    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 + ')');    //方法四
    View Code

    然后,就可以这样读取:Alert(obj.name);
    注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)

    (2)JSON对象转JSON字符串

    var last=JSON.stringify(obj);    //方法一
    var last=obj.toJSONString();    //方法二
    View Code

    注意:使用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 对象的日期部分转换为字符串。


     

  • 相关阅读:
    使用TestStack.White进行Windows UI的自动化测试
    基于IDEA的JavaWeb开发环境搭建
    hfish 集群蜜罐搭建
    HFish开源蜜罐搭建
    redis实现查找附近商户信息功能
    WIN10 HYPERV 1503
    RPC
    推荐一个聚合搜索引擎提高学习工作效率
    RocketMQ原理分析&场景问题
    《高性能利器》--异步调用实现原理详解!
  • 原文地址:https://www.cnblogs.com/Yan3399/p/14346447.html
Copyright © 2020-2023  润新知