JS基本语法

2021/5/16 10:55:32

本文主要是介绍JS基本语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

    • 写在前面:
    • js的组成:
    • js的引入:
    • 1)行内式js:
    • 2)内嵌js:
    • 3)外部js文件:
    • js的输入输出语句:
    • 变量的使用:
    • 1.声明变量并赋值:
    • 2.简单数据类型:
    • 1)数字型Number
    • 2)布尔型Boolean
    • 3)字符型String
    • 4)undefined
    • 5)Null
    • 3.获取变量的数据类型
    • 4.数据类型转换:
    • 1)转换为字符串:
    • 2)转换为数字型:
    • 3)转换为布尔型:
    • 5.运算符:
    • 6.流程控制的结构:
    • 7.函数的使用:
    • 8.全局变量和局部变量:
    • 9.作用域链:
    • 10.预解析和运行:
    • 11.对象
    • 12.内置对象

写在前面:

在学习js的过程中,我发现其中有很多语法规范都与c/c++/java有异曲同工之妙,例如if选择语句,while/for循环语句,switch语句等等, 因此在介绍相关语句时将会一笔带过。

js的组成:

js主要有三部分组成:JavaScript语法页面文档对象模型(DOM)浏览器对象模型(BOM)。本次主要学习的是JavaScript基本语法。

js的引入:

与css一样,js也需要引用,并且也有三种引用形式,分为行内内嵌外部引入。

1)行内式js:

<input type="button" value="click" onclick="alert('Hello World')" />

这种引入方式可读性较差,不建议使用这种方法,只有在特殊情况下才建议使用。另外,在js中我们尝尝用单引号‘’。

2)内嵌js:

<script>
 alert('Hello World~!');
</script>

在head标签中添加script标签,并把js语句写在该标签中,这是我们常用的方法。

3)外部js文件:

<script src="xx.js"></script>

这种方法可以将HTML和js分离,将js代码独立到HTML页面之外,既美观也便于后期维护。注意,这种方法script标签中间不可以写代码。

js的输入输出语句:

<script>
 alert('Hello World~!');
 console.log();
 prompt('请输入');
</script>

alert,弹出警示框,展示给用户内容
console 控制台输出 给程序员测试用的
prompt,负责接收用户的输入内容

变量的使用:

1.声明变量并赋值:

var age;
age = 10;

var是一个js关键字,用来声明变量,后面跟变量名,赋值规则和之前的语言一样。
注意,这里赋值不需要像c或者其他语言那样声明变量类型,均用var即可。另外,如果只声明不赋值将会产生undefined,如果不声明,不赋值直接使用将会报错,并且js报错后不会执行后续代码。但是不声明,只赋值却是可以正常执行的。

2.简单数据类型:

1)数字型Number

Number,数字型。包括整型和浮点型,它的默认值为0.

var num1 = 07;
var num = 0xA;
//在js中,八进制前面加0,十六进制前面加0x
//Infinity表示无穷大
//-Infinity表示无穷小
//NaN表示非数值
//isNaN()用来判断一个变量是否为非数字类型
//如果是一个数字,返回false,不是数字,返回true

2)布尔型Boolean

Boolean,布尔型,包括true(1)和false(0),默认值为false(0)。

<script>
var x = true + 1;//x值为2
var y = false +1;//y值为1
</script>

3)字符型String

String,字符串型,默认值为“”。变量赋值时需加双引号或者单引号,但有内嵌关系时常常外双内单。

<script>
var str = "TA说:‘看这篇博客的人真好看。’";
//js中只会匹配最近的引号
var str2 = '那女孩对'我'说';
//这时那女孩是和说是字符串,我被抛弃了,这时会报错
//如果想在js中输出回车等特殊字符,需要加转义字符
var str2 = "那女孩对'我'说\n你是个大帅哥"
//length属性可以获取整个字符串的长度
var str3 = "你好";
alert(str3.length);//显示2
//字符串的拼接
var str4 = '10'+12;//输出1012
//任何+字符串即为新字符串
</script>

