JavaScript筑基篇——变量与数据类型

Java练练习生

已于 2023-05-28 23:26:29 修改

阅读量140

点赞数

文章标签： javascript

于 2023-04-23 13:42:47 首次发布

本文链接：https://blog.csdn.net/m0_59422814/article/details/130313261

版权

JavaScript筑基篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

提示：学习使用，仅供参考！

一、介绍

JavaScript 是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言

1.1 函数优先

JavaScript 语言中的函数可以和其他任何变量一样对待

函数可以作为参数传递给另一个函数

function sayHello() {
	return "Hello, ";
}
function greeting(helloMessage, name) {
	console.log(helloMessage() + name);
}
// 传递 `sayHello` 作为 `greeting` 函数的参数
greeting(sayHello, "JavaScript!"); // Hello, JavaScript!

可以作为返回值被另一个函数返回

function sayHello() {
	return function() {
		console.log("Hello!");
   }
}

可以作为一个值分配给一个变量

var fn = function () {  console.log("HelloWorld");  }
var fn = function getName() { console.log("HelloWorld");  }
// 调用
fn()

由于JavaScript编译器的作用，函数声明和变量声明都会被提升，但函数会先被提升（前提：使用 var 修饰。let修饰不会被提升）

变量提升

console.log(a)
var a = `Hello`
// 等价于
var a
console.log(a) // 输出 undefined
a = `Hello`

函数提升

sayHello()
function sayHello(){
	console.log(a)
	var a= 'Hello'
}
// 等价于
function sayHello() {
	var a
	console.log(a)    // 输出 undefined
	a = 'Hello'	
}

注意：函数声明会被提升，但函数表达式不会

sayHello()
var sayHello = function sH() { console.log('Hello') }
// 等价于
var sayHello
sayHello()   // 报错：Uncaught TypeError: foo is not a function
sayHello = function aH(){ console.log('Hello') }

1.2 解释型

直接以源代码的形式出现，运行时实时解析为机器码并执行。
所有的脚本语言（当然也包括JavaScript）都是解释型语言。这类语言有个最大特点就是它们都不能独立存在，必须寄生在其他程序内，比如浏览器。

编译型：运行前，将源代码编译成机器码；运行时，电脑直接把机器码交给CPU执行

1.3 组成

1） ECMAScript：规定了js基础语法核心知识。

比如：变量、分支语句、循环语句、对象等等

2）Web APIs

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作（DOM属于BOM）
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

1.4 作用

1）网页特效：监听用户的一些行为让网页作出对应的反馈
2）表单验证：针对表单数据的合法性进行判断
3）数据交互：获取后台的数据, 渲染到前端
4）服务端编程：基于 node.js 技术进行服务端编程

二、引用

1. 内嵌

JavaScript 代码直接写在 .html 文件中的 body 标签里，使用script 标签包住

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!-- type="text/javascript" 可不写， 默认就是 type="text/javascript"-->
    <script type="text/javascript">  
    // js 代码
    </script>
  </body>
</html>

建议：

将<script></script>放在 <body></body> 底部附近

原因：

浏览器会按照代码在文件中的顺序加载HTML，如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效

2. 外部引入

代码写在 .js 文件中，使用 script 标签的 src 属性引入

此时若 <script></script> 标签中还有 JavaScript 代码，会被忽略

<script src="url"  type="text/javascript">
	// 被忽略
</script>

3. 内联：

直接写在 html 标签内部

 <button onclick="alert('点秋香')">唐伯虎</button>

三、变量

3.1 本质

一个存储数据的容器（程序在内存中申请的一块用来存放数据的小空间），非数据本身

3.2 作用域

ES6之前：全局作用域、局部作用域(也称函数作用域)
ES6及其之后：为全局作用域、局部作用域、块级作用域

全局作用域

作用于整个 script 标签内部或者一个独立的 js 文件。

局部作用域（函数作用域）

作用于函数内的代码环境。因为跟函数有关系，所以也称为函数作用域。

块级作用域

块级作用域由 { } 包括。如在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用## 3.3 声明

注意
若局部变量和全局变量同名
则在函数作用域中，起作用的是局部变量；
在函数体外，起作用的是全局变量，此时引用局部变量将出现语法错误。

3.3 声明

① 若只声明不进行初始化，则结果为：undefined
var a
console.log(a)  // undefined
② 若不适用 var、let、const 关键字声明，则变量名为全局变量（不推荐这种操作）
function sayHello() {
   a = 'hello'; // 全局
}
sayHello();
console.log(a); // hello
console.log(window.a); // hello
console.log(window.a === a); // true

1）var

var 可以重复声明，变量的数据相当于被覆盖，存储的数据是最后一次覆盖的数据

注意：js 中若存在同名的函数，不管参数个数是否相同，也会进行覆盖，函数执行的是最后一个

var a = 1
var a = `hello`
console.log(a)   // hello

变量提升

var变量的全局作用域是对整个页面的脚本代码有效
var声明的局部变量是在整个函数有效

2）let

let 不可以重复声明（推荐使用 let 声明变量）

// 报错
let a = 1
let a = 2

// 报错
let a = 1
var a = 2

3）const

定义常量，值不可变，且必须在定义时就初始化

const a = 1
a = 2
console.log(a)   // Error：Uncaught TypeError: Assignment to constant variable.

3.4 暂时性死区

在块开始到块级变量声明语句之间区域。在这个区域，块级变量没有效。

var 不存在暂时性死区（变量提升），let、const 存在

四、数据类型

JavaScript 是弱数据类型，变量只有在赋值之后才能完全确认类型

JavaScript 数据类型整体分为两类：基本数据类型和引用数据类型

4.1 基本数据类型

4.1.1 Number

JavaScript 中的数字类型包括：正负数、小数

let score = 100;	//正整数
let price = 12.3;	//小数
let num = -50;		//负数

4.1.2 String

JavaScript 中的字符串类型可以使用双引号""包裹，也可以使用单引号包裹''，也能使用反引号``

let user_name='张三';     //使用单引号
let str1='123';          //字符串类型的数字
let str2='';

注意：
① 可以使用转义符 \，单独输出引号
② 涉及字符串拼接，可以使用反引号``，使用${}包裹变量

let str1 = "唐伯虎";
let str2 = "点秋香";
console.log(`这部电影名字叫做${str1}${str2}`);       // 这部电影名字叫做唐伯虎点秋香

4.1.3 boolean

布尔类型数据：true、false

let isT = true
let isT = false

4.1.4 undefined

未定义类型：即指声明变量，但未赋值

let name
console.log(name)

场景：
① 访问对象不存在的属性

let obj = {}
console.log(obj.name)

② 数组越界访问

let arr = [1, 2, 3];
arr[5];  //=> undefined

4.1.5 null

空类型：代表值为空

let obj = null

与 undefined 的区别：null表示对声明的变量赋值了，只是值未空，而undefined表示只是声明了变量，并未对变量进行初始化

undefined == null; //true
undefined === null; //false

4.2 引用数据类型

4.3 数据类型检测

通过typeof关键字检测数据类型

let age=20;
let uname="张三";
let flag=true;
let buy;
console.log(typeof age);    //number型
console.log(typeof uname);  //string型
console.log(typeof flag);   //boolean型
console.log(typeof buy);    //undefind型