基本数据类型 String,null 和 undefined,运算符,流程控制,JavaScript之数组,数组常用的内置方法(部分)

Ⅰ 基本数据类型 String

【一】String类型

String类型 就是字符串类型

【二】定义变量

【1】常规变量

var 变量名="变量值";  // 一般用这种
var 变量名='变量值';

• 不支持三引号

【2】可以先声明不赋值

先用 var b;
再对变量b赋值 var b='6';

【三】字符串的格式化输出语法

【1】书写多行字符串

var s3 = `
as
df
ce
gh
`

【2】格式化字符串

• 书写 ${} 会向前找定义过的变量值
  • 如果找不到会报错

模板字符串除了可以定义多行文本，还可以实现格式化字符串操作

var name="silence";
var gender = "male";
var sentence = `my name is ${name} , my gender is ${gender}`
sentence;

【四】拼接字符串

• 在js中推荐用 + 号 做拼接

【五】字符串常用方法

【1】统计字符串长度

.length

【2】移除空白

（1）移除两端空白

.trim()

（2）移除左边空白

.trimLeft()

（3）移除右边空白

.trimRight()

（4）代码展示

var name = "  silence  ";
var newname = name.trim();
newname;
'silence'
name.trimLeft();
'silence  '
name.trimRight();
'  silence'

【3】返回索引

（1）返回指定索引位置的字符

• 索引位置从0开始

newname
'silence'
newname.charAt();
's'
newname.charAt(2);
'l'

（2）返回指定字符的索引位置

newname
'silence'
newname.indexOf('n');;
4

【4】拼接字符串

newname
'silence'
var name1 = "mark";
undefined
var name2 = "park";
undefined
newname.concat(name1,name2);
'silencemarkpark'

【5】切片

.slice(start_index,end_index)

var a = newname.concat(name1,name2);
a
'silencemarkpark'
a.slice(4,8);       // slice 取索引 4~8的内容
'ncem'
a.substring(4,8);   // substring 取索引 4~8的内容
'ncem'
a.slice(0,-1);
'silencemarkpar'

【6】字符转换大小写

.toUpperCase();
.toLowerCase();

var name = "SILEnce";
undefined
name.toLocaleLowerCase();    // 字符转全小写
'silence'
name.toUpperCase();     // 字符转全大写
'SILENCE

【7】切割

.split('');

var name = "silence|mark|bob|cat"
undefined
name.split("|");
(4) ['silence', 'mark', 'bob', 'cat']
name.split("|",2);
(2) ['silence', 'mark']

Ⅱ null 和 undefined

【一】null

• 表示值为空，一般都是指定或者清空一个变量时使用

【二】undefined

• 表示声明了一个变量，但是没有做初始化操作
• 函数没有指定返回值的时候也是返回的undefined

Ⅲ 运算符

【一】算数运算符

【1】运算符

// + : 加法
1 + 1
// 2

// - : 减法
2 - 1
// 1

// * : 乘法
3 * 3
// 9

// / : 除法
4 / 2
// 2

// (): 优先运算
4 + (2 * 3)
// 10

// % : 取余
8 % 5
// 3

【2】运算顺序

• 先乘除取余，再算加减，有括号先算括号

【3】特殊NaN

• 只要NaN参与运算得到的结果也是NaN

【4】隐式转换

• 隐式转换：null转换成0，undefined转换成NaN等

g = null;
null
g + 9;
9
f = undefined;
undefined
f + 9;
NaN

【二】比较运算符

【1】运算符

> 大于
< 小于
<= 小于等于
>= 大于等于
== 相等    // 弱比较 只比较值，不强制约束类型
!= 不相等
=== 全等 与相等区别在于会判断数据类型  // 强比较 既比较值有比较类型
!== 不全等

a = 1;
1
b = "1";
'1'
a == b;
true
a === b;
false

【2】特殊NaN

• NaN是Not a Number的缩写，表示一种特殊的浮点数，它与任何数值都不相等，包括自己。

isNaN(NaN) // true
isNaN(Infinity) // false
isNaN(-Infinity) // false
isNaN("hello") // true
isNaN(true) // false

