JS功能实现

前端模糊查询

 // 方法一：
 // match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
 // 该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
	this.list.filter((array) =>array.name.match("竞赛"))

ajax请求

        // http://org.xjtu.edu.cn/openplatform/oauth/logout
        // 1) 创建 XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        // 2) 设置请求信息
        xhr.open("POST", 'http://org.xjtu.edu.cn/openplatform/oauth/logout');
        //可以设置请求头，一般不设置
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 3) 发送请求
        xhr.send({gsessionId:gsessionId}) //get 请求不传 body 参数，只有 post 请求使用
        // 4) 接收响应
        //xhr.responseXML 接收 xml 格式的响应数据
        //xhr.responseText 接收文本格式的响应数据
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var text = xhr.responseText;
            console.log(text);
          }
        }

获取数组中的某一项组成新的数组

var arr = [
	{ id: 1, name: "张三" },
	{ id: 2, name: "李四" },
	{ id: 3, name: "王五" },
]

var newArr = arr.map( (item, index) => {
	return item.id
})

console.log("arr的id集合", newArr)
// newArr 为：[1, 2, 3]

年月日与毫秒值

1. 年月日转毫秒值
new Date(2022-02-22 10:10:59).getTime();
2.获取当前毫秒值
+new Date()

字符串相关

1. 是否含有指定字符
url.search('.mp4') != -1

2.字符串指定字符替换
aaa.classStartTime = item.classStartTime.replace(/-/g, "/");

跳转

window.location.href='路径'

判断是否满足指定时间段

      let start = new Date("2022/11/08 23:59:59").getTime() - new Date().getTime() > 0;
      let finish = new Date("2022/11/04 00:00:00").getTime() - new Date().getTime() < 0;
      if (start && finish) {
        this.end = true
      } else {
        this.end = false
      }

双问号表达式

alert(username ?? "Guest");

1. 空值合并运算符在左侧的值是 null 或 undefined 时会返回问号右边的表达式；注意：只能处理underfind和null，0和false会直接返回
2. 这里的双引号称为空值合并运算符，它是 ES2020 的一个新特性，它的作用是当一个表达式是 null 或者 undefined 时为变量设置一个默认值。
3. 。

日期转化

使用插件链接: moment.js

video相关

source :拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件

<video
              class="w-full h-full my-video"
              poster="@/assets/images/school.png"
              controls
            >
              <source src="@/assets/images/aaa.mp4" type="video/mp4" />
              <!-- <source src="@/assets/images/aaa.ogg" type="video/ogg" /> -->
              您的浏览器不支持 video 标签。
            </video>

.my-video {
  width: 100%;
  object-fit: cover;  // 
}

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
主要有以下属性值：

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

获取时间

new Date().toLocaleString()  // 2024/2/4 14:53:30

将对象转化为用&符号拼接的字符串

// 属性值为null的不会被拼接
const obj = {
  name: '张三',
  age: ‘18,
  sex: null,
};

const result = Object.entries(obj)
  .filter(([key, value]) => value !== null)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');

console.log(result);   // name=张三&age=18