【JS/JQ/ES6】对数据、逻辑处理、转换总结

目录

一、对数据的处理简化:增删改查 

1.对数组的处理

2.1对字符串的处理

2.2对数字的处理

3.对对象的处理

二、对数据格式的转换:

1、转换为string

2、转换为int

3、控制小数点后位数(四舍五入)

 控制小数点后位数(直接截取,不补0)

4、转换为number

三、数组与字符串之间各项操作

数组赋值

将字符串转换为数组

reverse:将数组反序

数组元素的字符串化join

数组元素的删除

数组的创建

JS实现奇偶数的判断

JS截取指定字符串到指定字符串之间的内容

四、vue替换数组对象的某个属性值($set)

五、优化if  -  else if(switch case)

六、数组中的map方法 - 取数组中某一项集成新数组 

七、 监听按键事件:右键...F1...F15...Esc

八、return 与return false区别

九、逻辑运算符:&&、&、||、|

十、ES5/ES6 合并数组方法及去重

合并两个数组并去重

十一、浏览器相关

十二、JQ操作

一、操作

二、jQuery 选择器

十三、this

十四、对多维数组的处理

一、javascript判断多维数组是否包含某字段的解决方案

二、多维数组取最后一级的第一个值

十五、项目中JS的处理

1.判断不能为空,可以是0

2.输入字符串判断数字区间

3.退出登录时清缓存(浏览器及vuex)

4.数组里是否存在某个字段

5.forEach强制结束循环

十六、ES6-11模版字符串,变量拼接、多行文本、插入表达式、调用函数


一、对数据的处理简化:增删改查 

1.对数组的处理

  • 【数组】Object.entries(arr)

       1.可以把一个对象的键值以数组的形式遍历出来,结果和for...in循环遍历该对象时返回的结果一样,但是不会遍历其原型属性。

      2.例:const varList = Object.entries(arr)

  • 【数组去重】let new = Array.from(new Set(arr))
  • 【数组排序1】paixu.sort((a, b) => a - b);//排序

  • 【数组排序2】根据对象某个属性值排序 paixu.sort((a, b) => {b.km - a.km});//排序

  • 【数组】some()
  1. 方法用于检测数组中元素是否满足指定条件
  2. 不会对空数组进行检测
  3. 不会改变原始数组
  4. 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  5. 如果没有满足条件的元素,则返回false。
  6. if(arr.some(function checknumber(number){return number == 12;})) {  }  (some里面为函数)
  • 【数组】every() 方法
  1. 用于检测数组所有元素是否都符合指定条件
  2. 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  3. 如果所有元素都满足条件,则返回 true。
  4. every() 不会对空数组进行检测。

  5.  every() 不会改变原始数组。

  6. if(arr.every(function checknumber(number){return number > 10;})){ }  (every里面为函数)

  • 【数组】pop:取最后一项 str.pop()
  • 【数组】shift:取第一项 str.shift()
  • 【数组】str[3] = 'value':在数组中间插一项
  • 【数组】push:数组末尾加入一项 str.push()
  • 【数组】unshift:数组起始位置加入一项 str.unshift()
  • 【数组】reverse:反转数组项顺序str.reverse()
  • 【数组】splice
  1. 删除:str.splice(0,2)   删除前两项    【要删除的第一项的位置+要删除的项数】           【需2参】
  2. 插入:str.splice(2,0,‘red’,'green')    【起始位置+0(要插入的项数)+要插入的项】   【需4参】
  3. 替换:str.splice(2,1,‘red’,'green')    【起始位置+要删除的项数+要插入的任意数量的项】  【需3参】
  • 【数组】slice:返回从起始位置到结束位置的所有项;允许单个位置     str.slice(1,2)
  •  Object.keys()
  • 一个表示给定对象的所有可枚举属性的字符串数组。

    // simple array
    var arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // console: ['0', '1', '2']
    
    // array like object
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // console: ['0', '1', '2']
    
    // array like object with random key ordering
    var anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // console: ['2', '7', '100']
    
    // getFoo is a property which isn't enumerable
    var myObj = Object.create({}, {
      getFoo: {
        value: function () { return this.foo; }
      }
    });
    myObj.foo = 1;
    console.log(Object.keys(myObj)); // console: ['foo']

