• 目录

JavaScript核心语法

阅读量: 692 编辑

JavaScript核心语法

基本知识

/**
 * 文件必须以 .js 结尾：比如 hello.js
 * 单行注释，多行注释
 * 运行在浏览器中，用vscode等工具编写js代码
 **/

变量定义用 let

let a = 100; //可以用 ; 结尾，也可以不用

常量用 const

const b = 100
//b = 200 //错误，常量不允许修改

控制台打印内容

console.log(a) //打印一个
console.log("a = ", a)//打印多个

基本类型

let a1 = 10         //整数
let a2 = 10.9       //浮点数
let a3 = true       //布尔值
let a4 = "hello"    //字符串
let a5 = null       //空
let a6 = undefined  //“未定义”类型
//console.log(a7)   //a7没有定义过，输出就是undefined

引用类型

let arr = [10, 20, 30]      //数组（Array）
let obj = { a: 10, b: 20 }  //对象（Object）
function f() {              //函数（Function）
    return 10 + 20;
}

数学运算

let b1 = 5 + 2  //相加，7
let b2 = 5 - 2  //相减，3
let b3 = 5 * 2  //相乘，10
let b4 = 5 / 2  //相除，2.5
let b5 = 5 % 2  //取余，1
//let a = 10
let b6 = ++a    //先自增1，b6=11，a=11
let b7 = a++    //后自增1，b7=11，a=12
let b8 = --a    //先自减1，b8=11，a=11
let b9 = a--    //后自减1，b9=11，a=10
let b0 = 2 ** 3 //幂运算，2的3次方，8

逻辑运算

let c1 = true, c2 = false
c1 && c2 //逻辑与。并且的意思，都是true，结果才是true
c1 || c2 //逻辑或。或者的意思，都是false，结果才是false
!c1      //逻辑取反，true的反就是false

分支语句

let d = 5 //比如d代表星期几
//只用一个if
if (d > 5) {
    //周末
}

//if-else
if (d > 5) {
    //周末
} else {
    //工作
}

//if-else if-else
if (d > 7) {
    //超过7天了
} else if (d > 5 && d <= 7) {// else if 可以有多个
    //周末
} else {
    //工作
}

//switch（if else 较多时，可以尝试用switch）
switch (d) {
    case 1:
        //开会
        break;  //break如果不加，执行完1就会执行2，直到break
    case 2:
        //出差
        break;
    case 3:
        //下午茶
        break;

    //其他case自行补充

    default:
    //不满足以上case，会执行default
}

//三目运算符
let result = d > 5 ? "周末" : "工作"
//d是否大于5？如果是，返回“周末”，否则返回“工作”

循环语句

//for循环
for (let i = 0; i < 10; i++) {
    console.log("i = ", i);
}

//while循环
let j = 0
while (j < 10) {
    console.log("j = ", j);
    j++
}

//do-while循环
let t = 0
do {
    console.log("t = ", t);
    t++
} while (t < 10)

//循环的终止和继续
for (let i = 0; i < 10; i++) {
    if (i == 6) continue //继续下一次循环
    console.log("i = ", i);
    if (i == 8) break    //结束（跳出）循环
}

函数

function f(a, b) {//函数定义
    return a + b
}

f(10, 20)   //函数调用

//函数可以保存在变量中
let f1 = function f(a, b) {
    return a + b
}
f1(10, 20)

//既然可以保存在变量中，函数名就可以不要（匿名函数）
let f2 = function (a, b) {
    return a + b
}
f2(10, 20)

箭头函数

//可以省略function关键字，用 => 表示
let f3 = (a, b) => {
    return a + b
}
f3(10, 20)

//如果函数体只有一个 return 语句，可以省略 {} 和 return
let f4 = (a, b) => a + b

//如果只有一个参数，也可以省略 ()
let f5 = a => a * 10

//如果没有参数，小括号不能省略 
let f6 = () => 10

数组(Array)

let arr1 = [10, 20, 30] //用中括号[]，定义数组，可以存放多个数据
console.log(arr1[0]) //索引（下标）访问，0代表第一个元素
arr1[0] = 100 //赋值

//常见属性和api
arr1.length     //数组长度
arr1.push(40)   //添加元素到数组末尾 [10,20,30,40]
arr1.pop()      //移除数组末尾元素 [10,20,30]
arr1.unshift(5) //添加元素到头部 [5,10,20,30]
arr1.shift()    //移除数组头部元素 [10,20,30]

arr1.forEach((e, i, arr) => {//遍历数组
    //e：当前元素，i：索引下标，arr：数组本身
})

for (let item of arr1) {//for-of循环遍历
    //item 就是数组中的元素
}

let arr2 = arr1.map(e => e * 10) //遍历数组，并返回一个数组
let arr3 = arr1.filter(e => e >= 10) //过滤数组，并返回一个新数组
arr1.splice(0, 1) //从下标0开始，删除1个元素

解构赋值

let [r1, r2, , r4] = [10, 20, 30, 40] //r1=10,r2=20,r4=40
//rest语法
let [r5, ...r] = [10, 20, 30, 40] //r5=10,r=[20,30,40] 
//spread语法
let rest2 = [...r]//复制数组

对象（Object）

let person = {
    name: "qicong",
    age: 18,
    gender: 1,
    language: ["Java", "JS"],

    sing: function () {
        //函数
    },
    address: {  //对象
        province: "北京",
        city: "北京"
    }

}

//访问对象
person.name
person.age = 19 //赋值
person.address.zone = "海淀"

//[] 访问，赋值
person["age"] = 19
let g = "gender"
person[g] = 1

//遍历所有的属性（property）
for (let p in person) {
    console.log(p, "=", person[p])
}

Promise语法

fetch("http://xxx") //异步请求数据
    .then(res => handle(res)) //handle也是Promise函数
    .then(result => console.log(result))
    .catch(e => console.log(e)) //处理（任何一个Promise）错误
  • 目录