js部分

export

  • export 用于导出一个或多个变量、函数、类
  • export default 用户导出一个默认的值

两者导出和导入

exprot 导出:

1
2
3
4
5
// 导出多个命名的变量或函数
export const name = 'snailuu';
export function greet() {
console.log('Hello World!');
}

export 导入:

1
import { name, greet } from './app.js';

export default 导出:

1
2
3
4
5
// 导出默认的函数
export default function() {
console.log('Default export');
}

export default 导入:

1
2
import myFunction from './app.js';

concat

  • concat 用于将多个字符串拼接成一个字符串
  • concat 可以接受一个或多个参数,并在其中使用逗号分隔它们
  • concat 返回一个字符串
    使用方法:
    1
    2
    3
    4
    5
    const str1 = 'Hello';
    const str2 = 'World';
    const result = str1.concat(' ', str2);
    console.log(result); // 输出: "Hello World"

对象传递与引用

如果想在方法中给对象重新赋值,直接通过obj.属性值这样子去修改,而不是通过obj={新对象}这样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
* 修改对象,仅保留需要的属性
* @param {Object} obj 要修改的对象
* @param {Array<string>} keys 需要保留的属性名数组
*/

function includes(arr, target) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === target) {
return true;
}
}
return false;
}


function pick(obj, keys) {
for (var key in obj) {
if (!includes(keys, key)) {
// 不保留此属性
delete obj[key];
}
}
}


var obj = {
a: 1,
b: 2,
c: 3,
d: 4,
};

pick(obj, ['a', 'c']);

console.log(obj);

原型减少内存

如果在对象中声明一个方法,不同的实例对象会开辟不同的方法内存,比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function User(name, age) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log('你好,我是' + this.name + ',今年' + this.age + '岁了');
};
}



var u1 = new User('huang', 17);
var u2 = new User('黄哈哈', 77);
var u3 = new User('李大炮', 18);

这样子在分别实例化u1u2u3的时候都会开辟一个各自的方法内存,在控制台打印u1.sayHi === u2.sayHi 会输出false

每个函数都会自动附带一个属性prototype,这个属性的值是一个普通对象,称之为原型对象

每个实例属性的查找流程:

  • 先看本身是否有该属性
  • 如果没有查看隐式原型
    这样一来上面的代码就可以写成下面这样子:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function User(name, age) {
    this.name = name;
    this.age = age;
    }

    User.prototype.sayHi = function () {
    console.log('你好,我是' + this.name + ',今年' + this.age + '岁了');
    };

    var u1 = new User('huang', 17);
    var u2 = new User('黄哈哈', 77);
    var u3 = new User('李大炮', 18);

call/apply

两者作用:改变 this 的指向
区别:

call apply
第一个参数为指向的对象,后面依次为对应函数的参数 第一个参数为指向的对象,第二个参数为一个数组,里面内容依次为对应函数的参数

原型链

  • 判断原型:instanceof
  • 获取隐式原型:getPrototypeOf()
  • 创建空原型对象(无__proto__):Object.create()
  • 改变隐式原型指向:setPrototypeOf(obj, prototype) (设置obj的隐式原型为prototype)

css部分

vue部分

全局变量

vue3项目引入全局变量

1
2
3
main.js
const req_url = "http://192.168.1.118:8000/"
app.provide("req_url", req_url)

在其setup直接引用

1
2
3
4
<script setup>
import { inject } from 'vue';
inject('req_url')
</script>