2.1对字符串的处理

存不存在某个字符串:

var str = "123";
console.log(str.indexOf("3") != -1 );  // true

let trimStart = str => str.replace(new RegExp('^([\\s]*)(.*)$'), '$2')

trimStart(" abc")

let trimEnd = str => str.replace(new RegExp('^(.*?)([\\s]*)$'), '$1')

trimEnd(' abc ')

  • split(): 将字符串转换为数组str.split('/')[0]
  •  【字符串】substring(): 类似于slice(),区别是不能设置负数索引
  • 取前几位字符:str.substring(0, 10)
  • str.substring(0, str.indexOf("_"))   //indexOf( ): 查找字符串中的字符串
  • parseFloat  //去掉百分号
  • 判断奇偶
  • 字符串
  • length: 字符串的长度
  • indexOf( ): 查找字符串中的字符串
  • lastIndexOf(): 查找字符串中的字符串 
  • replace() 方法不会改变调用它的字符串,返回的是新的字符串
  • str.toUpperCase():把字符串转换成大写
  • str.toLowerCase():**把字符串转换成小写
  • concat(): 连接两个或多个字符串
  • JS截取指定字符串到指定字符串之间的内容    str = str.match(/起始查询数据(\S*)结束查询数据/)[1];
  • 整除判断:a % b == 0
  • 字符串前面空格去除与替换

  • 字符串后面空格去除与替换 
  • js中截取字符串中的指定字符串  
    let name = '名字/数量'
    name.substring(name.indexOf("\/")+1,name.length)
    name.substring(0,name.indexOf("/"))

2.2对数字的处理

  • 小数保留两位小数,整数不补零 :parseFloat(num1.toFixed(2))

3.对对象的处理

  • 判断对象是否为空 

方法一:将对象转JSON,如果为空集合{} ,那么就是空对象

JSON.stringify(obj) === '{}'

方法二:判断对象的长度,如果为零,那就是空对象

Object.keys(object).length==0

  • typeof:判断数据类型最常见的判断方法(拓展:typeof通常与以下字符串比较:undefined、object、boolean、number、string、symbol和bigint)
typeof运算符的返回类型为字符串,值包括如下几种:
        1. 'undefined'              --未定义的变量或值
        2. 'boolean'                 --布尔类型的变量或值
        3. 'string'                     --字符串类型的变量或值
        4. 'number'                  --数字类型的变量或值
        5. 'object'                    --对象类型的变量或值,或者null(这个是js历史遗留问题,将null作为object类型处理)
        6. 'function'                 --函数类型的变量或值

例: 

    console.log(typeof a);    //'undefined'
    console.log(typeof(true));  //'boolean'
    console.log(typeof '123');  //'string'
    console.log(typeof 123);   //'number'
    console.log(typeof NaN);   //'number'
    console.log(typeof null);  //'object'    
    var obj = new String();
    console.log(typeof(obj));    //'object'
    var  fn = function(){};
    console.log(typeof(fn));  //'function'
    console.log(typeof(class c{}));  //'function'

二、对数据格式的转换:

1、转换为string

str.toString()

2、转换为int

parseInt(str)

3、控制小数点后位数(四舍五入)

str.toFixed(1)

 控制小数点后位数(直接截取,不补0)

Math.floor(num * 100) / 100

4、转换为number

Number(str)

三、数组与字符串之间各项操作

  • 数组赋值

  • 将字符串转换为数组

  • reverse:将数组反序

  • 数组元素的字符串化join

  • 数组元素的删除

  • 数组的创建

  • JS实现奇偶数的判断

  • JS截取指定字符串到指定字符串之间的内容

1、首先用的最多的就是给数组赋值了

push:将参数添加到原数组末尾,并返回数组的长度 

例1:

this.tableData=[]
this.tableData.push(data)

例2: 

let list = [];
        for (var i in this.form.lists) {
          if(this.form.lists[i].value!=''&&this.form.lists[i].value!=null){
          list.push({
            id: this.form.lists[i].value
          })
          }
        }

split(): 将字符串转换为数组: 

var str1 = "a,b,c,d,e,f" 
var arr = str1.split(",") // 用逗号分隔
// var arr = str1.split(" ") // 用空格分隔
// var arr = str1.split("|") // 用竖线分隔
arr[0]  //  返回 a
arr[0] = "H"    // 可以接受赋值,当前 arr[0] 返回 H

2、reverse:将数组反序

data.reverse(); //反转元素(最前的排到最后、最后的排到最前)

data.sort(); //对数组元素排序

3、数组元素的字符串化

data = []
data.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开,separator可以为','。

4、数组元素的删除

data.pop(); //移除最后一个元素并返回该元素值

data.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

data.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

5、数组的创建

var arrayObj = new Array(); //创建一个数组

var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值

    要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

6、sort(orderfunction):按指定的参数对数组进行排序

7、slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组

8、JS去掉数据的百分号 :parseFloat("")

9、JS实现奇偶数的判断

if(i%2 ==0){} 
10、lastIndexOf

var str = "abcadef"       
var strLen = str.lastIndexOf('a') // 3

注意:

  1. 如果未找到文本,indexOf()lastIndexOf() 均返回 -1

11、替换字符串内容

replace() 方法不会改变调用它的字符串,返回的是新的字符串

参数: 字符串中即将被替换的文本,替换成的文本

该方法默认只替换首个匹配:

var str = "hello world"
var strx = str.replace("world","xiaomeizi") // hello xiaomeizi

注意: 该方法对大小写敏感,因此不会匹配到大写的”WORLD“

如果想执行大小写不敏感的替换需要使用正则表达式: /i(大小写不敏感 )

var str = "HELLO world"
  // 注意:使用正则表达式时不需要带引号
  var strx = str.replace(/hello/i,"xiaomeizi") // xiaomeizi world

12、连接两个或多个字符串

concat(): 连接两个或多个字符串
参数: 第一个参数是用什么连接,第二个是连接到谁,以此类推可连接多个

var str1 = "Hello"
  var str2 = "World"
  var str3 = "xxx"
  var strx = str1.concat(" ",str2) //Hello World
  var stry = str1.concat(" ",str2," 123 ",str3) //Hello World 123 xxx

concat() 方法可用于代替加运算符,下面两行代码等效:

var strx = "Hello" + " " + "World" //Hello World
var stry = "Hello".concat(" ","World") //Hello World

13、JS截取指定字符串到指定字符串之间的内容

var str="<123>asdadsadsa<456>";

str = str.match(/<123>(\S*)<456>/)[1];
console.log(str);
\S:匹配任何非空白字bai符。

*:匹配前du面的子表达式零次或多次。zhi

