js：JavaScript 核心语法快速入门

变量与常量

// 变量
let a = 5;

// 常量, 定义后不能修改
const a = 5;
a = 6; // TypeError: Assignment to constant variable.

输出

// console.log 控制台打印，可传递多个参数
let a = 5;
let b = 6;
console.log(a);    // 5
console.log(a, b); // 5 6

数据类型

// 基本类型
let i = 5;          // Number 整数
let f = 5.2;        // Number 浮点数
let b = true;       // Boolean 布尔
let s = 'hello';    // String 字符串
let n = null;       // 空
u;                  // 直接访问不存在的变量  undefined
let un = undefined; // 可以赋值为undefined


// 引用类型
let arr = [1, 2, 3]           // Array 数组
let obj = {a: 1, b: 2}        // Object对象
function func(){return a + b} // Function函数

运算符

// 数学运算符
1 + 2  // 加法 3
1 - 2  // 减法 -1
1 * 2  // 乘法 2
1 / 2  // 除法 0.5
3 % 2  // 取余 1
++1    // 值+1 2
--1    // 值-1 0
2 ** 3 // 乘方 8

// 比较运算符
2 = 3    // 大于等于 false
2 == '2'  // 相等运算符 true 隐式类型转换
2 === '2' // 严格相等运算符 false 严格比较 类型和值都相等才为真

// 逻辑运算符
true && false  // 与 false
true || false  // 或 true
!true          // 非 false

分支语句

// if分支1
let a = 5;
if(a > 2){
    // do something 
} else{
    // do something
}

// if分支2
if(a > 2){
    // do something 
} else if (a  5 ? '大于5': '小于等于5'

循环语句

// for循环
for(let i = 0; i {
    return item * 2;
})
console.log(newArr) // [2, 4, 6]


// filter 遍历数组并返回满足条件的新数组
let arr = [1, 2, 3]
let newArr = arr.filter((item, index, arr)=>{
    return item >= 2;
})
console.log(newArr) // [2, 3]

// 解构赋值，一次性将数组元素赋值给多个变量
let [a, b] = [1, 2, 3]
console.log(a, b) // 1 2

let [a, ,b] = [1, 2, 3]
console.log(a, b) // 1 3

// rest运算符 把没解构的数组保存起来
let [a, ...rest] = [1, 2, 3]
console.log(a, rest) // 1 [2, 3]

// spread展开运算符 复制一个数组 
let arr = [1, 2, 3]
let arr2 = [...arr]
console.log(arr2) // [1, 2, 3]

对象

// 定义对象
let obj = {
    a: 1,
    b: true,
    f(){}, // 函数
    arr: [1, 2, 3],
    obj: { // 子对象
        c: '2'
    }
}

// 访问属性 2种方式
console.log(obj.a) // 1

// 方括号形式，字符串形式的属性名
console.log(obj['a']) // 1

// 保存了属性字符串的变量
let a = 'a'
console.log(obj[a]) // 1

// 赋值
obj.a = 2
console.log(obj.a) // 2

// 新添加属性
obj.d = 3
console.log(obj.d) // 3

// 对象解构赋值
let obj = {a: 1, b: 2, c: 3}
let {a, b} = obj
console.log(a, b) // 1 2

// rest运算符
let obj = {a: 1, b: 2, c: 3}
let {a, ...rest} = obj
console.log(a, rest) // 1 {b: 2, c: 3}

// spread运算符
let obj = {a: 1, b: 2, c: 3}
let obj2 = {...obj}
console.log(obj2) // {a: 1, b: 2, c: 3}

// for...in循环
let obj = {a: 1, b: 2, c: 3}
for(let key in obj){
    console.log(obj[key]);
}
// 1, 2, 3

// for...of循环
let obj = {a: 1, b: 2, c: 3}
for(let [key, value] of Object.entries(obj)){
    console.log(key, value);
}
// a 1
// b 2
// c 3

Math数学运算

Math.sqrt(4)      // 开方2 
Math.max(1, 2, 3) // 最大值 3
Math.min(1, 2, 3) // 最小值 1
Math.PI           // 圆周率 3.141592653589793

Date获取日期

let date = new Date() // 当前日期

date.getFullYear()    // 2022
date.getMonth()      // 月份（从0到11）6
date.getDate()  // 日期 23
date.getTime()   // 时间戳 1658589653487

数值转换

parseInt('1')     // 字符串转为整数 1 
parseFloat('2.5') // 字符串转为小数 2.5

延时执行

setTimeout(()=>{
    // 延后500毫秒执行
}, 500)

重复执行

let id = setInterval(()=>{
    // 每隔5秒执行一次
}, 5000)

// 取消定时器
clearInterval(id);

错误处理

try{
    // 访问未定义的变量
    console.log(a);
} catch(e){
    console.log(e.name);
    // ReferenceError
    console.log(e);
    // ReferenceError: a is not defined
}

异步操作 Promise

fetch('http://httpbin.org/get')
    .then((res)=> res.json())
    .then((result)=> {console.log(result)})
    .catch(e=> console.log(e))

视频： 7 分钟掌握 JavaScript 核心语法(up：峰华前端工程师)