1. 初识

js是一行一行的执行的，如果中间出现错误，则后面的代码不会执行
转义符与 python中的一样

  • 引入 js

    与css一样有三种方法：写在<script></script>里、另创一个 js文件<script src="js文件路径"></script>、直接写在元素的内部

2. 基础

输入输出语句

alert(msg)                浏览器弹出警示框

prompt(info)            浏览器弹出输入框                # 输入的都以字符串形式返回，同 input

console.log(msg)    浏览器控制台打印输出信息 (浏览器检查里的 console)

声明变量、赋值

可以同时声明多个变量 (跟python一样)

var age(变量名) = 18, name = 'xiao', sex = '男';

常见情况：

只声明，不赋值                        undefined
不声明，不赋值，直接使用      报错

数字

八进制：以数字 0 开头的
十六进制：0x 开头的数字

alert(Infinity/ -Infinity/ NaN);        无穷大/ 负无穷大/ 非数值

判断是不是数字: console.log(isNaN(...));    返回 true或 false
检测字符串的长度：console.log(str.length);
判断数据类型：console.log(typeof 变量);

数据类型转换

转换为字符串：var num = 1; alert(num.toString()); / alert(String(num));/ alert(num + '');

最后一个表达是加上一个空字符串

转换为数字：parseInt('78') / parseFloat('78.21') / Number('12') / '12' - 0

                        应用: console.log('120px') —> 120

最后一个表达隐式转换，利用运算符，不能是加号！了解即可

转换为布尔型：Boolean(0) —> false # 代表空、否定的值会转换为 false

运算符

算术运算符、递增、递减、逻辑运算符、赋值运算符、优先级 与 C语言的一样
比较运算符：多了一个全等 ===、！== 要求值、数据类型全一致
逻辑运算符：短路运算：|| 短路还是参考 C语言，注意，&& 短路情况与 || 刚好相反
                      例：console.log(123 && 4) —> 456

判断、循环语句

// 处处是 C语言的影子

判断:

1
2
3
4
if (条件表达式1) {执行语句1}
else if (条件表达式2) {执行语句2}
...
else {执行语句n}

三元表达式：
条件表达式 ？ 表达式1 : 表达式2;

分支：
表达式里的值 === case 里的值，case 里的值不一定要是数字，也可以是字符串等，比如：case ‘apple’: 执行语句;

1
2
3
4
5
6
7
8
9
switch(表达式) {
    case 1:
        执行语句1;
        break;
    ...
    default:
        执行语句n;
        break;
}

循环：

1
2
3
4
5
6
7
for (var i = 1; i <= 100; i++) {执行语句;}

while(表达式) {循环体;}

do {
    循环体;
}while (表达式)

数组

创建数组：

常用：var arr = [];
利用 new:
var 数组名 = new Array();

若是 Array(2)，代表创建了一个长度为2的空数组
若是 Array(2, 3)，代表创建了一个数组 [2,3]

数组长度： arr.length

数组中新增元素:
修改 length长度：arr.length = 5;   (手动修改)
修改索引号(追加/ 替换)：var arr['red']; arr[1] = 'blue';

函数

创建函数：function 函数名(形参) { 函数体; }

                  var 变量名 = function (形参) { 函数体; }        # 匿名函数，没有函数名

调用时不要忘了 ()

当不确定有多少个参数传递时利用函数内置对象 arguments来获取，arguments为伪数组，具有数组的特性，但没有数组的一些方法

作用域

全局/局部 变量：结合 C语言了解，要注意的是，在函数内部，没有声明直接赋值的变量也是全局变量

预解析 (了解)

(1) 变量提升：把所有变量声明提升到当前的作用域最前面 不提升赋值操作
(2) 函数提升：把所有函数声明提升到当前的作用域最前面

例：

1
2
3
4
5
6
7
var num = 10;
fun ();
function fun () {
    console.log(num);
    var num = 20;
    console.log(num);
}

结果是：undefined, 20

以上代码预解析相当于：

