JavaScript基础-变量与数据类型

芒果555
149 阅读4分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

Javascript介绍

JavaScript是什么

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

JavaScript作用

JavaScript作用:确定网页的行为交互(教网页做事情)

JavaScript组成

  • ECMAScript - JavaScript的核心

    • ECMAScript定义了JavaScript的语言规范
    • JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

  • BOM和DOM也统称为Web APIs

  • DOM - 文档对象模型

  • 一套操作页面元素的API

    • DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

  • BOM - 浏览器对象模型

    • 一套操作浏览器功能的API
    • 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

JavaScript书写位置

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中

内嵌式

通过 script 标签包裹 JavaScript 代码

如果js代码较少较少的话可以使用,比较复杂的话不推荐

<script>
    // 页面弹出警示框
    alert('你也没人要么 ^  ^')
  </script>

外部样式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

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

行内样式

写在标签内部

<button onclick="alert('点我')">天王盖地虎,宝马撞路虎</button>

注释和结束符

单行注释

使用 // 注释单行代码

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

快捷键:ctrl + /

多行注释

使用 /* */ 注释多行代码

快捷键:shift + alt + A (或ctrl+shift+/,可以自定义)

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

输入和输出语法

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出

1.将数据显示在网页

document.write()

// 1. 将数据显示到网页，相当于给body添加内容
document.write('你想敲代码么')
document.write('<h1>Js是世界上最好的语言</h1>')
2.弹出提示框

alert()

alert('饿不饿?')

1657630511439.png

3.将数据打印在控制台

console.log()

console.log('人生得意须尽欢');

1657630595934.png

输入

获取用户数输入的数据

1.弹出输入框,让用户输入值
prompt('请输入你的兴趣')
2.在网页弹出一个确认框，让用户选择 确认/取消 二选一(分别对应true和false)
confirm("你喜欢喝奶茶么");

变量

变量就是计算机中用来存储数据的容器

声明变量--let

let name;

变量赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据

let name = '芒果';
//也可以先声明后赋值
let name;
name = '芒果';

变量的使用

//声明变量后我们可以去使用它
let name = '芒果';
console.log(name);
//这样打印在控制台就是    芒果

变量命名规范

关于变量的名称（标识符）有一系列的规则需要遵守：

  1. 只能是字母、数字、下划线、$，且不能能数字开头
  2. 字母区分大小写，如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词（关键字或保留字）不允许使用
  4. 尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语

规范:

  • 起名要有意义
  • 遵守小驼峰命名法
  • 第一个单词首字母小写，后面每个单词首字母大写。例：userName

变量练习-输入用户信息

// 1. 姓名
    let uname = prompt('请输入姓名')
    let age = prompt('请输入年龄')
    let gender = prompt('请输入性别')
    document.write(uname, age, gender)

let与var的区别

在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let

var 现在的开发中一般不会在使用它,但是在比较老的项目里面还存在.

let为了解决var的一些问题

var 声明:

  • 可以先使用 在声明 (不合理)
  • var 声明过的变量可以重复声明(不合理)
  • 比如变量提升、全局变量、没有块级作用域等等

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

const one = 1;

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

基本数据类型:number(数字型) . string(字符串型). boolean(布尔型) . undefined(未定义型) . null(空类型)

引用数据类型: object对象

数字型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

// js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型
let score = 100 ;// 正整数
let price = 12.345 ;// 小数
let temperature = -40 ;// 负数
 // java 强数据类型的语言    int num = 10;

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等

字符串型

注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单 或者外单内双)
  3. 必要时可以使用转义符 ``，输出单引号或双引号
let name = '芒果';
let uname = 'mango';
let username = 'mango555芒果';
//字符串类型可以是汉字,英文,数字,也可以是它们的组合

boolean型

let y = true;
let n = false;
//在计算机中,boolean型中,1表示true,0表示false

undefined型(未定义)

//当我们声明一个变量未赋值时,这个变量就是undefined型
let name;
//此时name没有值,无法判断数据类型,此时name就是未定义类型

注意undefined和null(空)是不一样的undefined与null的区别

undefined 表示没有赋值

null 表示赋值了，但是内容为空

null

//当我们创建一个object(对象)时,可以先给对象赋值为null,表示空,此时在内存分配一块内存空间分给obj,但是obj的值为空,没有指针指向obj
let obj = null;

算术运算符

数学运算符也叫算术运算符，主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)（取模）

    console.log(1 + 1);
    console.log(1 * 1);
    console.log(1 / 1);
    console.log(4 % 2);// 求余数  0
    console.log(5 % 3); // 求余数  2 
    console.log(3 % 5); // 求余数  3

NaN

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN :not a number

字符串拼接

+运算符 可以实现字符串的拼接。

let name = '芒果';
console.log('我叫'+name);

模板字符串

模板字符串 外面用`` 里面 ${变量名}

    let age = 22
    document.write(`我今年${age}岁了`)

数据类型检测

typeof 式：

1.作为运算符： typeof x（常用的写法）

2.函数形式： typeof(x)

let name;
let obj = null;
console.log(typeof true);//Boolean
console.log(typeof name);//undefined
console.log(typeof obj);//null
//控制台结果 Number

类型转换

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

任何数据和字符串相加结果都是字符串

console.log(typeof '芒果');//String
console.log(typeof '1'+1);//String
console.log(typeof 1+1); //Number
console.log(typeof 5-'2');//Number
console.log(typeof 5*'2');//Number
console.log(typeof 5/'2');//Number

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

装换为数字型

使用Number(),parseInt(),parseFloat()

let str = '555';
console.log(typeof Number(str));//Number
let str2 = 'sss';
console.log(typeof Number(str2));//NaN
//注意转换为数字型必须要求字符串中全是数字
//parseInt()保留整数部分,如果数字后边是字符串就删掉,如果数字前面是字符串就NaN!
console.log(parseInt('12px'));//12
console.log(parseInt('12.34px'));//12
console.log(parseInt('ABC12.34'));//NaN
//parseInt()保留两位小数
console.log(parseFloat('12px')); // 12
console.log(parseFloat('12.34px')); // 12.34
console.log(parseFloat('12.94px')); // 12.94

转为字符串

    // 1. 把数字型转换为字符串型 变量.toString()
      let num = 10;
      let str = num.toString();
      console.log(str);
      console.log(typeof str);//String
      // 2. 我们利用 String(变量)   
      console.log(String(num));
avatar
文章
阅读
粉丝