Javascript 学习笔记

课程链接

注释

//

输出

1
console.log();

变量与常量

变量

  1. var (少用)
  2. let (常用)
1
2
3
4
let age = 30;
age = 31;

console.log(age);

输出结果

1
31

常量

const
需要在声明时赋值.本身不可变.若声明的是数组或对象,其内部元素可变,只是不能将整个数组或对象完全更改.

原生数据类型

string, number, boolean, null, undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const username = 'John';
const age = 30;
const rate = 4.5; //整型和浮点型都是 Number 类型
const isCool = true;
const x = null;
const y = undefined;
let z;

console.log(typeof username);
console.log(typeof age);
console.log(typeof rate);
console.log(typeof isCool);
console.log(typeof x);
console.log(typeof y);
console.log(typeof z);

输出结果

1
2
3
4
5
6
7
string
number
number
boolean
object
undefined
undefined

模板字符串

1
2
3
4
5
6
const username = 'John';
const age = 30;

// 连接
console.log("My name is " + username + " and I am " + age +" years old.");
console.log(`My name is ${username} and I am ${age} years old.`);

输出结果

1
2
My name is John and I am 30 years old.
My name is John and I am 30 years old.

字符串的内置方法

1
2
3
4
5
6
7
const s = "hello world";

console.log(s.length); //获取字符串长度
console.log(s.toUpperCase()); //转大写
console.log(s.toLowerCase()); //转小写
console.log(s.substring(1, 3)); //截取字符串
console.log(s.split(" ")); //字符串分割

输出结果

1
2
3
4
5
11
HELLO WORLD
hello world
el
[ 'hello', 'world' ]

数组

1
2
3
4
5
6
7
8
9
10
11
const fruits = ['apple', 'banana', 'orange'];

fruits[3] = "grape";
fruits.push("mango"); //在末尾添加元素
fruits.unshift("lemon"); //在开头添加元素
fruits.pop(); //删除末尾元素
fruits.shift(); //删除开头元素

console.log(fruits[3]);
console.log(Array.isArray(fruits)); //判断是否为数组
console.log(fruits.indexOf("banana")); //获取banana的索引值

输出结果

1
2
3
grape
true
1

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const person = {
  name: 'John',
  age: 30,
  isMarried: true,
  skills: ['JavaScript', 'React', 'Node.js'],
  address:{
    street: '123 Main St',
    city: 'New York',
    state: 'NY'
  }
};

console.log(person.name);
console.log(person.age);
console.log(person.isMarried);
console.log(person.skills[0]);
console.log(person.address.street);

const {name, age, isMarried, skills, address:{city}} = person; //解构赋值
console.log(city);

person.email = 'john@example.com'; //添加新属性
console.log(person.email);

输出结果

1
2
3
4
5
6
7
John
30
true
JavaScript
123 Main St
New York
john@example.com

对象数组与Json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const todos = [
  {
    id: 1,
    content: "HTML",
    isCompleted: false
  },
  {
    id: 2,
    content: "CSS",
    isCompleted: true
  },
  {
    id: 3,
    content: "Javascript",
    isCompleted: false
  }
];

console.log(todos[1].content);

const todosJSON = JSON.stringify(todos); //对象数组转Json
console.log(todosJSON);

输出结果

1
2
CSS
[{"id":1,"content":"HTML","isCompleted":false},{"id":2,"content":"CSS","isCompleted":true},{"id":3,"content":"Javascript","isCompleted":false}]

逻辑运算符

与&&
或||
非!

if 条件语句

1
2
3
4
5
6
7
8
9
const x = 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 less than 10");
}

输出结果

1
x is 10

三目运算符

1
2
3
const x = 11;
const colour = x > 10 ? "red" : "blue"; //当表达式'x > 10'为true时，返回red，否则返回blue
console.log(colour);

输出结果

1
red

Switch 语句

1
2
3
4
5
6
7
8
9
10
11
12
13
const x = 11;
const colour = x > 10 ? "red" : "blue";

switch(colour){
    case "red":
        console.log("colour is red");
        break;
    case "blue":
        console.log("colour is blue");
        break;
    default:
        console.log("colour is not red or blue");
}

输出结果

1
colour is red

循环语句

for

1
2
3
for (let i = 0; i < 3; i++) {
  console.log(i);
}

输出结果

1
2
3
0
1
2

while

1
2
3
4
5
let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

输出结果

1
2
3
0
1
2

do-while

1
2
3
4
5
let j = 0;
do {
  console.log(j);
  j++;
} while (j < 3);

遍历对象数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const todos = [
  {
    id: 1,
    content: "HTML",
    isCompleted: false
  },
  {
    id: 2,
    content: "CSS",
    isCompleted: true
  },
  {
    id: 3,
    content: "Javascript",
    isCompleted: false
  }
];

for (let i = 0; i < todos.length; i++) {
    console.log(todos[i].content);
}

for (let todo of todos) {
    console.log(todo.id);
}

输出结果

1
2
3
4
5
6
HTML
CSS
Javascript
1
2
3