JavaScript编程基础（一）-前端开发-阁主学习小站

摘要：

简单记录学习PHP中文网23期JavaScript基础知识，内容包括：JS 引入方式、控制台使用、变量、函数、数据类型。

## 简介
- JavaScript 是前端通用脚本语言,以下简称 JS
- JS 是*解释型*,*动态*语言(不用编译,类型可自动转换)

## 构成
1. ECMA: 语法(ECMAScript)
2. DOM: 文档对象模型(Document Object Model)
3. BOM: 浏览器对象模型(Browser Object Model)

## ES6
- ES6: ECMA2015,是 JS 最重要的一个全新版本
- 以后的 JS 版本,都是基于 ES6 上的做的扩展
- ES6+ 是泛指现代 JS 语言版本,并不限于 ECMA2015

## JS 与 HTML,CSS

- HTML: 结构(骨架)
- CSS: 表现(血肉)
- JS: 行为(灵魂)

## JS 推荐插件

- JavaScript(ES6)code snippets: ES6 代码片断
- JavaScript Comment Snippet: JS 注释片断

## JS 引入方式
- 事件属性: `onclick='...'`
- 文档脚本: `<script></script>`
- 外部脚本: `<script src='xxx.js'></script>`

三张js引入方式代码：
```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">

<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>js引入方式</title>
</head>

<button onclick="del(this)">删除</button>
  <script>
      //   function del(ele) {
      //     if (confirm('是否删除?')) ele.remove()
      //   }
  </script>

<script src="funcs.js"></script>
</body>

</html>
```
funcs.js代码：
```JavaScript
function del(ele) {
  if (confirm('是否删除?')) ele.remove()
}

```

## 控制台指令

