前端三件套之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只有['张三','王五']

青衿白首志

关注

8
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端三件套之JS速成

目录什么是JSJS的编码方式内部样式外部样式行内样式JS的输入输出1:输入2:输出变量运算符逻辑结构循环结构数组函数什么是JSjs是JavaScript的简称，但是要注意，JS和Java是两种不同的编程语言。还是那句话：把前端三件套比作一个人，那么，html就是人的骨头框架，css就是衣服裤子等装饰物，JavaScript就是给人编辑各种动作既然是编辑动作了，那JS自然就少不了人机互动。例如像C语言的输入输出等等JS是类似于C语
复制链接

扫一扫