1
2
3
4
5
6
7
8
9
var num;
function fun () {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fun();

来个坑：

1
2
3
4
5
6
7
8
9
10
function f1 () {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

结果是：9 9 9 9 9 报错

跳坑：var a = b = c = 9 相当于 var a = 9; b = 9; c = 9;

       注意，这里是用分号隔开的，不是集体声明逗号，未声明直接赋值，所以 b,c 是全局变量！

对象

创建对象、方法

利用字面量 {}：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建对象、方法 (与字典很像)
var obj = {
    name: 'xiao',
    age: 18,
    sex: '男',
    sayHi: function() {
        console.log('hi~~');
    }
}
// 调用对象的属性的两种方法
console.log(obj.name);
console.log(obj['age']);
// 调用对象的方法, 不要忘了加小括号
obj.sayHi();

利用 new Object：

1
2
3
4
5
6
7
8
9
// 创建了一个空的对象
var obj = new Object();
// 利用添加为对象创建属性、方法
obj.name = 'xiao';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~~');
}

利用构建函数：

前面两种方法一次只能创建一个对象，若对象有许多相同之处，则会有许多重复代码，此时利用函数无疑是个不错的方法
也可以理解为‘父类’与‘子类’之间的关系

1
2
3
4
5
6
7
8
9
10
11
// 构建的函数首字母要大写，与类相同
function Peo(name, age, sex) {
    // this 指当前的
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function() {console.log(hi~~)}
}
// 调用
var xiao = new Peo('xiao', 18, '男');
var shuang = new Peo('shuang', 19, '男');

遍历对象

1
2
3
4
for (var k in obj) {
    console.log(k);  // 属性
    console.log(obj[k]);  // 属性值 这里只能这么用
}

内置对象

Math对象：可以直接使用

Math.PI                    圆周率

Math.floor ()        向下取整        1.1 —> 1

Math.ceil ()          向上取整        1.1 —> 2

Math.round ()        四舍五入取整

Math.abs ()            绝对值

Math.max/min ()    求最值

Math.random ()      返回一个[0, 1)之间的小数

得到一个两数之间的随机整数：

公式：Math.floor(Math.random() * (max - min + 1)) + min;


日期对象：与 Math不一样，使用 Date必须使用 new来调用创建的对象

var date = new Date();

如果没有参数，则返回当前系统的当前时间
如果有参数，返回的是参数代表的时间，常用的是 数字型：2021, 01, 01 / 字符串型：'2021-01-01 8:8:8'

获取当前日期的某一具体部分方法 (字面意思)：

.getFullYear()

.getMonth()             # 返回的月份会小一, 0~11, 使用时不要忘了加一

.getDate()

.getDay()                 # 星期几, 0~6, 星期日是0

.getHours()

.getMinutes()

.getSeconds()

注：利用数组配合 .getDay() 可得到具体星期几

获得Date总的毫秒数 (默认是距离1970年1月1号过了多少毫秒，可自己添加参数)：

.valueOf() / .getTime()

简单的写法：var date = +new Date();          # +new Date() 返回的就是总的毫秒数

H5 新增的写法：console.log(Date.now());


数组对象：

检测是否为数组

console.log(arr instanceof Array);          若arr是数组，则返回 true

console.log(Array.isArray(arr));

增减数组元素

.push(参数1, ...)             在数组末尾添加一个或多个数组元素，返回新的长度

.unshift(参数1, ...)       在数组前面添加一个或多个数组元素，返回新的长度

.pop()               删除数组最后一个元素，返回删除的元素

.shift()           删除数组第一个元素，返回删除的元素

数组排序

.reverse()          颠倒数组中的元素，返回新数组

.sort()                对数组中的元素进行排序，返回新数组

1
2
3
4
arr.sort(function (a, b) {
    // return a - b;  升序排列
    // return b - a;  降序排列
})

数组索引方法

.indexOf(元素, 3)              从索引号为3的元素起，返回数组中第一个满足条件的索引号 (即元素在数组中的位置)，若数组中没有该元素，则返回-1

.lastIndexOf(元素)      返回数组中最后一个满足条件的索引号 (从后往前找)

数组转换为字符串

.toString()             转换为字符串后数组中的元素还是以逗号分隔

.join('分隔符')      可以自定义分隔符，默认还是逗号

附：

arr.concat(arr1, arr2, ...)           连接两个或多个数组

arr.slice(2, 4)            截取数组，返回被截取的新数组，不会影响原数组 (括号中的数字代表索引号，左闭右开)

arr.splice(从第几个开始, 要删除的个数)            返回被删除的数组，会影响原数组 (与slice一样，括号中的数字代表索引号)


字符串对象：

根据位置返回字符

.charAt(3):   返回指定位置的字符

.charCodeAt(3):   获取指定位置处字符的ASCLL码

str[3]:   获取指定位置处字符

字符串操作方法

.concat(str1, str2, ...)                      连接多个字符串，等价于 ‘+’

.slice()                                                     同数组的 附(见上)

.substr(start, length)                          从star位置开始(索引号)，length 取的个数

.replace('被替换的字符', '替换为的字符')    只会替换第一个符合的字符

.split('分隔符')                                        字符转换为数组，与 join 相反 (分隔符取决于数组中的符号)

.toUpperCase()        转换为大写

.toLowerCase()        转换为小写