web前端学习笔记（1）

Luosunce 发布于2019-08-21 16:19 / 1435人阅读

摘要：而且状态一旦改变，就无法再次改变。这是因为立即的是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。返回布尔值，表示参数字符串是否在原字符串的头部。用于头部补全，用于尾部补全。

9月5日

array.push(...newArray)    // 往数组插入数组

// 交换a和b的值
// ES6写法
var a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);    // 2 1

// Babel转换成ES5后
var a = 1,
    b = 2;
var _ref = [b, a];
a = _ref[0];
b = _ref[1];
console.log(a, b);    // 2 1

// 获取某个元素相对于浏览器窗口的位置
var domRect = element.getBoundingClientRect();

// 删除数组index1、index2位置上的数，并返回裁剪部分的新数组
_.pullAt(array, [index1, index2]);

9月6日 Promise对象

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。而且状态一旦改变，就无法再次改变。

Promise新建后会立即执行。

比如：

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "done");
  });
}

timeout(100).then((value) => {
  console.log(value);
});

上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。

let promise = new Promise(function(resolve, reject) {
  console.log("Promise");
  resolve();
});

promise.then(function() {
  console.log("resolved.");
});

console.log("Hi!");

// Promise
// Hi!
// resolved

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});

// 2
// 1

上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

var promise = new Promise(function (resolve, reject) {
  resolve("ok");
  setTimeout(function () { throw new Error("test") }, 0)
});
promise.then(function (value) { console.log(value) });
// ok
// Uncaught Error: test

Promise.resolve()是在本轮“事件循环”的结束时执行，而不是在下一轮“事件循环”的开始。

setTimeout(function () {
  console.log("three");
}, 0);

Promise.resolve().then(function () {
  console.log("two");
});

console.log("one");

// one
// two
// three

上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log("one")则是立即执行，因此最先输出。

字符串

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

repeat()：返回一个新的字符串，表示将原字符串重复n次。如果参数是小数，则会被取整。

padStart()、padEnd()：字符串补全长度的功能。如果某个字符串不够长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

includes()、startsWith()、endsWith()都支持传入第二个参数，传入开始搜索的位置。padStart()、padEnd()

JS数组去重黑魔法

使用数组新建一个Set对象，然后把它转换成数组

var array = [1, 2, 3, 4, 1, 2, 3, 4];

console.log([...new Set(array)]);    // [1, 2, 3, 4]

console.log(Array.from(new Set(array)));    // [1, 2, 3, 4]

文章出处：阮一峰ES6入门

私有云云服务器学习web前端 web前端学习 web前端免费学习 web前端学习视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88396.html

重学前端学习笔记（五）--如何运用语义类标签来呈现Wiki网页？

摘要：语义如何运用语义类标签来呈现网页通过网页案例来学习语义类标签最初的设计场景就是超文本，早期工作组的专家都是出版界书籍排版的专家。标记的部分有三个注记，它在文章中的作用就是额外的注释，但是中并没有相关的语义，这时可以使用标签进行相关实现。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一...

ckllj 2019-08-23 17:11 评论0 收藏0
重学前端学习笔记（五）--如何运用语义类标签来呈现Wiki网页？

摘要：语义如何运用语义类标签来呈现网页通过网页案例来学习语义类标签最初的设计场景就是超文本，早期工作组的专家都是出版界书籍排版的专家。标记的部分有三个注记，它在文章中的作用就是额外的注释，但是中并没有相关的语义，这时可以使用标签进行相关实现。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一...

hyuan 2019-08-29 18:44 评论0 收藏0
重学前端学习笔记（一）--前端发展史以及学习痛点

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

hlcfan 2019-08-02 16:14 评论0 收藏0
重学前端学习笔记（一）--前端发展史以及学习痛点

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

wayneli 2019-08-23 17:07 评论0 收藏0