欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS常用的数据类型.变量与常量的声明与赋值!

程序员文章站 2022-04-28 22:33:04
...

js引入方式

1. 直接写到html的事件属性中

事件属性: on + 事件名称, 点击事件: onclick

<button onclick="show(this)">Click me</button>

  1. <script>
  2. function show(ele) {
  3. console.log(ele.innerHTML);
  4. ele.style.background = 'yellow';
  5. }
  6. </script>

JS常用的数据类型.变量与常量的声明与赋值!

2. 外部脚本,将js保存为一个单独的js文件,再通过script标签引入到当前html文档中

<button>Click me</button>

<script src="script.js"></script>

外部JS文件代码

  1. const btn = document.querySelector('button');
  2. btn.addEventListener('click', show);
  3. function show(ev) {
  4. console.log(ev.target.innerHTML);
  5. ev.target.style.background = 'lightgreen';
  6. }

JS常用的数据类型.变量与常量的声明与赋值!

3.只在当前html文档中使用

<button>Click me</button>

  1. <script>
  2. const btn = document.querySelector('button');
  3. btn.addEventListener('click', show);
  4. function show(ev) {
  5. console.log(ev.target.innerHTML);
  6. ev.target.style.background = 'lightskyblue';
  7. }
  8. </script>

JS常用的数据类型.变量与常量的声明与赋值!

变量与常量的声明与赋值

1. 变量

  1. <script>
  2. // 声明
  3. let username;
  4. // 默认值: undefined
  5. console.log(username);
  6. // 初始化: 第一次赋值
  7. username = '小明';
  8. console.log(username);
  9. // 更新: 第二次以上的赋值
  10. username = '小红';
  11. console.log(username);
  12. // let 禁止重复声明
  13. // 将声明与初始化同步完成
  14. // 变量是可以将声明与初始化分成二步完成
  15. let email = 'email@qq.com';
  16. </script>

JS常用的数据类型.变量与常量的声明与赋值!

2. 常量

常量是特殊的变量: 只读变量
常量声明后即不能删除,也不能更新
常量的声明与初始化必须同步完成

  1. <script>
  2. const APP = '用户管理系统';
  3. </script>

JS常用的数据类型.变量与常量的声明与赋值!

常量,变量,函数名…都叫js标识符

1. 只能 字母 数字 下划线 $ 且第一个不能是数字

2. 标识符是严格区分大小写

3. 命名规范

  1. 蛇形,下划线
    let user_name = ‘小刚’;
  2. 驼峰式:
    let userName = ‘小吴’;
  3. 大驼峰,帕斯卡
    let UserName = ‘小妹’;
  4. 匈牙利式
    let oBody = document.body;
    oBody.style.background = ‘lightgreen’;

实际工作中,尽可能首选const常量使用,其次才考虑let

JaveScript常用的数据类型

1.原始类型

原始类型:值传递、数值、字符串、布尔、undefind、null、symbol

数值: 整数和小数

  1. let age = 38;
  2. // console.log(age, typeof age);

字符串

  1. let email = 'tp@php.cn';
  2. // console.log(email, typeof email);
  3. // email = '邮箱:' + email;
  4. // console.log(email);

布尔

  1. let isMarried = true;
  2. // console.log(isMarried, typeof isMarried);

undefined,未初始化变量的默认值

  1. let gender;
  2. // console.log(gender, typeof gender);

null,空对象

  1. let obj = null;
  2. // console.log(obj, typeof null);

符号, 创建对象属性的唯一标识

  1. // let s = Symbol('custom symbol');
  2. // console.log(s, typeof s);
  3. // 原始类型都是值传递的
  4. let a = 100;
  5. // 将变量的a的值,传递到了b中
  6. // let b = a;
  7. // console.log(b);
  8. // a = 200;
  9. // console.log(b);
  10. // a的更新, 不会影响到b的值
  11. `

2.引用类型

引用类型:引用传递、对象、数组、函数

对象

  1. <script>
  2. let user = {
  3. id: 1,
  4. name: '张三',
  5. 'my email': 'mail@email.com',
  6. getName: function () {
  7. return '我的名字:' + this.name;
  8. }
  9. }
  10. console.log(user.id, user.name, user['my email']);
  11. console.log(user.getName());
  12. </script>

数组

  1. let course = [1, 'js', 88];
  2. // 正常情况下,检查数组返回对象
  3. console.log(Array.isArray(88));
  4. // 数组中的元素索引是从0开始,按索引来访问元素
  5. console.log(course[1]);

函数

  1. <script>
  2. function hello() {
  3. console.log(test);
  4. }
  5. console.log(hello, typeof hello);
  6. </script>