前端小智

前端小智 查看完整档案

厦门编辑Plymouth  |  前端 编辑大迁世界  |  Web前端攻城狮 编辑 github.com/qq449245884/xiaozhi 编辑
编辑

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

个人动态

前端小智 发布了文章 · 4月13日

try..catch 不能捕获的错误有哪些?注意事项又有哪些?

作者:Ashish Lahoti
译者:前端小智
来源:codingnconcept
点赞再看,微信搜索大迁世界,B站关注【前端小智】这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。**

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

今天的内容中,我们来学习一下使用trycatchfinallythrow进行错误处理。我们还会讲一下 JS 中内置的错误对象(Error, SyntaxError, ReferenceError等)以及如何定义自定义错误。

1.使用 try..catch..finally..throw

在 JS 中处理错误,我们主要使用trycatchfinallythrow关键字。

  • try块包含我们需要检查的代码
  • 关键字throw用于抛出自定义错误
  • catch块处理捕获的错误
  • finally 块是最终结果无论如何,都会执行的一个块,可以在这个块里面做一些需要善后的事情

1.1 try

每个try块必须与至少一个catchfinally块,否则会抛出SyntaxError错误。

我们单独使用try块进行验证:

try {
  throw new Error('Error while executing the code');
}
ⓧ Uncaught SyntaxError: Missing catch or finally after try

1.2 try..catch

建议将trycatch块一起使用,它可以优雅地处理try块抛出的错误。

try {
  throw new Error('Error while executing the code');
} catch (err) {
  console.error(err.message);
}
➤ ⓧ Error while executing the code

1.2.1 try..catch 与 无效代码

try..catch 无法捕获无效的 JS 代码,例如try块中的以下代码在语法上是错误的,但它不会被catch块捕获。

try {
  ~!$%^&*
} catch(err) {
  console.log("这里不会被执行");
}
➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token

1.2.2 try..catch 与 异步代码

同样,try..catch无法捕获在异步代码中引发的异常,例如setTimeout

try {
  setTimeout(function() {
    noSuchVariable;   // undefined variable
  }, 1000);
} catch (err) {
  console.log("这里不会被执行");
}

未捕获的ReferenceError将在1秒后引发:

➤ ⓧ Uncaught ReferenceError: noSuchVariable is not defined

所以 ,我们应该在异步代码内部使用 try..catch 来处理错误:

setTimeout(function() {
  try {
    noSuchVariable;
  } catch(err) {
    console.log("error is caught here!");
  }
}, 1000);

1.2.3 嵌套 try..catch

我们还可以使用嵌套的trycatch块向上抛出错误,如下所示:

try {
  try {
    throw new Error('Error while executing the inner code');
  } catch (err) {
    throw err;
  }
} catch (err) {
  console.log("Error caught by outer block:");
  console.error(err.message);
}
Error caught by outer block:
➤ ⓧ Error while executing the code

1.3 try..finally

不建议仅使用 try..finally 而没有 catch 块,看看下面会发生什么:

try {
  throw new Error('Error while executing the code');
} finally {
  console.log('finally');
}
finally
➤ ⓧ Uncaught Error: Error while executing the code

这里注意两件事:

  • 即使从try块抛出错误后,也会执行finally
  • 如果没有catch块,错误将不能被优雅地处理,从而导致未捕获的错误

1.4 try..catch..finally

建议使用try...catch块和可选的finally块。

try {
  console.log("Start of try block");
  throw new Error('Error while executing the code');
  console.log("End of try block -- never reached");
} catch (err) {
  console.error(err.message);
} finally {
  console.log('Finally block always run');
}
console.log("Code execution outside try-catch-finally block continue..");
Start of try block
➤ ⓧ Error while executing the code
Finally block always run
Code execution outside try-catch-finally block continue..

这里还要注意两件事:

  • try块中抛出错误后往后的代码不会被执行了
  • 即使在try块抛出错误之后,finally块仍然执行

finally块通常用于清理资源或关闭流,如下所示:

try {
  openFile(file);
  readFile(file);
} catch (err) {
  console.error(err.message);
} finally {
  closeFile(file);
}

1.5 throw

throw语句用于引发异常。

throw <expression>
// throw primitives and functions
throw "Error404";
throw 42;
throw true;
throw {toString: function() { return "I'm an object!"; } };

// throw error object
throw new Error('Error while executing the code');
throw new SyntaxError('Something is wrong with the syntax');
throw new ReferenceError('Oops..Wrong reference');

// throw custom error object
function ValidationError(message) {
  this.message = message;
  this.name = 'ValidationError';
}
throw new ValidationError('Value too high');

2. 异步代码中的错误处理

对于异步代码的错误处理可以Promiseasync await

2.1 Promise 中的 then..catch

我们可以使用then()catch()链接多个 Promises,以处理链中单个 Promise 的错误,如下所示:

Promise.resolve(1)
  .then(res => {
      console.log(res);  // 打印 '1'

      throw new Error('something went wrong');  // throw error

      return Promise.resolve(2);  // 这里不会被执行
  })
  .then(res => {
      // 这里也不会执行,因为错误还没有被处理
      console.log(res);    
  })
  .catch(err => {
      console.error(err.message);  // 打印 'something went wrong'
      return Promise.resolve(3);
  })
  .then(res => {
      console.log(res);  // 打印 '3'
  })
  .catch(err => {
      // 这里不会被执行
      console.error(err);
  })

我们来看一个更实际的示例,其中我们使用fetch调用API,该 API 返回一个promise对象,我们使用catch块优雅地处理 API 失败。

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

fetch("http://httpstat.us/500")
    .then(handleErrors)
    .then(response => console.log("ok"))
    .catch(error => console.log("Caught", error));
Caught Error: Internal Server Error
    at handleErrors (<anonymous>:3:15)

2.2 try..catchasync await

async await 中 使用 try..catch 比较容易:

(async function() {
    try {
        await fetch("http://httpstat.us/500");
    } catch (err) {
        console.error(err.message);
    }
})();

让我们看同一示例,其中我们使用fetch调用API,该API返回一个promise对象, 我们使用try..catch块优雅地处理API失败。

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
}

(async function() {
    try {
      let response = await fetch("http://httpstat.us/500");
      handleErrors(response);
      let data = await response.json();
      return data;
    } catch (error) {
        console.log("Caught", error)
    }
})();
Caught Error: Internal Server Error
    at handleErrors (<anonymous>:3:15)
    at <anonymous>:11:7

3. JS 中的内置错误

3.1 Error

JavaScript 有内置的错误对象,它通常由try块抛出,并在catch块中捕获,Error 对象包含以下属性:

  • name:是错误的名称,例如 “Error”, “SyntaxError”, “ReferenceError” 等。
  • message:有关错误详细信息的消息。
  • stack:是用于调试目的的错误的堆栈跟踪。

我们创建一个Error 对象,并查看它的名称和消息属性:

const err = new Error('Error while executing the code');

console.log("name:", err.name);
console.log("message:", err.message);
console.log("stack:", err.stack);
name: Error
message: Error while executing the code
stack: Error: Error while executing the code
    at <anonymous>:1:13

JavaScript 有以下内置错误,这些错误是从 Error 对象继承而来的

3.2 EvalError

EvalError 表示关于全局eval()函数的错误,这个异常不再由 JS 抛出,它的存在是为了向后兼容。

3.3 RangeError

当值超出范围时,将引发RangeError

➤ [].length = -1
ⓧ Uncaught RangeError: Invalid array length

3.4 ReferenceError

当引用一个不存在的变量时,将引发 ReferenceError

➤ x = x + 1;
ⓧ Uncaught ReferenceError: x is not defined

3.5 SyntaxError

当你在 JS 代码中使用任何错误的语法时,都会引发SyntaxError

➤ function() { return 'Hi!' }
ⓧ Uncaught SyntaxError: Function statements require a function name

➤ 1 = 1
ⓧ Uncaught SyntaxError: Invalid left-hand side in assignment

➤ JSON.parse("{ x }");
ⓧ Uncaught SyntaxError: Unexpected token x in JSON at position 2

3.6 TypeError

如果该值不是预期的类型,则抛出TypeError

➤ 1();
ⓧ Uncaught TypeError: 1 is not a function

➤ null.name;
ⓧ Uncaught TypeError: Cannot read property 'name' of null

3.7 URIError

如果以错误的方式使用全局 URI 方法,则会抛出URIError

➤ decodeURI("%%%");
ⓧ Uncaught URIError: URI malformed

4. 定义并抛出自定义错误

我们也可以用这种方式定义自定义错误。

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = "CustomError";
  } 
};

const err = new CustomError('Custom error while executing the code');

console.log("name:", err.name);
console.log("message:", err.message);
name: CustomError
message: Custom error while executing the code

我们还可以进一步增强CustomError对象以包含错误代码

class CustomError extends Error {
  constructor(message, code) {
    super(message);
    this.name = "CustomError";
    this.code = code;
  } 
};

const err = new CustomError('Custom error while executing the code', "ERROR_CODE");

console.log("name:", err.name);
console.log("message:", err.message);
console.log("code:", err.code);
name: CustomError
message: Custom error while executing the code
code: ERROR_CODE

try..catch块中使用它:

try{
  try {
    null.name;
  }catch(err){
    throw new CustomError(err.message, err.name);  //message, code
  }
}catch(err){
  console.log(err.name, err.code, err.message);
}
CustomError TypeError Cannot read property 'name' of null

我是小智,我们下期见!


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://codings.com/javascrip...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 3 收藏 3 评论 0

