Blogger Information
Blog 17
fans 0
comment 0
visits 6188
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数组、对象、作用域与作用链、对象的简化方案、分支结构与对应的语法糖
生活需要加油
Original
459 people have browsed it

1. 数组、对象、作用域与作用链、对象的简化方案、分支结构与对应的语法糖

1. 演示数组与对象的声明与访问

···js
// 1.数组
const arr = [1, “uname”, “12355”]
console.log(arr)
console.table(arr)
console.log(arr[0], arr[1], arr[2])
console.log(typeof arr)
console.log(Array.isArray(arr))
console.log(“=====================”)

// 2.对象
let user = {
id: 1,
uname: “武大”,
pwd: “12345”,
“his wife”: “金莲”,
show: () => id=${this.id},uname=${this.uname},
say: function () {
return id=${this.id},uname=${this.uname},pwd=${this.pwd},his wife=${this["his wife"]}
},
// 箭头函数没有自己的this,默认和上下文绑定,父级作用域
}
console.log(user.id, user.uname, user.pwd, user[“his wife”])

console.log(user.show())
console.log(user.say())

  1. 执行结果如下:
  2. ![](https://img.php.cn/upload/image/717/121/644/1676721460121472.png)
  3. ## 2. 演示作用域与作用链
  4. ···js
  5. // 作用域
  6. {
  7. let uname = "老大"
  8. console.log(uname)
  9. }
  10. // console.log(uname)
  11. // 代码块外访问不到
  12. console.log("=================")
  13. // 函数作用域及作用域链
  14. let www = "www.baidu.com"
  15. const tell = function () {
  16. // let www = "百度网"
  17. console.log(www)
  18. }
  19. tell()
  20. // 块或函数内部访问变量,顺序由内到外。内部没有,才找外部全局变量

运行结果:

3. 代码描述对象的简化方案

  1. // 对象的简化方法
  2. let shop = {
  3. name: "水蜜桃",
  4. price: 20,
  5. weight: 10,
  6. total: function () {
  7. return `
  8. 品:${this.name}
  9. 价:${this.price}元/斤
  10. 量:${this.weight}斤
  11. 应付金额:${this.price * this.weight}元`
  12. },
  13. }
  14. console.log(shop.total())
  15. console.log("===========================")
  16. shop = {
  17. name: "土鸡蛋",
  18. price: 20,
  19. weight: 5,
  20. total() {
  21. return `
  22. 品:${this.name}
  23. 价:${this.price}元/斤
  24. 量:${this.weight}斤
  25. 应付金额:${this.price * this.weight}元`
  26. },
  27. }
  28. // 简化方法:删除’:function‘,不是箭头函数
  29. console.log(shop.total())
  30. console.log("===========================")
  31. shop = {
  32. name: "芒果",
  33. price: 40,
  34. weight: 10,
  35. total: () => `
  36. 品:${shop.name}
  37. 价:${shop.price}元/斤
  38. 量:${shop.weight}斤
  39. 应付金额:${shop.price * shop.weight}元`,
  40. }
  41. //一定要用箭头函数的话,不能用this,应直接采用对象名称。 比较麻烦
  42. console.log(shop.total())
  43. ``
  44. 运行结果:
  45. ![](https://img.php.cn/upload/image/719/430/385/1676723372428458.png)
  46. ## 4. 演示分支结构与对应的语法糖
  47. ```js
  48. // 1.单分支
  49. let person = null
  50. if (!person) {
  51. console.log("nobody!")
  52. }
  53. console.log("------------------")
  54. // 2.双分支
  55. person = 5
  56. if (!person) {
  57. console.log("nobody!")
  58. } else {
  59. console.log("开张了!")
  60. }
  61. console.log("------------------")
  62. // 语法糖
  63. person = 0
  64. console.log(person ? "开张了!" : "nobody!")
  65. console.log("------------------")
  66. // 3.多分支
  67. person = 10000
  68. if (person < 100) {
  69. console.log("生意冷清!")
  70. } else if (person < 5000) {
  71. console.log("生意兴隆!")
  72. } else {
  73. console.log("快升级服务器!")
  74. }
  75. console.log("------------------")
  76. // 语法糖
  77. person = 2000
  78. switch (true) {
  79. case person < 1000:
  80. console.log("生意冷清!")
  81. break
  82. case person >= 1000 && person < 5000:
  83. console.log("生意兴隆!")
  84. break
  85. case person >= 5000:
  86. console.log("快升级服务器!")
  87. break
  88. default:
  89. break
  90. }

运行结果:
000

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!