初识JavaScript

1.1 什么是JavaScript

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

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

        主要用来开发Web页面的脚本语言,也会用在非浏览器环境中( Node.jsApache CouchDB 、 Adobe Acrobat 等)。

1.2 JavaScript组成部分

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

1.3 JavaScript的特点

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

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);  // 变量调用
  1. 变量可以重复声明
    var a = 1;
    var a = 'hello';
  2. 变量声明会被提前(函数声明也会)
    console.log(a);//不会报错
    var a = 3;
    // 等价于
    var a;
    console.log(a);
    a = 3;
  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
上一篇:elementUI 日期控件


下一篇:⭐JS获取变量数据类型⭐ 数据类型的转换