主页»JavaScript»12个进步 JavaScript 技术的概念!

12个进步 JavaScript 技术的概念!

来历:前端小智 发布时刻:2019-05-15 阅览次数:

  JavaScript 是一种杂乱的言语。假如是你是高档或许初级 JavaScript 开发人员,了解它的根本概念十分重要。本文介绍 JavaScript 至关重要的12个概念,但肯定不是说 JavaScript 开发人员只需求知道这些就能够了。

 1.变量赋值 (值 vs 引证)

  了解 JavaScript 怎么给变量赋值能够协助咱们削减一些不必要的 bug。假如你不了解这一点,或许很简略地编写被无意中更改值的代码。

  JavaScript 总是依照值来给变量赋值。 这一部分十分重要:当指定的值是 JavaScript 的五种根本类型之一(即 Boolean,null,undefined,String 和 Number)时,将分配实践值。 可是,当指定的值是 Array,Function或Object时,将分配对内存中目标的引证给变量。

  在以下代码段中,运用 var1 对 var2 进行赋值。 由于var1是根本类型(String),因而 var2 的值等于 var1 的 String 值,而且能够以为此刻与var1彻底不同。 因而,从头赋值var2对var1没有影响。

let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'

  接着,与目标赋值进行比较。

let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }

  假如你希望它会像原始类型赋值那样,很或许会出问题!假如你创立了一个无意中会改动目标的函数,就会呈现一些非预期的行为。

 2.闭包

  闭包是一个重要的JavaScript形式,能够私有拜访变量。在本例中,createGreeter回来一个匿名函数,这个函数能够拜访参数 greeting(在这里是“Hello”)。在后续的调用中,sayHello 将有权拜访这个 greeting!

function createGreeter(greeting) {
  return function(name) {
    console.log(greeting + ', ' + name);
  }
}
const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe

  在更实在的场景中,你能够幻想一个初始函数apiConnect(apiKey),它回来一些运用API key的办法。在这种状况下,apiKey 只需求供给一次即可。

function apiConnect(apiKey) {
  function get(route) {
    return fetch(`${route}?key=${apiKey}`);
  }
  function post(route, params) {
    return fetch(route, {
      method: 'POST',
      body: JSON.stringify(params),
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      })
  }
  return { get, post }
}
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });

 3.解构

  JavaScript 参数解构能够从目标中干中提取所需特点的常用办法。

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'

  假如要以其他称号提取特点,能够运用如下办法:

const obj = {
  name: 'Joe',
  food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'

  解构常常也用于直接用于提取传给函数的参数。假如你了解 React,或许现已见过这个:

const person = {
  name: 'Eddie',
  age: 24
}
function introduce({ name, age }) {
  console.log(`I'm ${name} and I'm ${age} years old!`);
}
console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"

 4. 打开运算

  ES6的一个常用之一的特性便是打开(...)运算符了,鄙人面的比如中,Math.max 不能应用于 arr 数组,由于它不将数组作为参数,但它能够将各个元素作为参数传入。打开运算符...可用于提取数组的各个元素。

const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10

 5. 剩下参数

  剩下参数语法和打开语法看起来的相同的,不同的是打开语法是为了结构数组和目标;而剩下参数和打开运算符是相反的,剩下参数搜集多个元素组成一个数组。

function myFunc(...args) {
  console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3

  rest parameters 和 arguments 的差异

  1. arguments 是伪数组,包括一切的实参
  2. 剩下参数 是规范的数组,能够运用数组的办法

 6. 数组办法

  JavaScript 数组办法一般能够供给令人难以置信的、高雅的办法来履行所需的数据转化。作为StackOverflow 的贡献者,我常常看到关于怎么以某种办法操作目标数组的问题,这往往也是数组办法的完美用例。

  map、filter、reduce

  JavaScript 数组办法map、filter和reduce简略混杂,这些都是转化数组或回来聚合值的有用办法。

  map:回来一个数组,其间每个元素都运用指定函数进行过转化。

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

  filter:回来一个数组,只要当指定函数回来 true 时,相应的元素才会被包括在这个数组中。

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

  reduce:按函数中指定的值累加

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21

  find, findIndex, indexOf

  find:回来与指定条件匹配的第一个实例,假如查到不会继续查找其他匹配的实例。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

  再次留意,尽管5之后的一切元素都满意条件,可是只回来第一个匹配的元素。当你发现匹配项时,一般会中止for循环,在这种状况下,这实践上十分有用。

  findIndex:这与find简直彻底相同,但不是回来第一个匹配元素,而是回来第一个匹配元素的索引。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

  indexOf:与findIndex简直彻底相同,但它不是将函数作为参数,而是选用一个简略的值。 当w你需求更简略的逻辑而且不需求运用函数来查看是否存在匹配时,能够运用此办法。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

  push, pop, shift, unshift

  push:这是一个相对简略的办法,它将一个项增加到数组的结尾。它就地修正数组,函数自身会回来增加到数组中的项。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

  pop:这将从数组中删去最终一项。相同,它在恰当的方位修正数组,函数自身回来从数组中删去的项。

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

  shift:从数组中删去第一项。相同,它在恰当的方位修正数组。函数自身回来从数组中删去的项。

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1

  unshift:将一个或多个元素增加到数组的最初。相同,它在恰当的方位修正数组。与许多其他办法不同,函数自身回来数组的新长度。

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7

  splice, slice

  splice:经过删去或替换现有元素和/或增加新元素来更改数组的内容,此办法会修正了数组自身。

  下面的代码示例的意思是:在数组的方位 1 上删去 0 个元素,并刺进 b。

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')

  slice:从指定的开始方位和指定的结束方位之前回来数组的浅复制。 假如未指定结束方位,则回来数组的其余部分。 重要的是,此办法不会修正数组,而是回来所需的子集。

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

  sort

  sort:依据供给的函数对数组进行排序。这个办法就地修正数组。假如函数回来负数或 0,则次序坚持不变。假如回来正数,则交流元素次序。

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]

 7. Generators(生成器)

  生成器是一种特别的行为,实践上是一种规划形式,咱们经过调用next()办法来遍历一组有序的值。幻想一下,例如运用遍历器对数组[1,2,3,4,5]进行遍历。第一次调用next()办法回来1,第2次调用next()办法回来2,以此类推。当数组中的一切值都回来后,调用next()办法将回来null或false或其它或许的值用来表明数组中的一切元素都已遍历结束。

function* greeter() {
  yield 'Hi';
  yield 'How are you?';
  yield 'Bye';
}
const greet = greeter();
console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined

  运用生成器生成无限个值:

function* idCreator() {
  let i = 0;
  while (true)
    yield i++;
}
const ids = idCreator();
console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...

 8.恒等运算符(===)与持平运算符(==)

  咱们必定要知道JavaScript中的恒等运算符(===)和持平运算符(==)之间的差异! ==运算符在比较值之前会进行类型转化,而===运算符在比较之前不会进行任何类型转化。

console.log(0 == '0');
// true
console.log(0 === '0');
// false

 9. 目标比较

  我看到 JavaScript新手所犯的过错是直接比较目标。 变量指向内存中目标的引证,而不是目标自身! 实践比较它们的一种办法是将目标转化为 JSON 字符串。 这有一个缺陷:目标特点次序不能确保! 比较目标的一种更安全的办法是引进专门进行深度目标比较的库(例如,lodash的isEqual)。

  下面的目标看起来是持平的,但实践上它们指向不同的引证。

const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false

  相反,下面的核算结果为true,由于一个目标被设置为与另一个目标持平,因而指向相同的引证(内存中只要一个目标)。

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true

  相反,以下核算结果为true,由于一个目标设置为等于另一个目标,因而指向相同的引证(内存中只要一个目标)。

const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true

 10. 回调函数

  很多人都被 JavaScript 回调函数吓倒了! 他们很简略,举个比如。 console.log 函数作为回调传递给myFunc。 它在setTimeout完结时履行。

function myFunc(text, callback) {
  setTimeout(function() {
    callback(text);
  }, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'

 11. Promises

  一旦你了解了 JavaScript 回调,很快就会发现自己陷入了“回调阴间”中。这个时分能够运用 promise,将异步逻辑包装在 promise 中,成功时 resolve 或在失利时reject 运用“then”来处理成功的状况,运用catch来处理反常。

const myPromise = new Promise(function(res, rej) {
  setTimeout(function(){
    if (Math.random() < 0.9) {
      return res('Hooray!');
    }
    return rej('Oh no!');
  }, 1000);
});
myPromise
  .then(function(data) {
    console.log('Success: ' + data);
   })
   .catch(function(err) {
    console.log('Error: ' + err);
   });
   
// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"

 12. Async/Await

  在把握了 promise 的用法后,你或许也会喜爱 async await,它仅仅一种根据 promise 的“语法糖”。鄙人面的示例中,咱们创立了一个 async 函数,并 await greeter promise。

const greeter = new Promise((res, rej) => {
  setTimeout(() => res('Hello world!'), 2000);
})
async function myFunc() {
  const greeting = await greeter;
  console.log(greeting);
}
myFunc();
// 'Hello world!'

  你的点赞是我继续共享好东西的动力,欢迎点赞!

QQ群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
网友谈论(共0条谈论) 正在载入谈论......
沉着谈论文明上网,回绝歹意咒骂 宣布谈论 / 共0条谈论
登录会员中心