代码注释(comment)

代码中不会被当作代码来运行的文字, 用来在代码中写笔记, 分为单行和多行注释

  1. //两个正斜杠作单行注释  
  2. /*
  3. 多行注释第1行
  4. 多行注释第2行
  5. 多行注释第3行
  6. */

字符串, 数字, 布尔值

Javascript中的基础数据类型

字符串(string)

  1. '吉吉喵' //单引号或双引号包围的文本是字符串, 大多用于显示文字
  2. "吉吉喵" //作用和上面其实一样, 但建议用', 因为输入比"方便

数字(number)

  1. 8 //整数 
  2. 1.5 //浮点数

布尔值(boolean)

  1. true //真 
  2. false //假

特殊的类型(special types)

  1. undefined//未定义
  2. null//空
  3. Infinity//无穷大
  4. NaN//不存在（错误类型）
  5. //NaN不能用==来判断，需用
  6. isNaN()

运算符(operator)

数字加减乘除模

  1. 1.5 + 4 //1.5加4得5.5 
  2. 1.5 - 4 //1.5减4得-3.5 
  3. 1.5 * 4//1.5乘4得6 
  4. 1.5 / 4 //1.5除以4得0.375 
  5. 7 % 4 //7对4取模得3
  6. 2 ** 7 //2的7次方得128

字符串拼接与字符读取(string concatenation/get char)

  1. '吉吉喵有' + 100 + '块钱' //字符串拼接出 '吉吉喵有100块钱'  
  2. '吉吉喵'[0] //0号位的字符是'吉' 
  3. '吉吉喵'[2] //2号位的字符是'喵'

与或非布尔运算(and/or/negate)

  1. true && true //true与true得true 
  2. true && false //true与false得false 
  3. false && false //false与false得false  
  4. true || true //true或true得true 
  5. true || false //true或false得true 
  6. false || false //false或false得false  
  7. !true //非true得false 
  8. !false //非false得true

比较运算(comparison)

  1. 2 > 3 //2大于3得false 
  2. 2 >= 3 //2大于等于3得false 
  3. 2 < 3 //2小于3得true 
  4. 2 <= 3 //2小于等于3得true 
  5. 2 == 3 //2等于3得false 
  6. 2 != 3 //2不等于3得true

位运算(bitwise)

  1. const a = 10;
  2. const b = 2;
  3. a << b//a左移b位，相当于a*(2^b)
  4. a >> b//a右移b位，相当于a/(a^b)
  5. a | b//按位或，把a,b转换成二进制，每一位对齐进行或运算
  6. a & b//按位与，把a,b转换成二进制，每一位对齐进行与运算
  7. a ^ b//按位异或，把a,b转换成二进制，每一位对齐进行异或运算

==与===

  1. null == undefined//true
  2. null === undefined//false
  3. false == ''//true
  4. false === ''//false

更多看这里

变量(variable)

用于存放可变的数据

  1. let name = '吉吉喵' // 名字是'吉吉喵' 
  2. let lv = 1 // 等级是1 
  3. let money = 10 // 金钱是10 
  4. let hp = 100 // 生命值是100 
  5. let atk = 20 // 攻击力是20  
  6. name = '雷电猴' //名字从吉吉喵变成雷电猴 
  7. atk += 10 //攻击力加10, 变成了30攻击力 
  8. hp -= 20 //生命值减了20, 变成80生命值 
  9. lv++ //等级加1, 变成2级 
  10. money-- //金钱减1, 变成9

可行的变量命名风格

  1. var my_var_name //蛇式命名法 
  2. var myVarName //驼峰式命名法 
  3. var MyVarName //对象类命名法 
  4. var MY_VAR_NAME //常量命名法 
  5. var $my_var_name //美元符蛇式命名法 
  6. var $myVarName //美元符驼峰式命名法 
  7. var my_var_name99 //蛇式+数字混搭 
  8. var myVarName88 //驼峰式+数字混搭

