React18 (一) React入門基礎 - JS 基礎

在公司現在公司快兩年了，時間過得飛快，雖然入職當前公司的是Full Stack的身份進來的，但當前的項目組主要是後端需求基本上是帶着團隊負責後端的項目的開發和維護，所以我之前的前端Angular基本沒咋碰了。不過最近公司內部有轉型的計劃，前端的有React的需求，時隔兩年了前端的知識點忘得七七八八了，現在開始計劃倒空自己把自己當做小白開始從零開始折騰React了,剛好最近react到18了，於是從18的版本開始學起。

基礎部分有變量的申明，解構賦值，展開，箭頭函數 以及模塊化。

1.變量的申明

/* 01 變量的申明
*
* var - no block-leave scope
* let - block-leave scope
* const - block-leave scope
*
* */
(function () {
var niubi = 6;
})();
try {
console.log(niubi);
} catch (error) {
console.log(error)
}

2.解構賦值

/* 02 解構賦值 * */
var a, b;
const arr = ["nick", "neo"];
[a, b] = arr;
console.log(a, b);

arr2 = ["A380", "A355", "A330", "A310"];
const [d, e, ...f] = arr2; // ...變量， 會接受後邊所有的元素
console.log("d=" + d, "e=" + e, "f=" + f);

const info = {
id: 12323,
name: "ATM566",
locations: "sz"
}

let g, h, j;
({
id: g,
name: h,
location: j
} = info);
console.log(g, h, j);

// 如果屬性名和變量名一樣， 則可以簡寫
const {
id,
name,
locations
} = info;
console.log(id, name, locations);

// 變量交換
l = 20, m = 30;
[l, m] = [m, l];
console.log(l, m);

arr3 = [7, 9, 8];
[arr3[1], arr3[2]] = [arr3[2], arr3[1]]
console.log(arr3);

3.展開

/* 03 展開 ******/
function sumAll(a, b, c) {
return a + b + c;
}
// 展開數組
const arr4 = [7, 8, 9];
console.log(sumAll(...arr4));

const arr5 = [...arr4, 1, 2, 3];
console.log(arr5);
// 展開對象
const obj = { ...info };
console.log(obj);
console.log({ ...info, code: "A00019" })

4.箭頭函數

/* 04 箭頭函數 ******/
const fn = () => 'asd';
console.log(fn());
const fn2 = a => a * a;
console.log(fn2(10));
const fn3 = (a, b, c) => a + b + c; // 多個入參需要用括號括起來
console.log(fn3(...arr4));
const fn4 = () => ({ ...obj, id: "10086" });
console.log(fn4());

function fn5(){
//arguments 保存函數的實參
console.log(arguments.length);
}
fn5();

const fn51= () => {
// 箭頭函數中沒有arguments
console.log(arguments);
}
try {
fn51();
} catch (error) {
console.log('箭頭函數',error)
}

// 箭頭函數中沒有自己的this，它的this總之指向外層作用域的this
const fn6 =() => {
console.log(this);
}
fn6();

const obj2 = {
locate: ()=> {
console.log(this);
}
}
obj2.locate();

const obj3 = {
locate: function(){
console.log(this);
}
}
obj3.locate();

5.模塊化

定義導出

const kawa = 'history is history';

const fns = () => {
    console.log('fns()');    
}
//導出分兩種
//1.默認導出  （一個模塊中只能有一個默認導出）
export default kawa;

//2.命名導出
export const objs = {
    name:'Brian'
};

export {fns};

定義導入

/* 05 模塊化 （將一個大的項目拆成一個個小的模塊） *******/
import {kawa, objs as obj4, notfound} from './basic.js';
console.log(kawa);

以上JS部分的基礎內容，是後面react會經常用到。