四、vue替换数组对象的某个属性值($set

通过$set给某个属性从新赋值,具体参照官网API — Vue.js

data:[
	{name: 'xxx', status: 0},
	{name: 'xxx', status: 1},
	{name: 'xxx', status: 0},
	{name: 'xxx', status: 1},
]


data.forEach(item => {
	if (item.status === 0) {
		// 'status'为属性名,'非活动'为修改后的内容 
		this.$set(item, 'status', '非活动')
	} else if (item.status === 1) {
		this.$set(item, 'status', '活动')
	}
})

注意$set只在vue的js中生效,当提取为公共方法写在js中时,this.$set会报错undefined,在js中写法为

data:[
	{name: 'xxx', status: 0},
	{name: 'xxx', status: 1},
	{name: 'xxx', status: 0},
	{name: 'xxx', status: 1},
]


data.forEach(item => {
	if (item.status === 0) {
		// 'status'为属性名,'非活动'为修改后的内容 
		item.status = '非活动'
	} else if (item.status === 1) {
		item.status = '活动'
	}
})

五、优化if  -  else if(switch case)

let string = "今天是星期";
    let date = new Date().getDay();
    switch (date) {
        case 0 :
            string += "日";
            break;
        case 1 :
            string += "一";
            break;
        case 2 :
            string += "二";
            break;
        case 3 :
            string += "三";
            break;
        case 4 :
            string += "四";
            break;
        case 5 :
            string += "五";
            break;
       default:
            默认代码块
    }

六、数组中的map方法 - 取数组中某一项集成新数组 

  • 作用:通过指定函数对数组进行处理,并将处理后的结果以新数组的形式返回

  • 注意点:不会改变原数组,只是将处理后的结果以新数组的形式返回

举例1:

let list = [[{coord: [120.14322240845, 30.236064370321], elevation: 21},
      {coord: [120.14280555506, 30.23633761213], elevation: 5}],
      [{coord: [120.13018670197, 30.238217082645], elevation: 37.4},
      {coord: [120.12937154076, 30.237475794242], elevation: 30.8}]
      ]

      var lines = list.map(function (track) {
        return {
            coords: track.map(function (item, index) {
                return item.coord;
            })
        };
    });
    console.log(lines)

打印:

举例2: 

       "list0": [
            {
                "fid": "1",
                "fcreateTime": "2021-05-06 18:45:11",
            }
        ],



           
            let data0 = res.data.list0;
            if (data0.length != 0) {
              数组 = data0.map((item, index) => {
                 return item.fid;
              });
            }

七、 监听按键事件:右键...F1...F15...Esc

监听按键事件 :

mounted() {  
    window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
      document.oncontextmenu = function () {
        //屏蔽右键
        return false;
      };
      document.onselectstart=function(){
        //屏蔽选中
        return false;
      }
      document.onselect= function() {
        //屏蔽选中
        return false
      }
}

 方法:

KeyDown(event) {
      //F1
      if (event.keyCode === 112) {
        event.returnValue = false;
      }
      //F2
      if (event.keyCode === 113) {
        event.returnValue = false;
      }
      //F3
      if (event.keyCode === 114) {
        event.returnValue = false;
      }
      //F4
      if (event.keyCode === 115) {
        event.returnValue = false;
      }
      //F5
      if (event.keyCode === 116) {
        event.returnValue = false;
      }
      //F6
      if (event.keyCode === 117) {
        event.returnValue = false;
      }
      //F7
      if (event.keyCode === 118) {
        event.returnValue = false;
      }
      //F8
      if (event.keyCode === 119) {
        event.returnValue = false;
      }
      //F9
      if (event.keyCode === 120) {
        event.returnValue = false;
      }
      //F11
      if (event.keyCode === 122) {
        event.returnValue = false;
      }
      //F12
      if (event.keyCode === 123) {
        event.returnValue = false;
      }
      //F13
      if (event.keyCode === 124) {
        event.returnValue = false;
      }
      //F14
      if (event.keyCode === 125) {
        event.returnValue = false;
      }
      //F15
      if (event.keyCode === 126) {
        event.returnValue = false;
      }
      //Esc
      if (event.keyCode === 27) {
        event.returnValue = false;
      }
      //Control
      if (event.keyCode === 17) {
        event.returnValue = false;
      }
      //Delete
      if (event.keyCode === 46) {
        event.returnValue = false;
      }
      //Backspace
      if (event.keyCode === 8) {
        event.returnValue = false;
      }

八、return 与return false区别

1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交
2. return false,事件处理函数会取消事件,不再继续向下执行。表单将终止提交。

九、逻辑运算符:&&、&、||、|

JS“&&”和“||”是逻辑运算符;“&”和“|”是位运算符。

1、运算表达的不同

只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。

只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

JavaScript中的位运算符:“|”运算方法:两个位(二进制数)只要有一个为1,那么结果都为1。否则就为0

2、使用方式的不同

只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

3、运算逻辑的不同

按位与:a&b是把a和b都转换成二进制数然后再进行与的运算;

逻辑与:a&&b就是当且仅当两个操作数均为true时,其结果才为true;只要有一个为零,a&&b就为零。

4、&&、&两者都表示运算,但是&&运算符第一个表达式不成立的话,后面的表达式不运算,直接返回。

而&对所有表达式都得判断

十、ES5/ES6 合并数组方法及去重

let arr1 = ['a', 'b', 'c'];
		let arr2 = [1, 2, 3];
		// ES5 合并
		let arrES5 = arr1.concat(arr2);
		console.log(arrES5); // ["a", "b", "c", 1, 2, 3]
		//ES6 拓展运算符合并
		let arrES6 = [...arr1, ...arr2];
		console.log(arrES6); // ["a", "b", "c", 1, 2, 3]

合并两个数组并去重

ES6实现方式

  • new Set() 去重
  • Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。(所谓类数组对象,最基本的要求就是具有length属性的对象。)
let arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4]
let arr2 = [1, 2, 5, 4, 9, 7, 7, 8, 8]
function uniqueArr(arr1,arr2) {
    //合并两个数组
    let arr = [...arr1,...arr2]
    //去重
    let arr3 = Array.from(new Set(arr))    //或者 let arr3 = [...new Set(arr)]
}

ES5实现方式

var arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4]
var arr2 = [1, 2, 5, 4, 9, 7, 7, 8, 8]
function uniqueArr(arr1, arr2){
    var arr3 = arr1.concat(arr2)
    var arr4 = []
    for(var i=0,len=arr3.length; i<len; i++) {
        if(arr4.indexOf(arr3[i]) === -1) {
            arr4.push(arr3[i])
        }
    }
    console.log(arr4)
} 
uniqueArr(arr1, arr2)

