JS中变量常量与函数的声明与使用过程

控制台指令

1. console.log(data): 查看数据(支持模板和 CSS)
2. console.dir(obj): 树形可折叠查看对象结构
3. console.table(obj): 表格方式查看对象
4. console.error(msg): 输出错误警告
5. console.clear(): 清空输出

var变量 三大硬伤

1. 声明提升: 未声明可使用
2. 重复声明: 声明式更新很奇葩
3. 变量泄露: 不支持代码块

所以放弃使用该方式, 改用lef变量

lef 变量

let a = 100
console.log('a =', a)
// 输出 a = 100
// 更新变量
a = 200
console.log('a =', a)
// 输出 a = 200

const 常量

1. const定义的值不可以修改，而且必须初始化
2. 常量的含义是指对象不能修改，如果改变常量的值会报错! 但是可以改变对象内部的属性

const APP = {
    id:1,
    name:"张三"
}
// 修改常量值
APP = '我是改变常量的值'
console.log(APP);
// 输出报错
// 修改内部的属性
APP.name="李四";
console.log(APP.name);
//输出：李四

命名函数

声明 前/后, 都可以直接调用

function getUserName(username) {
  return 'Hello, ' + username
}
// 调用函数
console.log(getUserName('李三'))
// 输出结果
Hello, 李三

匿名函数

const let 没有声明提升的效果, 所以必须遵循”先声明,后使用”原则

const sum = function (a, b) {
  return a + ' + ' + b + ' = ' + (a + b)
}
// 调用函数
console.log(sum(1, 2))
// 输出结果
1 + 2 = 3

箭头函数

匿名函数的语法糖(简化)
语法: 删除function, (…)=>{…}

let subtract = (a, b) => {
  return a + ' - ' + b + ' = ' + (a - b)
}
// 调用函数
console.log(subtract(100, 10))
// 输出结果
100 - 10 = 90

只有一条return ,可不写 {…}

let multiply = (a, b) => a + ' x ' + b + ' = ' + (a * b)
// 调用函数
console.log(multiply(20, 11))
// 输出结果
20 x 11 = 220

只有一个参数, (…) 也可不写

let getUser = name => 'Hello, ' + name
// 调用函数
console.log(getUser('亚瑟'))
// 输出结果
Hello, 亚瑟

立即执行函数 (IIFE)

一次性,常用作模块或封装

let res = (function (a, b) {
  return a + ' + ' + b + ' = ' + (a + b)
})(60, 30)
// 调用函数
console.log(res)
// 输出结果
60 + 30 = 90