前端小智 发布了文章 · 4月12日

所以你认为你知道 JavaScript 吗?

作者:Chidume Nnamdi
译者:前端小智
来源:smashingmagazine

点赞再看,养成习惯

本文 GitHubhttps://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

JavaScript 是一种有趣的语言,我们都喜欢它,因为它的性质。浏览器是JavaScript的主要运行的地方,两者在我们的服务中协同工作。JS有一些概念,人们往往会对它掉以轻心,有时可能会忽略不计。原型、闭包和事件循环等概念仍然是大多数JS开发人员绕道而行的晦涩领域之一。正如我们所知,无知是一件危险的事情,它可能会导致错误。

想阅读更多优质文章请[猛戳GitHub博客][1]\,一年百来篇优质文章等着你!

接下来,来看看几个问题,你也可以试试想想,然后作答。

问题1:浏览器控制台上会打印什么?

var a = 10;
function foo() {
    console.log(a); // ??
    var a = 20;
}
foo();

问题2:如果我们使用 let 或 const 代替 var,输出是否相同

var a = 10;
function foo() {
    console.log(a); // ??
    let a = 20;
}
foo();

问题3:“newArray”中有哪些元素?

var array = [];
for(var i = 0; i <3; i++) {
 array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??

问题4:如果我们在浏览器控制台中运行'foo'函数,是否会导致堆栈溢出错误?

function foo() {
  setTimeout(foo, 0); // 是否存在堆栈溢出错误?
};

问题5: 如果在控制台中运行以下函数,页面(选项卡)的 UI 是否仍然响应

function foo() {
  return Promise.resolve().then(foo);
};

问题6: 我们能否以某种方式为下面的语句使用展开运算而不导致类型错误

var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeError

问题7:运行以下代码片段时,控制台上会打印什么?

var obj = { a: 1, b: 2 };
Object.setPrototypeOf(obj, {c: 3});
Object.defineProperty(obj, 'd', { value: 4, enumerable: false });

// what properties will be printed when we run the for-in loop?
for(let prop in obj) {
    console.log(prop);
}

问题8:xGetter() 会打印什么值?

var x = 10;
var foo = {
  x: 90,
  getX: function() {
    return this.x;
  }
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??

答案

现在,让我们从头到尾回答每个问题。我将给您一个简短的解释,同时试图揭开这些行为的神秘面纱,并提供一些参考资料。

问题1: undefined

解析:

使用var关键字声明的变量在JavaScript中会被提升,并在内存中分配值undefined。 但初始化恰发生在你给变量赋值的地方。 另外,var声明的变量是[函数作用域的][2],而letconst是块作用域的。 所以,这就是这个过程的样子:

var a = 10; // 全局使用域
function foo() {
// var a 的声明将被提升到到函数的顶部。
// 比如:var a

console.log(a); // 打印 undefined

// 实际初始化值20只发生在这里
   var a = 20; // local scope
}
    • -

问题 2:ReferenceError:a undefined

解析:

letconst声明可以让变量在其作用域上受限于它所使用的块、语句或表达式。与var不同的是,这些变量没有被提升,并且有一个所谓的暂时死区(TDZ)。试图访问TDZ中的这些变量将引发ReferenceError,因为只有在执行到达声明时才能访问它们。

var a = 10; // 全局使用域
function foo() { // TDZ 开始

// 创建了未初始化的'a'
    console.log(a); // ReferenceError

// TDZ结束,'a'仅在此处初始化,值为20
    let a = 20;
}

下表概述了与JavaScript中使用的不同关键字声明的变量对应的提升行为和使用域:

clipboard.png

    • -

问题 3: [3, 3, 3]

解析:

for循环的头部声明带有var关键字的变量会为该变量创建单个绑定(存储空间)。 阅读更多关于[闭包][3]的信息。 让我们再看一次for循环。

// 误解作用域:认为存在块级作用域
var array = [];
for (var i = 0; i < 3; i++) {
  // 三个箭头函数体中的每个`'i'`都指向相同的绑定,
  // 这就是为什么它们在循环结束时返回相同的值'3'。
  array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]

如果使用 let 声明一个具有块级作用域的变量,则为每个循环迭代创建一个新的绑定。

// 使用ES6块级作用域
var array = [];
for (let i = 0; i < 3; i++) {
  // 这一次,每个'i'指的是一个新的的绑定,并保留当前的值。
 // 因此,每个箭头函数返回一个不同的值。
  array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]

解决这个问题的另一种方法是使用[闭包][4]。

let array = [];
for (var i = 0; i < 3; i++) {

  array[i] = (function(x) {
    return function() {
      return x;
    };
  })(i);
}
const newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
    • -

问题4 : 不会溢出

解析:

JavaScript并发模型基于“事件循环”。 当我们说“浏览器是 JS 的家”时我真正的意思是浏览器提供运行时环境来执行我们的JS代码。

浏览器的主要组件包括调用堆栈事件循环**,任务队列Web API**。 像setTimeoutsetIntervalPromise这样的全局函数不是JavaScript的一部分,而是 Web API 的一部分。 JavaScript 环境的可视化形式如下所示:

clipboard.png

JS调用栈是后进先出(LIFO)的。引擎每次从堆栈中取出一个函数,然后从上到下依次运行代码。每当它遇到一些异步代码,如setTimeout,它就把它交给Web API(箭头1)。因此,每当事件被触发时,callback 都会被发送到任务队列(箭头2)。

事件循环(Event loop)不断地监视任务队列(Task Queue),并按它们排队的顺序一次处理一个回调。每当调用堆栈(call stack)为空时,Event loop获取回调并将其放入堆栈(stack )(箭头3)中进行处理。请记住,如果调用堆栈不是空的,则事件循环不会将任何回调推入堆栈

现在,有了这些知识,让我们来回答前面提到的问题:

步骤

  1. 调用 foo()会将foo函数放入调用堆栈(call stack)
  2. 在处理内部代码时,JS引擎遇到setTimeout
  3. 然后将foo回调函数传递给WebAPIs(箭头1)并从函数返回,调用堆栈再次为空
  4. 计时器被设置为0,因此foo将被发送到
    任务队列
    (箭头2)。
  5. 由于调用堆栈是空的,事件循环将选择foo回调并将其推入调用堆栈进行处理。
  6. 进程再次重复,堆栈不会溢出。

运行示意图如下所示:

\![图片描述][5]

    • -

问题5 : 不会响应

解析:

大多数时候,开发人员假设在
事件循环图中只有一个任务队列。但事实并非如此,我们可以有多个任务队列。由浏览器选择其中的一个队列并在该队列中处理回调



在底层来看,JavaScript中有宏任务和微任务。setTimeout回调是宏任务,而Promise回调是微任务

主要的区别在于他们的执行方式。宏任务在单个循环周期中一次一个地推入堆栈,但是微任务队列总是在执行后返回到事件循环之前清空。因此,如果你以处理条目的速度向这个队列添加条目,那么你就永远在处理微任务。只有当微任务队列为空时,事件循环才会重新渲染页面、

现在,当你在控制台中运行以下代码段

function foo() {
  return Promise.resolve().then(foo);
};

每次调用'foo'都会继续在微任务队列上添加另一个'foo'回调,因此事件循环无法继续处理其他事件(滚动,单击等),直到该队列完全清空为止。 因此,它会阻止渲染。

    • -

问题6 : 会导致TypeError错误

解析:

[展开语法][6] 和 [for-of][7] 语句遍历iterable对象定义要遍历的数据。ArrayMap 是具有默认迭代行为的内置迭代器。对象不是可迭代的,但是可以通过使用[iterable][8]和[iterator][9]协议使它们可迭代。

Mozilla文档中,如果一个对象实现了@@iterator方法,那么它就是可迭代的,这意味着这个对象(或者它原型链上的一个对象)必须有一个带有@@iterator键的属性,这个键可以通过常量Symbol.iterator获得。

上述语句可能看起来有点冗长,但是下面的示例将更有意义:

var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {

  // iterator 是一个具有 next 方法的对象,
  // 它的返回至少有一个对象
  // 两个属性:value&done。

  // 返回一个 iterator 对象
  return {
    next: function() {
      if (this._countDown === 3) {
        const lastValue = this._countDown;
        return { value: this._countDown, done: true };
      }
      this._countDown = this._countDown + 1;
      return { value: this._countDown, done: false };
    },
    _countDown: 0
  };
};
[...obj]; // 打印 [1, 2, 3]

还可以使用 [generator][10] 函数来定制对象的迭代行为:

var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
  yield 1;
  yield 2;
  yield 3;
}
[...obj]; // 打印 [1, 2, 3]
    • -

问题7 : a, b, c

解析:

for-in循环遍历对象本身的[可枚举属性][11]以及对象从其原型继承的属性。 可枚举属性是可以在for-in循环期间包含和访问的属性。

var obj = { a: 1, b: 2 };
var descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor.enumerable); // true
console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }

现在你已经掌握了这些知识,应该很容易理解为什么我们的代码要打印这些特定的属性

var obj = { a: 1, b: 2 }; //a,b 都是 enumerables 属性

// 将{c:3}设置为'obj'的原型,并且我们知道
// for-in 循环也迭代 obj 继承的属性
// 从它的原型,'c'也可以被访问。
Object.setPrototypeOf(obj, { c: 3 });

// 我们在'obj'中定义了另外一个属性'd',但是 
// 将'enumerable'设置为false。 这意味着'd'将被忽略。
Object.defineProperty(obj, "d", { value: 4, enumerable: false });