NaN == NaN;
false

• 在比较两个NaN值时，它们并不严格相等，而是被视为相等（因为JavaScript中的所有NaN值都被视为“不同”）。
• 但是，在非严格比较中，如果两个NaN值同时出现在同一个运算中，则它们被视为相等。

【3】Infinity

• Infinity 正无穷 -Infinity 负无穷
• Infinity是JavaScript中的一个特殊数字，表示正无穷大或负无穷大。
• 它是双精度浮点数类型的最大或最小值。
• Infinity ===Infinity 其他要根据情况而定

Infinity == Infinity // true
Infinity != Infinity // false
Infinity > Infinity // false
Infinity < Infinity // false
Infinity >= Infinity // true
Infinity <= Infinity // true

• 注意，尽管两个Infinity值在比较中被认为是相等的，但它们并不严格相等。
• 只有在它们都作为右操作数用于逻辑运算时才会被认为是相等的。
• 此外，由于Infinity是一个特殊的数字类型，因此不能使用typeof运算符来检查其类型。
• 相反，可以使用isFinite函数来检查一个值是否有限制：

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(10) // true

【4】null

• 只有在 算数运算的时候会默认将 null 转换为 0 运算

null >=0 
// true

null <=0 
// true

null==undefined
// true

null == 0; 
// false

【5】字符串

• 字符串是比较字符的编码顺序,从前往后 0-9，a-z，A-Z
• 默认按照 ASCII 码的顺序进行比较

【6】比较顺序

• 从前往后比较，前面比较的结果再与后面比较 例如：3>2>1 结果为false
  • 解释:3 > 2 > 1 会首先计算 3 > 2，这个比较会返回 true（在大多数编程语言中，true 通常会隐式地转换为数字 1）。然后，这个 true（或 1）会与 1 进行比较，即 1 > 1，这会返回 false
• 先比较前面再比较后面

【7】 == 与 ===

• 当使用"=="比较运算符时，会进行类型转换然后再比较。
  • 如果操作数的类型不同，则会尝试将它们转换为相同的类型，然后再进行比较。
• 而使用"==="严格相等运算符时，不会进行类型转换。
  • 它要求操作数的值和类型都相同才会返回true。

（1）==

• 弱等于
• 内部自动转换成相同的数据类型比较了

1 == '1';
true

（2）===

• 强等于
  • 内部不做类型转换

1 === '1';
false

【三】逻辑运算符

【1】运算符

与或非
   py   js
与 and  &&
或 or   ||
非 not   !

【2】结果

• 结果为布尔值，与数学的逻辑运算基本一致

【3】隐式转换

• NaN 0 控制符 null undefined为false。非0 非空 非NaN的数字 非空字符串转化成true

【4】示例

Python	and	or	not
JavaScript	&&	||	!

5 && '5';  //任一为真则为真 二者都为真则取前者
// '5'

0 || 1;
// 1

!5 && '5';
// '5'

py中
# print(5 and "5")  # 5
# print(5 and 0)  # 0
# print(5 and False)  # False

【四】赋值运算

• = 等于
• += 加等于 例如： a+=3 等价于 a=a+3 下面基本一致
• -= 减等于
• *= 乘等于
• /= 除等于
• %= 取余等于
• ++ 递加
• -- 递减

【五】一元运算符

【1】++a

• 先增加后赋值
• 先增加后赋值，即先将变量的值加一，然后再返回原来的值，并将其赋值给表达式的右侧变量。

var a = 10;
// undefined

var res2 = ++a;
// undefined

res2
// 11

a
// 11

• 当 ++ 在前面时
• 先将变量 a 的值加一得到 11
• 然后返回原来的值 11 并将其赋值给 res2 变量
• 因此 res2 的值为 11

【2】a++

• 先赋值后增加
• 先赋值后增加，即先将变量的值赋给表达式的左侧变量，然后再将变量的值加一。

var a = 10;
// undefined

var res1 = a++;
// undefined

res1
// 10

a
// 11

