javascript - 技术栈

引入方式

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

内部方式

通过 script 标签包裹 JavaScript 代码

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

外部形式

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

javascript 复制代码

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
    alert(666);  
  </script>
</body>
</html>

数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

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

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

数组

1、声明数组

javascript 复制代码

let arr = [1,2,3,4]

2、数组操作方法

Ⅰ、增

①arr.push() ：将一个或多个元素添加到数组的末尾

②arr.unshift()：将一个或多个元素添加到数组的开头

Ⅱ、删

①arr.pop() ：从数组中删除最后一个元素，并返回该元素的值

②arr.shift()：从数组中删除第一个元素，并返回该元素的值

③arr.splic(start,count)：从start位置开始，删除count个元素

模板字符串

1、用于拼接字符串和变量

2、若不使用模板字符串，需要频繁使用单引号和加号拼接字符串和变量

3、使用模板字符串：使用反引号``，用${}包裹住变量

数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

javascript 复制代码

        let num1 = prompt()//输入1
        let num2 = prompt()//输入2
        document.write(num1+num2);//结果为12

隐式转换

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

javascript 复制代码

document.write(1+'1')//11

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

javascript 复制代码

document.write(1-'1')//0

3、+号将数据可以转换成数字型

javascript 复制代码

 alert(typeof +'1')//number

函数

匿名函数

javascript 复制代码

function() {}

一般函数为

javascript 复制代码

function 函数名() {}

使用方式：

函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用

javascript 复制代码

let fn = function(){...}//匿名函数赋值给fn变量
fn();//调用

立即执行函数

javascript 复制代码

(function(){...})()

对象

1、声明

javascript 复制代码

let 对象名 = {
    
    属性名:属性值
    方法名:函数

}

javascript 复制代码

let obj = {

    uname:'pink'

    gender:'男'
    
    age:18
    
    'goods-name':'撒旦'
       
    sayHi:function(){...}
}

2、查属性名对应的属性值

方式1：obj.uname

方式2：obj['goods-name']

注意：属性goods-name只能通过方式2使用

3、遍历对象

javascript 复制代码

let obj = {
        uname:'赵展鹏',
        age:18,
        gender:'男'
    }
    for (let key in obj) {
        //key获得属性名、obj[key]获得属性值
        console.log(key);
        console.log(`${key} = ${obj[key]}`)//uname = 赵展鹏、age = 18、gender = 男
    }

简单数据类型&&引用数据类型

1、存储方式

简单数据类型包括number、boolen、string，这些类型的变量存储的是值，当将一个简单数据类型的值赋给另一个变量时，实际发生的是值的复制，即两个变量拥有各自独立的值。

引用数据类型包括object、array、function、Data这些类型的变量存储的是内存地址 （即引用）。当将一个引用类型的变量赋给另一个变量时，实际的是内存地址的复制，这意味着两个变量指向同一个对象。

2、比较方式

当比较两个简单数据类型的变量时，比较的是它们的实际值。

当比较两个引用数据类型的变量时，比较的是它们的引用地址，即它们是否指向同一个对象。

3、内存分配

简单数据类型的值通常存储在栈中。

引用数据类型的值存储在堆内存中，而栈中保存的是指向堆中的指针。

4、能否用const修饰

javascript 复制代码

let num = 1
num = num+1

num不能用const修饰

javascript 复制代码

let arr = [1,2,3]
arr.push(4)

arr可以用const修饰，因为arr本身存储的是地址，该地址永远不会变，故可以用const修饰；

但以下情况arr存储的地址会变

javascript 复制代码

let arr = [1,2,3]
arr = ['111','22','333']

arr由数组【1，2，3】的地址变为数组【'111','22','333'】的地址了，故此时arr不能用const修饰