for (let prop in obj) {
  console.log(prop);
}
// 打印
// a
// b
// c
    • -

\#\#\#\# 问题8 : 10

解析:

在全局范围内初始化x时,它成为window对象的属性(不是严格的模式)。看看下面的代码:

var x = 10; // global scope
var foo = {
  x: 90,
  getX: function() {
    return this.x;
  }
};
foo.getX(); // prints 90
let xGetter = foo.getX;
xGetter(); // prints 10

咱们可以断言:

window.x === 10; // true

this 始终指向调用方法的对象。因此,在foo.getx()的例子中,它指向foo对象,返回90的值。而在xGetter()的情况下,this指向 window对象, 返回 window 中的x的值,即10

要获取 foo.x的值,可以通过使用Function.prototype.bindthis的值绑定到foo对象来创建新函数。

let getFooX = foo.getX.bind(foo);
getFooX(); // 90

就这样! 如果你的所有答案都正确,那么干漂亮。 咱们都是通过犯错来学习的。 这一切都是为了了解背后的“原因”。

    • -

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://dev.to/aman_singh/so-...

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

clipboard.png

[1]: https://www.fundebug.com/?utm\_source=xiaozhi

查看原文

赞 3 收藏 3 评论 0

前端小智 发布了文章 · 4月6日

记得有一次面试被虐的题,Promise 完整指南

作者:Adrian Mejia
译者:前端小智
来源:adrianmjia

点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

这篇文章算是 JavaScript Promises 比较全面的教程,该文介绍了必要的方法,例如 thencatchfinally。 此外,还包括处理更复杂的情况,例如与Promise.all并行执行Promise,通过Promise.race 来处理请求超时的情况,Promise 链以及一些最佳实践和常见的陷阱。

1.JavaScript Promises

Promise 是一个允许我们处理异步操作的对象,它是 es5 早期回调的替代方法。

与回调相比,Promise 具有许多优点,例如:

  • 让异步代码更易于阅读。
  • 提供组合错误处理。
    * 更好的流程控制,可以让异步并行或串行执行。

回调更容易形成深度嵌套的结构(也称为回调地狱)。 如下所示:

a(() => {
  b(() => {
    c(() => {
      d(() => {
        // and so on ...
      });
    });
  });
});

如果将这些函数转换为 Promise,则可以将它们链接起来以生成更可维护的代码。 像这样:

Promise.resolve()
  .then(a)
  .then(b)
  .then(c)
  .then(d)
  .catch(console.error);

在上面的示例中,Promise 对象公开了.then.catch方法,我们稍后将探讨这些方法。

1.1 如何将现有的回调 API 转换为 Promise?

我们可以使用 Promise 构造函数将回调转换为 Promise。

Promise 构造函数接受一个回调,带有两个参数resolvereject

  • Resolve:是在异步操作完成时应调用的回调。
  • Reject:是发生错误时要调用的回调函数。

构造函数立即返回一个对象,即 Promise 实例。 当在 promise 实例中使用.then方法时,可以在Promise “完成” 时得到通知。 让我们来看一个例子。

Promise 仅仅只是回调?

并不是。承诺不仅仅是回调,但它们确实对.then.catch方法使用了异步回调。 Promise 是回调之上的抽象,我们可以链接多个异步操作并更优雅地处理错误。来看看它的实际效果。

Promise 反面模式(Promises 地狱)

a(() => {
  b(() => {
    c(() => {
      d(() => {
        // and so on ...
      });
    });
  });
});

不要将上面的回调转成下面的 Promise 形式:

a().then(() => {
  return b().then(() => {
    return c().then(() => {
      return d().then(() =>{
        // ⚠️ Please never ever do to this! ⚠️
      });
    });
  });
});

上面的转成,也形成了 Promise 地狱,千万不要这么转。相反,下面这样做会好点:

a()
  .then(b)
  .then(c)
  .then(d)

超时

你认为以下程序的输出的是什么?

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('time is up ⏰');
  }, 1e3);

  setTimeout(() => {
    reject('Oops 🔥');
  }, 2e3);
});

promise
  .then(console.log)
  .catch(console.error);

是输出:

time is up ⏰
Oops! 🔥

还是输出:

time is up ⏰

是后者,因为当一个Promise resolved 后,它就不能再被rejected

一旦你调用一种方法(resolvereject),另一种方法就会失效,因为 promise 处于稳定状态。 让我们探索一个 promise 的所有不同状态。

1.2 Promise 状态

Promise 可以分为四个状态:

  • ⏳ Pending:初始状态,异步操作仍在进行中。
  • ✅ Fulfilled:操作成功,它调用.then回调,例如.then(onSuccess)
  • ⛔️ Rejected: 操作失败,它调用.catch.then的第二个参数(如果有)。 例如.catch(onError).then(..., onError)
  • 😵 Settled:这是 promise 的最终状态。promise 已经死亡了,没有别的办法可以解决或拒绝了。 .finally方法被调用。

clipboard.png

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

1.3 Promise 实例方法

Promise API 公开了三个主要方法:thencatchfinally。 我们逐一配合事例探讨一下。

Promise then

then方法可以让异步操作成功或失败时得到通知。 它包含两个参数,一个用于成功执行,另一个则在发生错误时使用。

promise.then(onSuccess, onError);

你还可以使用catch来处理错误:

promise.then(onSuccess).catch(onError);

Promise 链

then 返回一个新的 Promise ,这样就可以将多个Promise 链接在一起。就像下面的例子一样:

Promise.resolve()
  .then(() => console.log('then#1'))
  .then(() => console.log('then#2'))
  .then(() => console.log('then#3'));

Promise.resolve立即将Promise 视为成功。 因此,以下所有内容都将被调用。 输出将是

then#1
then#2
then#3

Promise catch

Promise .catch方法将函数作为参数处理错误。 如果没有出错,则永远不会调用catch方法。

假设我们有以下承诺:1秒后解析或拒绝并打印出它们的字母。

const a = () => new Promise((resolve) => setTimeout(() => { console.log('a'), resolve() }, 1e3));
const b = () => new Promise((resolve) => setTimeout(() => { console.log('b'), resolve() }, 1e3));
const c = () => new Promise((resolve, reject) => setTimeout(() => { console.log('c'), reject('Oops!') }, 1e3));
const d = () => new Promise((resolve) => setTimeout(() => { console.log('d'), resolve() }, 1e3));

请注意,c使用reject('Oops!')模拟了拒绝。

Promise.resolve()
  .then(a)
  .then(b)
  .then(c)
  .then(d)
  .catch(console.error)

输出如下:

图片描述

在这种情况下,可以看到abc上的错误消息。

我们可以使用then函数的第二个参数来处理错误。 但是,请注意,catch将不再执行。

Promise.resolve()
  .then(a)
  .then(b)
  .then(c)
  .then(d, () => console.log('c errored out but no big deal'))
  .catch(console.error)

图片描述

由于我们正在处理 .then(..., onError)部分的错误,因此未调用catchd不会被调用。 如果要忽略错误并继续执行Promise链,可以在c上添加一个catch。 像这样:

Promise.resolve()
  .then(a)
  .then(b)
  .then(() => c().catch(() => console.log('error ignored')))
  .then(d)
  .catch(console.error)

图片描述

当然,这种过早的捕获错误是不太好的,因为容易在调试过程中忽略一些潜在的问题。

Promise finally

finally方法只在 Promise 状态是 settled 时才会调用。

如果你希望一段代码即使出现错误始终都需要执行,那么可以在.catch之后使用.then

Promise.resolve()
  .then(a)
  .then(b)
  .then(c)
  .then(d)
  .catch(console.error)
  .then(() => console.log('always called'));

或者可以使用.finally关键字:

Promise.resolve()
  .then(a)
  .then(b)
  .then(c)
  .then(d)
  .catch(console.error)
  .finally(() => console.log('always called'));

1.4 Promise 类方法

我们可以直接使用 Promise 对象中四种静态方法。

  • Promise.all
  • Promise.reject
  • Promise.resolve
  • Promise.race

Promise.resolve 和 Promise.reject

这两个是帮助函数,可以让 Promise 立即解决或拒绝。可以传递一个参数,作为下次 .then 的接收:

Promise.resolve('Yay!!!')
  .then(console.log)
  .catch(console.error)

上面会输出 Yay!!!

Promise.reject('Oops 🔥')
  .then(console.log)
  .catch(console.error)

使用 Promise.all 并行执行多个 Promise

通常,Promise 是一个接一个地依次执行的,但是你也可以并行使用它们。

假设是从两个不同的api中轮询数据。如果它们不相关,我们可以使用Promise.all()同时触发这两个请求。

在此示例中,主要功能是将美元转换为欧元,我们有两个独立的 API 调用。 一种用于BTC/USD,另一种用于获得EUR/USD。 如你所料,两个 API 调用都可以并行调用。 但是,我们需要一种方法来知道何时同时完成最终价格的计算。 我们可以使用Promise.all,它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用,以便人们可以等待所有任务完成。

const axios = require('axios');

const bitcoinPromise = axios.get('https://api.coinpaprika.com/v1/coins/btc-bitcoin/markets');
const dollarPromise = axios.get('https://api.exchangeratesapi.io/latest?base=USD');
const currency = 'EUR';

