2020年12月14日 数据类型

JS的变量声明方式统一为:

1
var a;

其数据类型在程序运行中确定,如可进行初始化:

1
2
var a = 10;// 表明为Number类型
var ch = 'Takumi';// 表明为字符串类型

最独特的一点是变量的类型可以随意切换,如:

1
2
var a = 10
a = 'Takumi';

是被允许的。

五种数据类型

number, string, boolean, undefined, null

可以用关键字typeof获取数据类型:

1
2
var num = 10;
console.log(typeof num); // 输出number

重要地,由prompt取得的数据均属于string型:

1
2
var age = prompt('请输入年龄:');
console.log(typeof age);// 输出string
字符串型

获取字符串长度

1
2
var str = 'I am learning JS.'
var a = str.length;

字符串的拼接

1
console.log('我是' + '菜鸡');

并且强大的一点在于字符串和其他类型相拼接,最终结果是字符串

1
console.log('我今年' + 18);

并且也当然不局限于两个对象和字面量

1
2
var age = 18;
console.log('我今年' + age + '岁');// 变量不要写入引号内
数据类型转换
其他–>字符串

1.变量.toString()

1
2
var num = 10;
var str = num.toString();

2.String(变量)

1
2
var num = 10;
console.log(String(num));

3.利用拼接字符串的方法(隐式转换,most frequently used

1
2
var num = 10;
console.log(num + ' ');// 加上空格
其他–>数字

1.转换为整数parseInt()

1
2
3
console.log(parseInt('3.14'));// 输出3
console.log(parseInt('100px'));// 输出100
console.log(parseInt('I am 18.'))// 输出NaN

初级应用可以把prompt获取的数据转换为number!

2.转换为小数parseFlaot()

1
console.log(parseFlaot('3.14'))// 这样才能输出3.14而不被*割

3.Number(变量)

1
2
var str = '18';
console.log(Number(str));// 输出数字18

4.利用四则运算符(除“+”外)(隐式转换

1
console.log('18' - 1);// 输出数字17

//故想实现简单加法器(读取两个输入再求和),必须将输入数据先转换为数字型才能求和,而减法器等则不需要

其他–>布尔

唯一方法:Boolean(变量)

代表空、否定的值都会被转换为false, 如’’、0、 NaN、null、 undefined

其余值则均被转换为true

运算符

等于运算符 == 和大于小于大于等于小于等于运算符,默认转换类型,如:

1
cosole.log(18 == '18')// 输出true,且默认将字符串型转换为数字型

而对于全等符号 === :

1
console.log(18 === '18')// 输出false,因为数据类型不同

12月17日 数组

创建方式
1
2
3
var arr = new Array();// 1.利用new创建一个空数组
var arr = [];// 利用[]创建一个空数组
var arr = [1, 2, 3, '武汉加油', false];// 利用字面量创建数组

!important JS中的数组可以含有数据类型不同的值,即类型无限制

访问元素

利用下标访问,同C

数组长度

数组名.length,如:

1
2
var arr = [1, 2, 3];
console.log(arr.length);// 输出3
新增元素

改变length属性,数组扩容,新增位置未赋值前为undefined:

1
2
3
var arr = [1, 2, 3];
arr.length = arr.length + 2;
console.log(arr);// 输出[1,2,3,empty × 2]

或是直接通过下标追加元素:

1
2
3
var arr = [1, 2, 3];
arr[3] = 4;
console.log(arr)// 输出[1, 2, 3, 4], 对应arr.length值为4

! important 任何时候都不要对数组名赋值,否则会覆盖掉所有数据!

应用:获取5次用户输入并存入数组

1
2
3
4
5
6
var arr = [];// 刚开始length是0
for (var i = 0; i < 5; i++) {
arr[arr.length] = prompt('请输入数值:');// 每输入一次length值自增
}
alert('您的输入是:' + arr);
// 当循环体自增变量与数组下标不一致时(如从源数组读入部分数据到目标数组),这种写法非常nice

12月20日 函数

声明方式
1
2
3
4
5
6
7
8
9
function 函数名( 形参1, 形参2 ...... ) {
函数体
// 有返回值: return xxx;
// 无返回值 == 返回undefined
}
// 或匿名函数:
var 变量名 = function( 形参 ) {
函数体
}// 调用时使用变量名( 实参 )
arguments的使用

当不确定有多少参数需要传递时可以用每个函数的内置对象arguments来实现,其存储了传递的所有实参:

1
2
3
4
function fn() {   // 括号内不写形参
console.log(arguments);
}
fn(1, 2, 3, 4); // 控制台输出arguments(4)

! important arguments是伪数组,它具有length属性、按照索引方式储存(可以循环遍历)但是没有真正数组的一些方法如pop()、push()等

2021年1月29日 JS预解析

JS引擎会把变量声明语句(var xx)和函数声明语句(function xx)整体提升到当前作用域最前面,如:

1
2
3
4
5
fn();
function fn()
{
xxxx......
}// 可以正常执行

即预解析分为变量预解析(变量提升)与函数预解析(函数提升),但也仅提升声明而不提升赋值,

赋值属于代码执行部分,而代码执行是按照代码顺序进行,如:

1
2
console.log(num);// 输出undefined
var num = 10;

这段代码相当于执行了:

1
2
3
var num;
console.log(num);
num = 10;

1月30日 对象 —— 无序的相关属性与方法的集合

创建对象的三种方式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 1.利用对象字面量
var character = {
name: 刻晴, //逗号!逗号!逗号!!!
age: 18,
size: c,
sayHi: function() {
alarm('耽误太多时间,事情可就做不完了。');
}
}
// 2.利用new Object
var character = new Object();
obj.name = '岩王爷';
obj.age = 1000;
......
// 3.利用构造函数更高效地创建多个(有相同属性)对象
function character(name, age, sex) { // 需要形参
this.name = name;
this.age = age;
this.sex = sex;
this.attack = function(intensity) {
console.log(intensity);
}
}
var Sora = new character('空', 18, '男'); // 构造函数返回一个对象,不需要写出方法的内容,创建的对象已包含attack函数
调用属性/方法的方式:
1
2
3
4
5
6
// 以对象 1.character 为例:
console.log(character.name); // 输出 刻晴
console.log(character['age']); // 输出 18
character.sayHi(); // 输出 耽误太多时间,事情可就做不完了。
// 以对象 Sora 为例:
Sora.attack('hard beat!'); // 输出 hard beat!
遍历对象 :for—in循环
1
2
3
4
for(var k in character) {   // 习惯于使用k/key
console.log(k); // 输出属性名
console.log(character[k]); 输出属性值
}

2.2 内置对象

Math对象
1
2
3
4
5
6
7
8
Math.PI // 属性 圆周率
Math.max/min(); // 方法 求最大/最小值 参数相当于arguments
Math.abs(); // 方法 求绝对值
Math.floor(); // 方法 向下取整
Math.ceil(); // 方法 向上取整
Math.round(); // 方法 四舍五入
Math.random(); //方法 在区间[0,1)中取一个伪随机浮点数 无参数
......

如何随机取出任意两整数间的整数?

1
2
3
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

也可借此函数实现随机点名:

1
2
var arr = ['Takumi', 'Yuki', 'Mitsuha', 'Taki'];
console.log(arr[getRandom(0, arr.length - 1)]);
日期对象
1
2
3
4
5
6
7
8
9
var date = new Date();
date.getFullYear(); // 返回当前年份,如2021
date.getMonth(); // 返回当前月份-1,故而使用时一般要加一
date.getDate(); // 返回当前日期,如2
date.getDay(); // 返回当前星期,其中0对应星期日
date.getHours(); // 返回当前小时数(24小时制),如22
date.getMinutes(); // 返回当前分钟数,如30
date.getSeconds(); // 返回当前秒数,如29
date.getTime(); 或 date.valueOf(); // 返回值一个数值,表示从1970年1月1日0时0分0秒(UTC,即协调世界时)距离该日期对象所代表时间的毫秒数
案例:倒计时
1
2
3
4
5
6
7
8
9
10
11
12
function countDown(time) {
var nowTime = +new Date();
var theTime = +new Date(time);
var totSec = (theTime - nowTime) / 1000;
var d = parseInt(totSec / 60 / 60 / 24);
var h = parseInt(totSec / 60 / 60 % 24);
var m = parseInt(totSec / 60 % 60);
var s = parseInt(totSec % 60);
return d + '天' + h + '时' + m + '分' + s + '秒';
}
var the = prompt("Input time");
alert(countDown(the));
数组对象
检测对象是否为数组(通常用于检测函数参数传递是否正确)
1
2
3
4
5
6
1. instanceof
var arr = [];
console.log(arr instance of Array); // 输出true
2. Array.isArray()
var arr = [];
console.log(Array.isArray(arr)); // 输出true
添加数组元素
1
2
3
4
5
6
7
8
1. push() 于数组末尾添加元素
var arr = [1, 2, 3];
arr.push(4, 'Takumi'); // 该方法返回值为添加后数组长度,此处应为5
console.log(arr); // 输出[1, 2, 3, 4, Takumi]
2. unshift() 于数组前添加元素
var arr = [1, 2, 3];
arr.unshift('Akimoto'); // 该方法返回值为添加后数组长度,此处应为4
console.log(arr); // 输出[Akimoto, 1, 2, 3]
删除数组元素
1
2
3
4
5
6
7
8
9
1. pop() 删除数组的最后一个元素
var arr = [1, 2, 3];
arr.pop(); // 无参数,返回值为删除的元素,此处应为3
console.log(arr); // 输出[1, 2]
2. shift() 删除数组的第一个元素
var arr = [1, 2, 3];
arr.shift(); // 无参数,返回值为删除的元素,此处应为1
console.log(arr); // 输出[2, 3]
3.数组length属性并非只读!也可通过改变长度删除末尾元素!
数组排序
1
2
3
4
var arr = [4, 7, 13, 26];
arr.sort(function (a, b) {
return a - b; // 升序排列 若想实现降序排列则 return b - a;
});
获取数组元素索引
1
2
3
var arr = [1, 2, 3];
arr.indexOf(1); // 返回0 即元素1在arr数组中的下标
// 若数组中不含该元素 返回-1
案例:数组去重
1
2
3
4
5
6
7
8
function unique(arr) {
var newArr = [];
for( var i = 0; i < arr.length; i++ ) {
if( newArr.indexOf(arr[i]) === -1 )
newArr.push(arr[i]);
}
return newArr;
}

还有数组连接concat( )、数组截取slice( )、数组删除splice( )……

字符串对象
根据元素返回位置
1
2
3
var str = 'Takumikun';
console.log(str.indexOf(k)); // 输出2
console.log(str.indexOf(k, 3)); // 输出6 表示从索引号为3的位置开始往后查找
根据位置返回元素
1
2
3
4
var str = 'Takumi';
console.log(str.charAt(3)); // 输出u
console.log(str[3]); // 输出u H5才支持
console.log(str.charCodeAt(3)); // 输出117 即为u对应的ASCII码
案例:统计出现次数最多的字符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {}; // 对象属性名代表字符
function maxCh(str) {
for(var i = 0; i < str.length; i++) {
var chars = str.charAt(i);
if(obj[chars]) {
obj[chars]++;
} else {
obj[chars] = 1;
}
}
var max = 0;
var maxChar = '';
for(k in obj) {
if(obj[k] > max) {
max = obj[k];
maxChar = k;
}
}
return maxChar + ':' + max;
}
截取字符串
1
2
var str =  'Takumi';
console.log(str.substr(2, 2)); // 输出ku 即从索引号为二的字符开始截取长度为二的字符串

jk