JS基本语法

本文主要是介绍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基本语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！