console是浏览器提供的控制台对象,用于查看 JS 执行结果:
![console控制台命令属性](https://www.mainblog.cn/zb_users/upload/2023/08/202308011527287576522.png "console控制台命令属性")

下面是常用的几个console方式：
- `console.log(data)`: 查看数据(支持模板和 CSS)
- `console.dir(obj)`: 树形可折叠查看对象结构
- `console.table(obj)`: 表格方式查看对象
- `console.error(msg)`: 输出错误警告
- `console.clear()`: 清空输出

## 标识符

- 用途: 变量,常量,函数,属性,方法,类,...
- 分类: 关键字(保留字),自定义
- 规则: 仅限字母,数字,下划线,$,且禁止数字开头
- 命名: 驼峰(大驼,小驼),蛇形(小蛇,大蛇)

```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">
  <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>标识符</title>
  </head>
  <body>
    <script>
      // 正确
      // 字母,数字,下划线, $
      let username
      let x1
      let _uname
      let $email

// Error
      // 禁止数字开头
      //   let 3a
      // 禁止特殊符号
      //   let my#name
      //   let get@id

// 小驼峰: 第2个单词起首字母大写
      let userName
      // 大驼峰: 所有单词起首字母大写
      function UserModel() {}
      // 蛇形: 多个单词之间用"_"连接
      let user_name
    </script>
  </body>
</html>

```

## 语句
- 分号: 可选
- `[],(),{},+,-,/`: 前分号不能省

## 代码成员
代码成员简单的可以分为三个部分：`数据->函数->函数的返回值`，就好比下面图中举例的面包制作过程。

![代码成员](https://www.mainblog.cn/zb_users/upload/2023/08/202308011632405076695.png "代码成员")

代码学习示例：
```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">

<body>
  <script>
    // 1. 数据
    // 变量: 数据的复用
    let a = 1
    let b = 2
    console.log(a + b)

// 2. 操作
    // 函数: 操作的复用
    function sum(x, y) {
      return x + y
    }
    console.log(sum(1, 2))
    console.log(sum(a, b))
  </script>
</body>

</html>
```

## 变量

- 变量: `let`
- 常量: `const`

示例代码：
```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">
  <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>数据:变量/常量</title>
  </head>
  <body>
    <script>
      // 1. 变量
      //  var : 重复声明,变量提升
      //   let : 禁止重复声明,不会变量提升
      // 声明
      let uname
      // undefined
      console.log(uname)
      // 赋值: 第一次赋值叫初始化
      uname = 'Jack'
      console.log(uname)
      // 更新
      uname = 'Tony'
      console.log(uname)

// 2. 常量
      // 常量禁止更新
      // 因为不能更新,所以声明时必须赋值(初始化)
      const gender = 'male'
      //   gender = 'female'

//   推荐变量声明时同步初始化, 采用与常量定义相同的方式
      let email = 'admin@qq.com'

/**
       * 什么时候用变量?什么用常量?
       * 首选常量, 除非你确定这个数据会被更新,如循环变量
       */
    </script>
  </body>
</html>

```

## 函数

- 命名函数: `function`
- 匿名函数: `fn = function (){}`
- 箭头函数: `fn = ()=>{}`
- 立即执行函数: `(function(){})()`

```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">

<body>
  <script>
    // 函数: 先声明,再调用

console.log(sum(3, 4))

// 1. 命名函数
    function sum(a, b) {
      // return a + b
      // "1 + 2 = 3"
      // "1 + 2 =": 模板
      // php: 双号中的变量会被解析出来
      // js: 反引号中的变量会被解析出来 `
      // js中 ,字符串拼装用 "+"
      // return `${a} + ${b} = ` + (a + b)
      // `...`: 模板字面量,还支持表达式(可以计算出来一个值)
      return `${a} + ${b} = ${a + b}`
      // "模板字面量": 可以自定义输出格式,让结果更直观
    }
    console.log(sum(1, 2))
    //   function : 声明自动提升到顶部
    // 如果要遵循"先声明再调用"的编程规范,可以用匿名函数来解决

// ---------------------------------------

// 2. 匿名函数
    // 不存在声明提升,可以将一个匿名函数赋值给一个let/const声明的变量
    // let/const不存在声明提升,所以它所引用的函数也不会声明提升
    // 函数表达式(函数变量): 值是一个匿名函数
    const sum1 = function (a, b) {
      return `${a} + ${b} = ${a + b}`
    }
    console.log(sum1(5, 6))
    // ---------------------------------------

// 3. 箭头函数(匿名函数的简写)
    let sum2 = function (a, b) {
      return `${a} + ${b} = ${a + b}`
    }
    /**
     * 声明简化
     * 1. 删除: function
     * 2. (){}: ()=>{}
     * (参数列表)与{代码块}之间用胖箭头=>连接
     */
    sum2 = (a, b) => {
      return `${a} + ${b} = ${a + b}`
    }

/**
     * 参数简化
     * 1. 单参数: 可不加括号 ()
     * 2. 多个参数或无参数: 必须加括号 ()
     */
    sum2 = uname => {
      return `Hello, ${uname}`
    }
    console.log(sum2('朱老师'))

sum2 = () => {
      return `Hello, 张老师`
    }
    console.log(sum2())

/**
     * 返回值简化
     * 如果只有一条return 语句
     * 1. 可不写: {}
     * 2. 可不写: return
     */
    sum2 = (a, b) => `${a} + ${b} = ${a + b}`
    console.log(sum2(7, 8))

/**
     * 箭头函数注意事项
     * 1. 没有自己的this, 不能用于构造函数
     * 2. 它的this,由它的上下文确定(执行环境)
     */
    // ---------------------------------------

// 4. 立即执行函数

// 声明与调用二合一(声明时立即调用): IIFE
    // 写完就执行完了,所以是一次性的,肯定是匿名函数
    let result = (function (a, b) {
      return `${a} + ${b} = ${a + b}`
    })(10, 15)

console.log(result)

/**
     * IIFE用途
     * 1. 模块: Node.js
     * 2. 临时作用域: 私有变量
     */

// ====================================

/**
     * 1. 命名函数: function
     * 2. 匿名函数: 函数表达式,变量化,无提升
     * 3. 箭头函数: 匿名函数的简化(this)
     * 4. 立即执行函数: IIFE, 阅后即焚,一次性的
     */
  </script>
</body>

</html>
```

## 数据类型

- 原始类型: `string`,`number`,`boolean`,`null`,`undefined`

```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">

<body>
  <script>
    // 原始类型: 原子类型,基本类型,单值

// 1. number
    console.log(123, typeof 123)
    console.log(3.14, typeof 3.14)

// 2. string
    console.log('php.cn', typeof 'php.cn')

// 3. boolean
    console.log(true, typeof true)

// 4. null
    // null 返回的是 object , 这是一个千年bug,不会再改了
    console.log(null, typeof null)

// 5.undefined
    let a

console.log(a, typeof a)
  </script>
</body>

</html>
```

- 引用类型: `array`,`object`,`function`

```JavaScript
<!DOCTYPE html>
<html lang="zh-CN">

<body>
  <script>
    // 1. 数组
    const arr = [10, 'admin', true]
    console.log(arr)
    // 表格形式输出数组
    console.table(arr)
    console.log(arr[1])
    console.log(typeof arr)
    // 正常判断数组类型的方式
    console.log(Array.isArray(arr))

// 2. 对象
    // 与数组是有区别的, 可以视为键为语义化字符串的数组, 有点像"关联数组"
    let user = { id: 10, uname: 'admin', isMarried: true, 'my email': 'admin@qq.com' }

console.log(user['id'])
    console.log(user['uname'])
    // 如果属性都是合法标识符,可用"."来访问成员
    console.log(user.uname)
    console.log(user)
    // 如果属性是非法的标识符,就必须要['key']数组成员的方式来访问
    console.log(user['my email'])

// 对象可以将一个操作进行封装
    user = {
      // 属性: 对象中的变量
      id: 10,
      uname: 'admin',
      isMarried: true,
      // 方法: 对象中的函数
      show: function () {
        // this: 当前对象的引用
        //   console.log(this.uname === user.uname)
        return `id=${this.id},uname=${this.uname}`
      },

// 对象中不能用箭头函数(除非内部用不到this)
      // 箭头函数没有自己的this
      // say: () => `id=${this.id},uname=${this.uname}`,
      // say: () => console.log(this),
    }

console.log(user.show())
    //   console.log(user.say())

// 3. 函数
    let fn = function () { }
    console.log(typeof fn)
    // 因为函数也是对象,所以可以添加属性
    fn.price = 12345
    console.dir(fn.price)
    // 也可以添加方法
    fn.greet = function (uname) {
      return 'Hello, ' + uname
    }
    console.log(fn.greet('赵老师'))
  </script>
</body>

</html>
```

本文地址：https://www.mainblog.cn/326.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。