JS基础知识(上)(变量,条件判断语句,循环语句,函数,对象,数组)
- 引入js文件使用script标签,src属性用于书写引用的地址
- javaScript会把页面上所有的元素标签看成对象
基于对象和事件驱动且相对安全的客户端使用的脚本语言。
使用javaScript的方式: 确定对象,确定属性、确定事件、用js实现功能
变量
- 变量的作用:存储数据(数据分为两种:固定数据和临时数据)
- 固定数据:保存在硬盘中的数据
- 临时数据:保存在内存中的数据
- 变量的使用:数据是保存在内存中的某一区域的,每个区域对应一个内存地址,我们想要使用某个区域中的数据时,就需要找到指定的地址,很不方便,
所有可以使用变量,变量实际上保存的是某个数据的地址,我们使用变量实际上就是使用变量中保存的地址当中的数据。 - 变量的声明:var let const 变量 的类型不定,可变
- 变量的特点:1、一个变量只能存储一个数 2、变量存储的数据是可以改变的
- 变量的命名规则:
- 不能使用关键字和保留字
- 开头可以使用_$英文字母
- 除了开头以外可以使用数字
- 不能包含空格
- 严格区分大小写
- 变量的赋值和初始化:
- 初始化:在变量声明同时进行赋值 var num = 100;
赋值: var num = 100; num = 10; 由于js是弱类型,保存数值型的变量也可以保存其他类型数据。但是我们不推荐这样做,可能会对使用造成不良影响。
- 初始化:在变量声明同时进行赋值 var num = 100;
- 变量的类型:
- 基本数据类型:number boolean null string undefined
- string:使用成对的双引号或者单引号进行包裹,任何字符串的长度都可以通过访问length属性获得
- number:0-9 0.1 NAN(not a number 不是一个数据类型) isNAN(是不是不是数,如果判断的数据类型不是数据则返回true)
Infinity 表示无穷大,超出了js能承受的最大值 -Infinity 表示无穷小 - boolean: true or false
- undefined: defined 未定义
- 出现undefined的情况:
- 已声明未赋值的变量
- 获取对象不存在的属性
- 无返回值的函数的执行结果
- 函数的参数没有传入
- null:空
- 数据类型判断 typeof
- 复杂数据类型(引用数据类型) object
- 基本数据类型保存在栈中,复杂数据类型保存在堆中,对于复杂的数据类型可为其添加属性和方法,也可删除其属性和方法。基本数据类型的变量 直接存储的数据本身 而引用数据类型变量存放的是对象的内存地址。
- 基本数据类型:number boolean null string undefined
- 变量的类型转换
- 转字符串
- 强制转换: 变量.toString() String().变量 注:undefined和null不支持.toString()的转法
- 隐式转换: +” (通过任意类型+任意字符串操作可以将其他类型转换为字符串类型 ,
在使用+操作的时候为了不改变数据的原有内容,使用空字符串 空字符串中不能有任何内容) - 基本类型值的不可变性 :通过类型转换或者重新赋值都无法修改基本类型的原有值。
- 转数字
- 强制转换:Number()只能转换数值型的字符串 parseIt()可以转换前半部分为数字的字符串,转换结果为整数 parseFloat()可以为小数
- 隐式转换:-*/% 可以进行转换
- 转bool
- 强制转换:Boolean() 为false的情况有0 undefined null “” NaN 为true的情况有有值的字符串和有值的数字
- 隐式转换:!!
- undefined和null 只有一个值,不需要转换
- 运算符:
- 算数运算符:+-*/%
- 一元运算符:一元指的是操作的个数+ -
- 前置和后置不同:前置是先自增(减)然后在进行计算,后置是先进行计算再自增(减)
- 逻辑运算符:&& || ! 且或非
- && 且:两个操作数都是true
true && true –> true
true && false –>false
false && true –> false
false && false –> false - || 或:有一个true则true
true || true –> true
true || false –> true
false || true –> true
false || false –> false - ! 非:取反
- && 且:两个操作数都是true
- 比较运算符:< > <= >= != !== 返回结果都是bool类型
- 赋值运算符:= += -= *= /= %=
- 相等运算符: ==(相等) ===(全等)
- 三元运算符:
bool表达式?表达式1:表达式2; bool表达式为真,执行表达式1否则执行表达式二
- 运算符的优先级:
- 连接符:“+”除了求和之外还有连接作用
例:var a = 6; var s = “hello” alert(s+a+a); –>显示的是hello66 alert(a+a+s); –>显示的是12hello
注意: 字符串类型和任何类型数据相连接,最终都是字符串。
条件判断语句
- if(){} if(){} else{} if(){} elseif(){} else{}
- switch case
比较时是全等比較
switch(传入值){
case 值:
执行内部代码;
break;
case 值:
执行内部代码;
break;
default:
所有人都没执行,执行我}" - 通常使用ifelse进行范围比较,switch case 进行单值比较
循环语句:
for(1循环变量初始化; 2循环条件; 4循环变量增减){3循环内的代码}
- break 在循环内表示跳出
continue表示结束本次循环,进入下一次循环 - while循环和dowhile循环
for循环和while和do..while可以互换使用的
while(循环的条件){
需要重复执行的语句;
}
工作原理:先判断条件是否为真,如果条件为真,则执行循环体一次,然后再判断条件是否为真,如果为真则再执行循环体,如此反复,直到条件为假时循环结束,循环结束会继续执行下边的语句。do{循环体;
}while(循环条件);
工作原理:先执行循环体一次,然后判断条件,如果条件为真则再执行循环体,然后再判断条件,条件为真则再执行循环体,如此反复直到条件为假循环结束。- flag标记:
flag:
- flag标记:
for(var = 1;i<=5;i++){
for(var j=1;j<=5;j++){
if( j % 2 == 0)
continue flag;//结束的是外部循环
break flag;
}
document.write(i);
}
函数
- 就是用来解决相同的功能不用重复写多次的问题,用function来指明定义函数。(具备特定功能的一段独立的代码段)(函数即对象)
- 函数的几种定义方式:
匿名函数的声明和使用
(函数表达式,又叫函数字面量)(有三种写法)
- 声明一个匿名函数,直接赋值给某一个事件;
window.onload=function(){
alert('123')
} - 使用匿名函数表达式。将匿名函数,赋值给一个变量。
var func=function(){
alert(123);
}
func();
声明:var func=function(){ }
调用:func();
注意:使用匿名函数表达式时,函数的调用语句,必须放在函数声明语句之后!!!(与普通函数的区别) - 自执行函数
1)可以使用多种运算符开头但一般用!
!function(形参列表){}(实参列表)
2)使用()将函数及函数后的括号包裹
(function(){}());
3)使用()值包裹函数值
(function(){})();
三种写法特点:
1)使用!开头,结构清晰,不容易混乱,推荐使用;
2)能够将匿名函数与调用的()为一个整体,官方推荐使用;
3)无法表明函数与之后的()的整体性,不推荐使用。
- 声明一个匿名函数,直接赋值给某一个事件;
普通函数的声明和使用
- 函数的声明格式:
function 函数名(参数1,参数2,.....){
//函数体代码
return 返回值;
} - 函数的调用
1)直接调用:函数名(参数1的值,参数2的值,……);
2)事件调用:在HTML标签中,使用事件名=”函数名()”
<button onclick='sayHi('haha','heiihei)'></button>
- 函数的注意事项:
1)函数名必须要符合小驼峰法则,首字母小写,之后每隔单词首字母大写;
2)函数名后面的括号中,可以有参数,也可以没有参数,分别称为有参函数和无参函数;
3)声明函数时的参数列表,称为形参列表,形式参数。(变量的名字)
function sayHi(xingcan1,xingcan2){} //xingcan1,xingcan2为形参
调用时 sayHi('haha','heihei'); //haha,heihei为实参
4)函数的形参列表个数,与实参列表的个数,没有实际关联关系。
函数参数的个数,取决于实参列表。
如果实参列表的个数<形参列表,则未赋值的形参,将为undefined。
5)函数可以有返回值,使用return返回结果
调用函数时,可以使用一个变量接收函数的返回结果。如果函数没有返回值,则接收的返回值为undefined。
function func(){
return '哈哈哈哈'
}
var num = func(); //console.log(num) 哈哈哈哈
6)函数中变量的作用域:
在函数中使用var声明的变量为局部变量,只能在函数内部访问,不用var声明的变量为全部变量,在函数外面也能访问。函数的形参列表默认为函数的局部变量,只能在函数的内部使用。
7)函数的声明与函数的调用没用先后之分。即,可以在声明函数前,调用函数。
- 函数的声明格式:
函数构造法,参数必须加引号
(不推荐使用)
var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5
- 函数的类型
- 检测方式是type of 函数的类型是undefined
- 函数注释的使用:在函数前输入/**点击回车,可以输入一些跟函数参数返回值相关的标注
- 递归(函数自己调用自己)
- 函数在函数内调用自己,被称为递归
function fun(){
cosole.log("今天中午吃什么");
fun();//在函数内调用自己,循环输出今天中午吃什么(递归)
}
fun();//在函数外调用时,输出今天中午吃什么,但使用递归的时候注意不要造成死循环(系统会崩掉)
return 结束函数的执行,直接返回到调用函数的位置
函数之间是可以相互调用的:每个函数都是独立的,平等的,
注意:
1、调用次数不要太多,否则会出现内存溢出现象(内存问题)
2、在使用递归时,一定要有让这个调用结束下来的条件(结束问题)
对象
- 生活中抽象和具体的关系,对象是一个具体的东西,每个对象都有自身的特征(属性)和行为(方法)
- 创建对象方式:
var obj= {} 或 var obj=new Object()(单个对象的创建)
- 添加属性和方法通过
对象名.属性名 对象名.方法名
obj.faceValue = “超高”;
方法跟属性的区别在于,方法中保存的是函数。
obj.sayHi = function(){
alert(“你好”);
};
创建多个对象的方法:
方法一:构造函数(有new,有this)
- 在调用构造函数的时候,调用前加new,构造 函数的作用是创建对象,在构造函数内需要做的一件事情就是添加属相和方法,
使用this,this就是代表创建出来的对象 - 构造函数的名字,首字母要大写
function Person(name,age){ this.name=name; this.age=age; this.sayhi=function(){ alert("大家号我是"+this.name) } } var wmy=new Person("小明",18);
- 在调用构造函数的时候,调用前加new,构造 函数的作用是创建对象,在构造函数内需要做的一件事情就是添加属相和方法,
方法二:对象的字面量形式(最常用)
- var obj={};对象的字面量,可以直接在{}内添加属性和方法,多个属性之间使用逗号分隔
var obj={ name:"小明", age:"18", sayhi:function(){} }
- 对象属性的访问方式:obj.name 或 obj[“name”] 效果一样
- 获取对象中所有的值:对象是一种无序的数据存储方式,想要获取对象中的所有值使用for in
- 方法:for… in
for(var key in obj){
key 在for in中表示某一个属性名,是字符串格式
obj[key] 表示obj中key属性的属性值
}
var obj={
name:"小明",
age:"18",
sayhi:function(){}
}
for(var k in obj){
console.log(obj[k]);
}
- 方法:for… in
- json数据存储格式
var obj = {
“name”:”张三”
};
- 日期对象Date
- var date= new Date()
- 日期转换成毫秒
var date=+new Date();
var date1=Date.parse("2017-02-10");
- Date常用方法
date的方法,不用记
getTime() 返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期几 0周日 6周6
getDate() 返回当前月的第几天
getMonth() 返回月份,从0开始
getFullYear() 返回4位的年份 如 2016
数组
- 属于引用类型 在js中已经定义好了这种类型:Array(内部定义了可以存储数据的变量,还有具备某些功能的函数)
- 创建数组方式:
- 使用new创建数组:
var arr = new Array();
(arr是对象类型)(new可以省略)
数组特点:
1、数组的长度是可以改变的
2、数组中可以存储不同类型数据
3、在创建数组时new可以省略 - 使用字面量方式创建数组(最常用)
var arr3 =[ ];//空数组
- 使用new创建数组:
数组的常用方法:
var arr=[1,2,3,4]
arr.join()
用于把数组中的所有元素放入一个字符串var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join())//George,John,Thomas
arr.toString()
把数组转换成字符串,不更改原数组var arr=[1,2,3,4]; console.log(arr.tostring())//"1,2,3,4"; console.log(arr.join("-"))//"1-2-3-4"
arr.push()
可以项数组最后添加一个或多个新项,返回添加后的数组的元素个数。arr.pop()
从数组最后删除一个元素,并且返回删除的元素。arr.unshift()
从数组前面插入一个或多个元素,注意插入多个的顺序。 返回添加后的数组的元素个数arr.shift()
从数组前面删除一个 ,返回删除的元素var arr=[1,2,34]; console.log(arr.push(1,2));//5,返回插入后数组的个数 console.log(arr.pop());//2返回删除的元素 console.log(arr.unshift("1", 2));//6返回数组的个数 console.log(arr.shift());//"1"返回删除的元素
arr.reverse()
翻转,可以将数组的所有元素翻转,改变原数组arr.sort()
排序,改变原数组对字符串排序是按照首字母排序。对数值排序也是按照第一位排序,想要正序或倒叙可以传入函数参数var arr=[1,2,34]; arr.sort()//正序排序 arr.sort(function(a,b){ return b-a; })//倒序排序 arr.sort(function(a,b){ return a-b; })//正序排序
arr.slice
(start,end)拷贝,接受两个参数 两个参数都是索引值,可以从arr中拷贝一部分元素,含start不含end。 返回拷贝的部分,不改变原数组arr.splice
(start,len,…)截取,start表示截取的起始位置,len表示要截取多少个元素,后面的所有参数是可选的,表示将后面的参数添加到删除掉的位置。返回删除的元素,改变原数组arr.contact()
复制,可以传入多个参数,连接在arr后,返回新数组,不改变原有数组。
复制数组:arr.concat(); 如果不传参数,也会返回一个和原数组相同的新数组var arr1=[1,3,4,6]; var arr2=[10,3,4,6]; console.log(arr1.concat(arr2));//arr1和arr2连接 arr1.concat(1,2);// arr1.concat()//相当于arr1的复制。
indexOf(参数1,参数2(可选))
- 参数1为要寻找的值,参数2可选,为寻找的起始位置。 返回找到的索引值(只能找到一个)。
如果没找到,返回-1.ie6-ie8的不兼容
- 参数1为要寻找的值,参数2可选,为寻找的起始位置。 返回找到的索引值(只能找到一个)。
astIndexOf(参数1,参数2(可选))
- 使用方式与indexOf相同,不同点为从数组最后开始查找。ie6-ie8不兼容
- 清空数组的三种方式
arr.length = 0;
arr.splice(0,arr.length);
arr = [];