前端三巨头技巧记录

发表于2021-06-03更新于2021-08-03字数统计1.4k阅读时长10分

JavaScript

获取{}类型数据长度

1
Object.keys(data).length

三元表达式

1
var str = grade>=60 ? '及格': '不及格';

数组筛选(字典数据)

类似于python中的List，JavaScript中的Array也可以进行筛选

1
2
3
4
5
6
7
// 这个是例子中的被筛选数组
var aim = [
    {name: 'Anne', age: 23, gender: 'female'},
    {name: 'Leila', age: 16, gender: 'female'},
    {name: 'Jay', age: 19, gender: 'male'},
    {name: 'Mark', age: 40, gender: 'male'}
]

单条件单数据筛选

1
2
3
4
5
6
// 根据单个名字筛选
function filterByName(aim, name) {
    return aim.filter(item => item.name == name)
}
// 输入 aim 'Leila' 期望输出为 [{name:'Leila', age: 16, gender:'female'}]
console.log(filterByName(aim, 'leila'))

字符串切割

这里推荐split()函数

语法
1
stringObject.split(separator,howmany)

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度

返回值

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身

例子
1
2
"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

首字母大写

1
2
3
4
5
var str = 'test string';
// 只需要一行代码即可
str = str.replace(str[0],str[0].toUpperCase());
console.log(str);
// 输出：Test string

字符串拼接

推荐join()方法

1
2
3
4
5
6
var s = "JavaScript" , a = [];
for (var i = 0; i < 1000; i ++) {
    a.push(s);
var str = a.join("");
a = null;
document.write(str);

sessionStorage用法

使用 sessionStorage 创建一个本地存储的 name/value 对，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除

语法

保存数据

1
sessionStorage.setItem("key", "value");

读取数据

1
var lastname = sessionStorage.getItem("key");

删除指定键的数据

1
sessionStorage.removeItem("key");

删除所有数据

1
sessionStorage.clear();

坑！！Chrome 浏览器，_blank 方式新开窗口，sessionStorage 存储的数据会丢失

includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

  • includes()：返回布尔值，表示是否找到了参数字符串。
  • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
  • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
1
2
3
4
5
6
7
8
9
10
let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

// 这三个方法都支持第二个参数，表示开始搜索的位置
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

replaceAll()替换全部

字符串的实例方法replace()只能替换第一个匹配，因此引入了replaceAll()方法，可以一次性替换所有匹配

1
2
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

去除小数部分

Math.trunc方法用于去除一个数的小数部分，返回整数部分

1
2
3
4
5
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0

替代函数的 apply 方法

1
2
3
4
5
6
7
8
// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

另一个例子是通过push函数，将一个数组添加到另一个数组的尾部

1
2
3
4
5
6
7
8
9
10
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
// [0, 1, 2, 3, 4, 5]

复制数组

使用扩展运算符会返回原数组的克隆，再修改a2就不会对a1产生影响

1
2
3
4
5
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

Object.keys()，Object.values()，Object.entries()

Object.keys方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名；Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值；Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

1
2
3
4
5
6
7
8
9
10
11
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

HTML

<i>和<em>的区别

就表现而言<em>和<i>表现都一样，都是表示斜体。

但是<em>标签是“含有语义”的标签，搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO

时间精确到时分秒

1
<span>{{ parseTime(scope.row.actBeginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>

CSS