目录
什么是JS
js是JavaScript的简称,但是要注意,JS和Java是两种不同的编程语言。
还是那句话:把前端三件套比作一个人,那么,html就是人的骨头框架,css就是衣服裤子等装饰物,JavaScript就是给人编辑各种动作
既然是编辑动作了,那JS自然就少不了人机互动。例如像C语言的输入输出等等
JS是类似于C++或java的一种代码(甚至可以用JS去ac题目)
在html文件中想要用JS语言进行修改,就要在<head></head>标签中添加<script></script>标签,在<script>之间即为JS语言
例如以下就是用JS打的一个输入a和b的值,输出a+b的值的JS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var a=prompt();
var b=prompt();
alert(parseInt(a)+parseInt(b));
</script>
</head>
<body>
</body>
</html>
实际上JS基础部分和C语言类似,所以会C语言,再学JS就会轻松很多。
JS的编码方式
和css语言一样,JS也可直接打在html中,也可新建一个后缀为js的文件中,也可以直接打在标签内部。
内部样式
像上面图片的例子,这个就是内部样式。在<head>标签的<script>中
外部样式
和css类似,需要在html中<head>标签中打
<script src="xxxx"></script>
xxx即为js所在地址
行内样式
类似于C语言的printf(),JS的输出是alert();
那么行内样式就是这样的
<input onclick="alert()">
一:JS的数据类型及定义
JS的基础数据类型有:int float string和bool类型。
但是严格的来说:JS的数据类型是有六种:数字(Number),字符串(String),布尔(Boolean),空指针(Null),未知定义(undefined),符号(symbol)
但是定义变量并不是像C/C++那样的:int xxx。
JS的定义方式有3种:var let 和const。其中var代表全局变量,let代表局部变量,const代表常量。
var a; //定义全局变量
let b; // 定义局部变量
const c=1;//定义常量且不能再被修改
其中var let和const会根据后面的值,自动适应成int float string或者bool类型。
let a=1; //定义a为整形,并且赋值为1
let a=1.3; //定义a为浮点形,并且赋值为1.3
let a="ab2ba"; //定义a为字符串形,并且赋值为ab2ba
let =True; //定义a为布尔形,并且赋值为True
let a=1,b=2; //定义a和b均为整形,并且赋值为1,2
当然,js也会有强转:
let a="1",b="1.1",c="True";
parseInt(a);//强转为int类型
parseFloat(b);//强转为float类型
Number(a);//强转为数字,即前两个的综合
Boolean(c);//强转为bool类型
String(a);//当然也可以强转为string类型
b.toString();//这个也是强转为string类型
二:JS的输入与输出
1) 输入
类似于C语言的scanf()函数,js的输入是prompt()函数。但是要注意输入的是默认为string类型
输入会在网页中弹出提示框
2) 输出
类似于C语言的printf()函数,JS的输出有两个函数。
(1) alert()函数。输出会在网页中弹出提示框,但是效率比较低下。
(2)console函数。
其中console.log()是最常用的也是最基本的,当然还有其他的例如:console.error(),console.warn()等等
这个输出会在控制台中显示,按F12即可打开网页控制台。
在JS中,也可以采用一种特殊的字符串来引用输出:` ` (键盘1左边的那个键)
var a=1,b="13",c=true;
console.log(`${a} ${b} ${c}`); //输出1 13 true
三:运算操作符
1)基础操作符
JS的运算符其他编程语言类似,均有+,-,*,/,%。
不过需要特别注意的是+还可以是字符串的拼接,例如:"aa"+"bb"="aabb"。并且 / 是会有小数点的,也就是不会像c语言那样向下取整,最多保留16位,类似于%s输出。
var a=prompt();//假设输入1
var b=prompt();//假设输入2
console.log(a+b);
//则系统会输出12.而不是3
有基础运算符,那必然也会有 +=,-=,*=,/=,%=,以及三目运算符 ?:
2)比较运算符
比较操作符即:>,<,>=,<=,==,!= 。
但是在JS中,==和!=是会自动转化成相同类型的数据来比较,例如:"1"==1 是返回true的。
然而有个新的符号 === 或者 !== 这两个表示全等,所以类型不同也就返回false啦。
3)逻辑运算符
逻辑运算符即:&&,||,和 !
优先级
和其他编程语言类似,优先级为:幂 > 正负号 > 乘除 > 加减 > 比较操作符 > 逻辑运算符
四:分支语句
var a=2,b=1;
if(a>b) {
console.log(a+b);
}
那么结果自然也会输出3啦。
if else嵌套什么的也和C类似,可以说一模一样。
五:循环语句
同样的,JS也有循环结构,也就是 while()循环,for()循环,do while()循环以及switch 开关。当然用法也和C基本上一样。
例如:
var a=2;
for(var i=1;i<=5;i++) {
console.log(a);
}
从理论上说,应该输出5个2,但实际上呢?如图所示
并没有输出5个2,而是输出⑤2。
那要怎么才能输出5个2呢。很简单,可以新定义一个变量b自适应成string,让b来累加a,最后输出b
var a=2,b='';
for(var i=1;i<=5;i++) {
b+=a;
}
console.log(b);
看看效果,成功。
六:数组和字符串
JS的数组和C数组不同的是,JS的数组是动态的。比起这点它更像C++的vector。
JS的数组定义是这样的:
var a=[];//定义空数组
var a=[1,2,'aaa',true,1.2]//定义有长度的数组
可以发现,和C不同的是,JS定义数组不用再方括号里写数组大小,并且由于JS定义是自适应,所以数组里的变量类型可以不是单一的。
访问数组的方式可以直接用下标索引。例如返回第2个元素,那么就是arr[1](注意下标是从0开始的)。
字符串的库函数和数组的库函数大致相同。
增
1)可以直接利用下标索引的方式增加或修改元素。
let a=[0,1,2,4]; //定义数组
console.log(a[1]); //访问第二个元素,输出1
console.log(a); //输出[0,1,2,4]
a[3]=3; //修改下标3的数据
console.log(a); //输出[0,1,2,3]
a[4]=4; //增加大小并赋值
console.log(a); //输出[0,1,2,3,4]
a[10]=10; //增加大小并赋值
console.log(a); //输出[0,1,2,3,4,空a~5,10],此时长度是返回的11
2)采用库函数a.push() 的方式进行尾插。
3)采用库函数a.unshift() 的方式进行头查。
删
删除数据可以利用库函数 a.pop() 进行尾删
查
1)查找数据可以利用a.find() 函数来查找,查到了返回下标,没查到返回-1
2)可以采用 a.indexOf(元素) 来查询下标。
3)利用 a.isArray(元素) 来查询该元素是否在数组中,若在返回true,若不在返回false。
改
1)改变数据可以直接利用下标索引的方式
至于排序依旧可以a.sort() 进行快排。
七:函数
JS声明函数的关键字:function。
由于JS没有主函数,被调函数之分,所以直接在下面调用即可。
function f() {
console.log('呵呵呵');
}
f();//调用函数
函数传参
同样,函数的形参于实参也是自适应的,准确点应该说形参自适应。
和C语言不同的是,声明函数括号内不用打int xxx这种。直接打变量名就行
function f(a) {
console.log(a);
}
f('呵呵呵');
/* 格式:
function 函数名(形参) {
代码片;
}
函数名(实参)
*/
和C语言不同的是,JS函数形参与实参的个数可以不匹配。
如果实参数目>形参,则形参有多少就自适应多少。
但是,如过形参>实参,若有其他还没有传递的形参在代码中,就会输出NaN,也就是报错
函数返回return
同样的,函数返回值也是自适应的。是int类型就返回int,是string类型就返回string。
arguments
arguments是个新概念,argument相当于一个数组,里面存储了函数的实参,当出现实参和形参数量不相同,就可以用arguments来获取。但是这个"数组''的功能并不全,比如没有push,pop等操作,只是单纯的存储工具,但有length的操作。
function f(a) {
console.log(arguments);
}
f(1,2,3);
箭头函数
有时候为了方便,可以省去function,采用let var const的定义方式定义函数:
let f=(a,b,c) =>{
return a+b+c;
}
console.log(f(1,2,3)); //输出6
当只有一个参数的时候,可以不用用小括号。
let f=a=>{
return a*3
}
console.log(f(2)); //输出6
八:类与对象
类与对象,就类似于C语言的结构体一样。
在计算机的世界中,万物皆为对象。路边的某一条狗,可以称之为对象,桌子上的某一本书,也可称之为对象。但是单纯的说路边的狗,那就不叫对象,叫做类。因为路边的狗可能有很多,我们不知道具体指的是哪条,所以狗是类,具体的某条那就是对象了。
创建对象的三种方式
1)字面量创建对象
数组是中括号,那么对象就是花括号了。
//创建对象的模板
let 对象名={
属性1:属性值, //注意是逗号
属性2:属性值,
//对象中的函数叫做方法
方法1:function(参数) {
xxxx; //函数的内容
},
方法2:function(参数) {
xxxx;
} //注意最后一个没有逗号
}
let person={
Name: '张三',
age: 18, //这些就叫做属性
Hobby: ['唱','跳','篮球','rap'], //属性值也可以是数组形式
//对象中也可以嵌套其他的对象
friend: {
Name: '李四',
age: 19,
...
}
}
访问的方式也是大同小异,采用对象.属性,对象.方法() 的方式。
或者说采用 对象['属性'] 的方式调用
let person={
Name: '张三',
friend: {
Name: '李四',
}
}
console.log(person.Name); //张三
console.log(person['Name']) //张三
console.log(person.friend.Name); //李四
2)new一个对象
其方法是先new一个空的对象,然后再依次创建(可随时添加)属性和方法。
var obj =new Object();//创建空对象
obj.name='张三'; //创建属性
obj.age=18; //创建属性
3)构造函数创建对象
换句话说也就是创建类(结构体)。
//创建类
function Person(name,age) {
this.name=name;
this.age=age;
}
//实例化对象
let p1=new Person('张三',18);
let p2=new Person('李四',19);
console.log(p1.name)// 输出张三
数组对象
在之前提到过,数组里面的元素类型是不固定的,所以数组也是可以用来储存对象的。
let person=[
{
Name: '张三',
age: 18,
},
{
Name: '李四',
age: 19,
},
{
Name: '王五',
age: 17,
}
] //定义数组对象
console.log(person[0]); //输出关于张三的这个对象
console.log(person[1].Name); //输出李四
迭代器
数组对象的迭代器也就是:forEach,map以及filter。
forEach
forEach是操作型的迭代器,他相当与C语言函数的void定义,只操作无返回。
let person=[
{
Name: '张三',
age: 18,
},
{
Name: '李四',
age: 19,
},
{
Name: '王五',
age: 17,
}
] //定义数组对象
//函数形式
person.forEach( function(p) {
console.log(p.Name);
});
//箭头形式
person.forEach(p=>{
console.log(p.Name);
});
//依次输出 张三,李四,王五。
在函数形式中,function是将类以对象化的形式写出。function()里面的参数至少有一个,第一个参数p则是指针,代表该对象的地址。所以之后用p.xxx代表该对象的元素。
同样,箭头形式也是类似的。
map和filter
map和filter都是返回型的迭代器,它们返回的数据会存到数组中。
let person=[
{
Name: '张三',
age: 18,
},
{
Name: '李四',
age: 19,
},
{
Name: '王五',
age: 17,
}
] //定义数组对象
let name=person.map(function(p) {
return p.Name;
}); //定义数组name来接收map的返回值
console.log(name[1]); //李四
不过map和filter的区别是filter的返回可以有筛选效果,也就是说在filter迭代器中,可以选择是否返回,如果true才返回,false就不返回。
let person=[
{
Name: '张三',
age: 18,
flag: true,
},
{
Name: '李四',
age: 19,
flag: false,
},
{
Name: '王五',
age: 17,
flag: true,
}
] //定义数组对象
let object=person.filter(function(p) {
return p.flag===true;
});
console.log(object); //这时候object储存的是对象,并且只有张三和王五的对象
当然也可以再添加一个map进行进一步的返回。
let person=[
{
Name: '张三',
age: 18,
flag: true,
},
{
Name: '李四',
age: 19,
flag: false,
},
{
Name: '王五',
age: 17,
flag: true,
}
] //定义数组对象
let name=person.filter(function(p) {
return p.flag===true;
}).map(p=>{
return p.Name;
});
console.log(name); //这时候name只有['张三','王五']