• 当 ++ 在后面时
• 先将变量 a 的值赋给 res1 变量，得到 10
• 然后将变量 a 的值加一得到 11
• 所以 res1 的值为 11

【3】--

• 减一操作符，它可以用于减少变量的值。

let a = 10;
console.log(a); // 输出：10

a--;
console.log(a); // 输出：9

let b = "hello";
b--;
// NaN

console.log(b); 
// NaN

• 首先声明了一个变量 a 并将其设置为 10。
• 然后我们使用 -- 操作符将 a 的值减一，因此 a 的新值为 9。
• 最后，我们将 -- 操作符应用于字符串变量 b，这将导致错误，因为不能从字符串中减去数字。

【六】运算优先级

• () -> 一元 -> 算数 -> 比较 -> 逻辑 -> 赋值
• 括号最高
• 一元运算
• 算数运算
• 关系运算
• 相等运算
• 逻辑运算 先&& 再 ||
• 赋值运算

Ⅳ 流程控制

【一】流程控制之分支if语句

【1】单分支

• if判断

//（1）py

if 条件:
    代码块

//（2）js

if (条件){
    代码
}:

• 示例

var score = 99;
if (score > 90) {
    console.log("优秀");
}

【2】双分支

• if ~ else

//（1）py

if 条件:
    代码
else:
    代码

//（2）js
if (条件){条件成立执行的代码块}else{条件不成立时执行的代码块};

• 示例

var score = 88;
if (score >= 90){
    console.log("优秀")
}else{
    console.log("普通")
}

【3】多分支

• if ~ else if ~ else

//（1）py

if 条件:
    代码
elif 条件:
    代码
else:
    代码

//（2）js

if (条件)
{
    条件成立执行的代码块
}
else if(条件)
{
    条件成立执行的代码块
}
else{条件不成立时执行的代码块}

• 示例

var score = 88;
if (score >= 90) {
    console.log("优秀")
} else if (score >= 80) {
    console.log("及格")
} else {
    console.log("普通")
}

【二】switch - case 语法

【1】语法

• 提前定义好可能出现的条件和解决方式
• break
  • 如果不加break，匹配成功之后会依次执行
• default
  • 所有条件都不成立时走的代码

