React学习笔记一：基础知识(1)

1. var、let、const的区别

// var - 没有块级作用域  

{
    var a = 1;
    console.log(a); // 1
}
console.log(a); // 1

// let - 有块级作用域  
{
    let b = 2;
    console.log(b); // 2
}
console.log(b); // Uncaught ReferenceError: b is not defined

// const - 有块级作用域，只能赋值一次  
{
    const c = 2;
    console.log(c); // 2
    c = 3
    console.log(c); // Uncaught TypeError: Assignment to constant variable.
}
console.log(c); // Uncaught ReferenceError: c is not defined

2. 解构赋值

// 将数组中的值解构复制给变量
let arr = ['孙悟空','猪八戒'];
let [a,b] = arr
console.log(a,b); // 孙悟空，猪八戒


// 函数返回值解构赋值
function fn() {
    return ['孙悟空','猪八戒']
}
const [c,d] = fn()
console.log(c,d); // 孙悟空 猪八戒


// 跳过赋值，展开运算符
let arr1 = ['孙悟空','猪八戒','沙和尚','唐僧']
const [e, f, , g] = arr1 // 跳过其中的值
console.log(e, f, g); // 孙悟空 猪八戒 唐僧

const [h, i, ...j] = arr1 // ...展开运算符; 必须放到最后，将后面未赋值的所有值放在数组中
console.log(h, i, j); // 孙悟空 猪八戒 ['沙和尚', '唐僧']

3. 展开运算符

function fn(a,b,c){
    return a+b+c
}
// 普通传参
console.log(fn(1,2,3));  // 6

let arr = [1,2,3]
// 展开数组中的数字传给函数fn
console.log(fn(...arr)); // 6

const obj = {
    name: '孙悟空',
    age:18,
    gender: '男'
}
// 拷贝obj 到 obj2 并追加信息
const obj2 = {...obj,address:'花果山'};
console.log(obj2);  // {name: '孙悟空', age: 18, gender: '男', address: '花果山'}

4. 箭头函数

// 普通函数
const fn1 = function(a){
    return a
}
// 箭头函数; 一个参数时不需要用小括号，没有参数或两个以上参数需要用小括号抱着
const fn2 = a => {return a}
const fn3 = a => a

console.log(fn1('hello')) // hello
console.log(fn2('hello')) // hello
console.log(fn3('hello')) // hello


const fn4 = (a,b,c, ...args) => {
    console.log(args)
}
fn4(1,2,3,4,5,6,7,8) // [4, 5, 6, 7, 8]

const fn5 = () => {
    console.log(this) // Window{...}
}