Atopos

1.变量的定义

变量：值可以改变的叫做变量

（1）声明变量：通过关键字(系统定义的有特殊功能的单词)var  声明变量的时候，同时给变量赋值，叫做初始化。

（2）变量赋值（3）可以同时定义多个变量，变量之间要使用逗号隔开。补充：输出当前变量/常量的数据类型：格式：typeof 变量/常量  JS是弱数据类型语言，容错率较高，变量被赋值成什么类型就是什么类型。不要在后续的代码里改变该变量的数据类型，很容易引起代码歧义。

1
var temp; //temp是啥数据类型？不确定
2
temp = 12; //temp变量是数字类型
3
temp = "hello"; //temp变量变成了字符串类型

2.标识符规则

标识符<用户自定义的变量名叫做标识符>。变量名规律：

• 标识符必须由数字，字母、下划线和美元符号$组成。

• 不能以数字开头。

• 标识符区分大小写，age和Age这是两个变量

• 标识符必须见名思意。

3.变量的数据类型

JS中的数据类型分为两大类：

（1）基本数据类型

•  数字Number(整数，浮点数为float)，如：100 3.14
•  字符串：String，如：所有带双引号/单引号 ‘hello’ “hello”
• 布尔值：Boolean，如：true false
• 特殊数据类型：Null、Undefined、 NaN，如：null空、unde fined未声明注意：
  •    如果alert(abc)一个不存在的变量，会直接报错，而不是undefined,可见undefined和真正的未定义还是有些区别的。因为它是一种特殊类型。
  •    null也是一种值，但逻辑含义是没有值，它是对象Object类型。
  •     变量的类型只有在赋值后才能确定。

（2）复合数据类型

1.运算符的种类

