首页 > 博客列表 > JS变量、常量、作用域、标识符和函数类型

博主信息

博文 19

粉丝 0

访问量 13764

专题推荐

更多>

JS

基础知识

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>XXX</span>
    <script>
        // 内部脚本/文档脚本
    </script>
    <!-- 公共的JS/外部脚本 -->
    <script src=""></script>
</body>
</html>

代码中的成员

数据
操作

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

查看结果

console : 控制台对象

console.log('Hello');

容器(变量)

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

操作

let a = 10;
let b = 20;
console.log('a=',a, ',b=',b);
// ------------------------------------
function sum(a,b){
//    不建议直接在函数中打印
//    console.log(a + b);
let c = a + b;
return c;
}
let res = sum(30,40);
console.log(res);
// ------------------------------------
// 简化
function sum(a,b){
    return a + b;
}
// 代码段的复用:使用(命名)函数形式
console.log(sum(30,50));

常量

声明 : const xxx = ‘xxx’;

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

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

标识符

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

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

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

变量标识符规则 :

1.驼峰式

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

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

2.蛇形命名法 : user_name

函数

1.命名函数

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

2.匿名函数

let getUserName = function (username) {
    return 'Hello, ' + username;
};
console.log(getUserName('张三'));

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

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

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

胖箭头 =>

瘦箭头 ->

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

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 变量声明
        let a = 10;
        console.log(a);
        // 常量声明
        const B = 20;
        console.log(B);
        // 代码块
        {
            let c = 30;
            console.log(c);
        }
        // 代码块外访问不到c
        // console.log(c);
        // 函数作用域
        function sum(d,e){
            return (d + e);
        }
        console.log(sum(10,30))
        // 全局作用域
        let f = 'hello';
        {
            console.log(f,',张三')
        }
        // 标识符
        // 1.字母
        // 2.数字(数字不能作为开头)
        // 3._
        // 4.$
        // 命名规则
        // 1.驼峰式
            // 1.1大驼峰 : UserName
            // 1.2小驼峰 : userName
        // 2.蛇形命名法 : user_name
        // 函数类型
        // 1.命名函数
        function getName(name){
            return ('你好'+name);
        }
        console.log(getName('张三'));
        // 2.匿名函数
        let YouName = function (youname,hername){
            return '你好' + youname + ',' +'你好' + hername ;
        }
        console.log(YouName('李明','珍妮'));
        //3.箭头函数
        getName = name => '你好' + name;
        console.log(getName('王五')); 
    </script>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown语法与emmet语法

2022-08-02 15:05:07