Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS变量、常量、作用域、标识符和函数类型
Blogger Information
Blog 19
fans 0
comment 0
visits 8264
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS变量、常量、作用域、标识符和函数类型
Wu.Ang
Original
268 people have browsed it

JS

基础知识

F12->控制台 : 浏览器内置的JS代码执行器/引擎

JS需要依赖于浏览器环境来执行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <span>XXX</span>
  11.     <script>
  12.         // 内部脚本/文档脚本
  13.     </script>
  14.     <!-- 公共的JS/外部脚本 -->
  15.     <script src=""></script>
  16. </body>
  17. </html>

代码中的成员

  1. 数据
  2. 操作

数据 -> 操作/函数 -> 结果

查看结果

console : 控制台对象

  1. console.log('Hello');

容器(变量)

  1. // 声明变量
  2. let a = 10;
  3. // 拆分成两步
  4. // 1. let a;
  5. // 2. a = 10;
  7. // 变量不能重复声明
  8. // 推荐将声明与初始化一起写
  11. // 第一次赋值:初始化 , 第一次不赋值,结果为undefined
  12. // 第二次及以上赋值:更新

操作

  1. let a = 10;
  2. let b = 20;
  3. console.log('a=',a, ',b=',b);
  4. // ------------------------------------
  5. function sum(a,b){
  6. //    不建议直接在函数中打印
  7. //    console.log(a + b);
  8. let c = a + b;
  9. return c;
  10. }
  11. let res = sum(30,40);
  12. console.log(res);
  13. // ------------------------------------
  14. // 简化
  15. function sum(a,b){
  16.     return a + b;
  17. }
  18. // 代码段的复用:使用(命名)函数形式
  19. console.log(sum(30,50));

常量

声明 : const xxx = ‘xxx’;

常量禁止更新 , 声明时候必须要赋值

实际开发中 , 应该首选”常量”

标识符

  1. 预留的(关键字)
  2. 自定义(用户自己写的)

不允许数字开头,不允许出现特殊符号(‘_’和’$’可以使用)

常量标识符规则 : 1.全部使用大写 2.多个单词之间用’_’连接

变量标识符规则 :

1.驼峰式

1.小驼峰 : userName , 范围 : 变量、函数

2.大驼峰 : UserName , 范围 : 类、构造函数

2.蛇形命名法 : user_name

函数

1.命名函数

  1. function getName(username) {
  2.     return 'Hello, ' + username;
  3. }
  4. console.log(getName('张三'));

2.匿名函数

  1. let getUserName = function (username) {
  2.     return 'Hello, ' + username;
  3. };
  4. console.log(getUserName('张三'));
  1. // 立即执行函数(IIFE)
  2. // 对于只用一次的匿名函数,可以用 IIFE: 立即执行函数 , 适合写模块
  3. console.log(
  4.     (function (username) {
  5.         return 'Hello, ' + username;
  6.     })('张三')
  7. );

3.箭头函数(用来简化匿名函数)

  1. 去掉function
  2. 参数列表和后面的代码块{}之间添加’=>’

胖箭头 =>

瘦箭头 ->

  1. // 当只有一个参数的时候'()','{}','return'可以不写
  2. getUserName = username => {
  3.     return 'Hello, ' + username;
  4. };
  5. getUserName = username =>'Hello, ' + username;
  7. // 当没有参数,或者一个以上的参数,参数列表括号必须要写
  8. f = (x, y) => x * 2 + y * 3;
  9. console.log(f(10, 20));
  11. f = () => 'Hello, php.cn';
  12. console.log(f());

实例演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         // 变量声明
  12.         let a = 10;
  13.         console.log(a);
  15.         // 常量声明
  16.         const B = 20;
  17.         console.log(B);
  19.         // 代码块
  20.         {
  21.             let c = 30;
  22.             console.log(c);
  23.         }
  24.         // 代码块外访问不到c
  25.         // console.log(c);
  27.         // 函数作用域
  28.         function sum(d,e){
  29.             return (d + e);
  30.         }
  31.         console.log(sum(10,30))
  33.         // 全局作用域
  34.         let f = 'hello';
  35.         {
  36.             console.log(f,',张三')
  37.         }
  39.         // 标识符
  41.         // 1.字母
  42.         // 2.数字(数字不能作为开头)
  43.         // 3._
  44.         // 4.$
  46.         // 命名规则
  47.         // 1.驼峰式
  48.             // 1.1大驼峰 : UserName
  49.             // 1.2小驼峰 : userName
  50.         // 2.蛇形命名法 : user_name
  52.         // 函数类型
  53.         // 1.命名函数
  54.         function getName(name){
  55.             return ('你好'+name);
  56.         }
  57.         console.log(getName('张三'));
  59.         // 2.匿名函数
  60.         let YouName = function (youname,hername){
  61.             return '你好' + youname + ',' +'你好' + hername ;
  62.         }
  63.         console.log(YouName('李明','珍妮'));
  65.         //3.箭头函数
  66.         getName = name => '你好' + name;
  67.         console.log(getName('王五')); 
  68.     </script>
  69. </body>
  70. </html>
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