客户端软件开发技术考点-EW帮帮网

ECMAScript规定了JS的编程语法和基础核心知识
文档对象模型(Document Object Model,简称DOM），通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等)
浏览器对象模型(Browser Object Model,简称BOM)，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

JavaScript 语法基础

1、变量的命名规范【能够区分出哪些变量的命名是错误的】

■由字母(A-Za-z)、数字(0-9)、下划线(、美元符号($)组成，如:usrAge, num01, _name
■严格区分大小写。var app;和 var App;是两个变
■不能以数字开头。18age是错误的
■不能是关键字、保留字。例如:var、for、while
■变量名必须有意义。MMDBBDnl→age
■遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

2、变量的数据类型【能够说出所有的数据类型并进行描述】注：ES6中新增了简单数据类型Symbol，表示独一无二的值

3、数据类型的转换【掌握数据类型转化的方法】

（1）转化为字符串：

（2）转化为数字：

“+”号会进行字符串拼接

（3）转化为布尔型

练习：思考并实践如下代码运行结果
console.log(Boolean(""),typeof Boolean(""));//false，'boolean'
console.log(Boolean(1),typeof Boolean(1));//true，'boolean'
console.log(Boolean(NaN),typeof Boolean(NaN));//false，'boolean'
console.log(Boolean("false"),typeof Boolean("false"));//true 'boolean'
console.log(Boolean(null),typeof Boolean(null));//false 'boolean'
console.log(Boolean(undefined),typeof Boolean(undefined));//false ,'boolean'
console.log(Number(true),typeof Number(true));//1 'Number'
console.log(Number(null),typeof Number(null));//0 'Number'
console.log(Number(undefined),typeof Number(undefined));//NaN 'Number'
console.log(Number("0xff"),typeof Number("exff"));//255 'Number'
console.log(Number(""),typeof Number(""));//0 'Number'
console.log(String(1024),typeof String(1024));//"1024" String
console.log(String(null),typeof String(null));//Null String
console.log(String(NaN),typeof String(NaN));//NaN String

规则：Boolean() 构造函数会将参数转为布尔值，但返回的是 Boolean 对象（非原始值）。

空字符串 ""、NaN、null、undefined 转为 false；非空字符串、非零数字转为 true。

规则：Number() 构造函数严格转换参数为数字：

true → 1，null → 0，undefined → NaN。
合法 16 进制字符串（如 "0xff"）转十进制数值；空字符串 "" 转 0。

规则：String() 构造函数返回 String 对象（非原始值）：

数字、null、NaN 转为对应字符串字面量。

4、比较运算符的使用【区分==和===】

`==`（宽松相等）先转换类型，再比较值。

5 == "5";      // true（字符串转为数字后比较）
true == 1;     // true（布尔值转为数字后比较：true → 1）
null == undefined;  // true（特殊规则：两者宽松相等）
0 == "";       // true（空字符串转为数字 0）

`===`（严格相等）不转换类型，直接比较值和类型。

5 === "5";     // false（类型不同：number ≠ string）
true === 1;    // false（类型不同：boolean ≠ number）
null === undefined;  // false（类型不同：null ≠ undefined）
0 === "";      // false（类型不同：number ≠ string）

特殊比较：

表达式	`==` 结果	`===` 结果
`NaN == NaN`	`false`	`false`
`0 == -0`	`true`	`true`
`null == undefined`	`true`	`false`
`[] == []`	`false`	`false`	（两个不同对象，引用不同）
`{}` == `{}`	`false`	`false`	（同上）

JavaScript 函数

1、函数定义的两种结构【掌握函数定义语法并会写出来

定义主要有两种语法结构：函数声明（Function Declaration）和函数表达式（Function Expression）

函数声明（Function Declaration）

function 函数名(参数1, 参数2, ...) {
  // 函数体
  return 返回值; // 可选
}

特点：
- 函数提升：可在定义前调用（JavaScript 引擎会将函数声明提升至当前作用域顶部）。
- 命名必须：必须指定函数名。

// 定义函数
function add(a, b) {
  return a + b;
}

// 调用函数（可在定义前调用）
console.log(add(3, 5)); // 输出 8

函数表达式（Function Expression）

const 变量名 = function(参数1, 参数2, ...) {
  // 函数体
  return 返回值; // 可选
};

特点：
- 匿名函数：通常省略函数名（若指定则仅在函数内部可用，称为 “具名函数表达式”）。
- 变量提升：变量会提升，但值为 undefined，需在赋值后才能调用。
- 可作为参数传递：常用于回调函数。

// 定义函数表达式
const multiply = function(a, b) {
  return a * b;
};

// 调用函数
console.log(multiply(4, 6)); // 输出 24

// 作为回调函数
setTimeout(function() {
  console.log("延迟执行的函数表达式");
}, 1000);

2、变量的作用域【掌握两种作用域的概念】

3、变量和函数的预解析【理解预解析的含义以及对于代码执行的影响】

JS引擎在运行JS代码时分为两步：预解析与代码执行

（1）预解析：JS引擎会把所有的变量声明和函数声明提升到当前作用域的最前面

变量声明提升：把所有的变量声明提升到最前面，只提升声明，不提升赋值
函数声明提升：把所有的函数声明提升到最前面

（2）代码执行：按照代码书写的顺序从上往下执行

练习：

console.log(num); // 输出 undefined，因为变量声明提升了，赋值未提升
var num = 10;
console.log(num); // 输出 10
// 等价于以下预解析后的执行顺序
// var num; 
// console.log(num);
// num = 10;
// console.log(num);

sayHello(); // 输出 "Hello!"，函数声明被提升
function sayHello() {
  console.log("Hello!");
}

// sayHi(); // 报错：TypeError: sayHi is not a function，因为变量声明提升后是 undefined，不是可调用函数
var sayHi = function () {
  console.log("Hi!");
};
sayHi(); // 输出 "Hi!"
// 等价于以下预解析后的执行顺序
// var sayHi;
// // sayHi(); 
// sayHi = function () {
//   console.log("Hi!");
// };
// sayHi();

4、严格模式的标志【注意双引号】

“user strick”

严格模式的作用
1消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2消除代码运行的一些不安全之处，保证代码运行的安全；
3提高编译器效率，增加运行速度；
4为未来新版本的Javascript做好铺垫。

JavaScript 引用类型

1、引用类型的概念【掌握引用类型的定义以及举例哪些是引用类型】

按照引用值的方式来存储在堆中的，叫引用类型，其实就是Object类型。
常用的Object类型包括Array，Date，RegExp，Function等。

2、 Array（数组）类型的特点【掌握js中数组的特点】

数组，用于在单个变量中存储多个值
元素存储类型：javascript的数组元素可以存储任意类型
数组长度：javascript的数组长度可以动态调整

var arr = [56,"张三",true];
arr = [56,"张三",true,128,null,undefined];

3、创建数组的两种方式：【掌握js中创建数组的写法】

创建数组主要有两种方式：字面量语法和构造函数语法

数组字面量（推荐）

用方括号 [] 包裹元素，元素间用逗号分隔

// 创建空数组
const emptyArray = [];

// 创建包含元素的数组
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "hello", true, null, { key: "value" }];

