文章目录
JS的编写位置
1.行内
<button onclick="alert('hello');">我是按钮</button>
<a href="javascript:alert('aaa');">超链接</a>
2.内嵌
<script type="text/javascript">
//编写js代码
</script>
3.外部引用
注意:script标签引入外部文件了,该标签就不能再编写代码
<script type="text/javascript" src="文件路径"></script>
输入输出语句
- 浏览器弹出警告框
alert("输出的内容");
-
浏览器控制台打印输出信息
console.log("输出内容");
-
写在body标签中,并在页面中显示
document.write("要输出的内容");
-
浏览器弹出输入框
prompt("输入内容");
字面量和变量
字面量
字面量是一些固定的值,如 1 2 3 true false null NaN “hello”
字面量都是不可以改变的。
字面量不是很方便使用,所以在JS中很少直接使用字面量
变量
变量可以用来保存字面量,并且可以保存任意的字面量
一般都是通过变量来使用字面量,而不直接使用字面量,而且也可以通过变量来对字面量进行一个描述
var = age;//1.声明变量
age = 10;//2.赋值
var age = 18//变量初始化
更新变量
一个变量重新赋值后,变量值将以最后一次赋值为准。
标识符
所有的可以自主命名的内容,都可以认为是一个标识符
规范:
- 由字母,数字,下划线(_),美元符号($)组成
- 变量区分大小写,app 和App是两个变量
- 不能数字开头
- 有意义且驼峰命名
数据类型
JS中分六种数据类型 5个基本数据类型 +object
简单数据类型又叫值类型,复杂类型又叫做引用类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
Number数值
1.数字型进制
0b 开头表示二进制,但是 不是所有的浏览器都支持
0 开头表示八进制
0x 开头表示十六进制
//八进制数字序列范围:0-7
var num1 =07;//对应十进制的7
var num1 =019;//对应十进制的19
//十六进制数字序列范围 :0-9以及A-F
var num = 0xA;
2.特殊值
Infinity 正无穷 a = Infinity ,能赋值
-Infinity 负无穷
NaN
非法数字(Not A Number)
alert(Number.MAX_VALUE);//最大能表示的值 1.7976931348623157e+308
alert(Number.MIN_VALUE);//
isNaN()
判断一个变量是否为非数字类型,返回布尔值
Boolean布尔值
使用typeof
检查一个布尔值时,会返回boolean
console.log(true + 1);//true参与加法运算当 1 看待
console.log(true + 1);//false参与加法运算当 0 看待
Null空值
使用typeof
检查一个Null类型的值时会返回"object"
var a = null;
console.log(a + 1);// 1
Undefined未定义
undefined与数字相加最后结果是NaN
声明一个变量但没有赋值时
var a;
console.log(a);//undefined
使用typeof
检查一个Undefined类型的值时,会返回"undefined"
String字符串
字符串拼接:字符串相加的任何数据类型转换为字符串,再拼接成新字符串
alert(‘11’ + 12); // 1122
字符串转义符
\' ==> '
\" ==> "
\n ==> 换行
\t ==> 制表符
\\ ==> \
\b ==> 空格
字符串引号嵌套:单引号嵌套双引号,或者双引号嵌套单引号
var strMsg = "我是'帅哥' 吧 ";
var strMsg = '我是 "帅哥" ';
引用数据类型
Object对象
数据类型转换
使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加减运算
此时需要数据类型转换
转化为String
方式一(强制类型转换)
调用toString方法
var a = 10;
var b = a.toString();
//注意该方法不适用于 null 和 undefined,由于这两个类型的数据中没有方法,
//所以调用toString()会报错
方式二(强制类型转换)
调用 String() 函数
var b = 123;
b = String(b)
方法三(隐式类型转换)
利用 + 拼接字符串方法 实现转换
转化为Number
方式一(强转)
调用 Number() 函数
var s = "123";
s = Number(s);
非法数字字符串或者undefined,转换为NaN
空串,纯空格的字符串或者是null转换为0
true转换为1 false转换为0
方式二(强转)
调用parseInt()
或者parseFloat()
console.log(parseInt('3,14'));//3 取整
console.log(parseFloat('3.14'));//3.14
console.log(parseInt('3,94'));//3 取整
console.log(parseInt('120px'));//120 会去掉px
console.log(parseInt('r120px'));//NaN
对于非String调用,会先将其转化为String然后操作
方式三(隐式转换)
利用算数运算(除了 +)
console.log('12' - 0);//12
var a = "123";
a = + a;
转换为布尔值
方式一(强制类型转换)
使用Boolean()函数
var s = "fa";
s = Boolean(s);//true
代表空、否定的值 会被转换成false ,如 ’ ’ (空串) 、0、NaN
、 null、undefined
其余值都会转换为true
方式二(隐式类型转换)
为任意的数据类型做两次非运算,即可将其转换为布尔值
var a = "hello";
a = !!a;//true
运算符
注意:与java,c语言差不多的不详写
typeof
运算符
语法: typeof
变量
算数运算符
自增自减运算符
赋值运算符
关系(比较)运算符
如果比较的两个值是非数值,会将其转换为Number然后再比较。
如果比较的两个值都是字符串,此时会比较字符串的Unicode编码,而不会转换为Number。
三元运算符
条件表达式?语句1 :语句2;
相等运算符
== !=
相等和不等
会自动对两个值进行类型转换,如果对不同的类型进行比较,会将其转换为相同的类型然后再比较
===
全等,判断左右两个值是否全等,它和相等类似,只不过它不会进行自动的类型转换,如果两个值的类型不同,则直接返回false
!==
不全等,和不等类似,但是它不会进行自动的类型转换,如果两个值的类型不同,它会直接返回true
特殊的值:
null和undefined
由于undefined衍生自null,所以null == undefined 会返回true。
但是 null === undefined 会返回false。
NaN
NaN
不与任何值相等, NaN
== NaN
//false
逻辑运算符
!
非运算可以对一个布尔值进行取反,true变false false边true
当对非布尔值使用!时,会先将其转换为布尔值然后再取反
我们可以利用!来将其他的数据类型转换为布尔值
&&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时,才会返回true。只要有一个false就会返回false。
与是一个短路的与,如果第一个值是false,则不再检查第二个值
对于非布尔值,它会将其转换为布尔值然后做运算,并返回原值
规则:
1.如果第一个值为false,则返回第一个值
2.如果第一个值为true,则返回第二个值
||
||可以对符号两侧的值进行或运算
只有两端都是false时,才会返回false。只要有一个true,就会返回true。
或是一个短路的或,如果第一个值是true,则不再检查第二个值
对于非布尔值,它会将其转换为布尔值然后做运算,并返回原值
规则:
1.如果第一个值为true,则返回第一个值
2.如果第一个值为false,则返回第二个值
运算符优先级
未看
流程控制语句
条件判断语句if
if(条件表达式){
语句...
}
if(条件表达式){
语句...
}else{
语句...
}
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
条件分支语句switch
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
while循环
while(条件表达式){
语句...
}
do…while循环
do{
语句...
}while(条件表达式)
for循环
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
③语句...
}
死循环
while(true){
}
for(;;){
}
对象(Object)
JS中,对象是一组无序的相关属性和方法的集合,所有事物都是对象如字符串,数值,函数…
对象是JS中的引用数据类型
使用typeof
检查一个对象时,会返回object
创建对象的三种方式
利用字面量创建
var obj {
uname:'黄帅哥',
age: 18,
sayHi:function(){
console.log('hi~');
}
}//方法冒号后面跟的是一个匿名函数
利用new Object创建对象
var obj = new Object();
obj.uname = '黄帅哥';
obj.sayname = function(){
console.log(obj.uname);//也可以用 对象["属性名"]
}
new关键字执行流程
- new构造函数可以在内存中创建一个空的对象
- this就会指向刚创建的空对象
- 执行构造函数里面的代码 给这个空对象添加属性和方法
- 返回这个对象
利用构造函数创建对象
前两种方法一次只能创建一个函数
而构造函数 就是把不同对象里面一些相同的属性和方法封装到函数里
利用构造函数创建对象的过程 也称为对象的实例化
function 构造函数名(){
this.属性名 = 值;
this.方法名 = function(){
}
}
new 构造函数名();//调用函数返回的是一个对象
//构造函数名首字母要大写
//构造函数不需要return 就可以返回结果
删除对象中的属性
delete 对象.属性名
delete 对象["属性名"]
遍历对象属性
for …in语句用于对数组或者对象的属性进行操作
var obj = {'0':'a','1':'b','2':'c'};
for(var i in obj) {
console.log(i,":",obj[i]);
}
//0 : a
//1 : b 输出 i 得到的是属性名
//2 : c 输出 obj[i]得到的是属性值
对象的分类
JS语言自带的一些对象如 Math,Date,Array,String等
Math对象
Math对象不是构造函数,它具有数学常数和函数的属性和方法
Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() //四舍五入取整 3.5->3
Math.abs() //绝对值
Math.max()/Math.min //求最大最小值
随机数方法random()
这个方法里面不跟参数
random()返回 0—9随机小数
//1.想要两个数之间的随机整数 并且包含这两个整数
function getRandom(min, max){
return Math.floor(Math.random() * (max -min + 1)) + min;
}
console.log(getRandom(1,10));
//2.不包含这两个整数
日期对象
Date()日期对象 是一个构造函数 必须使用new 来调用创建的日期对象
var date = new Date();
console.log(date);//没有参数 返回当前系统的时间
name | return |
---|---|
getDate () | 当前日期对象是几日(1-31) |
getDay () | 返回当前日期对象时周几(0-6) 0 周日 1 周一 。。。 |
getMonth() | 返回当前日期对象的月份(0-11) 0 一月 1 二月 。。。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回当前日期对象的时间戳 时间戳,指的是从1970年月1日 0时0分0秒,到现在时间的毫秒数 计算机底层保存时间都是以时间戳的形式保存的。 |
Date.now() | 可以获取当前代码执行时的时间戳 |
参数常用写法
数字型 2019, 10, 01 字符串型 ‘2019-10-1’
var date1 = new Date(2019, 10, 1);
console.log(date1);//返回的是11月 不是10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);//这个不会
未完
数组对象
创建数组
//1.利用数组字面量
var arr = [1,2,3];
//2.利用new Array()
var arr1 = new Array(); //创建了空数组
var arr2 = new Array(2); //创建了长度为2的数组
var arr3 = new Array(2,3);//创建了[2,3]数组
检测是否为数组
//1.instanceof运算符
var arr = [1, 2, 3];
console.log(arr instanceof Array);//true
//2.Array.isArray(参数); H5新增方法 ie9以上版本支持
console.log(Array.isArray(arr));
增加删除数组元素的方法
方法名 | 说明 | 返回值 |
---|---|---|
push(参数1…) | 末尾添加一个或多个元素 | 返回新长度 |
pop() 没有参数 | 删除数组最后一个元素 | 返回删除的函数的值 |
unshift(参数1…) | 向数组开头添加一个或者多个元素 | 返回新的长度 |
shift() 没有参数 | 删除第一个元素 | 返回第一个元素的值 |
var arr = [1, 2, 3];
arr.push(4);
arr.pop();
数组排列方法
方法名 | 说明 | 返回值 |
---|---|---|
reverse() | 颠倒数组中元素的顺序,无参数 | 返回新数组 |
sort() | 对数组的元素进行排序(冒泡排序) | 返回新数组 |
concat () | 连接两个或多个数组,它不会影响原数组 | 返回新数组 |
slice(begin,[end]) | 从一个数组中截取指定的元素 该方法不会影响原数 1.截取开始位置的索引(包括开始位置) 2.截取结束位置的索引(不包括结束位置) 第二个参数省略不写则一直截取到最后 参数可以传递一个负值,如果是负值则从后往前数 | 返回截取的新数组 |
splice() | 用来删除数组中指定元素,并用新元素替换(改变原数组) 1.删除开始位置的索引 2.删除的个数 3.三个以后,都是替换的元素,这些元素将会插入到开始位置索引的前边 | 返回删除的元素封装到新数组 |
翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
数组排序
var arr = [3, 4, 7, 1];
arr.sort();//如果数组元素是含有两位数的会因只识别第一个数错排
//解决
var arr = [3, 34, 17, 1];
arr.sort(function(a,b){
//return a - b;升序的顺序排列
return b - a;//降序
})
字符串对象
//基本包装类型
var str = 'andy';
console.log(str.length);
//对象才有属性方法 复杂数据类型才有属性和方法
//那么简单数据String为什么会有length属性呢?
//简单包装类型: 就是吧简单数据类型 包装成为了 复杂数据类型
//(1)把简单数据类型包装成复杂数据类型
var temp = new String('andy');
//(2)把临时变量的值 给 str
str = temp;
//(3)销毁这个临时变量
temp = null;
字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中开辟了一个内存空间
因为字符串的不可变 所以不要大量的拼接字符串
根据位置返回字符
方法 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符 | 判断用户按下哪个键 |
charCodeAt(index) | 获取指定位置处的ASCII码 | |
str[index] | 获取指定位置处字符 | H5新增与charAt()等效 |
console.log(str.charCodeAt(0));//97
c0nsole.log(str[0]);//a
//遍历所有的字符
for (var i = 0; i < str.lengthl;i++){
console.log(str.charAt(i));
}
字符串操作方法
concat(str1,str2,str3…) | 用于连接两个或多个字符串。等于 + |
---|---|
substr(start,length) | 从start位置开始(索引号),length取的个数 |
slice(satrt,end) | 从start位置开始,截取到end位置,end取不到(索引号) |
substring(start,end) | 基本与slice相同 但不接受负值 |
//1.替换字符 replace('被替换的字符','替换字符') 它只会替换第一个字符
var str = 'andyandyandy';
//可以通过循环 替换所有'a'
while(str.indexOf('a') !== -1){
str = str.replace('a','p');
}
//2.字符转换为数组 split('分隔符')
var str1 = 'red, pink, blue';
console.log(str1.split('&'));
var str = '是的春天,春天来了';
console.log(str.indexOf('春',3))//从索引 3 的位置开始往后查找
函数(Function)
函数也是一个对象,也具有普通对象的功能(能有属性)
使用typeof检查一个函数时会返回function
函数声明
//1.声明函数
function 函数名([形参1...]){
//函数体
}
//2.调用函数
函数名([形参1...]);
//函数表达式(匿名函数)
var 函数名 = function([形参1,形参2...形参N]){
语句...
};
立即执行函数
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
函数的封装
把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
形参和实参
形参是接受实参的,形参在被调用时才会被赋值
形参可以看做是一个不用声明的变量
形参实参个数匹配
function getSum(n1, n2){
console.log(n1 + n2);
}
//1.如果实参形参个数相等 ,则正常输出结果
getSum(1, 2);
//2.如果实参 > 形参 ,会取形参的个数
//3.如果形参 < 实参 , 多余的形参定义为undefined,最终结果是NaN
return语句
返回值&终止函数
function getSum(num1, num2){
return num1 , num2;//只会返回一个值,若逗号隔开返最后一个值
alert('我不会被执行')//return后面的代码不会被执行
}
//return [num1 + num2,num1 - num2]
//var a = getSum(1, 2);//返回的是数组
如果return后不跟值,或者是不写return则函数默认返回undefined
break、continue和return
break
退出循环
continue
跳过当次循环
return
退出函数
方法(method)
可以将一个函数设置为一个对象的属性,
当一个对象的属性是一个函数时,
我们称这个函数是该对象的方法。
arguments的使用
当我们不确定有多少参数传递的时候,可以使用arguments来获取。
arguments和this类似,都是函数中的隐含的参数(函数内置对象,只有函数有)
arguments是一个类数组元素,它用来封装函数执行过程中的实参
所以即使不定义形参,也可以通过arguments来使用实参
function fn(){
console.log(arguments);// arguments = [1,2,3]
//类数组,所以可进行遍历
for (var i = 0; i < arguments[i]; i++){
console.log(arguments[i]);
}
}
fn(1,2,3);
函数可以调用另一个函数
function fn1(){
console.log(111);
fn2();
console.log('fn1');
}
function fn2(){
console.log(222);
console.log('fn2');
}
fn1();// 111 222 fn2 fn1
作用域
JS作用域 : 就是代码名字(变量)在某个范围内起作用的效果
var num = 10;//全局作用域 整个script标签 或者是一个单独的js文件
function fn(){
//局部作用域 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
}
- 全局变量:在如何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存 。注意:如果在函数内部 没有声明直接赋值的额变量也属于全局变量
- 局部变量 : 只在函数内部使用,当其所在代码块被执行时,会被初始化,当代码块运行结束后,就会被销毁,因此更节省空间 。 注意:函数的形参也可以看做是局部变量
JS现阶段没有块级作用域
js也是在es6的时候新增的块级作用域
块级作用域 {} if{} for{}
作用域链
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
var num = 10;
function fn(){//外部函数
var num = 20;
function fun(){//内部函数
console.log(num);
}
}//一层一层的找函数里的函数可以调用的变量
在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域。
预解析
我们JS引擎运行js分两步:预解析 代码执行
- 预解析:js引擎会把js里面所有的var和function 提升到当前作用域的最前面
- 代码执行:安装顺序上到下执行
预解析分为 变量预解析(变量提升)和 函数预解析(函数提升)
- 变量提升:就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
- 函数提升:就是把所有的函数声明提升到当前的作用域最前面 不调用函数
console.log(num);// undefined 坑1
var num = 10;
fun();//报错 坑2 放下面才可以(此时fun变量赋值完)
var fun = function(){
console.log(22);
}
数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
}
1. 全局变量:在如何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存 。**注意:如果在函数内部 没有声明直接赋值的额变量也属于全局变量**
2. 局部变量 : 只在函数内部使用,当其所在代码块被执行时,会被初始化,当代码块运行结束后,就会被销毁,因此更节省空间 。 **注意:函数的形参也可以看做是局部变量**
JS现阶段没有块级作用域
js也是在es6的时候新增的块级作用域
块级作用域 {} if{} for{}
##### 作用域链
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
```js
var num = 10;
function fn(){//外部函数
var num = 20;
function fun(){//内部函数
console.log(num);
}
}//一层一层的找函数里的函数可以调用的变量
在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域。
预解析
我们JS引擎运行js分两步:预解析 代码执行
- 预解析:js引擎会把js里面所有的var和function 提升到当前作用域的最前面
- 代码执行:安装顺序上到下执行
预解析分为 变量预解析(变量提升)和 函数预解析(函数提升)
- 变量提升:就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
- 函数提升:就是把所有的函数声明提升到当前的作用域最前面 不调用函数
console.log(num);// undefined 坑1
var num = 10;
fun();//报错 坑2 放下面才可以(此时fun变量赋值完)
var fun = function(){
console.log(22);
}