【JS/JQ/ES6】对数据、逻辑处理、转换总结本文已参与「新人创作礼」活动，一起开启掘金创作之路。一、对数据的处

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

unshift：推入任意项str.unshift()
shift：取第一项str.shift()
str[3] = 'value'：在数组中间插一项
split(): 将字符串转换为数组str.split('/')[0]
判断对象是否为空 JSON.stringify(obj) === '{}'
join
【数组】some()

方法用于检测数组中元素是否满足指定条；
不会对空数组进行检测
不会改变原始数组
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
if(arr.some(function checknumber(number){return number == 12;})) { } （some里面为函数）

【数组】every() 方法

用于检测数组所有元素是否都符合指定条件
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
every() 不会对空数组进行检测。
every() 不会改变原始数组。
if(arr.every(function checknumber(number){return number > 10;})){ } （every里面为函数）

【数组】pop：取最后一项str.pop()
【数组】push：推入某项
【数组】reverse：反转数组项顺序str.reverse()
【数组】splice

删除：str.splice(0,2) 删除前两项【要删除的第一项的位置+要删除的项数】【需2参】
插入：str.splice(2,0，‘red’,'green') 【起始位置+0（要插入的项数）+要插入的项】【需4参】
替换：str.splice(2,1，‘red’,'green') 【起始位置+要删除的项数+要插入的任意数量的项】【需3参】

【数组】slice：返回从起始位置到结束位置的所有项；允许单个位置 str.slice(1,2)
【字符串】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
字符串前面空格去除与替换

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

trimStart(" abc")

字符串后面空格去除与替换

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

trimEnd(' abc ')

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']

检测变量类型：typeof ；使用：typeof(表达式)和typeof 变量名

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)

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

注意：

如果未找到文本，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给某个属性从新赋值，具体参照官网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

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) {
    //合并两个数组
    arr1.push(...arr2)//或者arr1 = [...arr1,...arr2]
    //去重
    let arr3 = Array.from(new Set(arr1))   //let arr3 = [...new Set(arr1)]
}

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 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

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

操作

就绪事件 $(document).ready(function(){}); jQuery(document).ready(function(){});
点击事件 $("button").click(function(){});
双击事件 $(selector).dblclick(function(){});
焦点事件 $(selector).focus(function(){});
鼠标悬停事件 $(selector).mouseover(function(){});
隐藏所有
元素： $("p").hide();
显示所有
元素： $("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("Hello world!")
获得链接中 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")	所有元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个元素
:last	$("p:last")	最后一个元素
:even	$("tr:even")	所有偶数
:odd	$("tr:odd")	所有奇数

: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")	所有标题元素 -
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[[attribute $=value]](https://www.w3school.com.cn/jquery/selector_attribute_end_value.asp "[attribute$ =value]")	$("[href$ ='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有元素
:text	$(":text")	所有 type="text" 的元素
:password	$(":password")	所有 type="password" 的元素
:radio	$(":radio")	所有 type="radio" 的元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的元素
:submit	$(":submit")	所有 type="submit" 的元素
:reset	$(":reset")	所有 type="reset" 的元素
:button	$(":button")	所有 type="button" 的元素
:image	$(":image")	所有 type="image" 的元素
:file	$(":file")	所有 type="file" 的元素

: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上

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