数组构造函数

使用 new Array() 或直接 Array() 创建

// 创建空数组
const emptyArray = new Array(); // 等价于 []

// 创建指定长度的数组（注意：所有元素为 undefined）
const lengthArray = new Array(3); // [undefined, undefined, undefined]

// 创建包含元素的数组
const fruits = new Array("apple", "banana", "cherry"); // ["apple", "banana", "cherry"]

注意陷阱：

const singleElement = new Array(5); // 错误：创建长度为 5 的数组，而非 [5]
const correctArray = [5]; // 正确：创建包含数字 5 的数组

4、 Array类型的常用方法【掌握如下四个方法的作用】

5、 Date数据类型的创建及使用【掌握如何创建Date对象】

1. 创建 Date 对象的方式

1.1 无参数构造函数（当前时间）

const now = new Date(); // 当前日期和时间
console.log(now); // 示例输出：2023-10-15T08:30:00.000Z

1.2 时间戳构造函数（毫秒值）

自 Unix 纪元（1970-01-01 00:00:00 UTC）起的毫秒数：

const timestamp = 1634286600000; // 2021-10-15 的时间戳
const date = new Date(timestamp);
console.log(date); // 输出：2021-10-15T00:00:00.000Z

1.3 日期字符串构造函数

ISO 格式（YYYY-MM-DDTHH:mm:ss.sssZ）

const isoDate = new Date("2023-10-15T12:00:00");
console.log(isoDate); // 输出：2023-10-15T12:00:00.000Z

1.4 年、月、日、时、分、秒参数构造函数

