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会经常用到。