JavaScript学习笔记
前言
续前几个月推出的Web开发序列学习笔记，JavaScript一直没能够接着学下去，所以本次将边学习边上交，之前敲烂了一个键盘，具体需要等待新键盘回来才方便写。本系列呢，只放置了一些个人认为比较重点的东西，c语言里面已经有了的，多写无益也浪费时间。好啦，那就开始吧！
不废话，直接开始
JavaScript和css一样，也有行内式、内嵌式、外部式。具体请参考之前推出的web前端开发入门笔记（更新中）进行查看。以下为了便于分析，将会使用内嵌式。
入坑例子
先使用一个简单的例子拉大家入坑。
<!DOCTYPE HTML>
<htm1 lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
prompt('请输入耗子喜欢吃的零食');
alert('我是沙雕');
console.log('我藏在调试这边哦');
</script>
</head>
<body>
</body>
</htm1>
上述的prompt(’’)是一个输入框，用于用户输入，效果如下。
alert(’’)则是一个弹出警示框，输出信息展示给用户，效果如下
console.log(’’)是用来打印在控制台上，便于程序员调试用的，效果如下。
变量
与多种编程语言一样，JavaScript的变量也分为整形、字符串型、浮点型、布尔型。
typeof可以检测变量类型
var num = 10;
console. log(typeof num); // number
var str ='耗子' ;
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console. log(typeof vari); // undefined
var timer = null;
console.1og(typeof timer); // object
// prompt 取过来的值是 字符型的
var age = prompt( '请输入您的年龄');
console.1og(age);
console.1og(typeof age); // string
可以使用var这个关键字定义一个新变量，例如：
var myName='耗子';
var address = '单身程序猿公寓';
var age = 20;
var email = '[email protected]';
var gz = 12000;
console.log (myname);
console.log(address);
console.log(age);
console.log(email);
console.log(gz);
效果如下：
网速不允许我贴图（狗头），我会尽量贴的。。。
然后使用弹窗输出，当然也可以使用prompt进行后期变量赋值再打印。
var myName='耗子';
alert(myName);
var myFood=prompt('请输入耗子喜欢吃的零食');
alert(myFood);
var address = '单身程序猿公寓',
age = 20,
email = '[email protected]';
var sex;
console.log(address);
console.log(age);
console.log(email);
console.log(sex);//因为没有赋初始值，所以会打印为undefined。
数字型变量
var num = 10; // num
数字型
var PI =3.14; // PI数字型
/*
1.八进制0~7我们程序里面数字前面加0表示八进制
*/
var num1 = 010;
console.log(num1); // 010 八进制 转换为10进制就是8
var num2 = 012;
console.1og(num2);
/*
2.十六进制0~9
a~f
#ffffff
数字的前面加0x表示十六进制
*/
var num3= 0x9;
console . log(num3);
var num4 = Oxa ;
console . log(num4);
// 3.数字型的最大值
console . log(Number.MAX_VALUE);
// 4.数字型的最小值
console. log(Number.MIN_VALUED);
其中，Number.MAX_VALUE与Number.MIN_VALUED是分别判断最大最小值的数学方法，已经封装进一个类里了，可以直接进行使用，后面会讲到如何自己封装自己的类。
在数字型变量的显示上，过大过小数值将显示如下：
Infinity代表为无穷大，
-Infinity代表为无穷小，
NaN代表一个非数值
null为空值
isNaN（）用来判断是否为数字型变量，返回为0或者1
字符串型变量
例子1：简单示例
varstr1="我是一个'高富帅'的\n程序员";
//字符串转义字符 都是用\开头，可以允许有双引号，单引号并存，但得“内双外单、内单外双”。
console.log(str1);
例子2：length来获取字符串变量的长度
var str ='我是 耗子' ;
console.log(str.length); // 6
例子3：字符串拼接
console.1og('耗子' + '哒哒哒'); //耗子哒哒哒
console.log('耗子' +18+'岁'); // 耗子岁
console.1og( '耗子' + true); // 耗子true
console.1og(12 + 12); // 24
console.1og('12' + 12); // ' 1212 '
var myName=undefined;
console.log(myName+1);//NaN
例子4：查找字符串中特殊字的所有位置以及次数
核心算法:
先查找第一个o出现的位置，然后只要indexOf返回的结果不是-1
就继续往后查找。因为indexOf只能查找到第一个，所以后面的
查找，一定是当前索引加1，从而继续查找。
//"abcoefoxyozzopp"中所有o出现的位置以及次数
var str ="abcoefoxyozzopp" ;
var index = str.indexOf('o');
var num = 0;
//console.log(index);
while (index !== -1) {
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
例子5：求出现次数最多的字符
核心算法:
利用charAt() 遍历这个字符串，把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就+1。遍历对象，得到最大值和该字符。
var str =' abcoefoxyozzopp ' ;
var o={};
for(vari=0;i<str.length;i++){
var chars = str.charAt(i); // chars 是字符串的每一个字符
if (o[chars]) { // o[chars] 得到的是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
//遍历对象
var max = 0;
var ch = '';
for(vark in o){
// k得到是属性名
// o[k]得到的是属性值
if (o[k] > max) {
max = o[k];
ch=k;
}
}
console.1og(max);
console.1og(”最多的字符是' + ch);
字符串操作方法
大小写转换
toUpperCase() //转换大写
toLowerCase() //转换小写
数字与字符串类型的互换
- 数字型转换为字符串型变量
// 1.把数字型转换为字符串型变量. toString()
var num = 10;
var str = num . toString();
console.log(str);
console.log(typeof str);
// 2.我们利用String(变量)
console.log(String(num));
// 3.利用+拼接字符串的方法实现转换效果隐式转换
console.log(num + '');
- 字符串转换为数字型
//parseInt
console.log(parseInt('3.14'));//3
console.log(parseInt('3.94'));//3
console.log(parseInt('120px'));//120
console.log(parseInt('rem120px'));//NaN
//parseFloat
console.log(parseFloat('3.94'));//3.94
console.log(parseFloat('120px'));//120.00
console.log(parseFloat('rem120px'));//NaN
//Number
console.log(Number('120'));
//利用算术运算+ - 隐式转换
console.log('120'-0);//12
console.log('120'-'119');
console.log('120'-1);
布尔值的转换
凡是为空的、否定的都会转为false，如‘’、0、NaN、null、undefined。
console.log(Boolean(''));
变量前后自增
// 1.前置自增和后置自增如果单独使用效果是样的
//2.后置自增口诀:先返回原值后自加1
var age = 10;
console.log(age++ + 10);//20
console.log(age);//11
var a=11;
var b=++a +12;
console.log(b);//24
数组
与其他编程语言所不同，一个数组内可以存放不同类型的变量。如：
var arrStus = ['你是老王吧',12,true,5.20];
下面继续上例子。
例子1：利用new Array（）创建数组
var arr1 = new Array(); //创建了一个空的数组
var arr2 = new Array(2) ;
//这个2表示数组的长度为2里面有2个空的数组元素
var arr3 = new Array(2, 3); //等价于[2,3] 这样写表示里面有2个数组元素是2和3
console.log(arr3);
例子2：利用数组字面亮创建数组
//数组长度数组名. length
var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维','耗子'];
for(vari=0;i<7;i++){
console.log(arr[i]);
}
console.log(arr .length);
for(vari=0;i<arr.length;i++){
console.log(arr[i});
}
注意:
- 数组的长度是元素个数 不要跟索引号混淆。
- arr.length 动态监测数组元素的个数。
例子2
例子3：新增数组元素 修改索引号 追加数组元素
var arr1 = ['red','green','blue'];
arr1[3] = 'yellow';
console.log(arr1);
arr1[4] = 'grep';
console.log(arr1);
arr1[0] = 'black';//这里是替换原来的数组元素
console.log(arr1);
arr1 = '报错专用语法'; //不能直接给数组名赋值，否则里面的数组元素都没有了
console.log(arr1);
例子4：翻转数组
function reverse(arr) {
if (arr instanceof Array) {
var newArr = [];
for(vari=arr.length-1;i>=0;i--){
newArr[newArr .1ength] = arr[i];
}
return newArr;
} eIse {
return '这个参数 要求必须是数组格式[1,2,3 '
}
}
console.log(reverse([1, 2, 3]));
console .log(reverse(1, 2, 3));
//检测是否为数组
//(1)instanceof运算符它可以用来检测是否为数组
var arr = [];
varobj={};
例子5：删除数组元素
利用pop() 可以删除数组的最后一个元素。
- pop是可以删除数组的最后一个元素记住一次只能删除一个元素。
- pop() 没有参数。
- pop完毕之后，返回的结果是删除的那个元素。
- 原数组也会发生变化。
利用shift() 它可以删除数组的第一个元素。
- shift是可以删除数组的第一个元素记住次只能删除-个元素。
- shift() 没有参数。
- shift完毕之后， 返回的结果是删除的那个元素。
- 原数组也会发生变化。
console.log(arr.pop());
console.log(arr);
console.log(arr.shift());
console.log(arr);
例子6：返回数组元素索引号
1. indexOf(数组元素):返回该数组元素的索引号。它只返回第一个满足条件的索引号，它如果在该数组里面找不到
元素，则返回的是-1。
2. 返回数组元素索引号方法lastIndexOf( 数组元素)作用 就是返回该数组元素的索引号从后面开始查找。
//var arr=['red','green','blue','pink', 'blue'];
var arr = [ 'red','green', 'pink'];
console.log(arr.indexOf('blue'));//-1
var arr = ['red','green','blue','pink', 'blue'];
console.log(arr.1astIndexOf('blue')); // 4
例子7：数组转换为字符串
1. toString() 将我们的数组转换为字符串
2. join( 分隔符)
var arr = [1, 2, 3];
console .log(arr .toString()); // 1,2,3
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green, blue , pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&' )); // green&blue&pink
此外，还有这几样函数可以进行使用。
concat() 连接两个或者多个数组 不影响数组 返回一个新的数组。
slice() 数组截取slice(begin,end) 返回被截取的新数组。
splice() 数组删除splice(第几个开始，要删除的个数) 返回被删除项目的新数组 注意，这个会影响原数组。
函数
return 可以返回值并终止函数，函数中return的后面的代码将不会被执行。
// return 终止函数
function getSum(num1, num2) {
return num1 + num2; // return 后面的代码不会被执行
alert('我是不会被执行的哦! ');
}
console.log(getSum(1, 2));
// 2. return 只能返回一个值
function fn(num1, num2) {
return num1, num2; //返回的结果是最后一个值
}
console.log(fn(1, 2));
// 3. 我们求任意两个数的加减乘数结果，返回的多个值使用数组包装
function getResult(num1, num2) {
return[ num1+num2 ,num1-num2,num1*num2, num1/ num2] ;
}
varre=getResult(1, 2); //返回的是一个数组
console.1og(re);
运算符优先级
断点调试
断点调试是指自己在程序的某一行设置-个断点 ,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,
调试过程中可以看各个变当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮我们观察程序的
运行过程浏览器中按F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点Watch:监视,通过watch
可监视变量的值的变化,非常的常用。F11:程序单步执行,让程序-行-行的执行,这个时候,观察watch中变量的值的变
化。代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不
去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
下面利用一个for循环进行演示
代码部分
for(var i=0;i<=100;i++)
{
console.log('你在想屁吃!');
}
保存后刷新页面，找到Sources这里，点击html文件，就可以显示出代码页面，如果比较小可以拉大点。
点击行数左边部分，进行断点（点击后系统会自动标红点，大多数断点调试都会有这样的功能），并进行刷新，会发现由于断点，页面会不断地缓冲。
点击上下箭头，可以看到for循环中的方框前后移动，代表着步骤进行。
运行第一圈
第二圈
也可以在watch窗口这里输入想要搜索的变量，如i，查看当前值。
对象
- 变量单独声明并赋值，使用的时候直接写变量名单独存在。
- 属性在对象里面的不需要声明的使用的时候必须是对象.属性。
- 函数和方法的相同点都是实现某种功能 做某件事。
- 函数是单独声明并且调用的函数名()单独存在的。
- 方法在对象里面调用的时候对象.方法()。
构建新对象方法1
//利用var声明一个新的对象
var num = 10;
var obj={
age: 18,
fn:
function()
{
}
}
function fn() {
}
console .log(obj.age);
// console . 1og(age);报错
利用for循环语句，以及in关键字遍历对象
for(var key in obj){
console .log(key);//输出得到的是属性名
console .log(obj.[key]);//输出得到的是属性值
}
构建新对象方法2
//利用new object 创建对象
var obj = new Object(); //创建了一个空的对象
obj.uname = '张江男' ;
obj.age = 28;
obj.sex = '男';
obj.sayHi =function() {
console.log('hi~');
}
// (1)我们是利用等号=赋值的方法添加对象的属性和方法
// (2)每个属性和方法之间用分号结束
console . log(obj . uname);
console.log(obj[ 'sex']);
obi. sayHi( ) ;
构建新对象方法3
1. 构造函数名字首字母要大写。
2. 我们构造函数不需要return就可以返回结果。
3. this指针指向的是本次的对象。
//new
function Human(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.hoby = function(){
console.log(hoby);
}
}
var mouse = new Human('耗子',20,'男');//调用函数返回的是一个对象
//console.log(typeof mouse);
console.log(mouse.name);
console.log(mouse['sex']);
mouse.hoby('爱北鼻');
var girlfriend = new Human('北鼻',21,'女');
console.log(girlfriend.name);
console.log(girlfriend['sex']);
girlfriend.hoby('爱耗子');
冒泡排序法
//利用函数冒泡排序sort 排序
function sort(arr) {
for(vari=0;i<arr.length-1;i++){
for(varj=0;j<arr.length-i-1;j++){
if (arr[5i] > arr[j + 1]) {
var temp = arr[i];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr ;
}
var arr1 = sort([1, 4, 2, 9]);
console.1og(arr1);
var arr2 = sort([11,7,22,999]);
console . log(arr2);
三元表达式
- 有三元运算符组成的式子我们称为三元表达式。
- ++num 3+5?:
- 语法结构
条件表达式?表达式1 ;表达式2。 - 执行思路
如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值。
例子1
var num = 10;
var result = num > 5 ? '是的': '不是的'; //我们知道表达式是有返回值的
console.log(result);
//相当于
if(num>5){
result = ' 是的' ;
}else{
result = '不是的';
}
例子2
//用一个变量接受这个返回值，输出
var time = prompt('请您输入一个0 ~ 59之间的一个数字');
//三元表达式 表达式?表达式1 :表达式2
var result = time< 10?'0'+time:time;//把返回值赋值给一个变量
alert(result);
资料文档查询
学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。
Mozilla开发者网络( MDN )提供了有关开放网络技术( OpenWeb )的信息,包括HTML、CSS 和万维网及HTML5应用的API。
相关链接如下：
MDN: https://developer.moilla.org/zh-CN
数学对象Math
Math对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用Math中的成员。
Math.PI//圆周率
Math.floor () //向下取整
Math.ceil () //向上取整
Math.round() //四舍五入版就近取整 注意-3.5 结果是-3。
Math.abs () //绝对值
Math.max () //Math.min() 91求最大和最小值。
Math数学对象不是个构造函数，所以我们不需要new 来调用而是直接使用里面的属性和方法即可。
例子1：Math最大值方法
console.log(Math.PI); //一个属性圆周率
console.log(Math.max(1, 99， 3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.max(1, 99,'陈浩南')); // NaN
console.log(Math.max()); // - Infinity
例子2：Math对象取随机数方法
console.1og(Math. random());
// 4.我们想要得到两个数之间的随机整数并且包含这2个整数
// Math.floor(Math . random()*(max-min+1))+min;
function getRandom(min, max) {
return Math. floor (Math. random() *(max - min + 1))+min;
}
console.log( getRandom(10));
// 5.随机点名
var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维','耗子'];
// console.1og(arr[0]);
console.log(arr [getRandom(1, 10)]);
自己封装数学对象
var myMath{
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath. max(1, 5, 9));
console.log(myMath. min(1, 5, 9));
Date日期对象
Date()日期对象是一个构造函数必须使用new来调用创建我们的日期对象。
注意：
1. 使用Date 如果没有参数返回当前系统的当前时间。
2. 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2020-06-12 4：12：8'。
例子1：调用日期年月日
var arr=newArray();//创建个数组对象
var obj = new Object(); //创建了一个对象实例
var date = new Date ();
console.1og(date);
var date1 = new Date (2019， 10, 1);
console.log(date1); //返回的是11月不是10月
var date2 = new Date('2020-06-12 4：12：8');
console.log(date2);
例子2：格式化日期年月日
//格式化日期年月日
var date = new Date();
console.log(date . getFullYear()); //返回当前日期的年2020
console.log(date. getMonth() + 1); //月份返回的月份小1个月 记得月份+1呦
console.log(date.getDate()); //返回的是几号
console.log(date.getDay()); // 5 周一 返回的是1周六返回的是6但是周日返回的是0
//我们写一个2019年5月1日星期三
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day=date.getDay();
console.log('今天是:'+year+'年'+month+'月'+dates+'日
'+arr[day]);
例子3：封装一个函数返回当前的时分秒,数字补0
console.log(date . getHours()); //时
console.log(date. getMinutes()); //分
console.log(date. getSeconds()); //秒
//要求封装一个函数返回当前的时分秒格式04：12：08
function getTime() {
var time = new Date ();
var h = time.getHours();
h=h<10?'0'+h:h;
var m = time . getMinutes();
m= m<10?'0'+ m: m;
var s = time . getSeconds();
s=s<10?'0'+s:s;
return h +':'+m+':'+s;
}
console.log(getTime());
例子4：获得Date总的毫秒数(时间戳)不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数。
// 1.通过valueOf() getTime( )
var date = new Date();
console. log(date.valueOf()); //就是我们现在时间距离1970.1.1 总的亳秒数
console .1og(date . getTime());
// 2.简单的写法(最常用的写法)
var date1 = +new Date (); //
+new Date()返回的就是 总的毫秒数
console.log(date1);
// 3. H5新增的获得总的亳秒数
console . log(Date . now());
例子5：倒计时
1.核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分减去25分，结果会是负数的。
2.用时间戳来做。用户输入时间总的亳秒数减去现在时间的总的亳秒数，得到的就是剩余。
3.把剩余时间总的亳秒数转换为天、时、分、秒(时间戳转换为时分秒)。
4.转换公式如下:
计算天数:d = parseInt(总秒数/ 60/60 /24);
计算小时:h = parseInt(总秒数/ 60/60 %24)
计算分数: m = parseInt(总秒数/60 %60 ) ;
计算当前秒数:s = parseInt( 总秒数%60);
function conutDown(time ) {
var nowTime = +new Date(); //返回的是当前时间总的亳秒数
var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime-nowTime) / 1000; // time 是剩余时间总的秒数
}
例子6:倒计时转为时分秒状态
function countDown(time) {
var nowTime = +new Date(); //返回的是当前时间总的亳秒数
var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); //天
d = d<10?'0'+ d: d;
var h = parseInt(times / 60 / 60 % 24); //时
h=h<10?'0'+h:h;
var m = parseInt(times / 60 % 60); //分
m= m<10?'0'+m:m;
var s = parseInt( times% 60); //当前的秒
s =s<10?'0's:s;
returnd+'天'+h+'时’+m+'分'+s + '秒';
}
console.log( countDown( '2020-06-12 4：12：8'));
var date = new Date ();
console.log(date);
后文
千里之行，始于足下。后继系列的推出，还仰仗各位童鞋们的多多支持。