switch (){
    case 条件:
        代码块
    case 条件:
        代码块
        break 断开循环
    default
        上面都不走的时候会走的代码块

【2】示例

switch (num) {
    case 0:
        console.log("喝酒");
        break;

    case 1:
        console.log("吃饭");
        break;

    case 2:
        console.log("打牌");
        break;
    default:
        console.log("走人");
};

【三】for循环

【1】语法

• py中

// py
for item in 可迭代类型:
    print(item)
for i in range(10):
    print(i)
    
a = 0
while a < 10:
    print(a)
    a += 1

• js中

for (起始条件，结束条件，循环条件){条件成立执行的代码}

【2】示例

（1）打印 0-9 的数字

for (let i=0;i<10;i++){
    console.log(i)
}

（2）打印列表内的每一个值

var ll = [11,22,33,44,55,66,77];
for (let i = 0;i < ll.length; i++){
    console.log(ll[i])
};

【3】【补充】

• 捕获布尔值类型要用 if 语句
• 捕获指定的值 要用 case 语句

for (var a = 0; a < 10; a++) {
    var res = a % 2
    // a % 2 === 0 ---> 计算得到的结果是布尔值类型
    // case 只能捕捉定值
    console.log(res === 0,typeof res)
    switch (res) {
        case 0:
            console.log(`这是偶数 ${a}`)
        case 1:
             console.log(`这是奇数 ${a}`)
    }
}

【四】while循环

【1】语法

// 在py 中

count = 0
while count < 5:
    print(count)
    count += 1

// 在js中 while 循环

while (条件){
    执行的代码
}

【2】示例

var count = 0
while (count < 5) {
    console.log(count)
    count++
}

【五】do ~ while 循环

【1】语法

do {
    执行的代码    
}while(条件);

【2】示例

var count = 0
do {
    console.log(count)
    count++
} while (count < 5)

【六】三元运算符

【1】语法

// py中
// 正确的值 if 条件 else 否定的条件
res = 4 if 1 > 2 else 6


// js中
条件 ？ 条件成立取到的值:条件不成立取到的值

【2】示例

var res = 1 > 2 ? 4 : 6;
// 6

var res = 1 > 2 ? 4 : (8 > 5 ? 999 : 888);
// 999

Ⅴ JavaScript之数组

【一】什么是数组

• 数组是一组有序的数据集合，有序且不去重
• 集合最大的特点是 无序且去重

【二】创建数组

• 创建数据的最简单方式是通过字面量

var arr = []

• 也可以通过数组对象去创建
• 存放多个数据，每个数据之间用，分隔

var arr = new Array()

// 将 Array 这个内置函数赋值给 num_list_one 所以看到的是 Array 函数调用地址
num_list_one = Array;
ƒ Array() { [native code] }
num_list_one
ƒ Array() { [native code] }

// 将 Array 这个内置函数的返回值赋值给 num_list_two
// 所以看到的值是一个空的数组类型
num_list_two = Array();
[]
num_list_two
[]

【三】数组获取元素

• 可以通过索引获取数组内元素，索引从0开始

var arr = [1,2,3] 

arr[2] 
// 3

• 如果索引超过最大值 得到的结果是 undefined

【四】数组的长度

• 数组的length的属性表示数字的长度

var arr = [1,2,3,4,8,6,9,5,7,2] 

arr.length
// 10

• 数组的长度等于最大索引值+1
• 可以通过修改数组的length可以改变数组的长度，拉长了数组获取后续项的值是undefined
• 如果缩短数组的长度，后续的项数会被删除，且不可逆

Ⅵ 数组常用的内置方法(部分)

方法名称	功能描述	返回值类型	是否改变原数组
forEach/for...of	遍历数组（forEach处理每个元素，for...of可读取元素并自动解包）	无	不会
concat	合并数组	新数组	不会
join	将数组转化为字符串	字符串	不会
pop	删除数组最后一个元素	删除的数据（即数组最后一个元素）	会
shift	删除数组第一个元素	删除的数据（即数组第一个元素）	会
unshift	在数组开头插入元素	新数组长度	会
push	在数组末尾添加元素	新数组长度	会
reverse	翻转数组顺序	翻转后的数组	会
sort	对数组元素排序	排序后的数组	会
slice	截取数组部分元素	新数组	不会
splice	插入、删除或替换数组元素	被删除或替换的元素	会
toString	数组转为字符串	字符串	不会
valueOf	获取数组原始值	原始值	不会
indexOf	查找指定元素在数组中的位置	元素索引（若不存在则返回 -1）	不会
lastIndexOf	查找指定元素在数组中最后一次出现的位置	元素索引	不会
map	应用函数映射数组元素	新数组	不会
filter	根据条件筛选数组元素	新数组	不会
every	判断数组所有元素是否都满足条件	布尔值	不会
some	判断数组是否有元素满足条件	布尔值	不会
reduce	按规则累积数组元素生成单个返回值	单一返回值	可以，但通常不会直接改变原数组
rightReduce	类似于reduce，但从数组末尾开始累积	单一返回值	可以，但通常不会直接改变原数组

【一】forEach 和 for...of

• 遍历数组（forEach处理每个元素，for...of可读取元素并自动解包）

var numList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// forEach 示例
// 遍历数组中的每一个数据 数组.forEach
numList.forEach((value, index) => {
     // index 是当前值所对应的索引
    console.log(`index :>>>> ${index}`)
    // value 是当前列表索引所对应的值
    console.log(`value :>>>> ${value}`)
});


// for...of 示例
for (const item of numList) {
  console.log(item);
}

【二】concat

• 合并数组

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]  - 原数组未变

【三】join

• 将数组转化为字符串

var arr = ['apple', 'banana', 'cherry'];
var str = arr.join(', ');

console.log(str);
apple, banana, cherry

【四】pop 和 shift

• pop删除数组最后一个元素
• shift删除数组第一个元素