// Get the price of bitcoins on
Promise.all([bitcoinPromise, dollarPromise])
  .then(([bitcoinMarkets, dollarExchanges]) => {
    const byCoinbaseBtc = d => d.exchange_id === 'coinbase-pro' && d.pair === 'BTC/USD';
    const coinbaseBtc = bitcoinMarkets.data.find(byCoinbaseBtc)
    const coinbaseBtcInUsd = coinbaseBtc.quotes.USD.price;
    const rate = dollarExchanges.data.rates[currency];
    return rate * coinbaseBtcInUsd;
  })
  .then(price => console.log(`The Bitcoin in ${currency} is ${price.toLocaleString()}`))
  .catch(console.log);

如你所见,Promise.all接受了一系列的 Promises。 当两个请求的请求都完成后,我们就可以计算价格了。

我们再举一个例子:

const a = () => new Promise((resolve) => setTimeout(() => resolve('a'), 2000));
const b = () => new Promise((resolve) => setTimeout(() => resolve('b'), 1000));
const c = () => new Promise((resolve) => setTimeout(() => resolve('c'), 1000));
const d = () => new Promise((resolve) => setTimeout(() => resolve('d'), 1000));

console.time('promise.all');
Promise.all([a(), b(), c(), d()])
  .then(results => console.log(`Done! ${results}`))
  .catch(console.error)
  .finally(() => console.timeEnd('promise.all'));

解决这些 Promise 要花多长时间? 5秒? 1秒? 还是2秒?

这个留给你们自己验证咯。

Promise race

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。

const a = () => new Promise((resolve) => setTimeout(() => resolve('a'), 2000));
const b = () => new Promise((resolve) => setTimeout(() => resolve('b'), 1000));
const c = () => new Promise((resolve) => setTimeout(() => resolve('c'), 1000));
const d = () => new Promise((resolve) => setTimeout(() => resolve('d'), 1000));

console.time('promise.race');
Promise.race([a(), b(), c(), d()])
  .then(results => console.log(`Done! ${results}`))
  .catch(console.error)
  .finally(() => console.timeEnd('promise.race'));

输出是什么?

输出 b。使用 Promise.race,最先执行完成就会结果最后的返回结果。

你可能会问:Promise.race的用途是什么?

我没胡经常使用它。但是,在某些情况下,它可以派上用场,比如计时请求或批量处理请求数组。

Promise.race([
  fetch('http://slowwly.robertomurray.co.uk/delay/3000/url/https://api.jsonbin.io/b/5d1fb4dd138da811182c69af'),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error('request timeout')), 1000))
])
.then(console.log)
.catch(console.error);

图片描述

如果请求足够快,那么就会得到请求的结果。

图片描述

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

1.5 Promise 常见问题

串行执行 promise 并传递参数

这次,我们将对Node的fs使用promises API,并将两个文件连接起来:

const fs = require('fs').promises; // requires node v8+

fs.readFile('file.txt', 'utf8')
  .then(content1 => fs.writeFile('output.txt', content1))
  .then(() => fs.readFile('file2.txt', 'utf8'))
  .then(content2 => fs.writeFile('output.txt', content2, { flag: 'a+' }))
  .catch(error => console.log(error));

在此示例中,我们读取文件1并将其写入output 文件。 稍后,我们读取文件2并将其再次附加到output文件。 如你所见,writeFile promise返回文件的内容,你可以在下一个then子句中使用它。

如何链接多个条件承诺?

你可能想要跳过 Promise 链上的特定步骤。有两种方法可以做到这一点。

const a = () => new Promise((resolve) => setTimeout(() => { console.log('a'), resolve() }, 1e3));
const b = () => new Promise((resolve) => setTimeout(() => { console.log('b'), resolve() }, 2e3));
const c = () => new Promise((resolve) => setTimeout(() => { console.log('c'), resolve() }, 3e3));
const d = () => new Promise((resolve) => setTimeout(() => { console.log('d'), resolve() }, 4e3));

const shouldExecA = true;
const shouldExecB = false;
const shouldExecC = false;
const shouldExecD = true;

Promise.resolve()
  .then(() => shouldExecA && a())
  .then(() => shouldExecB && b())
  .then(() => shouldExecC && c())
  .then(() => shouldExecD && d())
  .then(() => console.log('done'))

如果你运行该代码示例,你会注意到只有ad被按预期执行。

另一种方法是创建一个链,然后仅在以下情况下添加它们:

const chain = Promise.resolve();

if (shouldExecA) chain = chain.then(a);
if (shouldExecB) chain = chain.then(b);
if (shouldExecC) chain = chain.then(c);
if (shouldExecD) chain = chain.then(d);

chain
  .then(() => console.log('done'));

如何限制并行 Promise?

要做到这一点,我们需要以某种方式限制Promise.all

假设你有许多并发请求要执行。 如果使用 Promise.all 是不好的(特别是在API受到速率限制时)。 因此,我们需要一个方法来限制 Promise 个数, 我们称其为promiseAllThrottled

// simulate 10 async tasks that takes 5 seconds to complete.
const requests = Array(10)
  .fill()
  .map((_, i) => () => new Promise((resolve => setTimeout(() => { console.log(`exec'ing task #${i}`), resolve(`task #${i}`); }, 5000))));

promiseAllThrottled(requests, { concurrency: 3 })
  .then(console.log)
  .catch(error => console.error('Oops something went wrong', error));

输出应该是这样的:

图片描述

以上代码将并发限制为并行执行的3个任务。

实现promiseAllThrottled 一种方法是使用Promise.race来限制给定时间的活动任务数量。

/**
 * Similar to Promise.all but a concurrency limit
 *
 * @param {Array} iterable Array of functions that returns a promise
 * @param {Object} concurrency max number of parallel promises running
 */
function promiseAllThrottled(iterable, { concurrency = 3 } = {}) {
  const promises = [];

  function enqueue(current = 0, queue = []) {
    // return if done
    if (current === iterable.length) { return Promise.resolve(); }
    // take one promise from collection
    const promise = iterable[current];
    const activatedPromise = promise();
    // add promise to the final result array
    promises.push(activatedPromise);
    // add current activated promise to queue and remove it when done
    const autoRemovePromise = activatedPromise.then(() => {
      // remove promise from the queue when done
      return queue.splice(queue.indexOf(autoRemovePromise), 1);
    });
    // add promise to the queue
    queue.push(autoRemovePromise);

    // if queue length >= concurrency, wait for one promise to finish before adding more.
    const readyForMore = queue.length < concurrency ? Promise.resolve() : Promise.race(queue);
    return readyForMore.then(() => enqueue(current + 1, queue));
  }

  return enqueue()
    .then(() => Promise.all(promises));
}

promiseAllThrottled一对一地处理 Promises 。 它执行Promises并将其添加到队列中。 如果队列小于并发限制,它将继续添加到队列中。 达到限制后,我们使用Promise.race等待一个承诺完成,因此可以将其替换为新的承诺。 这里的技巧是,promise 自动完成后会自动从队列中删除。 另外,我们使用 race 来检测promise 何时完成,并添加新的 promise 。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://adrianmejia.com/promi...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 15 收藏 9 评论 0

前端小智 发布了文章 · 3月30日

10 个最常见的 Javascript 问题

作者:Duomly
译者:前端小智
来源:dev

点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

为初学者介绍一下这 10 个最常被问到的 JavaScript 问题

在本文中,我收集了关于Javascript 最常被问到的 10 个问题及其答案。

这10 个问题大多涉及 Javascript 的基础知识,所以如果你刚刚开始学习 JS,最好理解并掌握它们并。

这个 10 问题涉及 JS 中闭包promise变量提升等等。尽管这些知识不是很难,但是知道答案是一件好事,因为其中一些经常在面试中会被问到。

Javascript 中的闭包是什么?

闭包是封闭在一起的函数的组合,其中内部函数可以访问其变量和外部函数的变量。

最简单的解释方法就是上例子:

function outer() {
  var name = 'Maria';
  function inner() {
    console.log(name);
  }
  inner();
}
outer();
// 'Maria'

在上面的代码中,你可以看到inner()函数可以访问其父函数变量name。 因此,如果调用outer()函数,那么inner()函数的console.log()将返回name的值Maria

内部函数可以访问外部函数参数对象,但是内部函数参数与外部一样,则内部的参数对象会覆盖外部的参数对象。如下所示:

function outer(a, b) {
  const inner = (a, b) => console.log(a, b);
  inner(1, 2);
}
outer('Alice', 'Mark');
// returns 1, 2

我们使用闭包的主要原因是返回可以返回其他函数的函数。

Javascript中的 DOM 是什么

DOM 是文档对象模型,它是网站的面向对象的表示形,可以使用 Javascript 进行修改。

使用 JS 可以操纵 DOM 元素,例如颜色,位置,大小。 为了选择页面的特定元素,Javascript 提供了一些方法:

  • getElementById() - 通过id属性选择一个元素
  • getElementsByName() - 通过name属性选择一个元素
  • getElementsByTagName() - 选择所选标签的所有元素,
  • getElementsbyClassName() - 选择特定类名的所有元素

* querySelector() - 通过CSS选择器选择元素。

Javascript 还提供了其他操作元素的方法,而不仅仅是获取元素,比如appendChild()innerHTML()

Javascript 的 Promise 是什么

Promise 是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。作为对象,Promise 有一下两个特点: (1)对象的状态不受外界影响。 (2)一旦状态改变了就不会在变,也就是说任何时候 Promise 都只有一种状态。

Promise 有三种状态,分别是:Pending (进行中), Resolved (已完成), Rejected (已失败)。Promise 从 Pending 状态开始,如果成功就转到成功态,并执行resolve回调函数;如果失败就转到失败状态并执行reject回调函数。

如果 Promise 被解析(resolved),我们可以调用then()方法并使用返回值执行操作。如果被拒绝(rejected),我们可以使用catch()方法来处理错误。