4)undefined

Undefined,声明了某一变量却未赋值,此时该变量的值为undefined。

<script>
var x;
console.log(x)//undefined
console.log(x+'你好')//undefiined你好
console.log(x+11)//NaN;
</script>

5)Null

Null,声明了变量为空值,它的默认值即为null。

<script>
var x = null;
console.log(x+'你好')//null你好
console.log(x+11)//11;
</script>

3.获取变量的数据类型

typeof可用来获取检测变量的数据类型

<script>
var x = 10;
console.log(typeof(x))//number
</script>

另外,也可以在浏览器的工作台中查看数据的颜色来判断数据的类型。

4.数据类型转换:

使用表单,prompt获取过来的数据默认类型是字符串型,此时就不能直接简单的进行加法运算,而需要转换数据的类型。我们常用的三种转换:转换为字符串型转换为数字型转换为布尔型

1)转换为字符串:

<script>
var x = 10;alert(x.toString());
var y = 11;alert(String(y));
var z = 11;alert(z + "");
</script>

在这三种转换方式中,我们更喜欢用第三种加号拼接字符串的转换方式,这一种方式也成为隐式转换

2)转换为数字型:

<script>
parselnt('16');
parseFloat('16.6');
Number('12');
x = '12'-0;
</script>

在使用过程中,注意parseInt和parseFloat的大小写。最后一种方式仍为隐式转换。另外,还需注意以下情况:

<script>
console.log(parseInt('rem100px'));//NaN
console.log(parseInt('100px'));//100
</script>

3)转换为布尔型:

布尔型转换时,代表空、否定的值会被转化为false其余转化为true。

<script>
console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean('你好'));//true
</script>

5.运算符:

由于该部分与c/c++等语言重复度较大,因此只分析js独有的一些属性。

<script>
//我们不能直接让浮点数来进行比较,因为他们精确度不够
var num = 0.1 + 0.2;
console.log(num == 0.3);//flase
// ==会默认转化数据类型,将字符串型转化为数字型进行比较
console.log('16' == 16);//true
//全等运算符则要求两端值和数据类型都一样才可以返回true
console.log('16' === 16)//false
</script>

逻辑中断
当表达式有多个值时,左边的表达式值可以确定结果,就不再继续运算右边表达式的值

<script>
//a && b
//a为真,返回b。a为假,返回a
console.log(123  &&  456);//456
console.log(0  &&  456);//0
console.log('' && 0 && 123);//''
//空或否定为假,其余为真。0 '' null undefined NaN为假
//a||b
//a为真,返回a,a为假,返回b
console.log( 123 || 456);//123
console.log(0 || 123);//123
</script>

6.流程控制的结构:

同运算符,在已学过的语言中出现过的知识不再赘述。
js中的数组与之前的语言略有不同。

<script>
//创建数组有两种方法,第一种利用new创建数组
var arr1 = new Array();//创建一个空数组,注意A要大写。
//利用字面量创建数组
var arr2 = [];//创建了一个空数组
var arr = [1,2,3,4];//不需要定义长度,中括号里初始化。
//利用字面量创建数组使我们常用的方法
var arr3 = ['你好',1,2,'true'];//数组中可以存储不同类型的元素
//我们可以利用length来获取数组长度
var arr4 = [1,5,6.7,2];
console.log(arr4.length);//5
//在遍历数组中我们常常使用这种方法,可以动态变化
//我们还可以通过修改length的长度新增数组元素
var arr5 = [1,5,4,8,9,7];
arr5.length = 10;//其中增加的元素未赋值即为默认值。
arr5=10;//这样赋值会使整个数组只有一个元素10,因此更改数组元素时必须加上索引号(即下标)
//另外,我们可以追加数组元素
arr5[6]=10;//即在7后新增一个元素10;
</script>

7.函数的使用:

函数部分和其他语言大同小异,也分为两部分,声明函数和调用函数。

<script>
//声明函数,其中function是关键字,必须小写。
function check(){

}
//调用函数
check();
//调用时一定要加小括号
</script>