var numList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// pop 示例
var numList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
undefined
var poppdeitem = numList.pop();
undefined
console.log(poppdeitem);
// 10
undefined
console.log(numList);
VM198:1 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]    //原数组已变


// shift 示例
var shifteditem = numList.shift();
undefined
console.log(shifteditem);
// 1
undefined
console.log(numList);
VM289:1 (8) [2, 3, 4, 5, 6, 7, 8, 9]     //原数组已变

【五】unshift

• 在数组开头插入元素

var arr = ['b', 'c'];
arr.unshift('a'); // 在数组开头插入元素
console.log(arr); // ['a', 'b', 'c']

【六】push

• 在数组末尾添加元素

var arr = ['a', 'b'];
arr.push('c', 'd'); // 在数组末尾添加元素
console.log(arr); // ['a', 'b', 'c', 'd']

【七】reverse

• 翻转数组顺序

var arr = ['a', 'b', 'c'];
arr.reverse(); // 翻转数组顺序
console.log(arr); // ["c", "b", "a"]

【八】sort

• 对数组元素排序

var arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 自定义排序规则，升序排列
console.log(arr); // [1, 1, 3, 4, 5, 9]

【九】slice

• 截取数组部分元素

var arr = ['a', 'b', 'c', 'd', 'e'];
var slicedArr = arr.slice(1, 4); // 截取下标从1到3的子数组
console.log(slicedArr); // ["b", "c", "d"]
console.log(arr); // ["a", "b", "c", "d", "e"]  - 原数组未变

【十】splice

• 插入、删除或替换数组元素

var arr = ['a', 'b', 'c', 'd', 'e'];
var removedItems = arr.splice(2, 2, 'x', 'y'); // 从下标2开始，删除2个元素，并在此位置插入'x'和'y'
console.log(removedItems); // ["c", "d"]
console.log(arr); // ["a", "b", "x", "y", "e"]  - 原数组已变

【十一】toString

• 数组转为字符串

var arr = [1, 2, 3];
var str = arr.toString();
console.log(str);   // "1,2,3"

【十二】valueOf

• 获取数组原始值

var arr = [1, 2, 3];
var val = arr.valueOf(); 
console.log(val);  // [1, 2, 3]

【十三】indexOf

• 查找指定元素在数组中的位置

var arr = ['a', 'b', 'c', 'd', 'f'];
var index = arr.indexOf('c'); 
console.log(index); // 2

【十四】lastIndexOf

• 查找指定元素在数组中最后一次出现的位置

var arr = ['a', 'b', 'c', 'a', 'b'];
var lastIndex = arr.lastIndexOf('a'); 
console.log(lastIndex); // 4

【十五】map

• 应用函数映射数组元素

var arr = [1, 2, 3, 4, 5];
var squaredArr = arr.map(num => num * num); 
console.log(squaredArr);   // [1, 4, 9, 16, 25]

【十六】filter

• 根据条件筛选数组元素

var arr = [1, 2, 3, 4, 5];
var evenNumbers = arr.filter(num => num % 2 === 0); 
console.log(evenNumbers); // [2, 4]

【十七】every

• 判断数组所有元素是否都满足条件

var arr = [true, true, false];
var allTrue = arr.every(val => val); 
console.log(allTrue);  // false

【十八】some

• 判断数组是否有元素满足条件

var arr = [false, false, true];
var containsTrue = arr.some(val => val); 
console.log(containsTrue);  // true

【十九】reduce

• 按规则累积数组元素生成单个返回值

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce((total, num) => total + num, 0); 
console.log(sum);  // 15

【二十】rightReduce

• 类似于reduce，但从数组末尾开始累积
• 此方法不是ES6标准提供的，但可以通过扩展运算符实现类似效果

var arr = [1, 2, 3, 4, 5];
var reversedSum = arr.reduceRight((total, num) => total + num, 0); 
console.log(reversedSum);   // 15 (等于sum，因为是从后向前累加)

【二十一】统计数组长度

var arr= [11,22,33,44,55,66];
// undefined

arr
// (6) [11, 22, 33, 44, 55, 66]

// 统计数组的个数
arr.length
// 6