概述
- js是一款运行在客户端的网页编程语言
- 组成部分:<br> ECMAScript js标准,语法规范<br> DOM(Document Object Model的简称) js操作网页上元素的API<br> BOM(Browse Object Model的简称) js操作浏览器部分功能的API
- 特点:简单易用,解释执行,基于对象
输出消息的几种方式
alert() 在页面弹出一个对话框
confirm() 在页面弹出一个对话框,常配合if判断使用,对话框有取消和确定按钮
console.log() 将信息输出到控制台
console.error("我是错误")
console.warn("我是警告")
prompt() 弹出对话框,用于接受用户输入的信息
document.write() 在页面输出消息,能够读取标签
转义字符
\" 转双引
\' 转单引
\n 转换行
\r 转回车
命名规则 关键字 保留字
- 关键字
break do instanceof typeof
case else new var
catch finally return void
continue for switch while
debugger* function this with
default if throw delete
in try
- 保留字
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public
数据类型
简单数据类型(值类型)
Number 数字类型
String 字符串
Boolean 布尔数据类型
undefined 未定义,变量未初始化,定义了变量,没有赋值,变量是在内存中存在的
null 空,变量未引用,值为空,属于object
复杂数据类型(引用类型)
Object,Array,Function,Date,RegExp,Error...
判断数据类型
typeof() typeof "abc"
数据类型转换
- 任何简单类型转字符串
- 变量+""/变量+"abc"
- String(变量)
- 变量.toString() 注意:null和undefined无toString方法
- 任何简单类型转数字类型
注:在转换过程中如果有非数字字符出现,一般都会出现NaN。- 变量(+、-、乘、/)一个数字,console.log(type of("111")/1);
- Number()
- 数字类型的字符串,转换之后得到的数字。
- 如果含有非数字字符串,转换之后得到是NaN。
- 小数类型的字符串,转换之后得到的是原数字。
- parseInt() 取整
- 整数数字类型的字符串,转换之后得到的整数数字。
- 数字开头的字符串,转换之后得到的是前边的数字。
- 非数字开头的字符串,转换之后得到的是NaN。
- 小数类型的字符串,转换之后取整。
- parseFloat() 取浮点数
- 整数数字类型的字符串,转换之后得到的整数数字。
- 数字开头的字符串,转换之后得到的是前边的数字。
- 非数字开头的字符串,转换之后得到的是NaN。
- 小数类型的字符串,转换之后得到的是原数字。
- 空字符串parseInt()和parseFloat()返回NaN,Number("")返回0
- 转布尔类型
Boolean()- 数字和字符串转完之后为true
- undefined,null,0 转完之后为false
- 任何数据类型都可以转换成boolean类型
Number
浮点数
- 因为精度丢失问题,所以不判断计算后的两个浮点数是否相等
数值范围
- 最小值:Number.MIN_VALUE,这个值为5e-324
- 最大值:Number.MAX_VALUE,这个值为1.7976931348623157e+308
- 无穷大:Infinity
- 无穷小:-Infinity
NaN 非数值(Not a Number)
- 字符串与数字相除结果是NaN(数值型的字符串除外)。console.log("abc"/18);"2"/2=1(number类型)。
- undefined和任何数值计算结果都是NaN。console.log(undefined-1==NaN)的返回值为false。
- NaN与任何值都不相等,包括NaN本身。
isNaN()
- 任何不能转换为数值的值都会导致这个函数返回true
- isNaN(NaN);//true
String
- 字符串不可变,在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间内会被垃圾回收器回收
Boolean
- true、除0数字、“something”、Object(任何对象)为true
- false、0 、“”、undefined 、null为false
- if判断时会把()内的值强行转换成boolean类型进行判断
null和undefined
- null==undefined结果为true
- null===undefined结果为false
- 10+null结果为10
- 10+undefined结果为NaN
- 任何数据类型和undefined运算都是NaN
- 任何值和null运算,null可以看作0运算
Function 函数
函数的定义
- function 函数名(){ 程序 }
- var fn=function(){ 程序 }
- var fn=new Function("程序")
返回值
- 函数中如果没有return或者return后没有任何值,那么函数的返回值就是undefined。
- 函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退 出,也就是说return后面的所有其他代码都不会再执行
小知识
- 函数不调用不执行
- 函数名就等于(整个函数)
- 加载函数的时候,只加载函数名,不加载函数体
- 参数相当于局部变量
- 就近原则使用变量
- 两个平级的函数中的变量不会相互影响(可以使用同样的形参名)
- 变量声明提升只提升变量名,不提升变量值,但是,函数是所有的内容全部提升
- 实参大于形参,正常执行,多余的实参,不使用
- 实参小于形参,(报错,NaN,undefined)
- js中没有方法重载,所以同一函数名,后边的会覆盖前边的
- 打印执行函数,就等于打印函数的返回值
- 函数中包函数,先执行里面,后执行外面
预解析
js的解析器在页面加载的时候,首先检查页面上的语法错误,把变量声明提升起来
匿名函数
- 调用方法:
- 直接调用或自调用
- 绑定事件
- 定时器
递归
- 递归的实质就是自己调用自己;
- 递归必须有跳出条件,否则就是死循环
回调函数
就是函数作为参数
进制转换
- parseInt 一个参数,取整;两个参数,进制转换,将任意进制转换成十进制。十进制=parseInt(数值,进制)
- .toString() 无参转换成字符串;带参,十进制转换成任意进制。任何进制=十进制.toString(进制)
构造函数
new后边调用函数,称为构造函数,构造函数的本质就是函数。构造函数通常首字母大写
- this
- this只出现在函数中
- 谁调用函数,this就指的是谁
- new People(); People中的this代指被常见的对象实例
- new
- 开辟内存空间,存储新创建的对象
- 把this设置为前对象
- 执行内部代码,设置对象属性和方法
- 返回新创建的对象
对象字面量{}和json
对象字面量就是一个{},包含键值对 key:value ,和json只有一点不同,json的key要求必须加“”; 对象本身没有length,所以不能用for循环遍历
for in 循环
for(var key in json){ }; 多用于遍历json,一般数组和dom对象不使用本方法,因为其中隐藏有很多其它的属性
简单和复杂数据类型的存储和传递
参数赋值的时候,简单数据类型传数值(简单类型数据做参数,函数内部对参数的修改不应影响外部变量),复杂数据类型传地址(复杂类型数据做参数,函数内部对参数的修改会应影响外部变量)
算术运算符
+加号
两个数字类型的变量相加,得到的是一个数字类型。
一个数字类型和一个字符串相加,得到的是一个字符串。
-减号
两个数字类型的变量相减,得到的是一个数字类型。
一个数字类型和一个数字字符串相减,得到的是一个数字类型。
一个数字类型和一个非数字字符串相减,得到的是NaN,是一个数字类型。
/ 除号
两个数字类型的变量相除,得到的是一个数字类型。
一个数字类型和一个数字字符串相除,得到的是一个数字类型。
一个数字类型和一个非数字字符串相除,得到的是NaN,是一个数字类型。
0做为除数的时候,得到结果 Infinity (无限大),是一个数字类型。
运算符的优先级
- ()
- !、-(负数)、++、-- (正数省略+)(一元运算)
- *、/、%
- +、- (加,减)(二元运算)
- <、<=、<、>= (一级逻辑运算)
- ==、!=、===、!==、 (二级逻辑运算)
- && (三级级逻辑运算)
- ||
- ?: (三元运算)
- =、+=、-=、*=、/=、%= (赋值运算)
注意点
- a++代表先赋值,a值之后再自加,即:var a=1;b=a++;可以分解为b=a=1;a=a+1=2;最终b的值为1,a的值为2。
- ++a代表先自加,再赋值,即:var a=1;b=++a;可以分解为a=a+1=2;b=a;最终b=a=2。
var a = 1;
var b = 2;
a++;
var num = ++a + (a++) + a + (++b) + b++;
// 3 + 3 + 4 + 3 + 3;
console.log(num);
内置api
javascript内置对象:
Arguments 函数参数集合
Array 数组
Boolean 布尔对象
Date 日期时间
Error 异常对象
Function 函数构造器
Math 数学对象
Number 数值对象
Object 基础对象
RegExp 正则表达式对象
String 字符串对象
Date()对象
日期的定义 声明
var date1 = new Date();
设定制定时间:(兼容最强)
var date2 = new Date("2016/01/27 12:00:00")
不常用:
var date3 = new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');
var date4 = new Date(2016, 1, 27);
Date对象的方法
getDate() 获取日 1-31
*getDay () 获取星期 0-6(0代表周日)
*getMonth () 获取月 0-11(1月从0开始)
getFullYear () 获取完整年份(浏览器都支持)
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取毫秒 (1s = 1000ms)
*getTime () 返回累计毫秒数(从1970/1/1午夜)
返回距离1970/01/01毫秒数
var date = Date.now();
var date = +new Date();
*var date = new Date().getTime();
var date = new Date().valueOf();
Math对象
Math.PI
Math.ceil() 向上取整
Math.floor() 向下取整
Math.max(n1,n2)
Math.min(n1,n2)
Math.pow(n1,n2) 返回n1的n2次方
Math.round() 四舍五入
Math.random() 返回0-1之间的随机数
Math.abs() 取绝对值
Math.sqrt(num) num开平方
Math.sin()
Math.cos()
Array 数组高级api(内置对象)
查阅:w3c MDN
数组的定义
- 字面量定义
var arr1=[1,2,3];
- 创建对象
var arr2=new Array();//空数组
var arr3=new Array(1,2,3);
var arr4=new Array(3);//参数只有一个,代表数组的长度;多个参数则代表元素
- 数组的长度
数组名.length;
可以通过修改数组的长度来改变数组中元素的个数,如果改小了,数组从后面删除元素。(伪数组的长度可以修改,但是不能修改里面的元素)
- 在获取索引值时,如果没有指定的索引(元素没有那么多),系统不会报错,而是给出undefined。
判断数组和转换数组
Instanceof: 是一个关键字。 判断A是否是B类型。
布尔类型值 = A Instanceof B ;
Array.isArray() HTML5中新增 判断是不是数组
布尔类型值 = Array.isArray(变量) ;
调用者:Array 参数:变量(被检测值) 返回值:布尔类型
toString() 把数组转换成字符串,每一项用,分割
字符串 = 数组.toString();
valueOf() 返回数组对象本身
数组本身 = 数组.valueOf();
join 根据每个字符把数组元素连起来变成字符串
字符串 = 数组.join(变量);
变量可以有可以没有。不写默认用逗号分隔,无缝连接用空字符串。
数组的增删和换位(原数组将会被修改)
push() 在数组最后面插入项,返回数组的长度
数组1改后的长度 = 数组1.push(元素1);
pop() 取出数组中的最后一项,返回最后一项
被删除的元素 = 数组1.pop();
unshift() 在数组最前面插入项,返回数组的长度
数组1改后的长度 = 数组1.unshift(元素1);
shift() 取出数组中的第一个元素,返回最后一项
被删除的元素 = 数组1.shift();
reverse() 翻转数组(原数组讲呗反转,返回值也是被反转后的数组)
反转后的数组 = 数组1.reverse();
sort(); 给数组排序,返回排序后的数组。如何排序看参数。
从小到大排序后的数组 = 数组1.sort(function(a,b){
return a-b;
});
无参:按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素。
带参:必须为函数(回调函数--callback)。函数中带有两个参数,代表数组中的前后元素。如果计算后(a-b),返回值为负数,a排b前面。等于0不动。返回值为正数,a排b后面。
其它api
concat() 连接数组,(原数组不会被修改)
新数组 = 数组1.concat(数组2);
slice() 从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
新数组 = 数组1.slice(索引1,索引2);
splice() 删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目,元素形式)(注意:替换的元素不能是以数组形式存在,否则将整个数组放进原数组中)
截取后的数组 = 数组1.splice(起始索引,结束索引,替换内容("1","2","3"));
数组1会直接变为新替换后的数组(原数组会发生变化)
indexOf()、lastIndexOf() 如果没找到返回-1
索引值 = 数组.indexOf/lastIndexOf(数组中的元素);
数组api方法遍历
every()、filter()、forEach()、map()、some()
数组/boolean/无 = 数组.every/filter/forEach/map/some(
function(element,index,arr){
程序和返回值;
}
);
//对数组中每一项运行以下函数,如果都返回true,every返回true,如果有一项返回false,则停止遍历 every返回false;不写默认返回false
array.every(function(item,index,arr) {
})
//对数组中每一项运行以下函数,该函数返回结果是true的项组成的新数组
var arr = array.filter(function(item,index,arr) {
});
console.log(arr);
//遍历数组
array.forEach(function(item,index,arr){
});
//对数组中每一项运行以下函数,返回该函数的结果组成的新数组
var arr = array.map(function(item,index,arr) {
return "\"" + item + "\"";
})
//对数组中每一项运行以下函数,如果该函数对某一项返回true,则some返回true
var b = array.some(function(item,index,arr) {
if (item == "ww") {
return true;
}
return false;
});
清空数组
array.splice(0,array.length); //删除数组中所有项目
array.length = 0; //length属性可以赋值,其它语言中length是只读
array = []; //推荐
伪数组
arguments: 只在函数中使用,实参的数组
伪数组:不能修改长度的数组(可以修改元素,但不能改变长短)
形参个数:fn.length
实参个数:arguments.length
整个函数:arguments.callee
基本包装类型
- 为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String/Number/Boolean
- Number和Boolean基本包装类型基本不用,使用的话可能会引起歧义
- 创建基本包装类型的对象
- var num = 18; //数值,基本类型
- var num = Number("18"); //类型转换
- var num = new Number(18); //基本包装类型,对象
- 简单数据类型是没有属性和方法的,当调用方法的时候,先把基本类型包装成string类型的临时对象,再调用方法,最后销毁临时对象
string 字符串方法
- 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
给索引查字符
charAt() //获取指定位置处字符,无则返回空字符串
charCodeAt() //获取指定位置处字符的ASCII码,无则返回NaN
str[0] //HTML5,IE8+支持 和charAt()等效
给字符查索引
indexOf() //返回指定内容在元字符串中的位置,找不到返回-1
lastIndexOf() //从后往前找,只找第一个匹配的,找不到返回-1
url编码和解码,URI通用资源标识符
encodeURIComponent() //函数可以把字符串作为URI组件进行编码
decodeURIComponent() //函数可以把字符串作为URI组件进行解码
连接字符串
concat() //拼接字符串,等效于+,+更常用
字符串的截取
slice(索引1,索引2) //从start位置开始,截取到end位置,end取不到
(2,5)包左不包右
(2) 从指定索引剪到最后
(-3) 剪倒数几个数
(5,2)前大,后小,空
substring() //从start位置开始,截取到end位置,end取不到
同slice,不同点:(5,2)参数智能调换位置
参数是负值,将全部获取字符串
substr(索引值,长度) //从start位置开始,截取length个字符
去除空白
trim() //只能去除字符串前后的空白
替换
replace() //str.replace(/aaa/gi,"bbb")
字符串变数组
split() //无参是把字符串作为一个整元素添加进数组
//双引号的空字符串,分隔字符串种的每一个字符,添加进数组
//指定字符分割数组:分割符号不会出现在数组中
大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
其它
search() 看该字符串对象与一个正则表达式是否匹配
localeCompare()(操作单个字符)
s1.localeCompare(s2)
s1 > s2 返回正数,一般是1
s1 == s2 返回0
s1 < s2 返回负数,一般是-1
fromCharCode()
String.fromCharCode(101,102,103); //把ASCII码转换成字符串
anchor() 创建a链接
big()
sub()
sup()
link() 创建a链接,返回值是字符串
bold()
等号运算符
= 赋值
== 只判断内容是否相同,不判断数据类型
=== 不仅判断内容,还判断数据类型
自增自减
i++ 先赋值后自增
++i 先自增后赋值
语句
if(){}else{}
三元表达式
表达式?结果1:结果2;
switch 语句
switch(变量){//在比较值时使用的是全等操作符(===)。
case 1:
...要执行的语句
break;//break会使代码跳出整个循环,如果省略则会继续执行下一个case。
case 2:
...
break;
default:
...
break;
}
- switch 语句可以对变量进行集体的判断
switch(变量){
case 1: case 2: case 3:
...
break;
}
while 循环
while(表达式){ }
while需要在循环体外定义变量
do while 循环
do{
}while(表达式)
比while多循环一次
for 循环
for(定义变量;条件表达式;自增自减){
}
for ... in 遍历对象的属性或者方法
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
break 语句
跳出本循环也就是跳出当前循环体
continue 语句
跳出本次循环进入下一循环
return 语句
可以切断函数