注意：月份从 0 开始（0 = 一月，11 = 十二月）

// 2023-10-15 14:30:00
const specificDate = new Date(2023, 9, 15, 14, 30, 0);

6、 RegExp（正则表达式）的使用【掌握如何创建RegExp 对象】

字面量语法（推荐）

用斜杠 / 包裹模式，可选标志（如 g、i、m）

const pattern = /abc/i; // 匹配 "abc"，不区分大小写
const globalPattern = /\d+/g; // 全局匹配一个或多个数字

构造函数语法

new RegExp(pattern, flags)。

const pattern = new RegExp("abc", "i"); // 等价于 /abc/i
const dynamicPattern = new RegExp(`hello${name}`, "g"); // 动态生成正则

7、 String引用类型【记住String是引用类型，string是简单数据类型】

特性	`string`（原始值）	`String`（引用类型）
类型	基本数据类型	对象（引用类型）
创建方式	`const str = "hello";`	`const strObj = new String("hello");`
存储	值直接存储在变量中	变量存储对对象的引用
方法调用	自动装箱为临时 `String` 对象	直接调用对象方法
比较	值比较（`===` 比较内容）	引用比较（即使内容相同也可能 `false`）

JavaScript 封装

1、创建js对象的方式【一定要理解并掌握，最好写下代码】

对象字面量（最常用）

const person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

console.log(person.name); // "John"
person.greet(); // "Hello, I'm John"

构造函数（传统方式）

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const person = new Person("Alice", 25);
console.log(person.age); // 25
person.greet(); // "Hello, I'm Alice"

Object.create ()（原型继承）

