targetLength:
当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
padString:
可选,如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断。默认值为 " "。
‘abc’.padStart(10); // " abc",填充默认值""
‘abc’.padStart(10, “*”); // “*******abc”
‘abc’.padStart(6,“123465”); // “123abc”
‘abc’.padStart(1); // “abc”
举例
日期格式化:yyyy-mm-dd的格式
let date = new Date();
let year = date.getFullYear();
// 月日如果是一位前面给它填充一个0
let month = (date.getMonth() + 1).toString().padStart(2, ‘0’);
let day = (date.getDate()).toString().padStart(2, ‘0’);
console.log( ${year}-${month}-${day}
); // 2022-01-09
数字替换(手机号,银行卡号等)
let tel = ‘18937640746’
let newTel = tel.slice(-4).padStart(tel.length, ‘*’)
console.log(newTel) // *******0746
7、String.prototype.padEnd
把指定字符串填充到字符串尾部,返回新字符串。
语法与padStart相同
‘abc’.padEnd(10); // “abc “,填充默认值””
‘abc’.padEnd(10, “"); // "abc******”
‘abc’.padEnd(6, “123456”); // “abc123”
‘abc’.padEnd(1); // “abc”
7、async / await
前面添加了async的函数在执行后都会自动返回一个Promise对象
function fn() {
return ‘leo’;
}
console.log(fn()); // ‘leo’
添加async后
async function fn() {
return ‘leo’; // Promise.resolve(‘leo’)
}
console.log(fn()); // Promise对象
async函数中使用await,那么await处的代码就会变成同步的,即只有等await后面的Promise执行完成得到结果才会继续往下执行,await意为等待
function timeout() {
return new Promise(resolve => {
setTimeout(() => {
console.log(1);
resolve();
}, 1000);
})
}
async function fn() {
await timeout(); // 执行完成才继续往下执行
console.log(2);
}
fn(); // 不加async和await是 2、1,加了是 1、2
注意:
1、await 只能在 async 标记的函数内部使用,单独使用会触发 Syntax error;
2、await后面需要跟异步操作,不然就没有意义,而且await后面的Promise对象不必写then,因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。
更多详情请参考(具体场景)
8、Rest & Spread
spread 例子
let text = {
a: 1,
b: 2,
c: 3,
}
let newText = {
…text,
c: 4
}
console.log(newText); // {a: 1, b: 2, c: 4}
这块代码展示了 spread 语法,可以把 text 对象的数据都拓展到 newText 对象,这个功能很实用。需要注意的是,如果存在相同的属性名,后面的会把前面的覆盖。
如果属性的值是一个对象的话,该对象的引用会被拷贝,而不是生成一个新的对象
let obj = { x: { y: 10 } };
let copy1 = { …obj };
let copy2 = { …obj };
obj.x.y = “leo”;
console.log(copy1, copy2); // {x: {y: “leo”}} {x: {y: “leo”}}
console.log(copy1.x === copy2.x); // true,x为同一个引用
rest 例子
let text = {
a: 1,
b: 2,
c: 3
}
let { a, …rest } = text
console.log(a, rest); // 1 {b: 2, c: 3}
当对象 key-value 不确定的时候,把必选的 key 赋值给变量,用一个变量接收其他可选的 key 数据,这在之前是做不到的。注意,rest 属性必须始终出现在对象的末尾,否则将抛出错误。
9、for await of
异步迭代器(for-await-of):循环等待每个Promise对象变为resolved状态才进入下一步。
for…of 是同步运行
function TimeOut(time){
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(time);
}, time);
})
}
async function test() {
let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]; // 异步迭代器
for (let item of arr) {
console.log(item.then(console.log));
}
}
test();
// 1000
// 2000
// 3000
for of 方法不能遍历异步迭代器,得到的结果并不是我们所期待的,此时可以使用for await of
function TimeOut(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(time);
}, time);
})
}
async function test() {
let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)];
for await (let item of arr) { // 按arr中顺序执行且返回
console.log(item);
}
}
test();
// 2000
// 1000
// 3000
使用for await of,则等待每个Promise对象变为resolved状态才进入下一步,因此打印的结果为 2000,1000,3000。
10、Promise.prototype.finally()
Promise执行时,无论结果是fulfilled或者是rejected,在执行then()或catch()后,都会执行finally()指定的回调函数,可以避免同样的语句需要在then()和catch()中各写一次的情况
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘success’);
}, 1000);
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
}).finally(() => { // 无论Promise结果是then(),即resolve;还是catch(),即reject,最后都会执行finally()
console.log(‘finally’);
})
如每次请求发送完毕,就需要关闭loading提示框,不管请求成功或是失败,这个loading都需要关闭掉,这时把关闭loading的代码写在finally里再合适不过了。
11、Object.fromEntries()
Object.fromEntries() 把键值对列表转换为一个对象,此方法和Object.entries() 相对的(逆操作)
let arr = [ [‘a’, 1], [‘b’, 2] ];
let obj = Object.fromEntries(arr);
console.log(obj); // {a: 1, b: 2}
Map 转 Object
let mapObj = new Map();
mapObj.set(‘name’, ‘leo’);
mapObj.set(‘age’, 18);
console.log(map); // {‘name’ => ‘leo’, ‘age’ => 18}
let newObj = Object.fromEntries(mapObj);
console.log(newObj); // {name: ‘leo’, age: 18}
12、Array.prototype.flat()
语法
let newArr = arr.flat([depth]); // depth可选,指提取嵌套数组的结构深度,默认值为 1。
flat()
会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回(数组扁平化)
let arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]
let arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]
console.log(arr2.flat(3)); // [0, 1, 2, 3, 4]
//使用 Infinity,可展开任意深度的嵌套数组
let arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// flat()方法会移除数组中的空项
let arr5 = [1, 2, , , 4, 5];
arr5.flat(); // [1, 2, 4, 5]
13、Array.prototype.flatMap()
flatMap() 首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。顾名思义,它包含两部分功能一个是 map,一个是 flat(深度为1)
语法
let newArr = arr.flatMap(function callback(currentValue[, index[, array]]) {
// 返回新数组的元素
}[, thisArg]);
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
后话
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
1024c (备注前端)**
[外链图片转存中…(img-Ke4OFHMM-1712538156587)]
后话
对于面试,说几句个人观点。
面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。
所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-YvkHcz8v-1712538156588)]