关于形参和实参
调用函数中小括号里是实参,声明函数中的是形参,声明函数中可以有多个形参,也可以没有形参,形参是接收实参的,形参类似于一个变量。参数最大的作用就是在函数内部可以实现动态的变化,在调用函数时可以传递不同的值进去。

另外,如果实参的个数大于形参的个数,那么当取到形参的个数时就不会接着向下取值,如果实参的个数小于形参的个数,多的形参会成为默认值undefined,就会出现NaN。

返回值
函数都是有返回值的,如果有return则返回return后面的值,如果没有return则返回undefined。另外,如果return有两个值,则返回后边那一个。

<script>
function fn(num1,num2){
return num1,num2;
}
console.log(fn(1,2));//返回2
</script>

另外,return还有中断函数的作用,在return后面的代码将不再执行。那么break,continue和return有什么区别呢?
break:结束当前的循环体(如for,while)
continue:跳出本次循环,继续执行下次循环(如for,while)
return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前函数体内的任何代码
arguments的使用

<script>
//当我们不确定有多少个参数传递的时候,可以用arguments来获取
function fn(){
console.log(arguments);//里面存储了所有传递过来的实参
}
fn(1,2,3);
//arguments是一个伪数组
//1.他具有数组的length属性
//2.能按照下标的方式进行存储
//3.他没有真正数组的一些方法pop(),push()等
</script>

8.全局变量和局部变量:

在全局作用域下声明的变量叫做全局变量,它有如下特点:
1.全局变量的代码在任何位置都可以使用
2.在全局作用域下var声明的变量是全局变量
3.特殊情况下,在函数内不使用var声明的变量也是全局变量

在局部作用域下声明的变量叫做局部变量,它有如下特点:
1.局部变量只能在该函数内部使用
2.在函数内部var声明的变量是局部变量
3.函数的形参实际上就是局部变量

二者的区别:

全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存

局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间。

9.作用域链:

<script>
//作用域链:内部函数访问外部函数的变量,采取的是链式查找的方法来决定取哪个值,这种结构我们称为作用域链,实行就近原则。
var num = 10;
function fn(){
var num = 20;
function fun(){
console.log(num);
}
fun();
}
fn();
//结果为20;
</script>

10.预解析和运行:

js引擎运行js分为两步:预解析 代码执行
1)预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面
2)代码执行 按照代码书写的顺序从上往下执行
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
1)变量提升 就是把所有的变量声明提升到当前作用域最前面 不提升赋值语句
2)函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

11.对象

保存一个值时,可以使用变量,保存多个值时,可以使用数组。如果要保存一个人的完整信息,我们往往使用对象。

<script>
//利用对象字面量创建对象{}
//var obj = {};//创建了一个空对象
var obj = {
uname:'小明',
age:20,
sex:'男',
sayHi:function(){
console.log('hi~');
}
//1.里面的属性或者方法我们采取键值对的形式 健 属性名 值 属性值
//2.多个属性或者方法中间用逗号隔开
//3.方法冒号后面跟的是一个匿名函数
//调用对象我们采用 对象名.属性名 
console.log(obj.uname);
//或者
console.log(obj['age']);
//调用对象的方法 sayHi 
obj.sayHi();//小括号不要忘记
</script>

为了减少代码重复率,提高代码效率,我们还可以利用构造函数创建对象

<script>
function Star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
}
var ldh = new Star('刘德华',19,'男');
console.log(ldh.name);
</script>
<script>
//遍历对象
var obj = {
name:'小红',
age:18,
sex:'男'
}
for(var k in obj){
console.log(k);//k 变量 输出 得到的是属性名
console.log(obj[k]);//我们得到的是属性值
}
</script>

12.内置对象

内置对象就是指js语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能,类似于库函数。

js的内置对象有很多,不再一一列举,但要掌握查找内置对象的方法方便开发使用。

MDN:https://developer.mozilla.org/zh-CN/
在这个网站中,我们就可以方便的查询我们所需的内置对象了



这篇关于JS基本语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程