const personPrototype = {
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

const person = Object.create(personPrototype);
person.name = "Bob";
person.age = 35;

console.log(person.age); // 35
person.greet(); // "Hello, I'm Bob"

混合模式（构造函数 + 原型）

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const person = new Person("Eve", 32);
person.greet(); // "Hello, I'm Eve"

ES6 新特性

1、 ES6的概念及发布时间

2、使用let声明变量与var的三个区别【理解并掌握区别】

块级作用域（Block Scope）

let：声明的变量只在当前代码块（{} 内）有效。
var：声明的变量属于函数作用域或全局作用域，无视块级作用域。

function testScope() {
  if (true) {
    let x = 10; // 块级作用域
    var y = 20; // 函数作用域
  }
  console.log(x); // ReferenceError: x is not defined
  console.log(y); // 20
}

变量提升（Hoisting）

let：存在提升，但未初始化（处于暂时性死区，TDZ），访问会报错。
var：提升且初始化为 undefined，可在声明前访问。

console.log(a); // undefined
console.log(b); // ReferenceError: Cannot access 'b' before initialization
var a = 1;
let b = 2;

重复声明限制

let：禁止在同一作用域内重复声明同一变量。
var：允许重复声明，后声明的会覆盖前声明的（但赋值不会）。

var x = 1;
var x = 2; // 合法，x 变为 2

let y = 3;
let y = 4; // SyntaxError: Identifier 'y' has already been declared

3、使用const声明常量

用于声明常量，和let相同，只在声明的块级作用域中有效。

4、 Symbol 数据类型表示独一无二的值，记住，它属于简单数据类型

// 方式1：直接调用 Symbol() 函数（无参数）
const sym1 = Symbol();
const sym2 = Symbol();
console.log(sym1 === sym2); // false（唯一性）

// 方式2：传入描述符（仅用于调试，不影响唯一性）
const id1 = Symbol("userID");
const id2 = Symbol("userID");
console.log(id1 === id2); // false（描述符仅作标识）

// 方式3：使用 Symbol.for() 共享 Symbol（全局注册表）
const globalSym1 = Symbol.for("appKey");
const globalSym2 = Symbol.for("appKey");
console.log(globalSym1 === globalSym2); // true（同一键共享）

// 方式4：获取内置 Symbol（如 Symbol.iterator）
const iterSymbol = Symbol.iterator;

5、 Set、Map的使用【掌握Set和Map集合的特点】

Set：唯一值的集合

特点

值的唯一性：不允许重复值，重复添加会被自动过滤。
无序性：元素没有特定顺序，遍历时按插入顺序返回。
任何类型的值：可以存储基本类型和引用类型。

const set = new Set([1, 2, 2, 'hello']); // 初始化为 {1, 2, 'hello'}

// 添加元素
set.add(3);          // {1, 2, 'hello', 3}
set.add(2);          // 重复值，集合不变

// 检查存在性
console.log(set.has(2)); // true

// 删除元素
set.delete(3);       // {1, 2, 'hello'}

// 集合大小
console.log(set.size); // 3

// 遍历
set.forEach(value => console.log(value)); // 1, 2, 'hello'

// 转换为数组
const arr = [...set]; // [1, 2, 'hello']

Map：键值对的集合

特点

任意类型的键：键可以是对象、函数、基本类型等，而不仅限于字符串（与普通对象不同）。
有序性：按插入顺序遍历键值对。
高效性：增删改查操作的时间复杂度接近 O (1)。

const map = new Map();
const keyObj = { id: 1 };

// 设置键值对
map.set(keyObj, 'value associated with keyObj');
map.set('name', 'John');
map.set(100, 'a number key');

// 获取值
console.log(map.get(keyObj)); // 'value associated with keyObj'

// 检查存在性
console.log(map.has('name')); // true

// 删除键值对
map.delete(100);

// 映射大小
console.log(map.size); // 2

// 遍历
map.forEach((value, key) => console.log(key, value));
// 输出: {id: 1} 'value associated with keyObj', 'name' 'John'

// 转换为数组
const entries = [...map]; // [[{id: 1}, 'value...'], ['name', 'John']]

5、使用for...of 来遍历集合【掌握for of的使用并写出代码】

break：表示终止循环并执行循环后面的代码

continue：表示终止本次循环并进行下一次循环，循环并没有结束

return：表示跳出当前循环并返回值

6、扩展运算符（...）的作用【掌握扩展运算符的应用】

DOM编程和DOM事件

1、DOM的全称【掌握DOM的中英文全称和作用】

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言（HTML、XML）的标准编程接口。

2、 DOM中获取元素节点的方法【掌握并能写出代码】

获取元素节点：

通过 ID 获取元素（单个元素）

// HTML: <div id="main-content">...</div>
const element = document.getElementById('main-content');
console.log(element); // 返回匹配的元素节点或 null

通过标签名获取元素（元素集合）

// HTML: <ul><li>Item 1</li><li>Item 2</li></ul>
const liElements = document.getElementsByTagName('li');
console.log(liElements); // HTMLCollection(2) [li, li]

// 遍历集合
for (let i = 0; i < liElements.length; i++) {
  console.log(liElements[i].textContent);
}

通过类名获取元素（元素集合）

// HTML: <div class="card">Card 1</div><div class="card">Card 2</div>
const cards = document.getElementsByClassName('card');
console.log(cards); // HTMLCollection(2) [div.card, div.card]

通过元素的 name 属性获取元素节点

<form>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</form>

<script>
  const genderRadios = document.getElementsByName('gender');
  console.log(genderRadios); // NodeList(2) [input, input]

  // 遍历并检查选中状态
  genderRadios.forEach(radio => {
    if (radio.checked) {
      console.log('Selected:', radio.value);
    }
  });
</script>

通过 CSS 选择器获取元素

querySelector（单个元素）

// 获取第一个匹配的元素
const firstCard = document.querySelector('.card');
const navLink = document.querySelector('nav a:first-child');

querySelectorAll（节点列表）

// 获取所有匹配的元素
const allLinks = document.querySelectorAll('a');
const highlightedItems = document.querySelectorAll('.item.highlighted');

// 遍历节点列表（支持 forEach）
allLinks.forEach(link => {
  console.log(link.href);
});

3、 DOM 对于内联样式的操作方法【掌握如何操作内联样式】

4、案例：【如下案例用代码写出来】

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加法运算案例</title>
    <style>
        input {
            width: 100px;
            height: 30px;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <input type="number" id="num1" placeholder="请输入第一个数"> +
    <input type="number" id="num2" placeholder="请输入第二个数"> =
    <input type="text" id="result" readonly>
    <button onclick="calculate()">=</button>

    <script>
        function calculate() {
            // 获取输入框的值并转换为数字类型
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);
            // 计算和并显示在结果输入框
            document.getElementById('result').value = num1 + num2;
        }
    </script>
</body>

</html>

5、 DOM 中绑定事件的两种方式及区别【掌握两种方式和区别】

HTML 内联事件处理程序

在 HTML 标签中直接添加事件属性（如 onclick）。

<button onclick="handleClick()">点击我</button>

<script>
  function handleClick() {
    console.log('按钮被点击');
  }
</script>

DOM0 级 / 1 级事件模型（现代方式）

DOM0 级：直接赋值（如 element.onclick = function() {}）。

<button id="btn">点击我</button>

<script>
  const btn = document.getElementById('btn');
  btn.onclick = function() {
    console.log('按钮被点击');
  };
</script>

DOM2 级：使用 addEventListener（如 element.addEventListener('click', callback)）。

<button id="btn">点击我</button>

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
    console.log('按钮被点击');
  });

  // 支持捕获阶段（第三个参数设为 true）
  btn.addEventListener('click', function() {
    console.log('捕获阶段触发');
  }, true);