十一、浏览器相关

  • 完整url      window.location.href
  • 路由路径   this.$route.path
  • 后退2步    this.$router.go(-2);      
  • 后退1步    this.$router.back();      
  • 后退1步    this.$router.go(-1); 
  • 禁止后退   history.pushState(null, null, document.URL);

十二、JQ操作

由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

  1. 把所有 jQuery 代码置于事件处理函数中
  2. 把所有事件处理函数置于文档就绪事件处理器中
  3. 把 jQuery 代码置于单独的 .js 文件中
  4. 如果存在名称冲突,则重命名 jQuery 库

一、操作

  • 就绪事件                       $(document).ready(function(){}); 
  • 点击事件                       $("button").click(function(){});
  • 双击事件                       $(selector).dblclick(function(){});
  • 焦点事件                       $(selector).focus(function(){});
  • 鼠标悬停事件                $(selector).mouseover(function(){});
  • 隐藏所有 <p> 元素:    $("p").hide();
  • 显示所有 <p> 元素:    $("p").show()

  • 直接设置样式值            $('.formControl').css('cursor','text')
  • 同时设置多个属性        $('.formControl').css({name:value,name:value,name:value....})
  • 追加样式                      $('.formControl').addClass('class名') 
  • 移除样式                      $('.formControl').removeClass('class名')
  • 控制按钮禁用与启用    $('#button').attr('disabled',"true");

  •              $('#button').removeAttr("disabled"); 

  • 删除被选元素及其子元素   $("#div1").remove();
  • 删除被选元素子元素    $("#div1").empty();
  • 向下滑动元素               $(".panel").slideDown("slow");
  • 创建自定义动画           $(selector).animate({params},speed,callback);            

                                           $("div").animate({left:'250px'});

  • 动画使用多属性          $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });
  • 停止动画或效果          $("#panel").stop();
  • 获得输入字段的值      $("#test").val()
  • 设置或返回所选元素的文本内容        $("#test").text()                                   $("#test1").text("Hello world!")
                                                              $("#test").html()                                   $("#test2").html("<b>Hello world!</b>")
  • 获得链接中 href 属性的值                 $("#w3s").attr("href")
  • 在被选元素的结尾插入内容              $("p").append("Some appended text.");
  • 在被选元素的开头插入内容              $("p").prepend("Some prepended text.");
  • 不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
})
</script>
</head>

