Blogger Information
Blog 35
fans 0
comment 0
visits 16981
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS变量、函数、作用域
三九三伏
Original
301 people have browsed it

一、变量、常量、函数和作用域

1. js在HTML内的引入方式

  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. </script>
  13. //xx.js是外部引入的js文件名
  14. <script src="xx.js"></script>
  15. </body>
  16. </html>

2. 变量常量的定义和输出

  1. ...
  2. <script>
  3. // 定义常量PI,定义时必须赋值,常量值不能被更新。
  4. const PI = 3.141592653589793;
  5. // 打印常量值
  6. console.log('PI的值:',PI);
  7. // 定义变量a
  8. let a=0;
  9. console.log('a的初始值:',a);
  10. // 修改变量a的值
  11. a = 10;
  12. </script>
  13. ...

3. 测试变量类型

  1. ...
  2. <script>
  3. ...
  4. let a=0;
  5. ...
  6. a = 10;
  7. ...
  8. // 测试a的变量类型
  9. console.log(typeof(a));
  10. // 测试a+字符串之后的类型
  11. console.log(typeof(a+'10'));
  12. </script>
  13. ...

4. 匿名块

  1. ...
  2. <script>
  3. ...
  4. // 匿名块作用域内定义变量b并赋值
  5. let b=20;
  6. // 打印b的值
  7. console.log('b的值:',b);
  8. </script>
  9. ...

5. 作用域

5.1 变量作用域

  1. ...
  2. <script>
  3. // 定义变量a
  4. let a=0;
  5. ...
  6. // 修改变量a的值
  7. a = 10;
  8. ...
  9. {
  10. // 匿名块作用域内定义变量b并赋值
  11. let b=20;
  12. // 打印b的值
  13. console.log('b的值:',b);
  14. //打印a和b的值,a是全局作用域,可以打印
  15. console.log('a = ',a,'b = ',b);
  16. }
  17. // 无法得到b,b在块作用域内
  18. //let声明的变量支持作用域
  19. //var声明的变量不支持块作用域
  20. console.log('a = ',a,'b = ',b);
  21. </script>
  22. ...

5.2 函数作用域

  1. // 定义变量a
  2. let a=0;
  3. ...
  4. // 修改变量a的值
  5. a = 10;
  6. ...
  7. {
  8. // 匿名块作用域内定义变量b并赋值
  9. let b=20;
  10. ...
  11. }
  12. ...
  13. // 函数作用域
  14. function sum(a, b){
  15. // 函数内声明变量叫私有变量
  16. return a+b;
  17. }
  18. console.log('sum result is: ', sum(10, 20));

二、命名规范

1. 标识符可用字符

-字母、数字、下划线、$
-不能以数字开头

2.常量命名规范

-全部使用大写
-多个单词间用下划线

3. 变量命名规范

3.1 驼峰式

大驼峰:类、构造函数,别名,帕斯卡命名法
例:UserName
小驼峰:变量、函数
例:userName

3.2 蛇形式

例:
user_name
USER_NAME
就是加了下划线而已

常用的三种函数类型

1.命名函数

  1. ...
  2. <script>
  3. ...
  4. function getname(name){
  5. return 'My name is:'+ name;
  6. }
  7. console.log(getname('Wood'));
  8. </script>
  9. ...

2. 匿名函数

  1. ...
  2. <script>
  3. ...
  4. let fullName = function (name){
  5. return 'My name is:'+ name;
  6. }
  7. console.log(fullName('Gavin Wood'));
  8. </script>
  9. ...

立即执行函数(IIFE)

多次使用时,可以使用立即执行函数。
可以创建出临时的作用域,适合写模块。

  1. ...
  2. <script>
  3. ...
  4. console.log(
  5. (function(name){
  6. return '你好,'+name;
  7. })('灭绝老倪')
  8. );
  9. </script>
  10. ...

3. 箭头函数

用来简化匿名函数

  1. ...
  2. <script>
  3. ...
  4. arrowName = (intro,name)=>{
  5. return intro+ name;
  6. }
  7. console.log(arrowName('我是','箭头函数'));
  8. </script>
  9. ...


如果只有一个参数,小括号可以省略。如果只有一条语句,大括号和return都可以省略。例:

  1. ...
  2. <script>
  3. ...
  4. arrowName = name=>'我是'+ name;
  5. console.log(arrowName('箭头函数'));
  6. </script>
  7. ...

没有参数时,小括号是必须的。
arrowName = ()=>’我是箭头函数’;
也有下面写法:
arrowName = $ =>’我是箭头函数’;
arrowName = _ =>’我是箭头函数’;

箭头函数,内部this是固定的,总是他的上下文绑定,没有自己的this。

箭头函数用在函数参数、返回值、回调函数等处。

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