JavaScript

JS

变量#

Copy
// var let const
var: 很少使用，全局作用域
let: 值可以被修改
const: 值不能被修改，而且需要在声明时初始化数值


console.log('hello world')		// 这是我的第一个js代码；

let bbb         // 声明
bbb = 30        // 赋值
bbb = 31        // 修改
console.log(bbb)        // 调用

const aaa = 50      // aaa 定义为50，因为是常量后面不允许修改
console.log(aaa)    // 调用

// 输出
hello world
31
50

数据类型#

• 值类型：String、Number、Boolean、Null、Undefined、Symbol
• 引用类型：对象、数组、函数、另外两个特殊的对象：正则和日期

Copy
// String, Number, Boolean, null, undefined
String: 字符串
Number：数字，不区分小数点与整数
Boolean: 布尔
null：定义为空
undefined: 没定义，当不赋值也是没定义


const username = "tcy";
const age = 30;
const rate = 4.5;
const isCool = true;
const x = null;
const y = undefined;
let z;

console.log(typeof rate)            // 查询值的类型

String#

Copy
// string 字符串拼接的两种方式
console.log("我是：" + username)
console.log(`我是：${username}`)

// 内置属性与方法，不带括号为属性，带括号为方法
const s = 'hello world'
console.log(s.length)           // 获取变量s所对应值的长度
console.log(s.toUpperCase())    // 将变量s所对应值转换为大写
console.log(s.toLowerCase())    // 将变量s所对应值转换为小写
console.log(s.substring(0,5))   // 将变量s对应值进行切割，只取前5个字符串
console.log(s.substring(0,5).toUpperCase())     // 使用方法下的方法
console.log(s.split(''))        // 将每个字符都进行分割

数组#

• 数组为可变类型
• 更多方法可以查询JavaScript官网

Copy
const fruits = ["apples","orages","pears",10,true]      // 定义数组
console.log(fruits)         // 调用数组,显示全部
console.log(fruits[1])      // 显示第二个元素
fruits[1] = "apples"        // 将第二个元素进行修改
console.log(fruits[1])      // apples
fruits.push("mangos")       // 将数组后添加一位元素
console.log(fruits)         // [ 'apples', 'apples', 'pears', 10, true, 'mangos' ]
fruits.unshift("strawberries")  // 在数组头部添加元素
console.log(fruits)            // [ 'strawberries', 'apples', 'apples', 'pears', 10, true, 'mangos' ]
fruits.pop()                // 删除数组最后一位元素
console.log(fruits)         // [ 'strawberries', 'apples', 'apples', 'pears', 10, true ]
console.log(Array.isArray(fruits))  // 判断是否为数组，结果为true
console.log(fruits.indexOf("apples"))   // 查找元素索引位置，结果为1

对象#

• 类似于Go的字典，可以对象中保存对象
• JavaScript 变量均为对象。当声明一个变量时，就创建了一个新的对象。

Copy
// 定义对象
const person = {
    firstName: "tang",
    lastName: "meinv",
    age:30,
    hobbies: ["music","movies","sports"],
    address: {
        street: "50 main st",
        city: "Boston",
        state: "MA",
    },
}
console.log(person)
console.log(person.firstName)           // 对象.属性名的方法 访问任何一个属性
console.log(person.hobbies[1])
console.log(person.address.state)

// 输出
{
  firstName: 'tang',
  lastName: 'meinv',
  age: 30,
  hobbies: [ 'music', 'movies', 'sports' ],
  address: { street: '50 main st', city: 'Boston', state: 'MA' }
}
tang
movies
MA

• 结构

Copy
const {firstName,lastName} = person      // 使用同名变量将值从person抽离
console.log(firstName)      			// tang
const {address: {city}} = person    	// 将对象中的对象进行抽离
console.log(city)                   	// Boston
person.email = "json"               	// 添加新的属性

对象数组#

Copy
const todos = [
    {
        id: 1,
        test: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        test: "Metting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        test: "Dentist appt",
        isCompleted: false,
    },
]


console.log(todos)

// 输出
[
  { id: 1, test: 'Take out trash', isCompleted: true },
  { id: 2, test: 'Metting with boss', isCompleted: true },
  { id: 1, test: 'Dentist appt', isCompleted: false }
]

• 对象数组转变为json
• 场景：将对象数组传输给服务器，需要转换为json格式

Copy
const todos = [
    {
        id: 1,
        test: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        test: "Metting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        test: "Dentist appt",
        isCompleted: false,
    },
]


const todoJSON = JSON.stringify(todos)
console.log(todoJSON)

if 判断#

Copy
const x = 10
if (x == "10") {                      // 判断值是否一致
    console.log("x is 10")            // 输出结果
}

if (x === "10") {                      // 判断值与类型是否一致
    console.log("x is 10")             // 结果不输出，因为仅值一致，类型并不相同
} else if (x > 10) {
    console.log("x is greater than 10") 
}else {
    console.log("x is not 10")         // x is not 10
}

const a = 10
const b = 20
if (a > 8 || b < 19) {                  // 多条件判断，两者其一满足均可触发
    console.log("a is more than 10 or b is more than 19")
}

if (a > 9 && b > 10) {                  // 多条件判断，两者都需要满足才能触发
    console.log("a is more than 10 or b is more than 19")
}

三目运算符#

Copy
const d = 10;
const color = d > 5 ? "red" : "blue"    // ？为 表示条件为真，：为else
console.log(color)                  // red

Switch#

Copy
const d = 10;
const color = d > 5 ? "red" : "blue"    // ？为 表示条件为真，：为else
console.log(color)                  // red


switch (color) {					  // 将color变量填入
    case "red":						  // 判断值是否为red
        console.log("color is red");
        break
    case "blue":
        console.log("color is blue");
        break
    default:						  // 当都不满足触发default执行
        console.log("color is Not red or blue");
}

for & While#

Copy
for (let i = 0;i < 10; i++) {           // let 声明变量，定义条件，并实现循环后递增
    console.log(i)
}

for (let i = 0;i <= 10; i++) {           // let 声明变量，定义条件，并实现循环后递增
    console.log(i)
}


const todos = [
    {
        id: 1,
        test: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        test: "Metting with boss",
        isCompleted: true,
    },
    {
        id: 1,
        test: "Dentist appt",
        isCompleted: false,
    },
]

for (let i = 0;i < todos.length;i++) {			// 方式一：遍历数组元素中的test属性
    console.log(todos[i].test)
}

for (let todo of todos) {					  // 方式二：遍历数组元素中的test属性
    console.log(todo.test)
}

let i = 0;							 // while需要在循环体外定义变量
while (i < 10) {					  // 触发条件
    console.log(`While Loop Number: ${i}`);	
    i++								 
}

函数#

• 关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

Copy
function myFunction() {              // 定义函数
    console.log("hello world")
}

myFunction()                         // 调用函数

• 带参函数

Copy
function argFunction(arg1,arg2) {
    console.log("Welcome " + arg1 + ", the " + arg2)
}

argFunction('tcy','job')

• 函数返回值
• "demo" 元素的 innerHTML 将是12

Copy
// 返回a*b
function myFunction(a,b) {
    return a * b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);	// 查找html中元素id为demo，并修改结果为myFunction的返回值