处理异步编程的其他方法还有async/awaitcallbacks

Javascript 中的原型是什么?

原型通常指的是prototype__proto__这两个原型对象,其中前者叫做显式原型对象,后者叫做隐式原型对象。

Javascript对象从原型继承方法和属性,而Object.prototype在继承链的顶部。Javascript prototype关键字还可以用于向构造函数添加新值和方法。

来看看事例:

function Animal(name, kind, age) {
  this.name = name;
  this.kind = kind;
  this.age = age;
}

Animal.prototype.ownerName('Mark');

可以看到,通过使用原型,我们能够将ownerName属性添加到Animal()构造函数中。

Javascript 的 变量提升 是什么

提升是一种机制,它将所有声明的变量和函数提升到它们局部作用域的顶部,如果变量和函数被放置在全局作用域,则会被提升到全局作用域的顶部。

Javascript中,可以在变量被使用后在声明它。

提升用于避免在变量或函数有在没有定义之前就执行导致的 undefined 错误。

name = 'Ted';
console.log(name);
var name;
// 'Ted'


var name;
name = 'Ted';
console.log(name);
// 'Ted';

使用 var 声明的变量,如果没有赋值,则默认会被初始化为 undefined, letconst 则不会。另外,需要注意的是,在声明const时,必须同时初始化它,因为后面不可在更改它。

Javascript中的对象是什么

对象只是一种特殊的数据。对象拥有属性和方法。JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等。

对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;

对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;

属性只是简单的值,而方法是可以在对象上执行的操作。

var student = {
  firstName: 'Alice',
  lastName: 'Jones',
  age: 21,
  sayHi: () => {
    return 'Hi, I am ' + this.firstName;
  }
}

在上面的代码中,你可以看到Student对象,其中包含三个属性和一个方法。

Javascript 中的函数是什么

在javascript中函数是一段可以被执行或调用任意次数的JavasScript代码,在数据类型中属于"function"。函数也拥有属性和方法,因此函数也是对象。

在Javascript中函数定义函数声明或函数表达式由关键字function开始。在定义函数时,可以在函数名后面的括号中添加一些参数。当我们调用函数时,括号中传递的值称为参数。

function calculate(x, y) {
  return x * y;
}

calculate(2, 5);

Javascript中的纯函数是什么

如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。

顾名思义,纯函数跟我们初中数学的基本函数一样,遵循一定的映射关系,输入决定输出,一个输入只能对应一个输出。不同的输入可以有相同的输出,但是相同的输入不能有不同的输出

一个函数,如果符合以下两个特点,那么它就可以称之为 纯函数:

  • 对于相同的输入,永远得到相同的输出
  • 没有任何可观察到的副作用

Javascript中的构造函数是什么

构造函数是一种特殊的方法,用于初始化和创建 Javascript 中的对象。

JavaScript 中的构造函数和其它语言中的构造函数是不同的。 通过 new 关键字方式调用的函数都被认为是构造函数。

在构造函数内部,this 指向新创建的对象 Object。 这个新创建的对象的 prototype 被指向到构造函数的 prototype

如果被调用的函数没有显式的 return 表达式,则隐式的会返回 this 对象,也就是新创建的对象。

const Person = (name, age) => {
  this.name = name;
  this.age = age;
}

var man = new Person('Mark', 23);
console.log(man);
// { name: 'Mark', age: 23 }

在上面的代码中,我创建了一个Person构造函数,在下面的代码中,创建了一个名为man的新变量,并基于Person构造函数创建了一个新对象。

Javascript类是什么?

自从 ES6 引入以来,我们可以在Javascript中使用类。 类是一种函数,我们使用关键字class代替function 关键字来初始化它。

除此之外,我们还必须在类内部添加constructor()方法,该方法在每次初始化类时都会调用。

constructor()方法内部,我们添加了类的属性。 要基于现有的类创建另一个类,我们可以使用extends关键字。

在JavaScript中使用类的一个很好的例子是 React 框架,它是类的组件。

总结

在本文中,我收集了开发者经常问的 10 个Javascript问题,并给出答案,答案不是唯一,这里只是自己的一些见解,希望本文能给初始化者带来一些帮助。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


原文:https://dev.to/duomly/10-most...

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 11 收藏 6 评论 0

前端小智 发布了文章 · 3月26日

ES10 中 Object.fromEntries() 是个啥?

作者:Shadeed
译者:前端小智
来源:dmitripavlutin
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

我们知道 Object.entries() 是将对象转成一个自身可枚举属性的键值对数组。同样,我们也可以把键值对数组转成了对象。

const keyValuePair = [
  ['cow', '?'],
  ['pig', '?'],
]

Object.fromEntries(keyValuePair);
// { cow: '?', pig: '?' }

 Object.fromEntries

我们知道,对象结构是一个是有键和值组合体,如下所示:

const object = {
  key: 'value',
};

基于这个逻辑,如果我们想将某个东西转成对象,就必须要传递键和值

有两种类型的参数可以满足这些要求:

  1. 具有嵌套键值对的数组
  2. Map 对象

使用 Object.fromEntries 将数组转成对象

下面是个键-值对嵌套数组

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
]

使用Object.fromEntries可以将该数组转成对象:

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

使用 Object.fromEntries 将 Map 转成对象

ES6 为我们带来了一个名为 map 的新对象,它与对象非常相似。

TC39:映射对象是键/值对的集合,其中键和值都可以是任意 ECMAScript 语言值。

我们来创建一个 Map 对象:

// 使用构造函数
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者我们可以使用实例方法“set”
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// 结果
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

让我们使用Object.fromentriesmap 转换为一个对象

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}

对象的类型错误:试图使用 Object.fromEntries 将 其它类型 转成对象

将下面的类型传入 Object.fromEntries 都会导致报错 caught TypeError

clipboard.png

确保传递值要有键-值对

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

Object.fromEntries vs Object.entries

Object.fromEntriesObject.entries 反向。 Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,而Object.fromEntries() 方法把键值对列表转换为一个对象。

const object = { key1: 'value1', key2: 'value2' }

const array = Object.entries(object)
// [ ["key1", "value1"], ["key2", "value2"] ]


Object.fromEntries(array)
// { key1: 'value1', key2: 'value2' }

对象到对象的转换

如果你阅读了 TC39 提案,这就是引入此新方法的原因。 随着Object.entries的引入之前,要将一些非对象结构转成对象是比较麻烦的。

通常,当我们选择使用Object.entries,是因为它使我们能够访问许多漂亮的数组方法,例如filter。 但是在完成转换之后,我们有点被该数组所困扰。

const food = { meat: '?', broccoli: '?', carrot: '?' }

// ? 卡在这结果上...
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
)
// [ ["broccoli", "?"], ["carrot", "?"] ]

好吧! 我们可以利用所有这些有用的数组方法,但仍然可以返回对象。 最后,从对象到对象的转换?

const food = { meat: '?', broccoli: '?', carrot: '?' }

const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
)

// { broccoli: '?', carrot: '?' }

数组转成对象的替代方案

Object.fromEntries是 ES10 推出来,很新,可能浏览器支持度还够友好。 因此,让我们看一下如果将具有键值对结构的数组转成对象。

使用 reduce 方法将数组转成对象

将数组转换为对象的一种流行方法是使用reduce

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value}),
    {}
  )
}


// 结果
// { key1: 'value1', key2: 'value2' }

使用 库 将数组转成对象

Lodash 也提供了将键值对转换为对象的方法。

_.object
将数组转换为对象。 传递[key, value]对的单个列表,或键的列表和值的列表。
const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.object(array)
// { key1: 'value1', key2: 'value2' }
_.fromPairs

_.fromPairs_.toPairs 的反向,它的方法返回一个由键值对组成的对象。

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

_.fromPairs(array)
// { key1: 'value1', key2: 'value2' }

浏览器支持情况

clipboard.png


原文:https://medium.com/@samantham...

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 2 收藏 2 评论 1

前端小智 发布了文章 · 3月25日

【Vue3教程】创建你的第一个Vue 3项目

作者:Shadeed
译者:前端小智
来源:dmitripavlutin
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

2021年2月15日Vue 3正式发布!在尤雨溪的声明中,他宣布了新框架中最大的变化,并谈论了整个Vue团队所做的出色工作。

长期以来,开发者一直在等待Vue 3宣布的真正酷的特性,比如Typescript支持、对大型项目更好的组织、及使Vue应用程序更好的渲染优化。

本文中我们要做以下的内容,使用组合API构建了两个组件。

image

开始

有几种不同的选项可用于将Vue 3添加到现有项目或创建自己的Vue 3项目。

这里,我用自己最喜欢的两个选项:

  1. Vue CLI
  2. Vite

Vue CLI

如果你用过Vue开发,那么很可能使用了Vue CLI来设置项目。

首先,我们必须确保拥有Vue CLI的最新版本,可以通过在终端上运行 npm update -g @vue/cli 来做到这一点。

接下来,创建项目,运行 vue create <项目名>,如果 CLI是最新的,我们就可以选择Vue 3。

image.png

选择了Vue 3选项,我们的应用程序便会构建。 完成后,我们只需要进入我们的项目,然后运行我们的Vue应用, 该命令是:

cd <项目我>
npm run serve

现在,在浏览器中输入http://localhost:8080/,就会看到我们的应用程序!

image.png

Vite

Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验,它主要由两部分组成:

为什么使用 Vite

你现在可能会有疑问?,那么 Vite 与现有的 vue-cli到底有什么不同呢?