<body>

<h3 id="test">请点击下面的按钮,通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

</body>
  •  $.get()
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  •   $.post()
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

二、jQuery 选择器

选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 class="intro" 的元素
element$("p")所有 <p> 元素
.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数 <tr> 元素
:odd$("tr:odd")所有奇数 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始)
:gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
:header$(":header")所有标题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子(元素)节点的所有元素
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可见的表格
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
:input$(":input")所有 <input> 元素
:text$(":text")所有 type="text" 的 <input> 元素
:password$(":password")所有 type="password" 的 <input> 元素
:radio$(":radio")所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
:submit$(":submit")所有 type="submit" 的 <input> 元素
:reset$(":reset")所有 type="reset" 的 <input> 元素
:button$(":button")所有 type="button" 的 <input> 元素
:image$(":image")所有 type="image" 的 <input> 元素
:file$(":file")所有 type="file" 的 <input> 元素
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被选取的 input 元素
:checked$(":checked")所有被选中的 input 元素

十三、this

显式绑定

通过call(..) 或者 apply(..)方法。第一个参数是一个对象,在调用函数时将这个对象绑定到this。因为直接指定this的绑定对象,称之为显示绑定。

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2
};

foo.call( obj ); // 2  调用foo时强制把foo的this绑定到obj上

十四、对多维数组的处理

一、javascript判断多维数组是否包含某字段的解决方案

数据格式

    var menuList = [
        {
            "cpu": [
                "停机",
                "正常运行"
            ],
            "ddr": [
                "正常运行",
                "正常运行"
            ],
            "disk": "正常运行",
            "wlan": "正常运行"
        }
    ];
    let list = JSON.stringify(menuList);//转为字符串
    //getInJson:封装文件;list:字符串格式数组,"停机":关键字;
    let GetBinaryType = this.getInJson(list,"停机") 
    console.log(GetBinaryType );
//getInJson:封装文件
//判断多维数组是否包含某字段
//array  字符串格式数组
//target 关键字
getInJson(array, target) {
    if (array.search(target) !== -1) {
      return true; //存在
    } else {
      return false; //不存在
    }
  };

二、多维数组取最后一级的第一个值

需要简单的一个闭包函数

//闭包函数
//treeDatas数组
this.closure(this.treeDatas) 
//闭包函数
closure(data) {
 //有下级
 if (data[0].children.length == 0) {
      this.nowKey = data[0].id
   } else {
      this.closure(data[0].children)
  }
},

十五、项目中JS的处理

1.判断不能为空,可以是0

var value = null // 0, ‘’, null, undefined
if (!value && String(value) !== '0') {
    console.log('不能为空');
}

2.输入字符串判断数字区间

自定义校验版:

var validate1_100 = (rule, value, callback) => {
        if (Number(value) > 100 || Number(value) < 1) {
          callback(new Error('请输入1-100之间的数字'));
        } else {
          callback();
        }
      };

3.退出登录时清缓存(浏览器及vuex)

sessionStorage.clear()
localStorage.clear()

4.数组里是否存在某个字段

let list = []
//判断
//list.indexOf(roleKey) > -1

5.forEach强制结束循环

try {
  this.list.forEach((element) => {
   if (element.role.indexOf(roleKey) > -1) {
    throw new Error('停止')
   }
  });
} catch (e) {};

十六、ES6-11模版字符串,变量拼接、多行文本、插入表达式、调用函数

1.变量拼接

//变量拼接
let food= '西红柿';
let result = `${food}可以把我当水果来吃`;

2.在模版字符串里面调用函数表达式

let food=function(){
    return "苹果"
}
 
let c=`我喜欢吃${food()}`;

3.插入一个表达式

//插入表达式
let x=30;
let y=10;
 
jia=`x-y=${x-y}`

4.

在模版字符串中使用htnl代码以及多行文本代码

//html代码以及换行文本
let hi=`<div>
    <h2>你好呀!</h2>
</div>`

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BMG-Princess

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值