写在前面:
- 绝不废话!放心食用
- JavaScript语法很简单,可以直接在控制台调试理解
1、变量和常量
| |
| |
| |
| |
| |
| let age = 30; |
| console.log(age); |
| age = 31; |
| console.log(age); |
| |
| const agge = 12; |
| console.log(agge); |
| |
| |
| |
| |
| |
2、数据类型
| |
| |
| |
| |
| |
| |
| |
| |
| const username = "Dandelion"; |
| const oldname = 'Dandelion_000'; |
| |
| |
| const age = 30; |
| const score = 4.4; |
| |
| |
| const flag = true; |
| |
| |
| const my_null = null; |
| |
| |
| let my_undefined; |
| const my_undefined_1 = undefined; |
| |
| console.log(typeof score); |
| console.log(typeof my_null); |
| console.log(typeof my_undefined); |
3、字符串
3.1 模板字符串
| const username = "Dandelion"; |
| const age = 20; |
| |
| |
| console.log("My name is " + username + " and I am " + age); |
| |
| console.log(`My name is ${username} and I am ${age}`); |
3.2 字符串的部分常用函数
| const s = "Hello World!"; |
| |
| |
| console.log(s.length); |
| |
| |
| console.log(s.toUpperCase()); |
| |
| console.log(s.toLowerCase()); |
| |
| |
| console.log(s.substring(0, 4)); |
| |
| |
| console.log(s.split("")); |
| console.log(s.split("r")); |
| console.log(s.split("Wo")); |
4、数组
数组属于对象
| const narr = new Array(1, 2, 3, 4, 5); |
| console.log(narr); |
| |
| const sarr = new Array("A", "b", "3", "DD", "E"); |
| console.log(sarr); |
| |
| |
| const barr = [true, false, false, true. null]; |
| console.log(barr); |
| |
| |
| const arr = new Array(1, 2.2, "CC", false, null, undefined); |
| console.log(arr); |
| |
| console.log(arr[1]); |
| arr[2] = "CCC"; |
| |
| |
| arr.push("push_back"); |
| arr.unshift("un_shift"); |
| console.log(arr); |
| arr.pop(); |
| console.log(arr); |
| |
| console.log(Array.isArray(arr)); |
| |
| |
| console.log(arr.indexOf("CCC")); |
| console.log(arr.indexOf("CC")); |
| |
| |
| let bigArr = [1, 2, 3, 4]; |
| console.log(bigArr); |
| bigArr[10] = 11; |
| console.log(bigArr); |
| |
| |
| let sortArr = [5, 2, 1, 6, 8]; |
| sortArr.sort(); |
| console.log(sortArr); |
5、对象
| const person = { |
| name: "Dandelion", |
| age: 20, |
| hobbies: ["music", "movies", "sports"], |
| address: { |
| street: "50 main st", |
| city:"Boston", |
| state:"MA", |
| }, |
| }; |
| |
| console.log(person); |
| console.log(person.name); |
| console.log(person.hobbies[1]); |
| console.log(person.address.city); |
| |
| person.street = "52 main st" |
| person.email = "e.dandelion@xx.com" |
| console.log(person); |
| |
| |
| const { name, age, address: { city } } = person; |
| console.log(name); |
| console.log(age); |
| |
| |
| |
| console.log(city); |
6、对象数组 && JSON
| const todos = [ |
| { |
| id: 1, |
| text: "Take out trash", |
| isCompleted: true, |
| }, |
| { |
| id: 2, |
| text: "Meeting with boss", |
| isCompleted: true, |
| }, |
| { |
| id: 1, |
| text: "Dentist appt", |
| isCompleted: false, |
| }, |
| ]; |
| console.log(todos[1].text); |
| |
| |
| |
| const todoJSON = JSON.stringify(todos); |
| console.log(todoJSON); |
7、if 条件 && 三目运算
7.1 if 条件
if-else嵌套之类的和C、Java都没有区别,细节不表
| const x = "10"; |
| const y = 11; |
| const z = 5; |
| |
| |
| if (x === 10) { |
| console.log("x === 10"); |
| } |
| if (x !== 10) { |
| console.log("x !== 10"); |
| } |
| if (x == 10) { |
| console.log("x == 10"); |
| } |
| if (x != 10) { |
| console.log("x != 10"); |
| } |
| if (x > 5) { |
| console.log("x >= 5"); |
| } |
| |
| |
| if (y > 10 || z > 10) { |
| console.log("y > 10 || z > 10"); |
| } |
| if (y > 10 && z > 10) { |
| console.log("y > 10 && z > 10"); |
| } |
| |
7.2 三目运算
| const flagA = true; |
| const flagB = false; |
| const flagC = true; |
| const flagD = false; |
| console.log( flagB ? "BBB" : (flagD ? "DDD" : (flagC ? "CCC" : flagA))); |
8、switch
JS 中 ,switch参数可以是字符串,字符串也是基础数据类型
| const color = "blue"; |
| switch (color) { |
| case "red": |
| console.log("red"); |
| break; |
| case "blue": |
| case "black": |
| console.log("blue or black"); |
| break; |
| case "yellow": |
| console.log("yellow"); |
| break; |
| default: |
| console.log("other"); |
| break; |
| } |
9、循环
9.0 准备工作
| const person = { |
| name: "Dandelion", |
| age: 20, |
| hobbies: ["music", "movies", "sports"], |
| address: { |
| street: "50 main st", |
| city:"Boston", |
| state:"MA", |
| }, |
| }; |
| |
| const todos = [ |
| { |
| id: 1, |
| text: "Take out trash", |
| isCompleted: true, |
| }, |
| { |
| id: 2, |
| text: "Meeting with boss", |
| isCompleted: true, |
| }, |
| { |
| id: 1, |
| text: "Dentist appt", |
| isCompleted: false, |
| }, |
| ]; |
9.1 for 循环
9.1.1 for
| for (let index = 0; index < 10; ++index) { |
| console.log(`for loop number: ${index}`); |
| } |
9.1.2 forin 遍历对象属性
| for (const key in person) { |
| console.log(`${key}: ${person[key]}`); |
| } |
9.1.3 forof 遍历数组
| for (const todo of todos) { |
| console.log(todo); |
| } |
9.1.4 foreach - 引子
严格来说 foreach 属于迭代器,将在 第11节迭代器 中详细说明
9.2 while 循环
| let i = 0; |
| while (i < 10) { |
| console.log(`for loop number: ${i++}`); |
| } |
9.3 do-while 循环
| let j = 0; |
| do { |
| console.log(`for loop number: ${j}`); |
| } while (j++ < 10); |
10、函数
10.1 函数调用
| function f() { |
| console.log('test func'); |
| } |
| f(); |
10.2 参数传递
10.2.1 单个参数
| function f1(element) { |
| console.log(element); |
| } |
| f1('test element'); |
10.2.2 多个参数
| function f2(a, b, c) { |
| console.log(a + b); |
| } |
| f2(1, 2, 3, 4); |
| f2(1, 2, 3); |
| f2(1, 2); |
| |
10.2.3 arguments
- arguments 相当于一个数组,里面存储了函数的实参,当出现实参和形参数量不相同,就可以用arguments来获取。
- arguments 这个"数组"的功能并不全,比如没有push,pop等操作,只是单纯的存储工具,但有length的操作。
- 这里的
f3
有没有形参都不影响
| function f3() { |
| console.log(arguments); |
| console.log(arguments[1]); |
| console.log(arguments.length); |
| } |
| f3(1, 2, 3); |
10.3 函数返回
可以直接使用return返回内容
| function f4(a, b) { |
| return a + b; |
| } |
| console.log(f4(3, 2)); |
10.4 箭头函数
省去function,采用let var const的定义方式定义函数
| let f5 = (a, b, c) => { |
| return a + b + c; |
| } |
| console.log(f5(1, 2, 3)); |
| |
| |
| let f6 = a => { |
| return a + 10; |
| } |
| console.log(f6(1)); |
11、迭代器
这里需要进行一些准备工作,详见 9.0准备工作
11.1 foreach
foreach 可以按顺序访问数组中的每一个元素,一般用于遍历
| |
| todos.forEach(function(todo) { |
| console.log(todo); |
| }); |
| |
| console.log("---------------------------------------------------"); |
| |
| |
| todos.forEach(todo => { |
| console.log(todo); |
| }); |
11.2 map
| |
| let taskText = todos.map(function(todo) { |
| return todo.text; |
| }); |
| console.log(taskText); |
| |
| console.log("---------------------------------------------------"); |
| |
| |
| let taskTextByIndex = todos.map(function(todo) { |
| return todo.text; |
| }); |
| console.log(taskTextByIndex[1]); |
11.3 filter
| let object = todos.filter(function(todo) { |
| return todo.isCompleted === true; |
| }); |
| console.log(object); |
11.4 map + filter
- filter 和 map 迭代器组合使用,仅取筛选后对象数组的某一个属性,仍得到属性值的数组
- 这里均采用箭头形式
- 本质上是进行了两次迭代,filter 负责筛选出满足条件的对象,map 负责取出所需的属性值,最后返回所需的属性值的数组
| let taskTextByFilterAndMapArr = todos.filter(todo => { |
| return todo.isCompleted === true; |
| }).map(todo => { |
| return todo.text; |
| }); |
| console.log(taskTextByFilterAndMapArr); |