由于@ vue-cli / service是在webpack之上构建的,因此它是一个模块捆绑程序,它将在启动,热重载和编译时捆绑整个Vue项目。

由于@vue-cli/service是在webpack之上构建的,因此它是一个模块捆绑程序,它将在启动,热重载和编译时捆绑整个Vue项目。

Webpack 的工作方式是,它通过解析应用程序中的每一个 importrequire ,将整个应用程序构建成一个基于 JavaScript 的捆绑包,并在运行时转换文件(例如 Sass、TypeScript、SFC)。

这都是在服务器端完成的,依赖的数量和改变后构建/重新构建的时间之间有一个大致的线性关系。

相反,Vite 不捆绑应用服务器端。相反,它依赖于浏览器对 JavaScript 模块的原生支持(也就是 ES 模块,是一个比较新的功能)。

浏览器将在需要时通过 HTTP 请求任何 JS 模块,并在运行时进行处理。Vite 开发服务器将按需转换任何文件(如 Sass、TypeScript、SFC)。

这种架构避免了服务器端对整个应用的捆绑,并利用浏览器高效的模块处理,提供了一个明显更快的开发服务器。

提示:当你对应用程序进行 code-split 和 tree-shake 动时,Vite 的速度会更快,因为它只加载它需要的模块,即使是在开发阶段。这与 Webpack 不同,在 Webpack 中,代码拆分只对生产包有利。

创建第一个Vite项目

运行下面命令即可:

npm init vite-app <项目名>

然后,我们只需进入我们的项目文件夹,安装依赖项,然后使用以下命令运行我们的应用程序:

cd <项目名>
npm install
npm run dev

现在,如果我们导航到http://localhost:3000 –我们应该看到以下应用程序:

image.png

一些你应该知道的Vue Vite特性

1.将项目打包到生产中

Vite的一个目标是使Vue的开发和生产尽可能容易。虽然在开发过程中没有捆绑,但是将你的项目捆绑到生产中是非常容易的。

你所要做的就是运行npm run build

如果查看package.json,实现是运行 vite build –与其他构建过程一样,打包后会放在dist文件中。

image.png

2.asset 路径

