博客列表 >JS入门之变量和函数

JS入门之变量和函数

斗人传说
斗人传说原创
2022年07月22日 00:10:06342浏览

博客已迁移至自建网站,此博客已废弃.请移步至:https://blog.ours1984.top/posts/jsvar/ 欢迎大家访问

引入JS

在html中, 任何内容,都必须使用”标签”进行包装

js代码使用一对script标签.有两种方式,一种内部脚本,一种外部脚本

外部脚本引入方式<script src="xxx.js"></script>

数据和操作

  • js是一种脚本语言,运行在浏览器环境或者node环境.
  • 控制台对象console.log('Hello world');,就是调试器中的控制台,可以输出显示信息
  • 和所有其他程序一样,js包括数据和操作
  • 操作写到哪里? 一对大括号中
  • 为了让操作重复执行, 可以参考刚才变量的方式,给操作起个名称,也就是函数
  1. 'Hello world': 字面量, 字符串
  2. "123": 引号(双引号或单引号)是字符串的定界符
  3. 123 : 数值
  4. {
  5. // 在js中, 字符串的拼装: "+",二边至少有一个字符串
  6. let s = 'Hello ' + 'World';
  7. console.log(s);
  8. console.log('a=', a, ', b=', b);
  9. console.log(a + b);
  10. console.log(a + '10');
  11. console.log(typeof (a + '10'));
  12. }
  13. // 匿名代码段
  14. {
  15. // ....
  16. }
  17. // 命名函数段
  18. function y() {}

变量的使用

js语句中,结束的分号可选的

  1. let a = 10;
  2. a = 20;
  3. // 变量禁止重复声明
  4. var x;var x;//var 除外

var 可以重复声明,不支持块作用域,为兼容老版本而存在,现在已经淘汰

作用域的类型

块作用域

let声明的变量支持”块作用域”,传统的var不支持”块作用域”

  1. {
  2. // 代码块
  3. let a = 100;
  4. // var a = 100;
  5. console.log(a);
  6. }

函数作用域

  1. function sum(a, b) {
  2. // 函数内声明的变量: 私有变量/局部变量
  3. let res = a + b;
  4. return res;
  5. }

全局作用域

代码块/函数的外部声明的

  1. let email = '498668472@qq.com';
  2. {
  3. {
  4. {
  5. let email = '123456@qq.com';
  6. console.log(email);
  7. }
  8. }
  9. }
  10. }

作用域链: 变量查询时,优先从内部作用域开始

合法标识符

  • 不允许使用关键字 let, const,function, class ...
  • 不允许用数字开始
  • 禁止特殊符号, $, _ 可以用

命名规则

常量遵守标识符的规则,但是为了更快的识别它

  • 全部使用大写字母
  • 多个单词之间用下划线: USER_EMAIL

变量的命名规则

  • 小驼峰: 变量,函数(动词+名词: getUserInfo())
  • 大驼峰: 类,构造函数, 还有一个别名: 帕斯卡命名法:GetUserInfo()
  • 蛇形命名法: username -> user_name

常用函数类型

命名函数

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

匿名函数

  1. let getUserName = function (username) {
  2. return 'Hello, ' + username;
  3. };
  4. console.log(getUserName('马老师'));
  5. console.log(getUserName('牛老师'));
  6. cons
  7. IIFE(立即调用函数表达式):这是一个被称为 自执行匿名函数 的设计模式,主要包含两部分。
  8. 第一部分是包围在圆括号运算符 () 里的一个匿名函数,这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量,而且又不会污染全局作用域。
  9. 第二部分再一次使用 () 创建了一个立即执行函数表达式,JavaScript 引擎到此将直接执行函数。
  10. ```js
  11. // 阅后即焚
  12. console.log(
  13. (function (username) {
  14. return 'Hello, ' + username;
  15. })('灭绝老师')
  16. );

箭头函数

功能: 用来简化匿名函数

  1. 去掉 “function”
  2. 在参数列表与后面的代码块(左大括号)之间用胖箭头=>连接
  3. 当函数只有一个参数的时候,参数外部的圆括号可以不写
  4. 如果只有一条语句,可以不写大括号,并可以省去return
  5. 如果没有参数, 或者一个以上的参数, 参数列表的括号必须要写
  6. 箭头函数,内部 this 是固定的,总是它的上下文绑定,没有自己的this
  1. // 当函数只有一个参数的时候,参数外部的圆括号可以不写
  2. getUserName = (username) => {
  3. return 'Hello, ' + username;
  4. };
  5. console.log(getUserName('狗老师'));
  6. // 如果只有一条语句,可以不写大括号,并可以省去return
  7. getUserName = username => 'Hello, ' + username;
  8. console.log(getUserName('猫老师'));
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议