常量(constant)

常量用于存放不会被改变的数据

  1. const PI = 3.1415926535897932384626433832795 //圆周率 
  2. const DAYS_OF_A_WEEK = 7 //一周有7天

使用console控制台调试代码

  1. let a = 2 
  2. let b = 3  
  4. console.log(a + b) //在控制台输出5
  1. console.clear() //清除控制台的输出记录

对象与属性(object property)

给空对象设置属性:

  1. let obj = {} //定义一个名为obj的变量存储一个空对象 
  2. obj.name = '吉吉喵' //给obj设置name属性, 值为'吉吉喵' 
  3. obj.money = 99 //给obj设置money属性, 值为99 
  4. obj.atk = 10 //给obj设置atk属性, 值为10 
  6. //控制台输出:'吉吉喵有99块钱, 10攻击力' 
  7. console.log(`${obj.name}有${obj.money}块钱, ${obj.atk}攻击力)

让对象带有初始属性:

  1. let obj = {     
  2.   name:'吉吉喵',     
  3.   money: 99,     
  4.   atk: 10, 
  5. }  
  7. //控制台输出:'吉吉喵有99块钱, 10攻击力' 
  8. console.log(`${obj.name}有${obj.money}块钱, ${obj.atk}攻击力`)

函数(function)

函数用于把多步计算过程封装成1步, 有助于简化代码

  1. //定义一个名为add的函数, 有3个参数, 分别是 a b c 
  2. function add(a, b, c) {     
  3.   a += b     
  4.   a += c     
  5.   return a //返回累加后的 a 
  6. }  
  8. add(2, 3, 4) //用参数2,3,4调用add, 返回 9 
  9. add('abc', 'def', 'ghi') //返回 'abcdefghi'  
  11. //上面的函数的运算过程也可以简化成1行 
  12. function add(a, b, c) {     
  13.   return a + b + c //直接返回abc的和 
  14. }

将函数用于操作对象属性:

  1. let obj1 = {
  2.     name:'吉吉喵',
  3.     money: 99,
  4. }
  6. let obj2 = {
  7.     name:'雷电猴',
  8.     money: 10,
  9. }
  11. function addMoney(obj, n) {//给对象加钱
  12.     obj.money += n
  13.     console.log(`${obj.name}获得了${n}块钱`)
  14. }
  16. function giveMoney(sender,receiver, n) {//把钱从一个对象转到另一个对象
  17.     receiver.money += n
  18.     sender.money -= n
  19.     console.log(`${sender.name}给了${receiver.name}${n}块钱`)
  20. }
  22. function display(obj) {
  23.     console.log(`${obj.name}有${obj.money}块钱`)
  24. }
  26. display(obj1)
  27. display(obj2)
  28. addMoney(obj2, 10)
  29. display(obj2)
  30. giveMoney(obj1, obj2, 20)
  31. display(obj1)
  32. display(obj2)
  33. /* 控制台输出:
  34. 吉吉喵有99块钱
  35. 雷电猴有10块钱
  36. 雷电猴获得了10块钱
  37. 雷电猴有20块钱
  38. 吉吉喵给了雷电猴20块钱
  39. 吉吉喵有79块钱
  40. 雷电猴有40块钱
  41. */

函数的其他形态

匿名函数(没有名字的函数)

  1. //匿名函数赋值到变量, 函数本身没有名字, 名字用的是变量的名字 
  2. //缺点是要求在声明后才能调用 
  3. let add = function(a, b, c) {     
  4.     return a + b + c 
  5. }  
  7. add(1,2,3)

箭头函数

  1. //箭头函数赋值到变量, 匿名函数的简写, 而且this关键词在箭头函数无效 
  2. let add = (a, b, c) => {     
  3.     return a + b + c 
  4. }  
  5. let add2 = (a, b, c) =>  a + b + c 
  6. //在表达式只有1行时, 可以进一步简写  
  7. console.log(add(1,2,3), (1,2,3))

异步函数

  1. //用async关键词修饰函数, 可以让函数异步执行
  2. //await关键词用于让异步函数同步执行, await必须在async函数中使用
  3. async function countDown() {
  4.     console.log(3)
  5.     await sleep(1000) //等待1000毫秒
  6.     console.log(2)
  7.     await sleep(1000) //等待1000毫秒
  8.     console.log(1)
  9.     await sleep(1000) //等待1000毫秒
  10.     console.log(0)
  11. }
  13. console.log('start')
  14. countDown()
  15. console.log('end')
  1. // 匿名函数 和 箭头函数 同样可以使用async/await
  2. let a = async function () {
  3.     await sleep(1000)
  4. }
  6. let b = async () => {
  7.     await sleep(1000)
  8. }

对象的方法(object method)

对象方法, 是对象自带的函数, 用于操作自身属性, 方法里的this关键词可以用来指向对象自身
当一个对象属性的值是函数, 这个属性就可以当作方法来用

  1. let obj1 = {
  2.     name:'吉吉喵',
  3.     money: 99,
  4.     giveMoney: function(receiver, n) {//giveMoney方法, 把钱转到另一个对象
  5.       receiver.money += n
  6.       this.money -= n
  7.       console.log(`${this.name}给了${receiver.name}${n}块钱`)//this表示对象自身
  8.     },
  9. }
  11. let obj2 = {
  12.     name:'雷电猴',
  13.     money: 10,
  14.     giveMoney(receiver, n) {//giveMoney方法的简写
  15.       receiver.money += n
  16.       this.money -= n
  17.       console.log(`${this.name}给了${receiver.name}${n}块钱`)
  18.     },
  19. }
  21. function display() {
  22.     console.log(`${this.name}有${this.money}块钱`)
  23. }
  25. //把外边的display函数设置赋值到show属性, show就可以当作方法来用
  26. obj1.show = display
  27. obj2.show = display
  29. obj1.show()
  30. obj2.show()
  31. obj1.giveMoney(obj2, 20)
  32. obj1.show()
  33. obj2.show()
  34. obj2.giveMoney(obj1, 10)
  35. obj1.show()
  36. obj2.show()
  38. /*
  39. 吉吉喵有99块钱
  40. 雷电猴有10块钱
  41. 吉吉喵给了雷电猴20块钱
  42. 吉吉喵有79块钱
  43. 雷电猴有30块钱
  44. 雷电猴给了吉吉喵10块钱
  45. 吉吉喵有89块钱
  46. 雷电猴有20块钱
  47. */

我们常用的console.log和console.clear, 就是全局对象console里的log方法和clear方法

数组(array)

数组可以允许你将数据按顺序存储在一个变量中

  1. let arr = ['吉吉喵', 3, 100, 'a', 'b']
  3. console.log(`${ arr[0] }有${ arr[2] }块钱`) //获取数组对应位置的元素
  4. console.log(arr.length) //获取数组长度

条件分支(conditional branching)

if/else

  1. let hp = 50
  2. if (hp >= 80) {
  3.     console.log('你处于健康状态')
  4. }
  5. else if (hp > 50) {
  6.     console.log('你处于轻伤状态')
  7. }
  8. else if (hp > 0) {
  9.     console.log('你处于重伤状态')
  10. }
  11. else {
  12.     console.log('你已阵亡')
  13. }

switch

  1. let gunType = '冲锋枪'
  2. let gunConfig
  3. switch (gunType) {
  4.     case '冲锋枪':
  5.         gunConfig = {
  6.             atk:3,//攻击力
  7.             range:7,//射程
  8.             fireRate:10,//射速
  9.         }
  10.         break
  11.     case '狙击枪':
  12.         gunConfig = {
  13.             atk:10,//攻击力
  14.             range:12,//射程
  15.             fireRate:2,//射速
  16.         }
  17.         break
  18.     case '散弹枪':
  19.         gunConfig = {
  20.             atk:6,//攻击力
  21.             range:5,//射程
  22.             fireRate:4,//射速
  23.         }
  24.         break
  25.     default://如果gunType没有匹配以上3类枪械
  26.         gunConfig = {
  27.             atk:2,//攻击力
  28.             range:5,//射程
  29.             fireRate:6,//射速
  30.         }
  31.         break
  32. }

循环语句(loops)

for…of

按顺序遍历数组中每一个元素

  1. let arr = ['吉吉喵', 3, 100, 'a', 'b']
  3. for (const e of arr) { //遍历arr中的每一个元素
  4.     console.log(e)
  5. }
  7. /*
  8. 吉吉喵
  9. 3
  10. 100
  11. a
  12. b
  13. */

while

当条件满足时会一直保持循环

  1. let i = 10
  2. while (i-- > 0) {
  3.     console.log(i)
  4. }

for…in

遍历对象中的每一个属性名

  1. let obj = {a: 1, b: 2, c: 3}
  2. for (const k in obj) {
  3.     const v = obj[k]
  4.     //k为属性名, v为属性值
  5.     console.log(k, v) //输出 k 和 v
  6. }

for

常用的循环语句

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

对象的类(class)

定义一个类

  1. class Gamer {//定义一个名为Gamer的类
  2.     constructor(name, money){//构造方法, 每次创建实例都会执行
  3.         this.name = name
  4.         this.money = money
  5.     }
  7.     giveMoney(receiver, n) {//giveMoney方法, 把钱转到另一个对象
  8.       receiver.money += n
  9.       this.money -= n
  10.       console.log(`${this.name}给了${receiver.name}${n}块钱`)
  11.     }
  13.     display() {
  14.         console.log(`${this.name}有${this.money}块钱`)
  15.     }
  16. }
  18. let gamer1 = new Gamer('吉吉喵', 99) //new 可以将类实例化, 将参数传到构造方法里
  19. let gamer2 = new Gamer('雷电猴', 20)
  21. gamer1.display()
  22. gamer2.display()
  23. gamer1.giveMoney(gamer2, 20)
  24. gamer1.display()
  25. gamer2.display()

子类(subclass)

子类可以继承父类的的方法和属性

  1. class Attacker extends Gamer {//Attacker是Gamer的子类, Gamer是Attacker的父类
  2.     constructor(name, money, atk){
  3.         super(name, money)//super()是父类的构造方法
  4.         this.atk = atk
  5.     }
  6.     display() {//重写父类的display方法
  7.         super.display()//通过super.xxx访问父类的方法
  8.         console.log(`${this.name}有${this.atk}攻击力`)
  9.     }
  10. }
  12. let gamer1 = new Attacker('吉吉喵', 99, 3)
  13. let gamer2 = new Attacker('雷电猴', 20, 10)
  15. gamer1.display()
  16. gamer2.display()
  17. gamer1.giveMoney(gamer2, 20)
  18. gamer1.display()
  19. gamer2.display()

语法小技巧

解构赋值(destructing assignment)

简化取出对象里边的数据的写法

  1. let arr = [1,2,3]
  2. let obj = {a:88, b:99}
  4. let {a, b} = obj 
  5. //简化了 let a = obj.a
  6. //      let b = obj.b
  8. let [c, d, e] = arr
  9. //简化了 let c = arr[0]
  10. //      let d = arr[1]
  11. //      let e = arr[2]
  13. console.log(a,b,c,d,e)

内置方法(built-in methods)

Javascript的每个类都会有一些内置的属性和方法

数组

数组内置方法的详细内容可参考 这个页面

  1. let arr = [1,2,3,4,5]
  3. arr.length
  4. arr.concat()
  5. arr.copyWithin()
  6. arr.fill()
  7. arr.find()
  8. arr.findIndex()
  9. arr.lastIndexOf()
  10. arr.pop()
  11. arr.push()
  12. arr.reverse()
  13. arr.shift()
  14. arr.unshift()
  15. arr.slice()
  16. arr.sort()
  17. arr.splice()
  18. arr.includes()
  19. arr.indexOf()
  20. arr.join()
  21. arr.keys()
  22. arr.entries()
  23. arr.values()
  24. arr.forEach()
  25. arr.filter()
  26. arr.flat()
  27. arr.flatMap()
  28. arr.map()
  29. arr.every()
  30. arr.some()
  31. arr.reduce()
  32. arr.reduceRight()
  33. arr.toLocaleString()
  34. arr.toString()

字符串

字符串内置方法的详细内容可参考 这个页面

  1. let str = 'abcde'
  3. str.length
  4. str.anchor()
  5. str.big()
  6. str.blink()
  7. str.bold()
  8. str.charAt()
  9. str.charCodeAt()
  10. str.codePointAt()
  11. str.concat()
  12. str.endsWith()
  13. str.fontcolor()
  14. str.fontsize()
  15. str.fixed()
  16. str.includes()
  17. str.indexOf()
  18. str.italics()
  19. str.lastIndexOf()
  20. str.link()
  21. str.localeCompare()
  22. str.match()
  23. str.matchAll()
  24. str.normalize()
  25. str.padEnd()
  26. str.padStart()
  27. str.repeat()
  28. str.replace()
  29. str.search()
  30. str.slice()
  31. str.small()
  32. str.split()
  33. str.strike()
  34. str.sub()
  35. str.substr()
  36. str.substring()
  37. str.sup()
  38. str.startsWith()
  39. str.toString()
  40. str.trim()
  41. str.trimStart()
  42. str.trimLeft()
  43. str.trimEnd()
  44. str.trimRight()
  45. str.toLocaleLowerCase()
  46. str.toLocaleUpperCase()
  47. str.toLowerCase()
  48. str.toUpperCase()
  49. str.valueOf()
  50. str.replaceAll()

对象

对象内置方法的详细内容可参考 这个页面

  1. Object.assign() 
  2. Object.getOwnPropertyDescriptor() 
  3. Object.getOwnPropertyDescriptors() 
  4. Object.getOwnPropertyNames() 
  5. Object.getOwnPropertySymbols() 
  6. Object.is() 
  7. Object.preventExtensions() 
  8. Object.seal() 
  9. Object.create() 
  10. Object.defineProperties()
  11. Object.defineProperty() 
  12. Object.freeze() 
  13. Object.getPrototypeOf() 
  14. Object.setPrototypeOf() 
  15. Object.isExtensible() 
  16. Object.isFrozen() 
  17. Object.isSealed() 
  18. Object.keys() 
  19. Object.entries()
  20. Object.fromEntries() 
  21. Object.values()

数学

数学内置方法的详细内容可参考 这个页面

  1. let arr = [1,2,3,4,5]
  3. arr.length
  4. arr.concat()
  5. arr.copyWithin()
  6. arr.fill()
  7. arr.find()
  8. arr.findIndex()
  9. arr.lastIndexOf()
  10. arr.pop()
  11. arr.push()
  12. arr.reverse()
  13. arr.shift()
  14. arr.unshift()
  15. arr.slice()
  16. arr.sort()
  17. arr.splice()
  18. arr.includes()
  19. arr.indexOf()
  20. arr.join()
  21. arr.keys()
  22. arr.entries()
  23. arr.values()
  24. arr.forEach()
  25. arr.filter()
  26. arr.flat()
  27. arr.flatMap()
  28. arr.map()
  29. arr.every()
  30. arr.some()
  31. arr.reduce()
  32. arr.reduceRight()
  33. arr.toLocaleString()
  34. arr.toString()

JSON

  1. JSON.parse()
  2. JSON.stringify()