与其他Vue项目设置一样,Vite 提供了两种引用asset`的方法。

  1. 绝对路径 - 使用公用文件夹。 这些资源使用/file.extension引用,并且在构建项目时将复制到dist文件夹的根目录中。
  2. 相对路径 - 例如,根据文件夹的文件结构来相对访问src/assets文件夹中的文件。 构建项目时,整个文件夹都将作为_assets放置在dist文件夹中。

image.png

3.内置 Typescript 支持

Vue3 最大的变化之一是使用Typescript重写了核心库,允许根据IDE进行类型检查和更好的错误消息。

通过提供对.ts文件和SFC中的<script lang =“ ts”>的内置Typescript支持,Vite再次与Vue 3顺利集成。

理解 Vue3 组件

现在我们已经设置好了Vue 3应用程序,并且理解了Vue 3 Vite工具,让我们来看看这些组件是如何工作的。

Vue 3中最大的变化是引入了组合API。在这个新的结构中,我们能够根据特性来组织代码,而不是仅仅通过datacomputed等来分离代码。

这允许我们创建更多模块化、可读性和可伸缩性的代码,因为单个特性的代码都可以在代码的一个区域中编写。

image.png

如果打开src/components/HelloWorld.vue文件,我们将看到与我们在Vue2中编写的代码看起来相同的代码-这称为Options API

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

这很棒,因为在 Vue3 中,我们仍然可以在其中使用 vue2 的语法。

在本教程中,我们将介绍如何在新的Composition API中实现这一点,并从Options API中识别出这些变化。

组合API中的响应性数据

我们首先从vue核心库导入一些东西,以允许我们创建响应式变量。

import { ref } from 'vue'

然后,让我们用如下所示的setup函数替换data选项。

import { ref } from 'vue'
  export default {
    setup () {
      
      return {
       
      }
    }
  }

这个 setup 方法在组件创建时运行,在这里我们可以定义所有需要组件使用的响应数据、计算属性、方法等。

还有,该setup方法返回的任何内容都可以在模板中访问。

使用 ref 创建响应式数据

为了显示这一点,我们在模板中使用v-model创建一个文本输入。

<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    {{ query }}
   </div>
</template>

我们使用ref创建响应式query变量,然后从setup方法返回它。

setup () {
      const query = ref('')

      return {
        query
      }
}

然后,如返回到应用程序,会看到我们使用Composition API获得了响应式数据。

image

很好!接下来,我们在input中添加一个clear按钮,看看如何在Composition API中创建一个方法。

组合API中的方法

选项 API中,Vue对象中有一个完整的属性专门用于方法。对于较大的文件,这意味着数据可能在数百行之外的方法中声明,这使得组件更难读取和维护。

组合API中,一切都在 setup 方法中,这意味着我们可以根据特性组织代码,甚至将通用特性提取到它们自己的代码模块中。

我们创建一个reset方法,它获取我们的ref并将其设置为一个空字符串。

setup () {
      const query = ref('')

      const reset = (evt) => {
        query.value = '' // clears the query
      }
      
      return {
        reset,
        query
      }
}

需要注意的一件事是,我们需要调用query.value才能访问数据的值。

为什么?

如果我们使用console.log(query),我们看到它不仅仅是一个字符串值,而是一个 Proxy。使用 Proxy 允许我们轻松地获取数据变化,这也是为什么我们需要在引用上调用.value的原因。

然后,就像在选项API使用的一样,我们可以在模板中添加一个按钮,在单击时调用这个reset方法。

<button @click='reset'> Reset </button>

image

向 Vue3 项目添加第二个组件

现在我们已经有了输入和查询数据,接着,创建一个组件显示结果。

这个组件取名为SearchResults.vue

要将其添加到我们的HelloWorld.vue组件中,首先必须将其导入并在我们的导出默认值中声明它。

<script>
  import { ref } from 'vue'
  import SearchResults from './SearchResults.vue'
  export default {
    components: {
      SearchResults
    },
    // ...
  }
</script>

然后,我们可以像这样将它添加到模板中:

// HelloWorld.vue
<template>
   <div>
     <h2> Filter LearnVue Articles </h2>
     <input 
      type='text' 
      placeholder='Filter Search' 
      v-model='query'
    />
    <br>
    <button @click='reset'> Reset </button>
    <search-results/>
   </div>
</template>

传递参数

Vue props 允许父组件将数据传递给其子组件。对于我们的例子,我们希望从HelloWorld.vue传递query 字符串给SearchResults.vue

// HelloWorld.vue
<search-results :query='query'/>

访问参数

SearchResults.vue内部,从 JSON 文件导入所有的文章信息。

import titles from '../post-data.json'
export default {
  setup (props, context) {
 
  }
}

然后,我们需要几个步骤来访问 props

首先,我们必须在 props 选项中声明它们。这告诉我们的组件需要什么数据。

// SearchResults.vue
export default {
  props: {
    query: String
  },
  setup (props, context) {
  // ...

如果我们仔细观察setup方法,就会发现它接受两个参数。

  1. props – 包含传递给组件的所有 props
  2. context– 包含 attrsslotemit

我们将使用 propssetup 方法中访问我们的 props 的值。

我们所需要做的就是使用计算属性来过滤使文章列表。

计算属性

// SearchResults.vue
import { computed } from 'vue'

然后,我们这样设置它,其中我们的computed属性接受一个getter方法。每当其中一个依赖项发生更改时,此方法将更新我们的computed属性。

// SearchResults.vue
import { computed } from 'vue'
import titles from '../post-data.json'
export default {
  props: {
    query: String
  },
  setup (props, context) {
    
    const filteredTitles = computed(() => {
     
    })

    return {
      filteredTitles
    }
  }
}

对于这个方法,我们希望使用query过滤所有的标题。所有内容都转换为小写,所以我们不必担心大小写。

// SearchResults.vue
const filteredTitles = computed(() => {
      return titles.filter(s => s.Name.toLowerCase().includes(props.query.toLowerCase()))
    })

很好~

剩下要做的就是实际使用我们的模板来显示数据!这是使用v-for循环完成的。

// SearchResults.vue
<template>
  <div class='root'>
    <p> Showing {{ filteredTitles.length }} results for "{{ query }}" </p>
    <ul>
      <li v-for='title in filteredTitles' :key='title.Page'>
        {{ title.Name }}
      </li>
    </ul>
  </div>
</template>

就这~

![上传中...]()

image

Vue3 生命周期钩子

在开始使用 Vue3 之前,还需要知道的另一件事是如何使用Vue生命周期钩子

image.png

像Composition API的其他部分一样,我们必须导入我们想要使用的生命周期钩子,并在setup方法中声明它们。

// Lifecycle Example 
import { computed, onMounted } from 'vue'
export default {
  setup () {
    
    onMounted(() => {
      console.log('mounted')
    })
  }
}

总结

Vue 3中有很多很棒的功能,这些功能对于创建可扩展的Vue应用程序非常有用。

希望本文本对你在使用 vue3 时提供一些帮助。

完~,我是刷碗智,我要去刷碗了,我们下期见~


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://learnue.co/2020/12/se...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 3 收藏 2 评论 1

前端小智 发布了文章 · 3月24日

组件的可重用性,6个级别的见解!

作者:Michael Thiessen
译者:前端小智
来源:news
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它。

这里有6个不同级别的可重用性概念,大家先来体会体会,后续更新会一个一个的讲。

1.模板化

通过模板化,我们将一些重复性高的代码包装在其自己的组件中,而不是在周围到处复制和粘贴代码。

当我们重用该组件(而不是直接使用代码)时,它为我们带来了两个好处:

  1. 将来进行更改就会容易得多,因为我们只需要在一个地方更改
  2. 我们不必记住每个重复代码复被复制到了哪些地方

这是最基本的,也是最经常谈论的可重用性形式。

2. 可配置

对于某些组件,我们需要根据需求对它们的工作方式进行修改,如:

Button组件默认有一个主版本,也有一个带有图标版本。但我们没有为每个版本创建全新的组件,而是指定 props 做到不同类型之间切换。

添加这些props通常不会给组件增加很大的复杂度,同时,又能给我们在使用组件方面带来更多在的灵活性。

注意:这不同于使用prop来保存状态或数据,比如loading prop 或disabled prop。

3.适应性

可配置的最大问题是缺乏远见。 我们需要预见将来的需求,并通过放置对应的 prop 将它们构建到组件中。

但是,如果你的组件具有足够适应性,则无需更改组件即应对未来的需求。

为了让我们的组件具有足够的适应性,我们可以使用 插槽 来实现。

例如,我们可以使用默认的插槽来代替在传入Button组件的 text

<!-- Button.vue -->
<template>
  <button
    class="btn btn--default"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

现在我们不局限于传入的类型是 string 还是 number

如果我们想在不修改 Button 组件的情况下添加loading ,我们可以这样做:

<template>
  <Button>
    <img
      v-if="loading"
      data-original="spinner.svg"
    />
    Click Me
  </Button>
</template>

4.反转性

除了通过插槽传递完整的标记块给我们的子组件,我们还可以传递一组有关如何渲染的指令。

这就像我们根据食谱来做菜,而不是叫外卖。 当我们遵循食谱时,需要做更多的工作,但是我们完全可以按自己的节奏来制制作, 我们可以随时进行调整,也可以完全放弃不按食谱的流程来。

我们使用作用域插槽来为我们的组件增加更大的灵活性。

5. 扩展

通过适应性反转性,我们拥有必要的一些技术基础,这些技能可以最大限度地提高组件的可重用性。

下一步是将这些技术应用于整个组件,以便我们更轻松地扩展其行为。

我们使用命名插槽在组件中添加一个或多个扩展点。 仅适应性反转性本身给我们提供了扩展行为的一种选择,而拥有多个扩展点则为我们提供了许多不同的选择。

这里,我们有一个Modal组件,其中包含headerdefaultfooter

<template>
  <div class="modal">
    <slot name="header">
      <h2>{{ title }}</h2>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>

这是一个相当简单的扩展示例,其中我们已经有几个扩展该组件的选项:

  1. 只需覆盖default slot即可添加我们的内容
  2. 可以通过插槽名来覆盖 header 的内容
  3. 可以通过插槽名来覆盖 footer 的内容,其内容还是以不同风格按钮为主
  4. headerfooter的插槽更多是用于自定义

你不必扩展此组件的行为,但也可以扩展其一部分。 无论哪种方式,我们都能获得很大的灵活性和大量的代码重用性。

6. 嵌套

扩展之上更高级重用性就是嵌套, 我们可以多个基本组件为基础, 一层嵌套一层,一开始可能听起来很疯狂,但它非常有用,特别是在大中型应用程序中。

我们从一个通过基础组件开始,该组件的功能相当普遍。 下一个组件就更加具体,以几种方式扩展了基础组件。 然后不断以前面基础组件为底往上扩展,直到我们拥有完成实际工作的最终组件。

这类似我们从非常普通的动物(Animal )到更特定的哺乳动物(Mammal ),然后是狗(Dog ),最后止于贵宾犬(Poodle)的方式。 如果我们需要的只是贵宾犬(Poodle)组件,看上去,我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了,我们需要在相同的基本概念上进行多次更改,来满足不同的个性化需求,这时这种以基础组件嵌套的思想就很重要。

我们可以扩展犬类(Dog)组件来获得柯基犬(Corgi )比格犬(Beagle)组件。或者扩展哺乳动物(Mammal )组件以获得猫(Cat )组件,这样就可以添加老虎(Tiger)狮子(Lion)组件。

总结

以上是6个可重用性级别一些概述,当然很有可能会错过一些内容,但基本是可以为我们封装组件提供了一个大致思路,也是很不错的方式。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://news.knowledia.com/US...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 6 收藏 4 评论 1

前端小智 发布了文章 · 3月22日

React 受控组件,Hooks 方式!

作者:Shadeed
译者:前端小智
来源:dmitripavlutin
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

React 提供了两种方法来访问input字段的值:使用受控或非受控组件。我更喜欢受控组件,因为我们可以通过组件的状态读取和设置input的值。

在这篇文章中,我们来看看如何使用React Hook 实现受控组件。

1.受控组件

假设我们有一个简单的文本字段,并且想访问其值:

import { useState } from 'react';

function MyControlledInput({ }) {
  const [ value, setValue ] = useState('');
  const onChange = (event) => {
    setValue(event.target.value);
  }
  
  return (
    <>
        <div>Input value: {value}</div>
        <input value={value} onChange={onChange} />
    </>
  )
}

image

打开示例(https://codesandbox.io/s/cont...。可以看到 value 变量包含input字段中的值,并且在每次输入新值时,它也会更新。

input字段受到控制,因为 React 从状态<input value = {value} ... />设置其值。 当用户在input 中输入内容时,onChange处理程序会使用从事件对象event.target.value访问的输入值来更新状态。

value变量表示用户真实输入的值。每次需要访问用户在input字段中输入的值时,只需读取value状态变量。

受控组件方法可以帮助我们访问任何输入类型的值:常规文本输入、textareaselect 等。

2. 受控组件中的3个步骤中

设置受控组件需要3个步骤:

  1. 定义保存input值的状态:const [value, setValue] = useState(")
  2. 创建事件处理程序,该事件处理程序在值更改时更新状态:
const onChange = event => setValue(event.target.value);

3.为input字段分配状态值,并添加事件处理程序:<input type="text" value={value} onChange={onChange} />

3. state 作为真实的数组源

我们看一个更复杂的例子。 页面中有一组员工姓名列表。 我们需要添加一个 input字段,当用户在此字段中键入内容时,员工列表将按姓名进行过滤。

function FilteredEmployeesList({ employees }) {
 const [query, setQuery] = useState('');  
 const onChange = event => setQuery(event.target.value);
  const filteredEmployees = employees.filter(name => {
    return name.toLowerCase().includes(query.toLowerCase());
  });

  return (
    <div>
 <h2>Employees List</h2>
 <input 
        type="text" 
 value={query}        onChange={onChange}      />
 <div className="list">
 {filteredEmployees.map(name => <div>{name}</div>)}
 </div>
 </div>
  );
}

打开演示(https://codesandbox.io/s/grac...,可以自行试试。

image

对输入进行防抖

在前面的实现中,只要在input中输入一个字符,就会立即过滤列表。这并不总是很方便,因为在输入查询时它会分散用户的注意力。

我们通过debounce来改善用户体验:在最后一次更改后,以400毫秒的延迟过滤列表。

import { useDebouncedValue } from './useDebouncedValue';
function FilteredEmployeesList({ employees }) {
  const [query, setQuery] = useState('');
 const debouncedQuery = useDebouncedValue(query, 400);  
  const onChange = event => setQuery(event.target.value);

  const filteredEmployees = employees.filter(name => {
 return name.toLowerCase().includes(debouncedQuery.toLowerCase());  });

  return (
    <div>
 <h2>Employees List</h2>
 <input 
        type="text" 
        value={query} 
        onChange={onChange}
      />
 <div className="list">
 {filteredEmployees.map(name => <div>{name}</div>)}
 </div>
 </div>
  );
}

image

打开演示(https://codesandbox.io/s/affe...,然后在input中输放值进行查询。员工列表不会在你打字时进行过滤,而是在最近一次按下键400毫秒后进行过滤。

下面是useDebouncedValue()的实现

export function useDebouncedValue(value, wait) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebouncedValue(value), wait);
    return () => clearTimeout(id);
  }, [value]);

  return debouncedValue;
}

受控组件是访问React中input字段的值的一种方便的技术。它不使用引用,而是作为访问input值的单一真实源。

~ 完,我们小智,我要去刷碗了,下期再见~


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://dmitripavlutin.com/co...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

查看原文

赞 4 收藏 1 评论 0

前端小智 发布了文章 · 3月18日

如何编写更好的 JS 代码!

作者:Taimoor Sattar
译者:前端小智
来源:valentinog
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

Javascript 是浏览器可以理解的语言,它用于加载动态内容而无需刷新页面。今天列举一些用用更少的代码又更具可读性方式来编写 JS,肝货开始。

使用模板字符串

模板字符串是可以嵌入表达式中的字符串(变量),它可以让代码更加简单和易读。

var code = "javascript";
var str = ` I love ${code} I love ${code} `;

如果没有模板字符串,我们需要这么写:

var code = "javascript";
var str1 = "n I love " +  code + "n I love " +  code + "n";

使用三元运算符

在编程中,会遇到逻辑操作。如果要在两条语句之间执行逻辑,三元操作符的可读性要高得多。

let price= isMember ? '$2.00' : '$10.00'

使用Include语句

JS 中的 include 语句是一种在数组和句子中搜索字符串的更简单的方法。

var str = "I love JavaScript.";
var word = str.includes("javaScript"); // result: true

数组也可以使用 include 方法:

var str = ["taimoor", "ali", "umer"];
var n = str.includes("taimoor"); // result: true

空合并运算符

如果我们使用的是第三方API,可能会遇到相同的key-value不会出现在每个查询中。这样我们必须检查JSON中的空键,以免出现错误。

要检查空键,可以使用以下方法:

  • 条件语句
  • 空合并运算符(??)-(推荐)

例如,我们有如下JSON:

var person = {
  name: "Taimoor Sattar",
  age: 21,
  metadata: {
    hobby: "football, blog"
  }
}

使用条件语句,我们可以访问JSON的 matadata 中的 hobby 属性,如下所示

let hobby = "";
if (person.metadata){
  hobby = person.metadata.hobby ? person.metadata.hobby : "";
}

使用空合并操作符,我们只需要这样做:

let hobby = person.metadata?.hobby ?? "";

上面的代码检查JSON元数据中的 hobby 键,如果可用,则返回值,否则返回空字符串。

函数默认参数

JS 中的一些函数允许我们发送选项参数。根据可选参数,函数的返回值可以更改。

function outputName(name="taimoor"){
  return name;
}

let string1 = outputName(); // result: taimoor
let string2 = outputName("ali"); // result: ali

参数的类型检查

在某些情况下,函数参数要有类型的限制,我们可以这样检查函数的类型:

function sum(a, b){
  let result = (typeof a == "number" && typeof b == "number") ? a + b :  null;
  return result
}

sum("s", 6) // result: null
sum(4, 6) // result: 10

使用 Try/Catch 包装代码

Try/Catch 语句用于检查代码中的错误。 如果出错,将运行catch语句。

try{
  functionnotexist();
}catch(e){
  console.log("error");
}

解构

通过解构,我们可以将复杂的结构提取我们需要的部分。

function outputName({name = "taimoor"}){ // De-structuring
  return name;
}

var person = {
  name: "Taimoor Sattar",
  age: 21,
  metadata: {
    hobby: "football, blog"
  }
}

let str = outputName(person); // Taimoor Sattar

编写DRY代码

DRY(不要重复自己),避免在代码中重复以免造成混淆。 为避免代码混乱,可以遵循以下规则。

  • 编写可重用函数
  • 为变量和函数定义明确的名称

完~

我是小智,我要去刷碗了,我们下期见!


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://taimoorsattar.dev/blo...

交流

文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

查看原文

赞 11 收藏 7 评论 10

前端小智 发布了文章 · 3月17日

用户体验细化,增强型的 <input type=number>

作者:Samantha Ming
译者:前端小智
来源:kilianvalkhof
点赞再看,微信搜索大迁世界,B站关注前端小智这个没有大厂背景,但有着一股向上积极心态人。本文 GitHubhttps://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

input 标签的 number 类型提供了一种处理数字的好方法。 我们可以使用minmax属性设置界限,并且可以通过向上和向下键来添加或减少1,如果设置step属性,则向上或向下键来添加或减少对应的 step 值。 但是,如果我们想让用户以不同的step上下移动,该怎么办?

step不仅决定要添加或删除的数量,还决定了该数字的限制位置。 如果输入的值为5step10,然后按向上键,不会得到15(5 + 10),而是10(最接近的 step倍数)。

那么,我们希望用户可以输入任何数字又想增加10,要怎么做?

如何增强 input type=number 体验

先来定义一些按键操作。当用户在 input 标签中使用方向键时,有一些对应的快捷操作:

  • 如果按的是向上或向下键盘,我们要对应的加减 1
  • 如果按的是shift并按向上或向下键,我们要对应的加减 10
  • 如果按的是alt并按向上或向下键,我们要对应的加减 0.1
  • 如果按的是ctrl并按向上或向下键,我们要对应的加减 100, Mac 对应的 cmd
  • 如果输入内容为空,则根据 min 值来计算

实现

这是完整的代码,它相对简洁,仅约20行代码。

const isMac = navigator.platform === 'MacIntel';

const KEY = {
  UP: 38,
  DOWN: 40,
};

document.querySelector("input").addEventListener("keydown", e => {
  if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) {
    e.preventDefault();
    
    const currentValue = isNaN(parseFloat(e.target.value))
      ? parseFloat(e.target.getAttribute("min")) || 0
      : parseFloat(e.target.value);
      
    const direction = e.keyCode === KEY.UP ? 1 : -1;
    
    const modifier = (isMac ? e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
    
    const decimals = Math.max(
      (currentValue.toString().split(".")[1] || "").length,
      e.altKey ? 1 : 0
    );
    
    const newValue = currentValue + direction * modifier;
    
    e.target.value = newValue.toFixed(decimals);
  }
});

这段代码有些部分可能不是很好看懂,我们来逐行看看,表示的含义。

const isMac = navigator.platform === 'MacIntel';

const KEY = {
  UP: 38,
  DOWN: 40,
};

在 Windows 和 Linux 中,ctrl是我们想要使用的键,但在 Mac 上更常用的是cmdisMac是一个布尔值,表示是 Mac 还是 Window 系统。

你在键盘上按下的每个键都有一个唯一的键码。向上箭头键是38向下箭头键是40。因为我不喜欢代码中的魔法数字,所以我们将它们存储在一个对象中以便以后使用。

document.querySelector('input').addEventListener('keydown', e => {
  ...
}

然后是监听 inputkeydown 事件。keydown 可以告诉我们按下哪个键以及按下哪个修饰键的事件。 我们感兴趣的修饰键是shiftaltctrlcmdmetaKey 对应是 Mac 上是cmd键,在Windows中是 windows 键。

if ([KEY.UP, KEY.DOWN].includes(e.keyCode)) {
  e.preventDefault();
  ...
}

如果用户是向左或向右键,我们将不执行任何操作。 我们在代码周围添加了一个if子句,以便仅在用户按向上或向下键盘才执行。 当用户按向上或向下键时,我们调用e.preventDefault()。 这样可以防止输入内容被更新,因为我们会自己做。

const currentValue = isNaN(parseFloat(e.target.value))
  ? parseFloat(e.target.getAttribute("min")) || 0
  : parseFloat(e.target.value);

w你可能会认为获取值与获取e.target.value一样容易,但是,我们必须做更多的工作。 e.target.value始终是一个字符串,即使对于npmber类型的 input 元素也是如此,因此,要进行任何数学运算,我们都需要将其转换为数字。 因为我们需要能够加/减0.1,所以我们需要使用浮点数而不是整数。

是,如果输入为空,我们调用parseFloat,它返回的是一个NaN值。 由于我们无法添加或减去NaN,因此我们需要对些时行判断。 如果输入为空,那么我们将获得最小值(如果存在),或者默认为0。最小值也是一个字符串,因此我们也需要对其进行转换。

如果min属性未定义,它就变成NaN,而NaN || 0解析为0,所以得到结果是可以计算的。

const direction = e.keyCode === KEY.UP ? 1 : -1;

if子句中我们已经知道用户按下的向上或向下的键,所以需要检查用户是按向上还是向下键盘,以便确定是否需要加或减。 我们用变量 “direction” 来保存,如果是向上,值为 1,向下则为 -1,之后可以将其与以后的值相乘。

const modifier = (isMac ? e.metaKey : e.ctrlKey) ? 
  100 : 
  e.shiftKey ? 
    10 : 
    e.altKey ? 
      0.1 : 
      1;

我们找出按下了哪个修饰键。 事件属性可以告诉我们。 如果在我们按下的是向上或向下键的同时还按下 shiftalt 键,则e.shiftKeye.altKey的值为 true

我们首先使用(isMac ? e.metaKey : e.ctrlKey)来检查meta键或 ctrl键,具体取决于我们是否在 Mac上。 如果是这样,我们将相加或相减 100。 如果改为按Shift键,则我们用10加或减,如果按Alt键,则加0.1。 如果没有按下这些键,则按“默认”行为加1或减1

const decimals = Math.max(
(currentValue.toString().split(".")[1] || "").length,
e.altKey ? 1 : 0
);

这里有点棘手,因为我们使用的是浮动。由于四舍五入的关系,JavaScript 中的浮点数可能会产生意想不到的结果。具体来说,如果你加上例如0.1`和0.2,你得到的值是0.30000000000000004,大约是0.3`。

在进行基本计算时,0 的数量太多,但并不重要,在 input 元素中,0.30000000000000004看起来不是很好。我们只要 0.3。为了达到这个目的,我们需要知道在计算前的小数的最大数量是多少,就是当前输入的小数的数量,或者是按下alt键时的1,两者中哪个更大。我们存储这个值以便以后使用。

const newValue = currentValue + direction * modifier;

这是最终的结果值。 我们知道当前值,要增加或减少的数量以及是否需要增加或减少。

我们将modifier (要添加的数量)与direction (即+1或-1)相乘,以便在将其添加到当前值时可以相加或相减。

现在我们已经计算了新值,但是由于前面提到的可能很奇怪的四舍五入,我们不能直接将它设置为新值作为输入值,因为它可能有很多小数。相反,我们使用toFixed与我们之前找到的小数的数目

e.target.value = newValue.toFixed(decimals);

这,就是所有的代码.

这个input可以让用户快速增加或减少数值,或者精确地锁定一个数字,这取决于用户按的是哪个修改键。


编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://kilianvalkhof.com/202...

交流

文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

查看原文

赞 6 收藏 1 评论 12

认证与成就

  • 认证信息 前端开发工程师
  • 获得 19287 次点赞
  • 获得 106 枚徽章 获得 2 枚金徽章, 获得 26 枚银徽章, 获得 78 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-11-12
个人主页被 135.6k 人浏览