js组成部分
javaScriot由三大部分组组成:ECMAScriot(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)
ECMAScript:是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,往往被称为JavaScript或JScript,但两者都是ECMAScript语言的实现和扩展。ECMAScript:规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM:是文档对象模型,是w3c组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面的上的各种元素进行控制操作。
BOM:浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构,可以通过BOM来操作浏览器窗口,如弹出框、控制浏览器跳转、获取分辨率等。
js、JavaScript、java区别
js是JavaScriot的缩写。
JavaScript是浏览器中一种常见的脚本语言,可以实现页面的动态以及和后端的交互
Java和JavaScript是两门不同的编程语言.
js变量的声明
js中设置一个变量需要用 var 关键字来声明。
定义的变量名要以字母为开头也可以以“ _ ”或“ $ ”开头,不能以数子和js系统关键字及保留字名命名。js语句结束后要以“ ; ”结束。
“=“号是把右边的值赋值到左边的变量中
js数据类型
js的数据类型分为两类:
简单数据(Number,String,Boolean,Undefined,Null)
复杂数据(object)
Number 数字型,包括整型值和浮点型值,
Boolean 布尔类型true、false。
String 字符串型,字符串都是带引号的
Undefined 没有赋值的变量如 var a;
Null 声明了变量为空值如var a=null;
数字型的范围:
最大值:Number.MAX_VALUE,这个值为1.7976931348623157e+308
最小值:Number.MIX_VALUE,这个值为5e-32
数字型的三个特殊值:
infinity,代表无穷大,大于任何数值
-infinity,代表无穷小,小于任何数值。
NaN,Not a number ,代表任何一个非数值。
isNaN用来判断一个变量是否为非数字的类型,返回值为true或false
字符串转义符
\n 换行符
\\ 斜杠
’ 单引号
‘’ ”双引号
\t tab缩进
\b 空格,b是 blank 的意思
字符串的长度是由若干字符组成的,这些字符的数量就是字符串的长度。可以通过 length 关键字获取
字符串的拼接
多个字符串之间可以使用+号连接,其拼接方式为
字符串+任意类型=拼接后的新字符串
alert(‘hello’+‘ ’+‘world’); // hello world
布尔值Boolean,由两个值true和false,true表示真false表示假,在进行计算加减时true是1、false是0.
Undefined和Null
一个声明后没有被赋值的变量会由一个默认值undefined。
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
一个声明变量给null值,里面的值为空
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
可以通过 typeof 关键字来获取变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number
数据类型的转换
在使用表单、pormpt获取过来的数据默认是字符串,此时不能进行简单的加法运算,需要转换变量的数据类型。
转换成字符串:
toString() 格式:变量名.toString()
String()强制转换 格式:变量名.String()
转换成数字型:
parselnt(string)函数 将string类型转换成整数数值型
parseFloat(string)函数 将string类型转换成浮点数数值型
Number()强制转换函数 将string类型转换成数值型
转换成布尔型
Boolean()函数 把其他类型转换成布尔值。
代表空、否定的值会被转换成false,如:‘ ’、0、nan、null、undefined
其余值都会被转换为true
运算符
算数运算符:+、-、*、/、%、
递增运算符:++、
递减运算符:--、
比较运算符:<、>、>=、<=、==、!=、===、!==、
逻辑运算符:&&、||、!
赋值运算符:=、+=、-=、*=、/=、%=、
运算符优先级:
小括号 ()
一元运算符 ++ -- !
算数运算符 先*、/ 、后 +、-、
关系元算符 >、>=、<、<=
相等运算符 ==、!=、===、!==
逻辑运算符 先 && 后 ||
赋值运算符 =、
逗号运算符 ,
循环
for循环
语法结构
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
例:
for(var i = 1; i <= 10; i++){
console.log('媳妇我错了~');
}
双for循环
语法结构
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
例:
var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '☆'
}
// 每次满 5个星星 就 加一次换行
star += '\n'
}
console.log(star);
while循环
基础语句
while (条件表达式) {
// 循环体代码
}
1 先执行条件表达式,如果结果为 true,则执行循环体代码;如果为false,则退出循环,执行后面代码
2 执行循环体代码
3 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true,则会继续执行循环体,直到循环条件为 false 时,整个循环过程才会结束
do-while循环
基础语法
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
1 先执行一次循环体代码
2 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如为false,则退出循环,继续执行后面代码
注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码
break、continue、return的区别
break :结束当前的循环体(如 for、while)
continue :跳出本次循环,继续执行下次循环(如 for、while)
return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
流程控制
就是控制代码按照一定的顺序来执行。
流程控制只要有三种结构:顺序结构、分支结构、循环结构。
顺序结构:是程序中最简单、最基本的流程控制,没有特定的语法结构,程序会按照代码先后顺序执行。
分支结构:由上到下执行代码,根据不同的条件执行不同路径的代码。
js提供了两种分支语句: if 语句 和 switch 语句
if语句
基础语法
if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3;
....
} else {
// 上述条件都不成立执行此处代码
}
switch语句
基础语法
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
switch 表达式的值会与结构中的 case 的值做比较
如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整
个 switch 语句代码执行结束
如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码
执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。
switch 语句和 if else if 语句的区别
一般情况下,它们两个语句可以相互替换
switch…case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。
当分支比较少时,if… else语句的执行效率比 switch语句高。
当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。
循环
在js中常用的循环:for循环、while循环;
for循环:
语法结构:
for(初始化变量; 条件表达式; 操作表达式 ){
, //循环体
}
初始变量需要用 var 声明,这个变量是用来记数的
条件表达式用于判断每次循环是否执行,判定返回值为true执行循环体,否则推出循环。
操作表达式,每次执行完循环体后执行的语句,可以用于确定每次循环是否被执行。
双重for循环:
就是在一个for循环里再定义一个for循环语句的语法结构,
语法结构:
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
内层循环时外层循环的循环体,执行的顺序没有变,外层循环执行一次内层循环就要执行一会全部次数
for循环可以重复执行一些重复的代码和重复的操作,也可以执行一些不同的代码,
while循环:
do-while循环
语法结构:
do{
//循环体代码,条件表达式为true时重复执行此循环体代码
}while(条件表达式);
先执行一次循环体代码再执行条件表达式判定是否循环。
这个几结构的循环,循环体至少执行一次。
continue、break
contiune关键字可以立即跳出本次循环,继续执行下一次循环contiune后面的代码也不会执行。
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('这个包子有虫子,扔掉');
continue; // 跳出本次循环,跳出的是第3次循环
console.log('丢进垃圾桶')
}
console.log('我正在吃第' + i + '个包子');
}
结果:
我正在吃第1个包子
我正在吃第2个包子
这个面包有虫子,扔掉
我正在吃第4个包子
我正在吃第5个包子
break 关键字可以立即跳出整个循环,直接结束循环。
数组
概念:可以把一组相关数据存放到一起,并提供方便的访问(获取)方式。数组中可以存放任何类型的数据。
创建:
js中数组的常见有两种方式:
利用 new 创建
var 数组名 = new Array();//Array 的a要大写
var arr = new Array();
利用数组字面量创建数组
var 数组名 = [];//创建空数组
var 数组名 = ['安','零','回'];//创建带有初始值的数组
数组名的格式同变量命名的格式
操作:
数组中的元素都是有下标(索引值)的,下标从0开始。
var arr = ['安','零','回'];
索引号: 0 1 2
数组可以通过索引值来访问、设置、修改对应数组元素,“数组名[索引号]”。
数组的遍历可以一般用循环方法。
var arr = ['阿文','12存放','猎手','西安'];
for(var i=0;i<=arr.length;i++){
console.log(arrStus[i]);
}
数组长度:
数组的长度默认都是数组中元素的个数。可以用length关键字来获取。格式:数组名.length
数组的length属性可以修改,如果设置的length属性值小于数组的元素个数组会把超出的部分删除;如果设置的length属性值大于数组的元素个数,则会在数组末尾出现空表元素。
数组[数字名.length] = 新数据;可以在数组的末尾插入新元素。
函数
数组的长度默认都是数组中元素的个数。可以用length关键字来获取。格式:数组名.length
概念:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
使用:
基本格式:
// 声明函数
function 函数名() {
//函数体代码
}
//function是声明函数的关键字,必须小写。
函数的调用:
函数名();//函数不去调用不会执行。
匿名函数:
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
参数:
参数 | 说明 |
---|---|
形参 | 形式上的参数,函数定义的时候传递的参数,当前没有值 |
实参 | 实际上的参数,函数调用时传递的参数,实参值传给形参。 |
参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
形参和实参数量必须一致,否则会发生错误。参数可以没有。
参数个数 | 说明 |
---|---|
实参个数等于形参个数 | 输出正确结果 |
实参个数多于形参个数 | 只取到形参的个数 |
实参个数小于形参个数 | 多的形参定义为undefined,结果为NaN |
函数的返回值:
返回值就是函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回 。
return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的
代码
function 函数名(){
...
return 需要返回的值;
}
函数名(); // 此时调用函数就可以得到函数体内return 后面的值,若是没有return返回值就是undefined
内置对象
JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
JavaScript 提供了多个内置对象:Math、 Date 、Array、String等
Math 对象
Math 对象不是构造函数,它具有数学常数和函数的属性和方法。
属性、方法名 | 功能 |
---|---|
Math.PI | 圆周率 |
Math.floor() | 向下取整 |
Math.ceil() | 向上取整 |
Math.round() | 四舍五入 |
Math.abs() | 绝对值 |
Math.max()/Math.min() | 最大值/最小值 |
manth.random() | 随机值(0,1)范围 |
//获取指定范围里的随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
日期对象 Date
Date 对象和 Math 对象不一样,Date是一个构造函数,所以使用时需要实例化后才能使用其中具
体方法和属性。
var now = new Date();//实例化:
var future = new Date('2019/5/1'); //获取指定时间的日期对象
方法名 | 说明 |
---|---|
getFullYear() | 获取当年 |
getMonth() | 获取当月(0-11) |
getDate() | 获取当天日期 |
getDay() | 获取星期几(周0到周6) |
getHours() | 获取当前小时 |
getMinutes() | 获取当前分钟 |
getSeconds() | 获取当前秒数 |
数组对象 Array
instanceof可以判断一个对象是否是某个构造函数的实例
Array.isArray()可以用于判断一个对象是否为数组, Array.isArray(arr);
push(参数1…) 末尾添加一个或多个元素,影响原数组。返回新的长度
pop() 删除数组最后一个元素,把数组长度-1,无参数,修改原数组,返回修改的元素的值
unshift(参数1…) 向数组的开头添加一个或更多的元素,修改原数组,返回新的长度
shift() 删除数组的第一个元素,数组长度减1无参数,修改原数组,返回第一个元素的值
reverse() 颠倒数组中的元素的顺序,无参数,改变原数组,返回新数组
sort() 对数组的元素进行排序,改变原数组,返回新数组。
indexOf() 数组中查看给定元素的第一个索引,存在返回索引,否则返回-1.
lastindexOf() 在数组中的最后一个索引,存在返回索引,否则返回-1.
concat() 连接两个或多个数组,不影响元数组。返回一个新数组
slice() 数组截取slice(begin,end) ,返回被截取项目的新数组。
splice() 数组删除splice(第几个开始,要删除几个),影响原数组,返回被删除项目的新数组。
字符串对象 String
字符串不可变是指里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,在内存中开辟了一个内存空间。当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中,只会重新开辟一块新的空间,由于字符串的不可变,在大量拼接字符串的时候会有效率问题。
indexOf(‘要查找的字符’,开始的位置) 返回指定内容在字符串中的位置,没有找到返回-
lastlndexOf() 从后往前找,只找第一个匹配的,
charAt(index) 返回指定位置的字符(index 字符串的索引号)
charCodeAt(index) 返回指定位置的字符的ASCI码(index 索引号)
str[index] 获取指定位置的字符
concat(str1,str2,…) 用于连接练两个或多个字符串,等效与+
substr(start,length) 从start位置起(索引号),取length个元素,默认是到最后一个位置,返回截取内容
slice(start,end) 从start位置起截取到end位置,end不截,返回截取内容如果是负数,则该参数规定的是从字符串的尾部开始算起的位置,
substring(start,end) 从start位置起截取到end位置,end不截,返回截取内容,但不接受负值
replace 用于在字符串中用一些字符替换成另一些字符,字符串’replace’别替换掉的字符,要替换为的字符,
split() 用于切割字符串,将字符串切分为数组,返回一个新的数组,字符串.replace()
简单和复杂数据类型
简单数据类型
概念:在储存时变量中的值时本身,包括string、numder、bloodean、undefined、null、
函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是
把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。
复杂数据类型
概念:在存储时变量中存储的仅仅是地址(引用),通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等;
函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里
保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。