文章目录
1、输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert() | 浏览器弹出警示框 | 浏览器 |
console.log() | 浏览器控制台打印输出信息 | 浏览器 |
prompt() | 浏览器弹出输入框,用户可以输入 | 浏览器 |
2、变量
本质:变量是程序中内存申请的一块用来存放数据的空间
声明变量
var
是一个js
关键字,用来声明变量(variable)。使用该关键字声明变量后,计算机会自动为变量分配内存空间
var 变量名;
赋值
= 用来八右边的值赋给左边的变量空间中,这里是赋值的意思
变量名 = xxx;
变量的初始化
声明一个变量的同时并维塔赋值,是变量的初始化
var 变量名 = xxx;
同时声明多个变量
同时声明多个变量时,只需要写一个var
,多个 变量名之间用英文的逗号隔开
var age = 10,name = '肖战';
变量命名规范
由字母、数字、下划线(_)、美元符号($)组成
严格区分大小写
不能以数字开头
不能是关键字、保留字
变量名必须有意义
遵守驼峰命名发,首字母小写,后面单词的首字母需要大写
3、数据类型
js
的变量数据类型只有在程序运行过程中,根据等号右边的值来确定的。javascript是一种弱类型或者动态语言,也就是说变量的数据类型是可以变化的
1、简单数据类型
1、数字型
八进制数字范围为:0-7,在数字前面加上0
表示八进制
十六进制数字范围:0-9、A-F,在数字前面加上0x
表示十六进制
数值中的最大值和最小值
Number.MAX.VALUE
:1.7976931348623157e+308
Number.MIN.VALUE
:5e-324
三个特殊值
Infinity
,代表无穷大,大于任何数值
Infinity
,代表无穷小,小于任何数值
NaN
,Not a number,代表一个非数值
注:可以通过 isNaN()
来判断一个变量是否为非数字类型,是数字返回false
,不是数字返回ture
2、字符串型String
字符串引号嵌套
js
可以用单引号嵌套双引号,或者用双引号嵌套单引号(外单内双,外双内单)
字符串转义符
\n | 换行符,n是newline的意思 |
---|---|
\\ | 斜杆\ |
\' | 单引号 |
\" | 双引号 |
\t | tab缩进 |
\b | 空格,b是blank的意思 |
字符串长度
字符串是由若干字符组成,这些字符是数量就是字符串的长度,通过字符串的length
属性可以获取整个字符串的长度
var str='我是一个程序员';
alert(str.length);
字符串拼接
多个字符串之间可以使用 +
进行拼接,其拼接的方式为 字符串 + 任何类型 = 拼接之后的新字符串
3、布尔型
布尔型只有两个值
var a = ture;
var b = false;
在数字运算中,我们将ture
当为1,false
当为0
4、undefined和null
如果一个变量没有赋值,那么那个变量的类型就是undefined
var a = undefined;
console.log(a + 'pink'); //undefinedpink
console.log(a + 1);//NaN undefined和一个数字相加的结果就是NaN
null表示是一个空值
var a = null;
console.log(a + 'pink'); //nullpink
console.log(a + 1);//1
2、数据类型的检测
检测数据类型我们可以用到typeof
关键字,具体用法如下
var num = 10;
console.log(typeof num);
通过以上我们可以判断用prompt
取过来的值是何类型的,通过以下验证我们可以发现通过prompt
取过来的值是字符型的
var age = prompt('请输入你的年龄');
console.log(typeof age);//string
3、数据类型的转换
1、转换为字符型
//1、把数字型转换为字符串类型 变量.toString()
var num = 10;
var str = num.toString();
//2、String(变量)
var str1 = String(num);
//3、利用 + 拼接字符串的方法实现,这种是隐式转换
var str2 = num + ''
2、转换为数字型
//1、parseInt(变量) 可以将字符型转换为数值型,得到的是整数
console.log(parseInt('3.14'));//3 取整
console.log(parseInt('120px'));//120 会去除掉后面的字符
console.log(parseInt('rem120px'));//NaN,如果字符在前面就无法识别
//parseFloat(变量) 可以将将字符型转换为数值型,得到的是浮点数
console.log(parseFloat('3.14'));//3.14 浮点数
console.log(parseFloat('120px'));//120 会去除掉后面的字符
console.log(parseFloat('rem120px'));//NaN,如果字符在前面就无法识别
//强制转换,利用 Number(变量)
var str = '123';
console.log(Number(str));
//隐式转换,利用算数运算 - * / 三个运算
console.log('12'-0);//12
console.log('123'-'120');//3
console.log('12'*1);//12
3、转换为布尔型
利用 Boolean(变量) 函数来实现,这里由如下的规则
代表空、否定的值会被转换为false ,例如:‘’ 、0 、NaN 、null 、undefined
其余的值会被转换为ture
4、运算
前置递增
++ 写在变量的前面,就是前置递增运算
var age = 10;
//++age 等效于 age = age + 1; 就是先自加一然后返回值后参与运算
console.log(++age + 10);//21
后置递增
++ 写在变量的后面,就是后置递增运算
var age = 10;
//++age 等效于 age = age + 1; 就是先返回原值参与运算,然后才自加一
console.log(age++ + 10);//20
console.log(age);//11
比较运算符
这里表示等于的符号是 ==
,并且默认转换数据类型,会把字符串类型的数据转换为数字型,这是隐式转换
console.log(1 == '1');//ture
这里还有可以表示全等,===
要求两侧的值数据类型和值是一样的
console.log(1 === '1');//flase
逻辑运算
逻辑与 | && | 只要有一个假就为假 |
---|---|---|
逻辑或 | || | 只要有一个真就为真 |
逻辑非 | ! | 取反 |
短路运算(逻辑中断)
短路运算就是当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式
逻辑与
语法:表达式1 && 表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
逻辑或
语法:表达式1 || 表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
逻辑中断会影响我们代码的执行,如下
var num = 0;
console.log(123 || num++);
console.log(num);//0
运算符的优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ – ! |
3 | 算数运算符 | 先* / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
5、流程控制语句
if语句
语法结构:
if (条件表达式)
{
//条件成立执行代码
}
if(条件表达式)
{
//条件成立
}
else
{
//条件不成立执行代码
}
if(条件表达式1)
{
//语句1
}
else if(条件表达式2)
{
//语句2
}
else if(条件表达式3)
{
//语句3
}
else
{
//最后的语句
}
三元表达式
//语法结构
条件表达式 ? 表达式1 : 表达式2
//如果条件表达式为真 则 返回表达式1的值
//如果条件表达式为假 则 返回表达式2的值
switch语句
//我们变量或者表达式的值 和 case 里面的值是全等的关系,必须满足值和数据类型一样
switch(表达式或者变量)
{
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
6、循环语句
for循环
for(初始化变量; 条件表达式; 操作表达式)
{
//循环体
}
//以上代码的执行流程如下
//1、首先进行变量的初始化,初始化后,后面就不会再执行这句语句
//2、将初始化的变量放到条件表达式中进行运算,如果为真就继续下一步,如果为假直接退出循环
//3、上面条件表达式为真后就去执行循环体
//4、循环体执行后就会到操作表达式进行执行,这一步一般是自增或者自减,i++,后置自增,由于是独自一个表达式所有就相当于自加一
//5、操作表达式执行后,将值传递到条件表达式去判断,如果为真就继续执行循环体,如果为假直接退出循环
一行打印五个❤
var str = '';
for(var i=1;i<=5;i++)
{
str = str + '❤'
}
while循环
while(条件表达式)
{
//循环体
}
do
{
//循环体
} while(条件表达式)
continue
关键字:continue
关键字用于立即跳出本次循环,继续下一次的循环
break
关键字:break
关键字用于立即跳出整个循环
7、数组
//利用 new 关键字来创建数组
var arr = new Array();//创建了一个空数组
//利用数组字面量来创建数组 []
//数组的数据用 , 号隔开
var arr = [1,2,'pink',true];
//访问数组里面的某个元素通过数组的索引来完成 数组名[索引号];
arr[0];//1
//数组的长度 数组名.length
arr.length
冒泡排序
var a = [3,2,1,8,9,5,4,7,6];
// var a = [3,2,1,5,4];
// var a = [5,4,3,2,1];
var b = 0;
for(var j = 0;j < a.length - 1;j++)
{
for( var i = 0;i < a.length -j - 1;i++)
{
if(a[i]>=a[i + 1])
{
b = a[i];
a[i] = a[i + 1];
a[i+1] = b;
}
else
{
}
}
}
8、函数
//1、函数声明,利用function 声明函数的关键词
function 函数名()
{
//函数体
}
//2、调用函数
函数名();
//3、行参和实参
function 函数名(行参1,行参2...)
{
//函数体
}
函数名(实参1,实参2...);
//return 只能够返回一个值,并且如果多个值用 , 号隔开,我们只返回最后一个值
//如果要返回多个值,我们要用到数组
//在每个定义好的函数中都内置了一个 arguments 对象,这里面存储了所有传过来的实际参数
//arguments 是一个伪数组
//1、具有数组的 length 属性
//2、按照索引的方法进行存储
//3、它没有真正数组的一些方法 pop() push()
function fn()
{
console.log(arguments);//arguments = [1,2,3]
}
fn(1,2,3);
//函数表达式(匿名函数)
//1、fun是变量名,不是函数名
//2、函数表达式也可以进行传递参数
var fun = function(aru)
{
console.log('我是函数表达式');
console.log(aru);
}
fun('pink');
9、作用域
//js的作用域:全局作用域 局部作用域
//全局作用域:整个script标签 或者一个单独的js文件
//局部作用域(函数作用域):在函数内部就是局部作用域
//变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量
//1、全局变量:在全局作用域下的变量,在函数内部没有声明的直接赋值的变量也是全局变量
//全局变量只有浏览器关闭的时候才会销毁,比较占用内存资源
//2、局部变量:在局部作用域下的变量,函数内部的变量就是局部变量
//局部变量当我们程序执行完毕就会销毁,比较节约内存资源
//作用域链:内部函数访问外部函数对变量,采用的是链式查找的方式来决定 就近原则
var num = 10;
function fn()//外部函数
{
var num = 20;
function fun()//内部函数
{
console.log(num);//20
}
fun();
}
fn();
10、预解析
1、js
引擎运行js
代码: 预解析 代码执行
(1)预解析中 js
引擎会把 js
里面所有的 var
和 function
提升到当前作用域的前面
(2)代码执行 按照代码书写顺序从上往下执行
2、预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
(1)变量提升 就是把所有的变量声明提升到当前作用域的最前面 不提升赋值操作
(2)函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
11、对象
在javascript
中,对象是一组无序的相关属性和方法的集合
对象是由 属性 和 方法 组成
属性:事物的特征
方法:事物的行为
创建对象的方法
利用对象字面量来创建对象 {}
//1、利用对象字面量来创建对象 {}
//(1)里面的属性和方法采用键值对的形式 属性名:属性值
//(2)多个属性或者方法间可以用 , 号隔开
//(3)方法冒号后面是一个匿名函数
var obj ={
uname:'张三丰',
age:18,
sex:'男'
sayHi:function()
{
console.log('hi~');
}
}
//2、如何使用对象
//(1)调用对象的属性,我们采用 对象名.属性名
console.log(obj.uname);
//(2)调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//(3)调用对象的方法是 对象名.方法名()
obj.sayHi();
利用 new Object
创建对象
//利用 new Object 创建对象
//(1)利用 等号 = 赋值的方法来添加对象的属性和方法
//(2)每个属性和方法之间 ; 分号结束
var obj = new Object();//创建一个空对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function()
{
console.log('hi~');
}
obj.sayHi();//属性和行为的使用方法和上面一样
利用构造函数创建对象
//利用构造函数创建对象
//构造函数的语法
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}
//如何使用构造函数
new 构造函数名();
//1、构造函数名字首字母要大写
//2、构造函数不需要 return
//3、构造函数要用 new
function Star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
var ldh = new Star('刘德华',18,'男');//调用函数返回一个对象
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
遍历对象
var obj = {
name:'pink',
age:18,
sex:'男'
}
//for in 遍历对象
//语法
for( 变量 in 对象){
}
for(var k in obj){
console.log(k);//输出得到我们的属性名
console.log(obj[k]);//输出得到我们的属性值
}
12、数组的方法
检测数组的方法
1、instanceof
运算符
var arr = [];
console.log(arr instanceof Array);//返回 ture
2、Array.isArray(参数);
H5新增加
var arr = [];
console.log(Array.isArray(arr));//返回 ture
末尾添加数组的方法
push()
在我们数组的末尾 添加一个或者多个数组元素
var arr = [1,2,3];
//arr.push(4,'pink');
console.log(arr.push(4,'pink'));//5,返回的是数组的长度
console.log(arr);//[1,2,3,4,'pink']
开头添加数组的方法
unshift();
在数组的开头 添加一个或者多个数组元素
var arr = [1,2,3];
//arr.unshift(4,'pink');
console.log(arr.unshift(4,'pink'));//5,返回的是数组的长度
console.log(arr);//[4,'pink',1,2,3]
删除数组末尾元素
pop()
是可以删除数组的最后一个元素
var arr = [1,2,3];
//arr.pop();没有跟参数
console.log(arr.pop());//3,返回的是数组被删除的那个元素
console.log(arr);//[1,2]
删除数组开头元素
shift()
是可以删除数组的第一个元素
var arr = [1,2,3];
//arr.shift();没有跟参数
console.log(arr.shift());//1,返回的是数组被删除的那个元素
console.log(arr);//[2,3]
数组排序
//1、翻转数组
var arr = [1,2,3];
arr.reverse(arr);
console.log(arr);//[3,2,1]
//2、数组排序(冒泡排序)
var arr1 = [13,4,77,1,7]
arr1.sort( function(a,b){
return a - b;//升序的顺序排列
return b - a;//降序的顺序排列
});
查找元素,返回索引号
//返回数组元素索引号 indexOf(数组元素) 作用就是返回该数组元素的索引号
//从开头往末尾查找
//如果不在数组里返回值是 -1
//如果有两个相同的数组元素则返回从开头算起的第一个
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));//2
//lastIndexOf(数组元素)
//从末尾往开头查找
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));//4
数组转换为字符串
//数组转换为字符串
//1、toString() 将数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString());//1,2,3
//2、join(分隔符)
var arr = [1,2,3];
console.log(arr.join());//1,2,3
console.log(arr.join('-'));//1-2-3
13、字符串
字符串不可变
如果将原来赋值好的字符串重新赋值一个字符串,那么原来字符串里面的值是不会变得,重新赋值相当于在内存中新开辟了一个空间,将新字符串存进去,是地址变了
根据字符返回位置
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春',3));//从索引号3的位置开始查找,8
根据位置返回字符
//1、charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));//e
//2、charCodeAt(index) 返回相应索引号的字符ASCII值
console.log(charCodeAt(0));//97
//3、str[index] H5新增
console.log(str[0]);//a
字符串操作
//1、concat('字符串1','字符串2'...)
var str = 'andy';
console.log(str.concat('red'));//andyred
//2、substr('截取的起始位置','截取几个字符');
console.log(str.substr(2,2));//dy
替换与转换
//1、替换字符 replace('被替换的字符','替换为的字符') 只会替换第一个字符
var str = 'andyandy'
console.log(str.replace('a','b'));//bndyandy
//2、字符转换为数组 split('分隔符')
var str ='red,pink,blue';
console.log(str.split(','));//[red,pink,blue]
新赋值一个字符串,那么原来字符串里面的值是不会变得,重新赋值相当于在内存中新开辟了一个空间,将新字符串存进去,是地址变了
根据字符返回位置
var str = '改革春风吹满地,春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春',3));//从索引号3的位置开始查找,8
根据位置返回字符
//1、charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));//e
//2、charCodeAt(index) 返回相应索引号的字符ASCII值
console.log(charCodeAt(0));//97
//3、str[index] H5新增
console.log(str[0]);//a
字符串操作
//1、concat('字符串1','字符串2'...)
var str = 'andy';
console.log(str.concat('red'));//andyred
//2、substr('截取的起始位置','截取几个字符');
console.log(str.substr(2,2));//dy
替换与转换
//1、替换字符 replace('被替换的字符','替换为的字符') 只会替换第一个字符
var str = 'andyandy'
console.log(str.replace('a','b'));//bndyandy
//2、字符转换为数组 split('分隔符')
var str ='red,pink,blue';
console.log(str.split(','));//[red,pink,blue]