JS常见用法 - 《前端-JavaScript 基础》

1、将CST时间格式转换成yyyy-MM-dd
2、模板字符串的使用
3、js获取iframe页面元素
- (1)、通过父页面操作子页面，获取iframe页面中的元素
- (2)、找iframe的方法
4、对象转成数组的方法
5、JSON的几种常用方法使用方法
- (1)、JSON.parse() ：将字符串转换成对象的形式；
- (2)、JSON.stringify() ：将对象转换成字符串的形式；
6、数组转换成字符串的方法（element-ui表格列格式化用法）
7、获取当前日期
8、字符串转换为数组的方法
9、js遍历对象的几种方法
11、vue实现倒计时
12、计算两个日期之间的天数
13、js实现表格列显示效果为：
从 ‘测试，测试1’ 变为 ‘（1）测试，（2）测试1’
14、js实现表格行上下排序：

1、将CST时间格式转换成yyyy-MM-dd

<script>
    dateFormat = function(date, format) {
    date = newDate(date);
    varo = {
            'M+':date.getMonth() + 1, //month
            'd+':date.getDate(), //day
            'H+':date.getHours(), //hour
            'm+':date.getMinutes(), //minute
            's+':date.getSeconds(), //second
            'q+':Math.floor((date.getMonth() + 3) / 3), //quarter
            'S':date.getMilliseconds() //millisecond
                };
    if (/(y+)/.test(format))
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    for (varkino)
        if (newRegExp('(' + k + ')').test(format))
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
            return format;
    }
    console.log(dateFormat('Mon Apr 27 09:08:20 CST 2015', 'yyyy-MM-dd HH:mm:ss'));
</script>

2、模板字符串的使用

let uname = "黑马程序员";                                                                                         
let age = 18;                                                                                                             
document.write(`名字是${uname},今年${age}岁了！`); // ` 英文状态下点击1左边那个键;

3、js获取iframe页面元素

参考链接（https://www.cnblogs.com/Marydon20170307/p/9488998.html）

<iframe id="myframe"> </iframe>

(1)、通过父页面操作子页面，获取iframe页面中的元素

