DEV Community: Luis Enrique

Manipulando Arrays…

Luis Enrique — Sun, 26 Jul 2020 03:56:24 +0000

Existem várias formas de percorrer um array e que pode chegar a confundir um pouco as vezes, e hoje eu vou mostrar alguns métodos para podermos percorrer um array.

Array.forEach()

o método forEach() executa uma função para cada elemento do array.
No exemplo abaixo pra cada elemento do array será somado 1 ao valor original

const arr = [1, 3, 5, 7, 9];
arr.forEach(num => console.log(num+1))

// output: 2, 4, 6, 8, 10

Array.map()

o método map() ele retorna um novo array como resultado da função.

Exemplo, digamos que eu queira saber a potência dos números dentro do array, o map irá percorrer cada item do array efetuando a conta da potência de cada valor e gerando um novo array com o resultado.

const arr = [1, 2, 4, 7];
const potencia = arr.map(num => Math.pow(num, 2))

console.log(potencia) //output: [ 1, 4, 16, 49 ]

Array.filter()

o método filter() como o próprio nome já diz, ele filtrará o array, retornando um novo array contendo apenas os valores coincidentes com a condição

const arr = [2, 4, 7, 6, 9];
const par = arr.filter(num => num % 2 === 0)

console.log(par) //output: [ 2, 4, 6 ]

Array.find()

O método find() irá retornar o valor do primeiro elemento que satisfazer a condição
caso não ache, retornará undefined

const arr = [10, 18, 14, 16, 20];
const maior = arr.find(num => num > 15 )

console.log(maior) //output: 18

console.log(arr.find(num => num > 100 ))
//output: undefined

Array.some()

o método some() retorna um booleano, parando sempre na primeira condição satisfatória e caso seja, retornará true, se não false

const arr = [
  { nome: 'Enrique', idade: 21 },
  { nome: 'Isa', idade: 10 },
  { nome: 'Eloah', idade: 16 },
]

const maiorIdade = arr.some(pessoa => pessoa.idade > 15)
console.log(maiorIdade) //true

Array.every()

O método every() igual que o some() também retorna um booleano porém ele irá verificar em TODOS os objetos para ver se a condição é satisfeita

pegando o array do exemplo do some(), verificamos se as pessoas tem a idade superior a 15 anos sendo assim ele só para quando verificar em todos os objetos.

No exemplo abaixo ele retornará false porque nem todos os objetos de pessoa tem a idade maior do que 15.

const maiorIdade = arr.every(pessoa => pessoa.idade > 15)
console.log(maiorIdade) //false

Porém, se modificarmos a idade de Isa para 17

const arr = [
  { nome: "Enrique", idade: 21 },
  { nome: "Isa", idade: 17 },
  { nome: "Eloah", idade: 16 },
];

nós temos como resultado

const maiorIdade = arr.every(pessoa => pessoa.idade > 15)
console.log(maiorIdade) //true

Array.sort()

O método sort() ordena os elementos do array e retorna o mesmo.

  const arr = [ 9, 10, 3, 7, 8 ]
  const arr2 = [ 'f', 'j', 'a', 'e', 'z' ]

  const asc = arr2.sort((indx, val) => indx > val ? 1 : -1)
  const desc = arr.sort((indx, val) => indx > val ? -1 : 1)

  console.log(asc) //output: ["a", "e", "f", "j", "z"]
  console.log(desc) //output: [10, 9, 8, 7, 3]

Array.join()

o método join() juntará todos os elementos de um array e retornará como string.

const arr = ['uni', 'duni', 'tê']

console.log(arr.join()) //output: 'uni,duni,tê'
console.log(arr.join('')) //output: 'unidunitê'
console.log(arr.join('-')) //output: 'uni-duni-tê

mas caso seja passado um valor undefined ou null retornará uma string vazia

const arr = ['uni', null, 'tê']

console.log(arr.join()) //output: 'uni,,tê'
console.log(arr.join('')) //output: 'unitê'
console.log(arr.join('-')) //output: 'uni--tê'

Array.includes()

O método includes() verifica se um array contem um determinado elemento, retornando true ou false

const arr = [2, 4, 6, 8, 10]

console.log(arr.includes(8)) //output: true
console.log(arr.includes(0)) //output: false

Array.concat()

O método concat() retorna um novo array com todos os array/valores passados como parâmetro

const arr1 = [1, 2, 3, 4, 5]
const arr2 = [6, 7, 8, 9, 10]

const newArr = arr1.concat(arr2)

console.log(newArr) //output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Fim!

E ai curtiu ? Então passa la no meu perfil, e da uma olhada nos demais artigos 😄

NeoVim como IDE

Luis Enrique — Sun, 24 May 2020 17:49:13 +0000

Acredito que muitos de vocês já tenham ouvido falar sobre o vim, eu particularmente sempre tive medo de usa-lo ou de nunca conseguir sair dele. Mas hoje, iremos falar do NeoVim que nada mais é do que um fork do vim. E ai, bora ver como configuramos ele ?

Instalando o NeoVim

Linux

sudo apt install neovim

macOS

brew install neovim

Windows

choco install neovim

Configurando

Primeiramente precisamos instalar um plugin para poder instalar os demais plugins

Meio estranho eu sei, mas precisamos dele para poder gerenciar os demais plugins e bem, particularmente, eu uso o vim-plug e é o que iremos usar

curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Agora precisamos criar nosso arquivo de configuração do vim, para Linux e macOs, o diretorio de configuração fica em ~/.config/nivm/init.vim.

Adicionaremos o seguinte no arquivo:

call plug#begin()
"Seção do plugin
call plug#end()
"Seção de configuração

Tema

Eu particularmente não uso um tema em especifico, vivo trocando de tema em tema mas se preferir irei deixar alguns