</script>

6、 DOM标准事件流的三个阶段【理解并掌握】

BOM编程

1、 BOM的全称【掌握BOM的中英文全称和作用】

Browser Object Model 浏览器对象模型

核心作用

BOM 是 JavaScript 操作浏览器窗口、导航、历史、设备信息的接口

2、掌握BOM中的五大对象，并能描述其作用

3、掌握window对象中的两个定时器的写法和区别

// 延迟 1 秒后输出 "Hello!"
const timerId = setTimeout(() => {
  console.log("Hello!");
}, 1000);

// 取消定时器（若需要）
clearTimeout(timerId);

// 每 2 秒输出一次时间
const intervalId = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 2000);

// 5 秒后停止定时器
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

4、 window对象中的load事件的作用【掌握】

JQuery 编程

1、 JQuery中入口函数的作用

2、 JQuery中的选择器【掌握基本选择器和层级选择器】

基本选择器（按 ID、类、标签等直接匹配）

作用：通过元素的 ID、class、标签名等直接匹配元素，是最基础的选择器。

选择器语法	作用说明	示例代码 & 效果
`#id`	根据 `id` 匹配单个元素	`$("#box")` → 选 `id="box"` 的元素
`.class`	根据 `class` 匹配元素集合	`$(".item")` → 选所有 `class="item"` 的元素
`element`	根据标签名匹配元素集合	`$("div")` → 选所有 `<div>` 标签
`*`	匹配所有元素	`$("*")` → 选页面所有元素（慎用，性能低）
`selector1,selector2`	多条件并集匹配（逗号分隔）	`$("div, .item")` → 选所有 `<div>` 和 `class="item"` 的元素

层级选择器（按 DOM 层次关系匹配）

作用：通过元素的父子、后代、兄弟关系精准匹配，常用于复杂 DOM 结构

选择器语法	作用说明	示例代码 & 效果
`ancestor descendant`	匹配 `ancestor`所有后代（含孙子）	`$("ul li")` → 选 `<ul>` 里所有 `<li>`（不管嵌套多深）
`parent > child`	匹配 `parent`直接子元素（仅儿子）	`$("ul > li")` → 选 `<ul>` 直接子级的 `<li>`（孙子不选）
`prev + next`	匹配 `prev`紧邻的下一个兄弟	`$(".box + p")` → 选 `.box` 后面紧邻的第一个 `<p>` 兄弟
`prev ~ siblings`	匹配 `prev`之后所有兄弟元素	`$(".box ~ p")` → 选 `.box` 后面所有 `<p>` 兄弟（非紧邻也选）

3、 JQuery中的常用方法【掌握如下常用方法及作用】

AJAX 异步编程

1、 AJAX的概念及核心对象【掌握】

2、描述原生JS中使用XMLHttpRequest发送AJAX步骤

创建实例：const xhr = new XMLHttpRequest();
初始化请求：xhr.open(method, url, async);
设置请求头（可选）：xhr.setRequestHeader('Content-Type', 'application/json');
监听状态变化：xhr.onreadystatechange = callback;
发送请求：xhr.send(data);

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 201) {
    console.log('提交成功');
  }
};
const data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

3、 JQuery中使用$.ajax()发送AJAX请求【掌握】

4、$.ajax()方法发送AJAX 的代码要会写，理解每一个参数的作用【掌握】

$.ajax({
  url: '请求URL',
  method: 'HTTP方法', // 可选：GET、POST、PUT、DELETE等
  data: {},           // 发送的数据
  success: function(response) {}, // 请求成功回调
  error: function(error) {},      // 请求失败回调
  dataType: '响应类型' // 可选：json、xml、html、text等
});

客户端软件开发技术考点

前端开发技术概述

1、 JavaScript 是什么？

2、 JavaScript 的组成？