（1）算术运算符(+, -, *,/,%(取余数)）

（2）字符串和变量的拼接(+)

（3）关系运算符（<、>、<=、>=、==、===、!= !==）

（4）逻辑运算符（&&与(且)、||或、!非）

（5）赋值运算符（=、+=、-=、*=、/=、%=）

（6）自增、自减（++a,、a++、—a,、a—）

2.算术运算符

注意：

任何类型的数据和字符串类型数据做相加操作的时候。其他数据类型会自动转换成为字符串类型。此时的相加操作不再是数学意义上加法，而是表示拼接的意思。如果其中一个操作数是字符串的时候，+号叫做字符串拼接符。任何数据除了和字符串做相加运算外，先要将字符串转成数字再进行运算。

（1）与NaN做算数运算的结果始终都是NaN,包括NaN本身和NaN做运算结果也为NaN。

（2）字符串如果是纯数字字符串转成数字，否则转换成NaN。

1
var tmp = "您" + "好";
2
var tmp = "1" + 1;
3
var tmp = "h" + true;
4
var tmp = "h" + undefined;
5
alert(tmp); //tmp is not defined (tmp变量没有声明。)
6
var tmp = 1 - "2"; //-1字符串"2"转成了数字2
7
var tmp = 1 - "2a"; //NaN not a number "2a"转成数字NaN

代码规范:

（1）注意层级缩进 tab =四个空格; ,后面都跟一个空格

（2）运算符= +前后都应该空空格。

（3）每一条语句后面都必须添加;分号。

（4）所有的括号成对输入，所有的双引号成对输入。

（5）一句话占一行

（6）缩进对齐<同级对齐子一级比上一级缩进4个空格>

3.赋值运算符

（1）赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。（2）复合赋值运算符通过x=的形式表示，x表示算术运算符。

4.关系运算符

用于进行比较的运算符称作为关系运算符。如：小于(<)、大于(>)、 小于等于(<=)、大于等于(>=).相等(=),不等(!=)、全等(恒等)(===)、不全等(不恒等)(!==)和其他运算符一样, 当关系运算符操作非数值时要遵循一.下规则:

（1）两个操作数都是数值，则数值比较；

（2）两个操作数都是字符串，则比较两个字符串对应的字符编码值（ASCII码表值）；逐位进行比较，直到比较出大小，终止比较。

（3）两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较。

在相等和不等的比较上，如果操作数是非数值，则遵循一下规则:

（1）一个操作数是布尔值，则比较之前将其转换为数值，false 转成0，true 转成1；

（2）一个操作数是字符串，则比较之前将其转成为数值再比较；

（3）一个操作数是NaN，则==返回false,!=返回 true;并且NaN和自身不等；

（4）在全等（===）和全不等（!==）的判断上，比如值和类型都相等，才返回true，否则返回false。

1
alert(1 == true); //true
2
alert(0 == false); //true
3
alert(20 == "20"); //true
4
alert(1 != NaN); //true
5
alert(NaN != NaN); //true
6
alert(20 === "20"); //false
7
alert(20 === Number("20")); //true

5.逻辑运算符

| 运算符 | 值 | 说明 | | -------- | ------------ | -------------------------------------------------------------------- | ----- | --- | ----- | -------------------------------------------------------------------------------- | | 与(&&) | expr1&&expr2 | 只有当exprl 和expr2 同为真时，才返回真(true).否则，返回假(false)。 | | 或( | |) | expr1 | | expr2 | 如果其中一个表达式为真，或两个表达式同为真，则返回真(true).否则，返回假(false)。 | | 非( !) | !expr | 如果表达式为真，则返回假(false).如果为假，则返回真(true). |

逻辑非(NOT): !  

逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个布尔值。它的流程是<先将这个值转换成布尔值>，然后取反，规则如下:

（1）操作数是一个空字符串，返回true；

（2）操作数是-个非空字符串，返回false；

（3）操作数是数值0，返回true；

（4）操作数是任意非0数值(包括Infinity)，false；

（5）操作数是NaN，返回true;（6）操作数是undefined，返回true;

1
alert(!"); //true
2
alert( !"ss"); //false
3
alert(!0); //true
4
alert(!1); //false
5
alert( !Infinity) //false
6
alert( !NaN); //true
7
alert( !undefined); //true

注意：短路操作，与运算只要第一个为true便不再执行第二个，或运算只要第一个为false便不再执行第二个

6.其他运算符

（1）字符串运算符

字符串运算符只有一个，即: “+”。它的作用是将两个字符串相加。规则<至少-一个操作数是字符串即可>。

（2）逗号运算符逗号运算符可以在一条语句中执行多个操作。

（3）三元(目)条件运算符

7.一元运算符

只能操作一个值的运算符叫做一元运算符。

1
var age = ++box; /加后取值先执行加法运算,在取值
2
var height = box++; //加前取值先取值再执行加法运算
3
*其他类型应用一元运算符的规则
4
var box = '89';
5
box++; //90,数值字符自动转换成数值
6
var box = 'ab'
7
box++; //NaN,字符串包含非数值转成NaN
8
var box = false;
9
box++; //1 ,false转成数值0,累加就是
10
var box= 2.3;
11
box++; //3.3，直接加1

8.表达式概念

由运算符和操作数(变量或常量)组成的式子，叫做表达式

算术运算符组成的式子叫算术表达式关系运算符组成的式子叫关系表达式或者条件表达式逻辑运算符组成的式子叫做逻辑表达式如: 2+3; a+5; c>3; a&&b等;

9.json

随着互联网的发展和各种 Web 应用程序的普及，数据交换已经成为了我们日常开发中的重要环节。而在各种数据交换格式中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，以其简洁、易于阅读和解析的特性，得到了广泛应用

轻量级：相比 XML 等格式，JSON 更加简洁，减少了数据传输量。易于阅读和书写：其结构简单，符合大多数开发者的习惯，便于阅读和手动书写。解析效率高：JSON 的解析速度非常快，特别适合在浏览器和服务器之间进行数据交互。良好的语言支持：几乎所有的 编程语言 都提供了对 JSON 的良好支持，方便开发者在不同的技术栈中使用。

1
{
2
  "name": "Alice",
3
  "age": 25,
4
  "isStudent": false
5
}

1
["Apple", "Banana", "Cherry"];

1
{
2
  "key": "value"
3
}

1.创建数组

1
// 无参构建
2
let arr = new Array(); //创建一个空数组  []
3

4
// 如果只传一个数值参数，则表示创建一个初始长度为指定数值的空数组
5
let arr = new Array(5); // 创建一个包含20项的数组  [empty × 5]
6

7
// 如果传入一个非数值的参数或者参数个数大于 1，则表示创建一个包含指定元素的数组。
8
let arr = new Array("lily", "lucy", "Tom"); // ['lily', 'lucy', 'Tom']
9

10
let arr = new Array("23"); // ["23"]

1
let arr = Array.of(1, 2); // [ 1, 2 ]
2

3
let arr1 = Array.of(3);
4
console.log("Array.of", arr1.length); //1
5
console.log("Array.of", arr1[0]); //3

1
function arga(...args) {
2
  //...args剩余参数数组,由传递给函数的实际参数提供
3
  let arg = Array.from(args);
4
  console.log(arg);
5
}
6

7
arga("arr1", 26, "from"); // [ arr1 ,26, from ]

2.join

该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值<返回一个新的字符串>

1
//将数组用 - 符号连接起来
2
let arr = [1, 2, 3, 4, 5];
3
let str = arr.join("-");
4
console.log("join", str); // str = 1-2-3-4-5;

3.split

该方法是用过指定的分隔符,将字符串分割成数组。返回值<返回一个新的数组>

1
let str = "wqz-ttj";
2
let arr = str.split("-");
3
console.log("split", arr); // arr=['wqz','ttj'];

4.数组的翻转和排序（改变数组）

1
let arr = [1, 2, 3, 4, 5];
2
arr.reverse();
3
console.log("reserse", arr); // [5, 4, 3, 2, 1]

1
let arr = [1, 3, 5, 2, 4, 23, 122, 34];
2
// 没有参数:时按照首字符的先后排序
3
arr.sort();
4
console.log("没有参数", arr); //arr=[1,122,2,23,3,34,4,5];
5

6
// 有参数
7
arr.sort(function (a, b) {
8
  return a - b; //从小到大排序
9
  return b - a; //从大到小排序
10
});
11
console.log("正序排列", arr); // [1, 2, 3, 4, 5, 23, 34, 122]

5.concat拼接方法

concat 方法会将参数拼接到该数组中；如果是基本数据类型，那么直接添加进去；如果是数组类型那么会将外层的 【】去掉，只将参数添加进去如果是数组嵌套数组，那么只会扒掉一层 【】，将内层数组添加进去

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let arr = arr1.concat(arr2);
4
console.log(arr); //arr = [1,2,3,4,5,6];
5

6
arr = arr1.concat({ name: "张三" });
7
console.log(arr); // arr = [1,2,3, { name: '张三' }]
8

9
arr = arr1.concat([[7, 8, 9]]);
10
console.log(arr); // arr = [1,2,3, [7,8,9]]
11

12
arr1.push(arr2);
13
console.log(arr1); //arr1 = [1,2,3,[4,5,6]];

6.slice截取办法

该方法可以从数组中截取指定的字段,返回出来返回值<返回截取出来的字段>,放到新的数组中,不改变原数组

1
arr = [0, 1, 2, 3, 4, 5, 6, 7];
2
let newArr = arr.slice(0, 3); //newArr = [0,1,2];
3
console.log("slice", newArr);

1
let arr = [0, 1, 2, 3, 4, 5, 6, 7];
2
newArr = arr.slice(2); //newArr = [2，3，4，5，6，7];
3
console.log("slice", newArr);

1
let arr = [0, 1, 2, 3, 4, 5, 6, 7];
2
newArr = arr.slice(); //newArr = [0,1,2,3,4,5,6,7];
3
console.log("slice", newArr);

7. splice

删除或增加元素(任意在任何位置,直接改变原数组,返回的是被删除元素组成的新数组或者空数组)

1
let arr = [0, 1, 2, 3, 4, 5, 6, 7];
2
arr.splice(1, 2); //newArr = [1,2];
3
console.log("splice", arr); //  [0, 3, 4, 5, 6, 7]

1
let arr = [0, 1, 2, 3, 4, 5, 6, 7];
2
arr.splice(1, 2, 10, 20, 30); // newArr = [1,2];
3
console.log("splice", arr); // [0, 10, 20, 30, 3, 4, 5, 6, 7]

1
let arr = [0, 1, 2, 3, 4, 5, 6, 7];
2
arr.splice(2, 0, 10, 20, 30); //arr = [0,1,2,3,4,5,6,7]
3
console.log("splice", arr); //  [0, 1, 10, 20, 30, 2, 3, 4, 5, 6, 7]

8.数组的增删类型

1
let arr = [1, 2, 3, 4, 5];
2
arr.push(6); // 返回值:返回的是添加元素后数组的长度.
3
console.log("push", arr); //  [1, 2, 3, 4, 5, 6]

1
let arr = [1, 2, 3, 4, 5];
2
arr.unshift(0); // 6 返回的是添加元素后数组的长度
3
console.log("unshift", arr); //  [0, 1, 2, 3, 4, 5, 6]

1
let arr = [1, 2, 3, 4, 5];
2
arr.pop(); //  5 返回值:返回的是刚才删除的元素.
3
console.log("pop", arr); //  [1, 2, 3, 4]

1
let arr = [1, 2, 3, 4, 5];
2
arr.shift(); //  1 返回值:返回的是刚才删除的元素.
3
console.log("shift", arr); //  [2, 3, 4, 5]

9.数组的遍历类型

1
let arr = [1, 32, 54, 6, 543];
2
let res = arr.map(function (item, index, arr) {
3
  return item * 2;
4
});
5
console.log("map", res); // [2, 64, 108, 12, 1086]

1
let arr = [1, 3, 5, 2, 4, 6];
2
let res3 = arr.filter(function (item, index) {
3
  return item % 2 === 0;
4
});
5
console.log("filter", res3); // [2, 4, 6]

1
let arr4 = [
2
  { id: 3, name: "ls", done: false },
3
  { id: 1, name: "zs", done: true },
4
  { id: 2, name: "ww", done: true },
5
];
6
var res7 = arr4.find(function (item) {
7
  return item.done;
8
});
9
console.log("find", res7); // {id: 1, name: 'zs', done: true}

1
arr4 = [
2
  { id: 3, name: "ls", done: false },
3
  { id: 1, name: "zs", done: true },
4
  { id: 2, name: "ww", done: true },
5
];
6
var res8 = arr4.findIndex(function (item) {
7
  return item.done;
8
});
9
console.log("findindex", res8); // 1

1
for (let i = 0; i < array.length; i++) {
2
  // 逻辑
3
}

10.forEach

forEach() 方法对数组的每个元素执行一次提供的函数

1
var array = ["a", "b", "c"];
2

3
array.forEach(function (element) {
4
  console.log(element);
5
});

输出为：a;b;c;

foreach 语法：

1
[ ].forEach(function(value,index,array){　　　　//code something　　});

• currentValue：数组中正在处理的当前元素。
• index：当前元素的索引（可选）。
• array：当前正在遍历的数组（可选）

. forEach 方法的特性不改变原数组：forEach 方法只会对数组中的每个元素执行回调函数，不会修改原数组本身。无法中途停止：forEach 方法无法通过 break 或 return 提前终止循环。如果需要中途退出循环，应该考虑使用 for 循环或 some、every 等方法。

11.some方法

some方法用于检测数组中是否满足条件的元素

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素，则返回false。

1
let arr = [1, 2, 3, 4, 5, 6];
2
let result = arr.some((item) => {
3
  if (item == 1) {
4
    return item;
5
  }
6
});
7
console.log(result); //true

注：some方法不会对空数组检测，some方法不会改变原始数组

12、every方法

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

1
let arr = [1, 2, 3, 4, 5, 6];
2
let result = arr.every((item) => {
3
  return item < 7;
4
});
5
console.log(result); //true

注：every方法不会对空数组检测，every方法不会改变原始数组

1.箭头函数

在JS中箭头函数根据是否书写大小括号可分为以下四种情况

1
// 不省略
2
const fun = (value) => {
3
  return value;
4
};
5

6
// 省略小括号
7
const fun = (value) => {
8
  return value;
9
};
10

11
// 省略大括号
12
const fun = (value) => value;
13

14
// 省略大括号与小括号
15
const fun = (value) => value;

2.函数声明

由关键字function、函数名、参数列表和函数体组成。函数声明可以在任何地方进行定义，并且会被提升到作用域的顶部。

1
function add(a, b) {
2
  return a + b;
3
}
4

5
console.log(add(2, 3)); // 输出 5

3.函数表达式

函数表达式是将函数赋值给一个变量或属性的方式。它由关键字function、可选的函数名、参数列表和函数体组成。函数表达式可以是匿名的，也可以是具名的。

1
// 匿名函数表达式
2
var add = function (a, b) {
3
  return a + b;
4
};
5

6
console.log(add(2, 3)); // 输出 5
7

8
// 具名函数表达式
9
var multiply = function multiply(a, b) {
10
  return a * b;
11
};
12

13
console.log(multiply(2, 3)); // 输出 6

4.构造函数

构造函数是用来创建对象的函数，它由关键字function、函数名、参数列表和函数体组成。构造函数通过new关键字来调用，并且会创建一个新的对象并返回。

1
function Person(name = "匿名", age = 0) {
2
  this.name = name;
3
  this.age = age;
4
}
5
Person.prototype = {
6
  constructor: Person,
7
  sayHi() {
8
    console.log(`你好，我是 ${this.name}`);
9
  },
10
  run() {
11
    console.log(`${this.name} 在跑步`);
12
  },
13
};

• new会帮你创建好一个新对象

• new会帮你准备Person.共有属性

• new会帮你关联隐藏属性与共有属性（即直接调用Person.prototype即可）

• new会帮你return新对象