JavaScript 学习笔记

2020年12月14日数据类型

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

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次用户输入并存入数组

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

12月20日函数

声明方式

function 函数名( 形参1， 形参2 ...... ) {
	函数体
	// 有返回值： return xxx;
	// 无返回值 == 返回undefined
}
// 或匿名函数：
var 变量名 = function( 形参 ) {
	函数体
}// 调用时使用变量名( 实参 )

arguments的使用

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

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）整体提升到当前作用域最前面，如：

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.利用对象字面量
	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.character 为例:
	console.log(character.name); // 输出 刻晴
	console.log(character['age']); // 输出 18
	character.sayHi(); // 输出 耽误太多时间，事情可就做不完了。
// 以对象 Sora 为例:
	Sora.attack('hard beat!'); // 输出 hard beat！

遍历对象：for—in循环

for(var k in character) {   // 习惯于使用k/key
	console.log(k); // 输出属性名
	console.log(character[k]); 输出属性值
}

2.2 内置对象

Math对象

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)]);

日期对象

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，即协调世界时）距离该日期对象所代表时间的毫秒数

案例：倒计时

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. instanceof
	var arr = [];
	console.log(arr instance of Array); // 输出true
2. Array.isArray()
	var arr = [];
	console.log(Array.isArray(arr)); // 输出true

添加数组元素

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. 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属性并非只读！也可通过改变长度删除末尾元素！

数组排序

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

案例：数组去重

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的位置开始往后查找

根据位置返回元素

var str = 'Takumi';
console.log(str.charAt(3)); // 输出u
console.log(str[3]); // 输出u H5才支持
console.log(str.charCodeAt(3)); // 输出117 即为u对应的ASCII码

案例：统计出现次数最多的字符

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 即从索引号为二的字符开始截取长度为二的字符串

Post author: Takumi
Post link: http://yoursite.com/2020/12/15/JavaScript%20%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/
Copyright Notice: All articles in this blog are licensed under unless otherwise stated.

2020年12月14日 数据类型