Ok mas como instalar ? Simples ! Lembra do código acima onde deixei marcado aseção de plugins ? Basta adicionar Plug 'user_github/nome_repo'
olha só:

Plug 'joshdick/onedark.vim'

e ativar o tema da seguinte forma:

colorscheme onedark

Confuso ? Deverá ficar da seguinte forma

call plug#begin()
PLug 'cseelus/vim-colors-lucid'
call plug#end()

solorscheme lucid

Agora basta salvar o arquivo e abri-lo novamente.

Para que uma alteração seja visivel é preciso abrir e fechar o arquivo novamente

Uma vez configurado o tema, precisamos instala-lo, mas como ? Como sabemos o Vim tem uma seção de comandos onde pressionamos esc e : e ele abre a seção de comandos, basta digitar:

PlugInstall

Legal mas é bem chato ficar slavando e saindo toda hora ne ?

Então saca só, vamos criar um atalho para isso mas antes precisamos definir um prefixo

let mapleader="\<space>"
nnoremap <leader>sv :source ~/.config/nvim/init.vim<CR>

Agora basta salvar, fechar e abrir novamente pela última vez e após salvar o arquivo, para obter as atualizações é só pressionar space + sv e pronto o arquivo será atualizado.

Explorador de Arquivos

Claro, não é obrigatório ter um explorador de arquivos, mas é sempre bom poder um arquivo rápido

Plug 'preservim/nerdtree'
Plug 'ryanoasis/vim-devicons'
Plug 'Xuyuanp/nerdtree-git-plugin'

Agora algumas configurações básicas:

set encoding=UTF-8
"nerdtree
let NERDTreeShowHidden = 1
let NERDTreeMinimalUI = 1
let NERDTreeDirArrows = 1
let NERDTreeIgnore = []
let NERDTreeStatusline = ''

"nerdtree-git-plugin
let g:NERDTreeIndicatorMapCustom = {
    \ "Modified"  : "✹",
    \ "Staged"    : "✚",
    \ "Untracked" : "✭",
    \ "Renamed"   : "➜",
    \ "Unmerged"  : "═",
    \ "Deleted"   : "✖",
    \ "Dirty"     : "✗",
    \ "Clean"     : "✔︎",
    \ 'Ignored'   : '☒',
    \ "Unknown"   : "?"
    \ }

Pressionamos ctrl+b e teremos:

Busca

Bom, não basta apenas ter um explorador de arquivos e um tema daora, sempre precisaremos procurar um arquivo e sair do terminal pra pocurar externamente não é o que queremos

Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'

Um atalho pra ele: ctrl+p

nnoremap <c-p> :Files<cr>

O legal do fzf é que se você tiver o The Silver Search ele se integra automaticamente, com a configuração a baixo basta apenas combinarmos as teclas ctrl+f

nnoremap <c-f> :Ag<cr>

Abaixo uma breve demostração de como ficou

Intellisense

Desde quando comecei a usar o vim/Neovim eu uso o ale mas um tempo depois conheci o coc.nvim, mas neste caso iremos usar os dois, então bora lá, e claro, faze-los trabalhar juntos

Plug 'dense-analysis/ale'
Plug 'neoclide/coc.nvim', {'branch': 'release'}

ale

"ale
let b:ale_fixers = ['prettier', 'eslint']
let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
let g:ale_sign_error = '✘'
let g:ale_sign_warning = '⚠'

coc

let g:coc_global_extensions = [
    \  'coc-snippets',
    \  'coc-emmet',
    \  'coc-html',
    \  'coc-css',
    \  'coc-json', 
    \  'coc-phpls',
    \  'coc-yaml',
    \  'coc-prettier',
    \  'coc-eslint',
    \  'coc-jedi',
    \  'coc-python',
    \   ]

nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
nnoremap <silent> K :call <SID>show_documentation()<CR>

autocmd CursorHold * silent call CocActionAsync('highlight')
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"

function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction

" Use <c-space> to trigger completion.
inoremap <silent><expr> <c-space> coc#refresh()
" Use <cr> to confirm completion, `<C-g>u` means break undo chain at current position.

" Coc only does snippet and additional edit on confirm.
inoremap <expr> <cr> pumvisible() ? "\<C-y>" : "\<C-g>u\<CR>"

Pronto ! Temos eles configurados, mas ainda falta fazer os dois trabalharem juntos, para isso basta acessar as configurações do coc com :CocConfig e colocar o seguinte

{
  "suggest.noselect": false,
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "css",
    "json",
    "yaml"
  ],
  "diagnostic.displayByAle": true,
  "coc.preferences.colorSupport": true,
  "prettier.eslintIntegration": true,
  "prettier.tabWidth": 2
}

Bom, aqui configuramos algumas outras coisas além da integração do coc com o ale, agora toda vez que salvar o arquivo, ele irá formata-lo, definimos o tamanhos de espaçamento do tab, etc

Go-to Definition

Como toda IDE, precisamos ir para a definição de 'X' método, variável e por ai vai. Como já temos o coc configurado, basta apenas pressionar gd(go to definition) e ctrl+o para retornar

Terminal Integrado

E claro, não poderia faltar, sempre precisamos executar algum comando então aqui irei deixar uma configuração para podermos executar o terminal dentro do NeoVim

" Mude para o modo normal com o esc
tnoremap <Esc> <C-\><C-j>
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
function! OpenTerminal()
  split term://zsh
  resize 10
endfunction
nnoremap <c-j> :call OpenTerminal()<CR>

" use alt+hjkl para mover entre split/vsplit paineis
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-l> <C-w>l

Pronto ! Basta pressionarmos ctrl+j(vscode feelings)

Fim !

E ai curtiu ? Então passa lá no meu github e vê as demais configurações que tenho para o vim.