初识JavaScript

2022-11-12 16:02:20

1.1 什么是JavaScript

JavaScript（JS）是一种具有函数优先的轻量级、解释性、即时编译型的编程语言。

JavaScript是一种基于原型编程、多范式动态脚本语言，支持面向对象、命令式和声明式风格。

主要用来开发Web页面的脚本语言，也会用在非浏览器环境中（ Node.js、 Apache CouchDB 、 Adobe Acrobat 等）。

1.2 JavaScript组成部分

ECMAScript：语言的语法和基本语言对象
文档对象模型（DOM）：处理网页内容的方法和接口
浏览器对象（BOM）：与浏览器进行交互的方法和接口

1.3 JavaScript的特点

可以作为服务器端代码执行（需要搭建Node环境）
可以在浏览器上运行
解释性语言
弱类型语言
顺序解释执行
被内置于浏览器或者Nodejs平台中的js解释器解析执行，执行前无需编译
既可以作为前端脚本语言，也可以作为后端语言

1.4 JavaScript的使用

在浏览器中使用JavaScript

外部JavaScript：在<head>标签中添加<script src>引入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>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

内部JavaScript：在<head>或者<body>标签中使用<script>标签写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>
  <script type="text/javascript">
    alert('hello javascript')
  </script>
</head>
<body>
</body>
</html>

在<head>和<body>中使用JavaScript的区别

在head部分中的JavaScript会在被调用的时候才执行；在body部分中的JavaScript会在页面加载的时候被执行。

因为浏览器解析html是从上到下的。如果把JavaScript放在head里的话，则先被解析，但这时候body还没有解析。

JavaScript标识符：变量，函数，属性名或函数名和函数参数

字母，数字，下划线，$组成
只能以字母，下划线，$开头
不能将关键字作为标识符

1.5 JavaScript变量

变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型，可以用来保存任何类型的数据。
JavaScript弱类型语言变量特点

变量的数据类型在初始化的时候确定
变量的数据类型可以随时发生改变
类型细分不明显

定义变量时使用var关键字

var a;  // 变量声明
a = 10;  // 变量初始化
console.log(a);  // 变量调用

变量可以重复声明
```
var a = 1;
var a = 'hello';
```

变量声明会被提前（函数声明也会）

console.log(a);//不会报错
var a = 3;
// 等价于
var a;
console.log(a);
a = 3;

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

function foo(){
    if(true){
        var a = 1;
        console.log(a);  // 1
    }
    console.log(a);  // 1    //没有局部作用域
}
foo();
console.log(a);  // 报错    // 有函数作用域

1.6 JavaScript数据类型

基本数据类型：

字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol（ES6新增）

引用数据类型：

对象（Object）、数组（Array）、函数（Function）

基本数据类型和引用数据类型在内存中如何存储

基本数据类型变量都维护在栈区，基本数据类型的值保存在栈区。
引用数据类型的引用地址保存在栈区，值保存在堆区。

实现深拷贝的方法

通过json对象实现深拷贝（JSON.stringify，JSON.parse）
Object.assign()拷贝
lodash函数库实现深拷贝
递归的方式实现深拷贝
等

1.7 类型判断

typeof

typeof 变量名；返回值："undefined" 未定义、 "boolean" 布尔类型、 "string" 字符串、 "number" 数值、 "object" 对象、 "function" 函数、"symbol"

typeof 1;    // number
typeof '1';    // string
typeof true;    // boolean
typeof {};    // object
typeof [];    // object
var a;
typeof a;    // undefined
a = function (){}
typeof a;    // function
typeof Symbol('1');  // symbol

isNaN

判断是不是不是一个数字

isNaN(10);    // false
isNaN(10/0);  // false
isNaN(10/'a');  // true

isFinite

判断是否是一个有效值

isFinite(10);  // true
isFinite(10/0);  // false

码农公寓