初识javascript
JavaScript介绍
是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。作用:
-
网页特效
-
表单验证
-
数据交互
-
服务端编程(node.js)组成:
-
ECMAScript:规定语法
-
Web APIs:
-
Dom:操作文档
-
Bom:操作浏览器
-
写法:
<-- 行内式 --> <input type="button" value="三峡大学" οnclick="alert('欢迎你')"> <!-- 内嵌式 --> <script> alert('Hello') // 单行注释 ctrl+/ /* 多行注释 咋还备案 shift+alt+A */ // 输入 prompt('请输入年龄'); // 输出 alert('计算结果'); // 控制台输出 console.log('控制台打印'); </script> <!-- 外链式引入 --> <script src="./试用.js"></script>
变量
变量是计算机存储数据的“容器”,申请空间,存放数据:注意变量指的是容器而不是数据。
变量使用
<script> // 声明了一个age的变量 var age; // 赋值 age = 10;//等号是赋值 // 输出结果 console.log(age); // 变量的初始化 var myname = 'yyh'; console.log(myname); // 弹出页面显示 var user_name = prompt('请输入你的名字:'); </script>
声明多个变量,逗号隔开
<script> var a=2,b=3,c=4; </script>
特殊情况:
-
只申明,不复制:Undefined
-
不声明,不赋值:报错
-
不声明,只赋值:允许,成为全局变量
变量命名规则与规范
规则:
-
不能用关键字
-
只能用下划线、字母、数字、$组成,且数字不能开头,不能有空格
-
字母严格区分大小写
规范:
-
起名要有意义
-
小驼峰命名法
-
第一个单词首字母小写,后面每个单词首字母大写。例:userName
-
name不会报错,但是少用;
数据类型
Js变量数据类型是程序运行过程中根据等号右边的值来确定的
Js是动态语言,数据类型可以变化
-
基本数据类型
-
引用数据类型
-
number 数字型
-
string 字符串型
-
boolean 布尔型
-
undefined 未定义型
-
null 空类型
-
<script>//数字型 var p;//不确定 var a=4;//数字型 var a='ajfh';//字符串型 var num = 10; //1.八进制 0·7 前面加0 var num1 = 010; console.log(num1);//输出答案是10进制的 //2. 十六进制 0·9 a-f 前面加0x // 最大值 console.log(Number.MAX_VALUE); //最小值 console.log(Number.MIN_VALUE); // 无穷大、小 console.log(Number.MAX_VALUE*2);//Infinity console.log(-Number.MAX_VALUE*2);//-Infinity // 非数字 console.log('yyh'-100);//NaN // 判断非数字 console.log(isNaN(12))//False console.log(isNaN('你好'));//Ture </script>
引号写法,外双内单,外单内双;
\n换行;\b空格
// 字符串长度 var str = 'My name is yyh' console.log(str.length); // 拼接,只要字符串和其他类型拼接,结果是字符串 // 数值相加,字符串相连 console.log('123'+"345");//123345 console.log('我'+13);//我13 console.log(12+12);//24 console.log('12'+12);//1212 // 1.弹出输入框 var age = prompt('输入年龄:'); // 内部处理显示 var str = '你今年已经' + age + '岁了'; // 结果返回给用户 alert(str); // 未定义变量undifined var space = null; console.log(space + '123');//null123 console.log(space+1);//1 // 空值null var difi = undefined; console.log(difi + '123');//undifined123 console.log(difi + 123);//NaN,非数字; // 布尔值true=1;false=0,可以进行加减;
数据类型的检测
var num = 10; console.log(typeof num); var timer = null; console.log(typeof timer);//object 对象
prompt取过来的值是字符型
转换为字符型
var num = 10;
-
变量.toString()
-
-
var str = num.toString();
-
-
利用string()函数,大写
-
-
console.log(String(num));
-
-
拼接,加号,隐式转换
-
-
console.log(num+'yyh');
-
console.log(parseInt(3.94));//3 console.log(parseInt('120px'));//120 console.log(parseInt('adb120px'));//NaN,第一个不是数字,从左往右读 //得到浮点数 console.log(parseFloat('3.14'));//3.14 console.log(parseFloat('120px')); //120 console.log(parseFloat('ere120px')); //NaN //number var str = '123'; console.log(Number(str)); console.log(Number('123')); //算术运算————隐式转换 - / * ,加不行 console.log('12'-5); console.log('134' - '23');
转换成布尔值
// 空的,否定的转换成False // 空、0、NaN、null、undefined,只有这五个 console.log(Boolean(''));//false,空 console.log(Boolean(' '));//ture,空格 console.log(Boolean('yfh'));
解释型语言VS编译型语言=java VS javascript
-
标识符: 变量、属性、函数、参数取的名字(避免关键字或者保留字)
-
关键字:int float while
-
保留字:预留的关键字,不能作为变量和方法名 boolean
运算符
简介
operator /操作符 用于实现赋值、比较、执行算术运算等功能的符号
算术运算符
console.log(1 + 3); //4 console.log(4 - 7); //-3 console.log(1 * 1); //1 console.log(1 / 1); //1 console.log(4 % 2); //取余 0 console.log(5 % 3); //2 //浮点数,出现精度问题 console.log(0.1 + 0.2); //0.3000000000000004 console.log(0.07 * 100); //7.000000000000001 var num = 0.1 + 0.2; console.log(num == 0.3); //False
优先级: 先乘除后加减,有括号先算括号里面的
递增和递减运算符
前置自增和后置自增独立使用时二者并没有差别!后置自增:先返回原值,后加一
var a = 10; ++a; //表达式是11,a也是11 var b = ++a + 2; //b=14 a=12 var c = 10; c++; //c++=11 c=11 var d = c++ + 2; //d=13 c=12 var e = 10; var f = e++ + ++e; //e=11——f=22——e=12
前后置自增的区别
-
前置:先自增后运算
-
后置:先运算后自增
-
自减同理..
比较运算符
//= 赋值 //== 默认转化数据类型,可以比较 //只判断值相等 console.log(18 == '18'); //ture //不等于 console.log(18 != 18); //False //全等于 === 值和数据类型完全一致 console.log(18 === '18'); //False
逻辑运算符
&&与 ||或 !非
-
&& 一假就假
-
|| 两假才假
-
!!true=false
//布尔值参与 console.log(3 > 5 || 3 < 2); //False console.log(!true); //False //逻辑 中断==短路 //1、与 //如果表达式1结果为真,则返回表达式2 console.log(123 && 456); //456 //如果表达式1为假,则返回表达式1 console.log(0 && 123); //0 console.log(0 && 1 + 2 && 456); //短路,直接返回0 console.log('' && 1 + 2 && 456); //短路,直接返回0 //2、或 //如果表达式1为真返回表达式1 console.log(123 || 234); //123 //如果表达式1为假,一次返回后续表达为真的 console.log(0 || 234 || 456 + 3); //234 //案例 var num = 0; console.log(123 || num++); //123 console.log(num); //0,后面的没有执行
赋值运算符
//表达式 返回值 //2 = 1+1; var num = 1+1; num += 2; //每次自加2 num *= 5; //num=num*5,每次自乘5
将等号右边的值赋予给左边, 要求左边必须是一个容器
运算符优先级
-
逻辑运算符优先级最低
-
先算括号
-
单目优先于双目,全等也最大
流程控制
流程控制
-
顺序结构:依次执行
-
分支结构:根据条件判断执行(if、switch)
-
循环结构:重复执行一些语句
分支流程控制if
If单分支
//语法结构if (条件表达式) {执行语句;}//满足条件表达式,执行大括号的语句
双分支
//语法结构if (条件表达式) { 执行语句1;} else { 执行语句2;}//满足条件表达式,执行大括号的语句1,否则执行语句2
//1.获取用户输入的值 //2.比较 //3.输出满足条件的 //4.否则输出的语句 var age = prompt(''); if (age >= 18) { alert('去网吧'); } else { alert('作业') }
案例
//1.弹出输入框 //2.判断是否是闰年 //3.是闰年执行输出 //4.不是闰年执行else var year = prompt('年份:'); if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { alert('闰年'); } else { alert('平年'); }
多分支
if (条件表达式1) { 执行语句1;} else if (条件表达式2) { 执行语句2;} else if (条件表达式3) { 执行语句3;} else { 执行语句4;} //多选一
三元表达
条件表达式?表达式1:表达式2如果条件表达式为真,执行表达式1,为假执行表达式2;
var num = 10; var result = num > 5 ? '是的' : '不是的'; console.log(result);
分支流程控制switch
switch:转换、开关;case:小例子、选项;Break:退出;从表达式中找到value,执行相关语句,如果都匹配不上,执行default里面switch (表达式) { case value1: 执行语句1; break; case value2: 执行语句2; break; ... default: 执行最后的语句;}
注意事项:
-
表达式通常是变量;
-
表达式和case里的值全等,数值和类型一样;
-
Break如果当前的case里面没有break则不会退出switch,继续执行下一个case,直到break/break;
区别:
-
固定值判断用switch,判断范围用if else if;
-
可以相互替换
-
switch效率高,If else 从上往下,判断次数多
-
分支少用if,分支多用switch;
for循环
重复执行某些代码;通常跟计数有关for (初始化变量; 条件表达式; 操作表达式) { //循环体}
-
初始化变量:用var申明的一个计数器
-
条件表达式:终止的条件
-
操作表达式:每次循环最后执行的代码,对计数器进行更新i++
//后置循环 for (var i = 1; i <= 100; i++) { console.log('yyh'); }
执行步骤:
-
先执行i=1(只执行一次) index
-
在i<=100判断是否满足条件,如果满足就执行循环体,不满足退出循环
-
最后执行i++ 递增 第一轮结束
-
第二次循环,继续判断I<=100,如果满足就执行循环体,不满足退出循环,以此循环
双重for循环
for (外层初始化变量; 外层的条件表达式; 外层的操作表达式) { for (里层初始化变量; 里层的条件表达式; 里层的操作表达式) { //执行语句 }}
-
里层循环是外层循环的循环体;
-
外层循环一次,里层全部循环;
//99乘法表 var str=''; for(var i=1;i<=9;i++) { for(var j=1;j<=i;j++) { str+=j+'*'+i+'='+i*j;//公式 str+='\t';//空格 } str=str+'\n';//换行 } console.log(str);
while循环
while (条件表达式) { //循环体}当条件表达式为正的时候,执行循环体,否则退出循环
var num=1; while(num<=100) { console.log('yyh'); num++; }
do while循环
先执行一次循环体,再判断条件如果表达式为真,继续执行循环体,否则退出
-
至少执行一次
var i=1; do { console.log('yyh');//循环体 i++; } while (i<=100);
continue break区别
-
continue:退出本次循环,进入下次循环
-
break:退出整个循环代码规范:函数命名用动词,自变量命名用名词;注释后加空格
数组
创建数组
数组的概念:数组(Array)是一种可以按顺序保存数据的集合创建数组方式:
-
new方法:arr = new Array();//创建一个名为arr的空数组
-
利用数组自面量创建数组:
var arr2 = [1,2,3,'yyh','nh'];//0开始 console.log(arr2[3]);//yyh
1.方括号2.声明数组并赋值3.逗号隔开,里面可以放数字,字符串,空值等数组元素4.数组元素类型无限制数组索引从0开始:0.1.2.3...索引方式:或取索引号为3的'yyh'
遍历数组中的元素
用循环把数组中每个元素从头到尾访问一遍,一般会用for循环遍历
var arr3 = ['A','B','C','D']; for (var i=0;i<4;i++) { console.log(arr3[i]); } //索引从0开始i=0;i<4 //输出时i计数器作为索引 var arr=['刘备','关羽','张飞','姜维','诸葛亮','周瑜','曹操','孙权']; console.log(arr.length); for (var i=0;i<arr.length;i++) { console.log(arr[i]); } //array.length 动态监测数组元素个数
数组中新增元素
-
通过修改数组长度,empty表示空值
-
通过修改索引号,原来的数替换,长度不变
//数组中新增元素;依次存入从1开始的100个数 //申明空数组 //计数器,作为数组元素存入 //从1开始,计数器要加1 var arr = []; for (var i=0;i<100;i++) { arr[i]=i+1; } console.log(arr);
//筛选数组大于等于10 //声明新数组,放大于10;遍历;依次追加给新数组 var arr1=[2,3,4,5,6,7,8,8,122,13,1,2,45,67,89,64]; var newArr=[]; var j=0;//newArr的计数器 for (var i=0;i<arr1.length;i++) { if (arr1[i]>=10) { newArr[j]=arr1[i]; j++;//存一次加一次 } } console.log(newArr); //筛选数组方法2 var arr1=[2,3,4,5,6,7,8,8,122,13,1,2,45,67,89,64]; var newArr=[];//数组长度为0 var j=0;//newArr的计数器 for (var i=0;i<arr1.length;i++) { if (arr1[i]>=10) { newArr[newArr.length]=arr1[i]; //新数组初始长度为0,给初始长度索引赋值; } } console.log(newArr); //数组索引反转案例 var arr1=[]; for (var i=arr.length-1;i>=0;i--) {//i--,初始值为长度 arr1[arr1.length] = arr[i]; } console.log(arr1);
数组案例
冒泡排序
冒泡排序是一种简单的排序算法。一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到不再需要交换,数列已经排序完成。这个算法的名字由来是因为越小的元素会慢慢浮到数列的顶端。
//5,4,3,2,1 //第一轮交换4次;第二轮交换3次;第三轮交换2次;第四轮交换1次 var arr=[5,4,3,2,1]; for (var i=0;i<=arr.length-1;i++) {//外层循环——轮数,长度-1 for (var j=0;j<=arr.length-1-i;j++) { //里层控制每轮内交换 arr.length-1-i //前面一个和后面一个相比较 if (arr[j]>arr[j+1]) { var temp =arr[0]; temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; } } } console.log(arr);
函数
函数的使用
function ;封装执行特定任务的代码块封装:打包,放在一起便于调用;声明函数:function 函数名(形参1,形参2,形参3...) { //函数体 //形参:形式上的参数,声明要用}
-
function 声明函数的关键字
-
函数名一般是动词
-
函数不调用,自己不执行
调用函数:函数名(实参1,实参2...);//实参 实际参数,调用时要用到
函数参数 案例
//求两数之间所有数累加和 function getSum1(start,end) { var sum=0; for (var i=start;i<=end;i++) { sum += i; } console.log(sum); } getSum1(4,10);
实参个数小于形参个数,结果为NaN,因为形参默认undefined;多了不报错;尽量个数匹配
函数的返回值
只要遇到return,就把结果返回(赋值)给函数调用者; 函数名()= return 后面的结果;function 函数名() { return 需要返回的结果;}函数名();
function getSum(num1,num2) { return num1+num2; } console.log(getSum(3,4)); function getMax(num1,num2) { return num1>num2?num1:num2; } console.log(getMax(1,2));
//求最大值 function getArray(arr) { var max = arr[0]; for (var i = 1; i <= arr.length; i++) { if (arr[i]>max) { max=arr[i]; } } return max; } // getArray([2,3,4,5,56,35,24,4,1]);//实参以数组形式输入 var result = getArray([2,3,4,5,56,35,24,4,1]); console.log(result);
return 最终只能返回一个值(最后一个),用数组可以放多个
function getReult(num1,num2) { return ([num1+num2,num1-num2,num1*num2,num1/num2]); } var re=getReult(4,1); for (var i=0;i<=re.length;i++) { console.log(re[i]); } // console.log(re);
函数如果有return,返回return后面的值,如果没有返回undefined
arguments 的使用
arguments 里面存储所有的实参,它以伪数组形式展示伪数组:不是真正的数组
-
具有数组长度特性
-
按照索引方式存储
-
没有真正数组的方法 pop() push()
function fn() { console.log(arguments); console.log(arguments.length); console.log(arguments[2]); //数组的方式遍历argument for (var i=0;i<=arguments.length;i++) { console.log(arguments[i]); } } fn(1,2,3,4,5);
函数案例
//数组翻转 function reverse(arr) { var newArr=[]; for (var i=arr.length-1;i>=0;i--) { newArr[newArr.length] = arr[i]; } return newArr; } var arr1=reverse([1,2,34,223,42,34]); console.log(arr1); //冒泡排序sort function sort(arr) { for (var i=0;i<=arr.length-1;i++) { for (var j=0;j<=arr.length-1-i;j++) { if (arr[j]<arr[j+1]) { var temp = arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; } } } return arr; } var arr1=sort([1,2,3,1,2,54,63,2,35,32,4,76]); console.log(arr1); var arr2=sort([12,325,1,235,4,3]); console.log(arr2); //闰年 function isRunYear(year) { //润年返回ture,不是false; var flag = false; if (year%4==0&&year%100!=0||year%400==0) { flag=true; } return flag; } console.log(isRunYear(1245)); //2月天数 function backDay() { var year = prompt('输入年份:'); if(isRunYear(year)) { alert('29天'); } else { alert('28天'); } } backDay();
//函数调用另外一个函数 function fn1() { console.log(11); fn2();//fn1调用fn2 } fn1(); function fn2() { console.log(22); }
函数的两种声明方式
1.函数关键字命名函数 :
-
function fn() {
console.log('方法一'); }2.函数表达式,匿名函数;
-
var 变量名 = function() { };
-
fun是变量名,不是函数;
-
函数表达式也可以传参;
var fun=function(agd) { console.log('方法二'); console.log(agd); } fun('尹永红');
作用域
-
概念:变量在某个范围内起到作用和效果,为了提高程序的可靠性,减少命名冲突;
-
分类:js作用域(es6)之前;全局作用域 局部作用域
-
全局作用域:作用于整个script标签或者js文件内;
-
局部作用域:只在函数内部起作用,又叫函数作用域;
-
var num=10;//全局作用域 console.log(num); function fn() { var num = 20;//局部作用域 console.log(num); } fn(); //10 20
变量的作用域
根据作用域的不同,分为:
-
全局变量:全局声明
-
函数内部没有声明直接赋值的变量也叫叫全局变量
-
浏览器关闭时销毁,占内存
-
-
局部变量:
-
函数内部用Var声明的,只能在函数内部使用;
-
函数形参也是局部变量
-
代码执行完毕销毁,节约内存
-
-
块级作用域:{} 内有效
-
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问;
-
es6有块级作用域
-
作用域链
概念:内部函数访问外部函数的变量,链式查找决定取那个值方法:采取就近原则的方式来查找变量最终的值(从内到外)
域解析
js引擎运行Js程序:1.预解析:预解析时会把所有的声明(var、function)提升到当前作用域的最前面
-
变量预解析:变量提升,但不提升赋值
-
函数预解析:函数提升把函数申明提升到当前作用域的最前面,不调用函数
-
注意:函数调用必须要在函数声明的下面
2.执行代码:按照代码书写的顺序从上往下执行
f1(); console.log(c); console.log(b); console.log(a); function f1() { var a=b=c=9; console.log(a); console.log(b); console.log(c); } //相当于以下执行步骤 function f1() { var a; a=b=c=9; // 相当于 var a=9;b=9;c=9;b和c直接赋值,没有var声明,当作全局变量 // 集体声明 var a=9,b=9,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 报错;
对象
对象是一个具体的事物,js中对象是一组无序的相关属性和方法的集合。如:字符串、数值、数组、函数。
-
属性:事物的特征,对象中用名词
-
方法:事物的行为,对象中用动词
创建对象的三种方法
键值对创建 键:属性名 值:属性值
1.利用字面量创建对象
//var obj = {};//创建了一个空的对象 var obj = { uname:'yyh', age:22,//逗号隔开 sex:'女',//对象的属性 sayHi: function() {//对象的方法,可以跟函数 console.log('hi~'); } } //调用对象的属性 两种方法 console.log(obj.uname); console.log(obj['age']); //调用对象的方法 sayHi obj.sayHi();//有函数,调用加括号
-
变量和属性相同点,都是用来存储数据
-
变量要声明并赋值,可直接使用,单独存在
-
属性 在对象里不需要声明,使用:对象.属性
-
-
函数和方法都是实现某种功能 做某件事
-
函数单独申明并且调用 单独存在
-
方法在对象里面 调用时:对象.方法()
-
-
构造函数和对象:利用构造函数创建对象的过程叫做对象的实例化
-
构造函数:泛指某一大类 class
-
对象:实例 特指某一具体事务
-
2.new Object创建对象
var obj = new Object();//创建一个空对象 obj.uname = 'yyh'; obj.age=22; obj.sex='女'; obj.sayHi = function () { console.log('hi~'); } console.log(obj.uname);//调用时一样 console.log(obj['sex']); obj.sayHi();
3.构造函数创建对象
把对象里面相同的属性和方法抽象出来封装进函数里,前面两种只能创建一个对象
-
语法格式:function 构造函数名() { this.属性 = 值; this.方法 = function () { }}
-
调用:new 构造函数名();
function Star(uname,age,sex) { this.uname = uname; this.age = age; this.sex = sex; this.sing = function(sang) { console.log(sang); } }//调用函数返回对象 var yyh = new Star('李易峰',23,'男'); var dzw = new Star('王俊凯',22,'男'); console.log(typeof yyh);//object console.log(yyh.uname); console.log(yyh['sex']); yyh.sing('剩下的盛夏') console.log(dzw); console.log(dzw.age); console.log(dzw.uname); dzw.sing('和你在一起');
注意事项:
-
构造函数首字母大写
-
不需要return可以返回结果
-
必须要用new,属性和方法前必须加this
-
只要new Star调用函数就创建一个对象
new 关键字的执行过程
-
new 构造函数可以在内存中创建一个空的对象
-
this 会指向刚才创建的空对象
-
执行构造函数里面的代码,给这个空对象添加属性和方法
-
返回这个对象(所以构造函数中不需要return)
遍历的对象属性
for in 遍历对象 for (变量 in 对象) { }
for (var k in obj) { console.log(k);//k 变量 输出的是:属性名 console.log(obj[k]);// obj[k] 得到 : 属性值 }
内置对象
JavaScript 中的对象:
-
自定义对象 ECMA Script
-
内置对象:
-
JS自带的一些对象,供开发者使用,并提供常用的功能(属性和方
-
如:Math Data Array String等
-
-
浏览器对象 JS API
查阅文档:
-
MDN:
-
Math 数学对象不是一个构造函数,不需new来调用,直使用
-
出现非数字格式,NaN
-
-
W3C
Math对象
console.log(Math.abs('-1'));//隐式转换 //1.Matn.floor 向下取整 console.log(Math.floor(2,3));//2 console.log(Math.floor(2,9));//2 //2.Math.ceil (天花板) 向上取整 console.log(Math.ceil(2.3));//3 console.log(Math.ceil(2.9));//3 //3.Math.round 四舍五入 console.log(Math.round(2.3));//2 console.log(Math.round(2.9));//3 console.log(Math.round(-2.5));//-2 .5往大取
获取随机数 random()
-
左闭右开
-
不跟参数
得到两个数之间的随机整数,包含两个数
//1.随机 Math.random() 方法 //2.猜对为止,需要循环 //3.while循环 //4.核心算法: if else if else判断区间 function getRandom(min, max) {//封装 min = Math.ceil(min);//最大值向上取整 max = Math.floor(max);//最小值向下取整 return Math.floor(Math.random() * (max - min + 1)) + min; //含最大 } var random=getRandom(1,10); while (true) { var num=prompt('猜1-10:'); if(num>random) { alert('大了'); } else if (num<random) { alert('小了') } else { alert ('对了~'); break; } }
日期对象
Date() 日期对象 是一个构造函数 必须使用new来调用
-
参数常用写法
-
数字型 2019,10,01
-
字符串型 '2019-10-1 8:8:8'
-
var date1 = new Date(2022,08,06); var date2 = new Date('2022-01-02 08:08:08'); console.log(date1);//返回默认格式 console.log(date2); var date = new Date();//系统时间 //Sun Aug 07 2022 16:26:25 GMT+0800 (中国标准时间)
//格式化日期 年月日 var date = new Date();//调用日期对象并赋值 console.log(date.getFullYear());//当前年 console.log(date.getMonth());//月 console.log(date.getDate());//日 console.log(date.getDay);//星期 周日返回0 //2022年8月6日 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]);
注意:周日返回的是0;时分秒:
var date = new Date(); console.log(date.getHours());//时 console.log(date.getMinutes());//分 console.log(date.getSeconds());//秒 //封装函数 返回当前 时分秒 00:00:00、 function getTime() { var time = new Date(); var hour = time.getHours(); hour = hour<10?'0'+hour:hour; var minute = time.getMinutes(); minute = minute<10?'0'+minute:minute; var second = time.getSeconds(); second = second<10?'0'+second:second;//格式正确 return hour+':'+minute+':'+second;//00:00:0 不对 } console.log(getTime());
获取毫秒数:距离1970年1月1日 时间戳
console.log(date.valueOf()); console.log(date.getTime()); //常用写法 var date1= +new Date();//+new Date() 表示返回当前总的毫秒数 //H5新增 console.log(Date.now());
案例——倒计时
//1.倒计时=输入的时间-现在的时间 ,不能直接减 //2.时间戳。 换算为毫秒数转换 //3.剩余时间的毫秒数转换为时间格式 // 天 = parseInt(总秒数/60/60/24); // 时 = parseInt(总秒数/60/60%24); // 分 = parseInt(总秒数/60%60); // 秒 = parseInt(总秒数%60); 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; return d+'天'+h+'时'+m+'分'+s+'秒'; } console.log(countDown('2023-4-1 12:00:00'));
数组对象
案例:
//反转数组 function reverse(arr) { var newArr = []; for (i=arr.length-1;i>=0;i--) { newArr[newArr.length] = arr[i]; } return newArr; } //修改版反转数组 function reverse(arr) { if(arr instanceof Array) {//(Array.isArray(arr)); var newArr = []; for (i=arr.length-1;i>=0;i--) { newArr[newArr.length] = arr[i]; } return newArr; } else { return '必须是数组格式![1,2,3]' } console.log(reverse([1,2,3,4,5,6])); console.log(reverse(1,2,3));//输入的不是数组,返回空数组 //再次修改反转数组 精简版 var arr5 = [1,2,3,45,6]; arr5.reverse(); console.log(arr5);
检测是否为数组:
-
instanceof 运算符
var arr4 = []; var obj = { }; console.log(arr4 instanceof Array); console.log(obj instanceof Array);
-
arr.isArray();// ie9以上支持
console.log(Array.isArray(arr4)); console.log(Array.isArray(obj));
数组元素操作:
-
添加数组元素 返回数组长度
-
push 在数组末尾添加元素
-
unshift 开头添加
-
//push 在数组末尾添加元素 var arr = [1,2,3]; arr.push(4,'yyh'); console.log(arr.push(4,5));//返回数组长度 console.log(arr);//返回数组 //unshift 开头添加 arr.unshift(0);//返回数组的长度 console.log(arr);
-
删除数组元素 :均返回被删除的元素;括号里没有元素;删除后数字发生变化;一次只删一个;
-
pop():删除数组的最后一个元素
-
shift() 删除最前面的
-
console.log(arr.pop());//返回最后一个 console.log(arr); console.log(arr.shift());//返回第一个 console.log(arr);
-
数组反转:arr5.reverse();
-
参考数组反转
-
-
数组排序:arr3.sort();
-
按照位数排序,不准确
-
参考冒泡排序
-
//盗版版非冒泡排序 var arr3 = [1,2,12,3,41,1]; arr3.sort();//按照位数排序,不准确 console.log(arr3); //精简版 冒泡排序 var arr4 = [13,23,432,54,2,43]; arr4.sort(function(a,b) { return a-b;//升序排列 return b-a;//降序排列 }); console.log(arr1);
-
返回数组索引号:indexOf(从前往后)lastIndexOf(从后往前)
-
只返回第一个满足条件的索引号
-
如果找不到元素,返回-1
-
var arr = [1,2,3,4,5,6,1,2,32,43,531,4,3]; console.log(arr.indexOf(3));//2 console.log(arr.lastIndexOf(4));//11
-
去除重复元素
//遍历旧数组,用旧数组查询新数组,如果元素在新数组中没有,添加该元素,否则不添加 //判断是否存在: 新数组.indexOf(数组元素) 如果返回-1,则新数组里面没有该元素 //封装一个去重的函数 function unique(arr) { var newArr = []; for (var i=0;i<=arr.length-1;i++) { if (newArr.indexOf(arr[i]) === -1) { //如果返回-1,说明在新数组没有 newArr.push(arr[i]); //将该数添加到新数组里 } } return newArr; } var arr1 = unique([1,2,3,2,4,2,42,4,1,54,6,2]); console.log(arr1);
字符串对象
-
数组转化成字符串
-
arr1.toString()
-
arr2.join('&')
-
var arr1 = [1,2,3,4]; console.log(arr1.toString());//1,2,3,4 var arr2 = [1,2,3]; console.log(arr2.join());//1,2,3 console.log(arr2.join('-'));//1-2-3 console.log(arr2.join('&'));//1&2&3
-
其他
-
concat() 连接两个数组,返回一个新数组
-
splice(begin,end) 返回截取去项目的新数组
-
splic(从第几个开始,要删除几个数) 返回被删除的新数组 影响原数组基本包装类型:把简单数据类型包装为复杂数据类型
-
// 1.把简单数据类型包装为复杂数据类型 var temp = new String('yyh'); // 2. 赋值给我们申明的字符变量 str = temp; // 3. 销毁临时变量 temp = null;
JS提供三种特殊引用类型:String、Number 、Boolean;字符串的不可变性:字符串内容改变,其实是地址变了,新开辟了一个内存空间(不要大量拼接字符串),所有方法不会修改字符串本身(另存)
-
字符串返回位置(参考数组返回)
var str = '改革春分吹暗帝,春天来了'; for (var i=1;i<=100;i++) { str+=i; } console.log(str); console.log(str.indexOf('春'));//3 console.log(str.indexOf('春',3));//从3的位置开始查找“春”8
//查找O出现的位置 //indexOf返回的不是-1就继续查找(找不到元素) //一次只能返回一个,所以当前索引加一开始继续查找 var str = 'abcbdbsfgdbsbsfbfdbbbg'; var index = str.indexOf('b'); var num = 0; // console.log(index); while (index !== -1) { console.log(index); num++; index = str.indexOf('b',index + 1);//当前索引号加一 } console.log('b出现的次数' + num);
-
根据位置返回字符
-
charAt(index)
-
charCodeAt(index) 返回Ascll码 判断按键
-
str[index] H5新增
-
var str = 'yyh'; console.log(str.charAt(2));//h //遍历所有字符 for (var i=0;i<str.length;i++) { console.log(str.charAt(i)); } console.log(str.charCodeAt(0));// y 121(码) console.log(str[1]);//y
判断对象里面是否有该属性:对象名[属性名]
案例--统计出现最多的字符次数
// 用CharAt遍历整个字符串 //把每个字符追加给对象,对象已存在+1 //遍历对象,得到最大值和该字符 var str = 'vbxvzzvbzbcbzvbc'; var o = {}; for (var i=9;i<str.length;i++) {//遍历字符 var chars = str.charAt(i);//chars是每个字符串里面的每一个字符 if (o[chars]) {//如果对象里面的字符存在 o[chars]++;//该字符个数加一 } else {//如果对象里面的字符不存在 o[chars] = 1;//该字符个数等于1 } } console.log(o);//{b: 3, c: 2, z: 1, v: 1} //遍历对象 var max = 0; for (var k in o) { //k 得到的是 属性名 //o[k] 得到属性值 if (o[k]>max) { max = o[k]; ch = k; } } console.log(max); console.log(ch);
-
拼接字符串 concat(str1,str2,str3...)
-
截取字符串 substr('起始位置','取几个字符)
-
替换字符串 replace(a,b)a替换为b 只替换第一个字符
-
字符转化为数组 split('分隔符') join:数组转化为字符串
-
toUpperCase() //转换大写
-
toLowerCase() //转换小写
//1.拼接字符串 concat(str1,str2,str3...) var str = 'andt'; console.log(str.concat('red'));//andtred //2.截取字符串 substr('起始位置','取几个字符) var str1 = 'adsbdfsgn'; console.log(str1.substr(2,4));//从索引号2开始取4个 //3.替换字符串 replace(a,b)a替换为b 只替换第一个字符 var str2 = 'yyh'; // console.log(str.replace('y','d'));//dyh //替换全部 循环 while (str2.indexOf('y') !==-1 ) {//判读是字符Y时 str2 = str2.replace('y','*');//把y替换成星号 } console.log(str2);//**h //4.字符转化为数组 split('分隔符') join:数组转化为字符串 var str3 = 'y,y,y'; console.log(str3.spilt(','));//[y,y,h] //连在一起看作一个数组元素
数据类型
-
简单数据类型
-
存放在‘栈’ ,存放的是值
-
var age = 22;
-
-
复杂数据类型
-
var arr = [1,2,3]
-
先在栈里面存放地址,用地址指向堆里面的数据
-
简单数据类型
(基本数据类型、值类型) 在存储时变量中存储值本身——栈string,number,boolean,undefined,null (五大数据类型)null特殊,返回的是空的对象:如果有变量打算存储为对象,但是暂时没有元素,就存储为null值传参:
function fn(a) { a++; console.log(a); } var x=10; fn(x);//调用函数打印的x实际上是a,x本身的值没有变,输出11 console.log(x);//输出10
复杂数据类型
(引用类型)在存储时存储的仅仅是地址 ——堆(和栈存储互不干扰)通过new关键字创建的对象(系统对象,自定义对象)如:Object.Array.Date等;复杂数据类型传参时,通过地址指向堆里的同一个数据,会引起值变化