操作	JavaScript	JQuery
方式一：	document.getElementById(‘myframe’).contentWindow.document.getElementById(‘元素的选择器’)	$(‘#myframe’).contents.find(‘元素的选择器’)
方式二：	document.frames[‘myframe’].document.getElementById(‘元素的选择器’)	$(‘元素的选择器’ , document.frames(‘myframes’).docment)

(2)、找iframe的方法

点击iframe,然后审查元素->控制台输入$0即可选中当前的iframe;

4、对象转成数组的方法

（参考链接：https://jingyan.baidu.com/article/ed2a5d1f980c7809f7be177c.html）

另一种方法通过循环实现：https://www.cnblogs.com/Shysun/p/10465754.html
注意：Array.from()是es6支持的方法；

5、JSON的几种常用方法使用方法

参考链接（https://www.runoob.com/js/javascript-json-parse.html）

(1)、JSON.parse() ：将字符串转换成对象的形式；

例如：返回数据格式如下：result = “{“queryParam” : “[{ “name” : “xiaoh”}]”}”
JSON.parse() 解析后数据格式是 result = queryParam : “[{“name” : “xiaoh”}]”
alert(result.queryParam)显示的是[Object Object]；

(2)、JSON.stringify() ：将对象转换成字符串的形式；

例如：返回数据格式如下：result = queryParam : “[{“name” : “xiaoh”}]”
var str = JSON.stringify( result.queryParam) ;
alert( str ) = [{“name” : “xiaoh”}];

6、数组转换成字符串的方法（element-ui表格列格式化用法）

问题现象：编辑页面使用element-ui中的多选下拉框，存入后台数据库的值为

zjly: "[\"计算机辅助工程（CAE）\",\"电子设计自动化（EDA）\"]"

在表格列显示格式为：计算机辅助工程（CAE）,电子设计自动化（EDA）
实现方法：通过格式化函数实现。

首先在需要格式化的列上添加属性 :formatter=”formatter”

给formatter 添加格式化函数，如下：

formatter(row: any) {
 //因为返回值时字符串，所以先使用JSON.parse转换为数组，在使用数组的join方法进行分割；
 return JSON.parse(row.zjly).join(',') 
}

7、获取当前日期

//默认获取当日日期
 let date = new Date()
 let y = date.getFullYear()
 let m = date.getMonth() + 1
 let month = m < 10 ? '0' + m : m
 let d = date.getDate()
 let day = d < 10 ? '0' + d : d
 const time = y + '-' + month + '-' + day
//将当前日期time赋值给页面上需要默认显示当前日期的变量
 this.formModel.khkssj = time

8、字符串转换为数组的方法

参考链接：（https://blog.csdn.net/lgno2/article/details/118837249）
split（）方法：例如通过使用空字符串作为split方法的分隔符，我们可以将字符串转换为字符数组。
代码如下：

const text = "abc";
const chars = text.split('');
console.log(chars);
//['a', 'b', 'c']

9、js遍历对象的几种方法

参考链接：（https://www.cnblogs.com/wangdashi/p/9606182.html） ```javascript // 第一种方法： for…in const obj = { name:’zhangsan’, age:18 } for(let key in obj){ console.log(key + ‘—-‘ + obj[key]) }

// 输出结果： name—-zhangsan age—-18

// 第二种方法 Object.keys(obj)——Object.values(obj) // 参数 obj: 要返回其枚举自身属性的对象 // 返回值：一个表示给定对象的所有可枚举属性的字符串数组。 const obj = { 　　　　id:1, 　　　　name:’zhangsan’, 　　　　age:18 } console.log(Object.keys(obj)) // 输出：obj对象的key组成的数组 [‘id’,’name’,’age’] console.log(Object.values(obj)) // 输出：obj对象的value组成的数组 [‘1’,’zhangsan’,’18’]

// 第三种方法 Object.getOwnPropertyNames(obj) // 返回一个数组，包含对象自身的所有属性（包含不可枚举属性），遍历可以获取key和value const obj = { id:1, name:’zhangsan’, age:18 } Object.getOwnPropertyNames(obj).forEach(function(key){ console.log(key+ ‘—-‘+obj[key]) }) // 输出结果: id—-1 name—-zhangsan age—-18

<a name="o1SQY"></a>
## 10、合并两个数组并去除重复项只留下一个的方法
```javascript
private mergeArray(arr1: any, arr2: any) {
  for (var i = 0; i < arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
      if (arr1[i].id === arr2[j].id) {
        //利用splice函数删除元素，从第i个位置，截取长度为1的元素
        arr1.splice(i, 1)
      }
    }
  }
  for (var m = 0; m < arr2.length; m++) {
    arr1.push(arr2[m])
  }
  return arr1
}

11、vue实现倒计时

private day: any = ''
private hr: any = ''
private min: any = ''
private sec: any = ''
// 倒计时
private countdown() {
  const end = Date.parse(new Date('2021-12-13 17:00:00') as any)
  const now = Date.parse(new Date() as any)
  const msec = end - now
  if (msec < 0) return
  let day = parseInt((msec / 1000 / 60 / 60 / 24) as any)
  let hr = parseInt(((msec / 1000 / 60 / 60) % 24) as any)
  let min = parseInt(((msec / 1000 / 60) % 60) as any)
  let sec = parseInt(((msec / 1000) % 60) as any)
  this.day = day
  this.hr = hr > 9 ? hr : '0' + hr
  this.min = min > 9 ? min : '0' + min
  this.sec = sec > 9 ? sec : '0' + sec
  const that = this
  if (hr >= 0 && min >= 0 && sec >= 0) {
    // 倒计时五分钟提示
    if (hr == 0 && min == 5 && sec == 0) {
      this.$alert('距离考试结束还剩五分钟，请抓紧时间答题', '提示', {
        confirmButtonText: '确定',
      })
    }
    //倒计时结束提交试卷
    if (hr == 0 && min == 0 && sec == 3) {
      this.$message('3s后将强制交卷！')
    }
    if (hr == 0 && min == 0 && sec == 0) {
      this.dialogVisible = false
    }
    setTimeout(function () {
      that.countdown()
    }, 1000)
  }
}
mounted(){
    this.countdown()
}

12、计算两个日期之间的天数

// 计算time与当前日期相差的天数，本质就是分别将两个日期转换成时间戳，
// 将两者相差的时间戳再转回天数
// 本示例中是实现，相差天数为大于两周就返回false,否则返回true
function (time) {
    var day = (new Date().getTime() - Date.parse(time)) / (24 * 60 * 60 * 1000);
  if (day > 7) {
      return false
  } else {
      return true
  }
}

13、js实现表格列显示效果为：

从 ‘测试，测试1’ 变为 ‘（1）测试，（2）测试1’

效果展示：

代码如下：

<el-table-column
   prop="sbqtdw"
   label="申报牵头单位"
   width="400px"
   :formatter="handleFmt"
 >
</el-table-column>
private handleFmt(rowData: any) {
  let str = rowData.sbqtdw ? rowData.sbqtdw.split('，') : ''
  let newStr = ''
  for (var i = 0; i < str.length; i++) {
    newStr += '(' + Number(i + 1) + ') ' + str[i] + '，'
  }
  return newStr.substr(0, newStr.length - 1)
}

14、js实现表格行上下排序：

实现效果：

页面代码：

<!-- index——下标, type——移动的类型, arr——表格的list集合 -->
<el-button
  :disabled="index === 0"
  icon="el-icon-arrow-up"
  @click="sort(field.options.options, index, 'up')"
></el-button>
<el-button
  :disabled="index === field.options.options.length - 1"
  icon="el-icon-arrow-down"
  @click="sort(field.options.options, index, 'down')"
></el-button>

ts代码：

// index——下标, type——移动的类型, arr——表格的list集合
sort(arr, index, type) {
  if ('up' == type) {
    if (index !== 0) {
      let temp = arr[index - 1]
      this.$set(arr, index - 1, arr[index])
      this.$set(arr, index, temp)
    }
  } else {
    if (index !== arr.length - 1) {
      let i = arr[index + 1]
      this.$set(arr, index + 1, arr[index])
      this.$set(arr, index, i)
    }
  }
},