快速入门js

js引入方式

1. 直接在<script type="module"></script>标签内写JS代码。

2. 直接引入文件：<script type="module" src="/static/js/index.js"></script>

   将所需的代码通过import关键字引入到当前作用域。

/static/js/index.js文件中的内容为：

let name = "mzr";

function print() {
    console.log("Hello World!");
}

export {
    name,
    print
}
1
2
3
4
5
6
7
8
9
10
11
12

<script type="module"></script>中的内容为：

<script type="module">
    import { name, print } from "/static/js/index.js";

    console.log(name);
    print();

</script>
1
2
3
4
5
6
7
8
9

js注释

// 单行注释

/*
	多行注释
*/
1
2
3
4
5

js输入输出语句

变量

变量命名规范

• 由字母(A-Z，a-z)、数字(0-9)、下划线(_)、美元符号( $ )组成
• 严格区分大小写。
• 不能以数字开头。
• 不能是关键字、保留字
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

数据类型

数字型

//JavaScript中数值的最大和最小值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 
alert(Number.MIN_VALUE); // 5e-324

// 数字型三个特殊值
alert(Infinity); // ，代表无穷大，大于任何数值
alert(-Infinity); // ，代表无穷大，大于任何数值
alert(NaN); // ，Not a number，代表一个非数值

isNaN() //用来判断一个变量是否为非数字的类型，返回 true 或者 false
1
2
3
4
5
6
7
8
9
10

字符串类型

//字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''
//因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

alert(strMsg.length); //length 属性可以获取整个字符串的长度。

// 字符串拼接 字符串 + 任何类型 = 拼接之后的新字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112

var age = 18;
// console.log('pink老师age岁啦'); // 这样不行哦
console.log('pink老师' + age); // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦

字符串.replace(被替换的字符串， 要替换为的字符串)；
字符串.split("分割字符") //它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

数据类型转换

//转换为字符串
var num=1;
alert(num+"我是字符串");
alert(num.toSting());
alert(String(num));
//转换为数字
parseInt('20');
parseFloat('20.520');
//隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型 / * +
'12'-0;

1
2
3
4
5
6
7
8
9
10
11

2 - 简单数据类型和复杂数据类型

数组

利用new创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组
//注意 Array () ，A 要大写    
1
2
3

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];
1
2
3
4

数组中可以存放任意类型的数据，

var arrStus = ['小白',12,true,28.9];
//注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined
1
2

属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
函数push()：向数组末尾添加元素
函数pop()：删除数组末尾的元素
函数splice(a, b)：删除从a开始的b个元素
函数sort()：将整个数组从小到大排序
自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。

函数

function add(a, b) {
    return a + b;
}

let add = function (a, b) {
    return a + b;
}

let add = (a, b) => {
    return a + b;
}
//如果未定义返回值，则返回undefined。
1
2
3
4
5
6
7
8
9
10
11
12

对象

类似于C++中的map，由key:value对构成。

value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。

使用对象字面量创建对象：

let person = {
    name: "mzr",
    age: 18,
    money: 0,
    add_money: function (x) {
        this.money += x;
    }
}
1
2
3
4
5
6
7
8

利用 new Object 创建对象

var andy = new Obect();

andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}
1
2
3
4
5
6
7
8

利用构造函数创建对象

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

var obj = new 构造函数名(实参1，实参2，实参3)
1
2
3
4
5
6
7
8

遍历对象

//for-in循环，可以枚举数组中的下标，以及对象中的key
//for-of循环，可以枚举数组中的值，以及对象中的value

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}
1
2
3
4
5
6
7

内置对象

Math对象

日期对象

Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。

使用Date实例化日期对象

• 获取当前时间必须实例化：

var now = new Date();
1

• 获取指定时间的日期对象

var future = new Date('2019/5/1');
1

注意：如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象