22+ полезных фрагмента JavaScript (2020)

JavaScript

Добавить Автора Переводчик: Front-end Xiaozhi Источник: среда

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Не много ерунды, в этой статье я перечисляю некоторые часто используемые или практические фрагменты кода JavaScript, я надеюсь помочь вам.

1. Тернарный оператор

let someThingTrue = true
if(someThingTrue){
    handleTrue()
}else{
    handleFalse()
}

****** 以下是简短版本 ******

let someThingTrue = true
someThingTrue ?  handleTrue() : handleFalse()

2. Короткое замыкание或операция

const defaultValue = "SomeDefaultValue"
let someValueNotSureOfItsExistance = null
let expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValue

console.log(expectingSomeValue) // SomeDefaultValue

3. Условия выполнены

let someValue = true
if (someValue) {
  console.log('条件成立!')
}

4. forцикл

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷
}

let someValues = [1, 2, 4]
for (let val in someValues) {
  console.log(val)
}
let obj = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': 'value3'
}
for (let key in obj) {
  console.log(key)
}

5. Отображение значений на объекты

let x='x',y='y'
let obj = {x,y}

console.log(obj) // {x: "x", y: "y"}

6. Object.entries()

const credits = {
  producer: '大迁世界',
  name: '前端小智',
  rating: 9
}
const arr = Object.entries(credits)
console.log(arr)

*** 输出 ***
[ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]

7. Object.values()

const credits = {
  producer: '大迁世界',
  name: '前端小智',
  rating: 9
}
const arr = Object.values(credits)
console.log(arr)

*** 输出 ***

[ '大迁世界', '前端小智', 9 ]

8. Шаблонные литералы

let name = '前端小智'
let age = 20
var someStringConcatenateSomeVariable = `我是 ${name}，今年 ${age} 岁`
console.log(someStringConcatenateSomeVariable)

9. Деструктивное назначение

import { observable, action, runInAction } from 'mobx';

10. Многострочные строки

let multiLineString = `some string\n
with multi-line of\n
characters\n`

console.log(multiLineString)

11. Array.find сокращение

const pets = [{
    type: 'Dog',
    name: 'Max'
  },
  {
    type: 'Cat',
    name: 'Karl'
  },
  {
    type: 'Dog',
    name: 'Tommy'
  }
]
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy')

console.log(pet) // { type: 'Dog', name: 'Tommy' }

12. Значения параметров по умолчанию

ранняя практика

function area(h, w) {
  if (!h) {
    h = 1;
  }
  if (!w) {
    w = 1;
  }
  return h * w
}

Что делать после ES6

function area(h = 1, w = 1) {
  return h * w
}

13. Сокращение для стрелочных функций

let sayHello = (name) => {
  return `你好，${name}`
}

console.log(sayHello('前端小智'))

Аббревиатура выглядит следующим образом:

let sayHello = name => `你好，${name}`

console.log(sayHello('前端小智'))

14. Неявный возврат

let someFuncThatReturnSomeValue = (value) => {
  return value + value
}
console.log(
someFuncThatReturnSomeValue('前端小智'))

Аббревиатура выглядит следующим образом:

let someFuncThatReturnSomeValue = (value) => (
  value + value
)
console.log(someFuncThatReturnSomeValue('前端小智'))

15. Функции должны иметь значения параметров

function mustHavePatamMethod(param) {
  if (param === undefined) {
    throw new Error('Hey You must Put some param!');
  }
  return param;
}

Перепишите это так:

mustHaveCheck = () => {
  throw new Error('Missing parameter!')
}
methodShoudHaveParam = (param = mustHaveCheck()) => {
  return param
}

16. сокращение charAt()

'SampleString'.charAt(0) // S
// 简写
'SampleString'[0]

17. Условные вызовы функций

function fn1() {
  console.log('I am Function 1')
}

function fn2() {
  console.log('I am Function 2')
}
/*
长的写法
*/
let checkValue = 3;
if (checkValue === 3) {
  fn1()
} else {
  fn2()
}

Короткая форма:

(checkValue === 3 ? fn1 : fn2)()

17. Math.Floor стенография

let val = '123.95'

console.log(Math.floor(val)) // 常规写法
console.log(~~val) // 简写

18. Сокращение Math.pow

Math.pow(2, 3) // 8
// 简写
2 ** 3 // 8

19. Преобразование строки в число

const num1 = parseInt('100')
// 简写
console.log(+"100")
console.log(+"100.2")

20. && операции

let value = 1;
if (value === 1)
  console.log('Value is one')
//OR In short 
value && console.log('Value is one')

21. сокращение toString

let someNumber = 123
console.log(someNumber.toString()) // "123"
// 简写
console.log(`${someNumber}`) // "123"

22. Дополнительный сетевой оператор (скоро 🍻)

Теперь естьНовые дополнения к ECMAScriptЭто стоит понять.

let someUser = {
  name: 'Jack'
}
let zip = someUser?.address?.zip //可选链接，像 Swift

еслиzipдаundefined, ошибка не выдается.

Синтаксис также поддерживает вызовы функций и конструкторов.

let address = getAddressByZip.?(12345)

еслиgetAddressByZipэто функция, которая ее вызывает, иначе выражение будет начинаться сundefinedрассчитывается в виде .

23. Используйте объекты вместо синтаксиса переключателя

let fruit = 'banana';
let drink;
switch (fruit) {
  case 'banana':
    drink = 'banana juice';
    break;
  case 'papaya':
    drink = 'papaya juice';
    break;
  default:
    drink = 'Unknown juice!'
}
console.log(drink) // banana juice

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:medium.com/JavaScript-…

Статьи постоянно обновляются каждую неделю, и их можно искать в WeChat.【Переезд в мир】Сначала прочитай, ответь【Благосостояние】Вас ждет много фронтенд-видео, эта статья GitHubGitHub.com/QQ449245884…Он был записан, добро пожаловать в Star.

Категории