CSS关键

选择器

**优先级：id选择器>class选择器>标签选择器

“.”是类选择器
什么都没有是标签选择器
“#”是id选择器

pseudo-elements 伪元素

flex-box basic

flex-box 将容器box里的display属性设置为：flex

flex-direction: row即box里的所有元素在一行，column则是所有元素在同一列（和默认没区别）
flex-wrap：默认是nowrap，设置wrap后box里的元素不会超出box，这个时候盒子里的元素的大小设置太大后会无效
justify-content：flex-start 第一个元素对应flex方向的开始, flex-end 最后一个元素对应flex方向的末尾, center 全部元素位于flex方向的中间, space-between 第一个元素位于开始，最后一个元素位于末尾，然后中间元素的距离相等, space-around 每一个元素之间距离相等
align-items：与justify-content处理的方向相反，默认是strech，会占满

flex-items

flex-grow：take up all the space avaliable，数字是item增长的相对速率
flex-shrink：descide whether this element should grow，和flex-grow相反，当不够基本的width的时候的相对缩小速率
flex-basis：how much room this item should take up if there is enough amount of room.
order：决定这个item的位置，默认是0即本来html编写的位置
align-self：只对自己处理align，有三种情况, flex-start,flex-end, center

JS关键

Javascript特性：

single thread: one thing executing at a given time
synchronous: executes in the order in which it appears
Blocking:

when we are doing io intensive operations like database reads, writes, file writes, etc. how can we do these time comsuming things without blocking the UI thread from rendering. That's asynchronicity in Javascript really comes into play.

EVENT LOOP： Javascript concurrency model for async calls. To ensure we're not blocking in the main thread.

Javascript构成两大成分：

Heap 堆：unstructured region of memory for the allocation of objects exists.
call stack 调用栈：essentially says what function is executing now the what's next.

浏览器两大成分：

webapi
event queue: queues of all the callback functions attatched to async events.

当进行ajax操作的时候，javascript会发送一个webapi请求，等待时间结束后把callback放进事件队列，除非此时call stack是空的才可能把这个callback放在callstack。

1. callback = a function that is passed as an argument to another function, which is used to handle asynchronous operations 将函数作为参数传递给另一个函数，用来处理异步调用:

通俗解释：callback函数本质上是一个函数，只是该函数作为参数传递给另外一个函数，当另外一个函数需要调用时callback函数时就调用该callback函数

reading a file
network requests
Interacting with databases

2. forEach() : method used to iterate over the elements of an array and apply a specified function (callback) to each element. 对数组的每一个元素应用某个函数

使用方法及注意事项：

array.forEach(callback)
element, index, array are provided 这个callbak函数的参数可以按照每个元素、索引，以及数组排序使用

let numbers = [1,2,3,4,5];

numbers.forEach(display)

// 使用了三个参数的forEach方法
function double(element, index, array){
    array[index] = element * 2;
}


//使用了一个参数的forEach方法
function display(element){
    console.log(element);
}

3. map() = accepts a callback and applies that function to each element of an array, then return a new array 使用一个callback函数作为参数，并把该函数应用在数组的每一个元素上，返回一个新的数组！

4. filter() = creates a new array by filtering out elements. 应用一个筛选函数来创建新的数组

5. reduce = reduce the elements of an array to a single value

异步调用方法的方法

callback hell :situation in Javasctipt where callbacks are nested within other callbacks to the degree where code is difficult to read. Old pattern to handle asynchronous functions. Use promises + async/await to avoid callback hell.

Promise = An Object that manages asynchronous operations. Wrap a Promise Object around {asynchronous code} "I promise to return a value" PENDING -> RESOLVED or REJECTED

使用方法及注意：向promise对象传入一个函数，该函数接收resolve的callback和reject的callback作为参数，然后在promise函数逻辑里判断什么情况下调用resolve以及什么情况下调用reject：new Promise((resolve, reject) -> {asynchronous code}

promise用法例子：

console.log('1.开始创建并执行 Promise')
new Promise(function(resolve, reject) {
  console.log('2.由于创建会立即执行，所以会立即执行到本行')
  setTimeout(()=>{ // 模拟异步请求
    console.log('4. 1s之期已到，开始执行异步操作')
    if (true) {
        // 一般我们符合预期的结果时调用 resolve()，会在 .then 中继续执行
        resolve('成功')
    } else {
        // 不符合预期时调用 reject()，会在 .catch 中继续执行
        reject('不符合预期')
    }
  }, 1000)
}).then((res)=>{
  console.log('5.调用了then，接收数据：' + res)
}).catch((error)=>{
  console.log('5.调用了catch，错误信息：' + error)
})
console.log('3.本行为同步操作，所以先于 Promise 内的异步操作（setTimeout）')

用函数封装Promise：

// 这是一个异步方法
function ajax(url){
  return new Promise(resolve=>{
    console.log('异步方法开始执行')
    setTimeout(()=>{
      console.log('异步方法执行完成')
      resolve(url+'的结果集')
    }, 1000)
  })
}
// 调用请求函数，并接受处理返回结果
ajax('/user/list').then((res)=>{
  console.log(res)
})

Async/Await: Async = makes a function return a promise, Await = makes a async function wait for a promise. This allows you write a asynchrnous code in a synchrnous maner, Async doesn't have resolve or reject parameters. Everything after Await is placed in an event queue. 通过在函数声明前加async关键字，可以将任何函数转换成返回Promise的异步函数，这意味着你不需要用.then（）,.catch()处理，或者传一个callback函数。await关键字只能在async函数中使用，可以暂停async函数的执行，等待promise的解决后继续执行

const loadFile = async () =>{
    const data = await fs.promise.readFile('./test.txt',{
        encoding: 'utf-8',
        });
    console.log(data);
};

lodaFile()

const fetchPokemon = async (id) => {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
    const data = await res.json();
    
}
fetchPokemon(2);

Json

Json = (JavaScript Object Notation) data-interchange format Used for exchanging data between a server and a web application. JSON files {key:value} OR [{},{},{}]

JSON.stringfy():把一个Javascript对象序列化成一个JSON字符串
JSON.parse():将JSON解析为原生Javascript值

[前端基础｜html、css、JS]