前端学习之JS（JavaScript）基本语法

一.JavaScript基本介绍

一个完整的JavaScript基本由3部分组成：
第一部分：ECMAScript是核心
第二部分：文档对象模型（DOM）主要用来整合js,css,html
第二部分：浏览对象模型（BOM）主要用来整合js和浏览器

简单来说JavaScript也是一门轻量级的编程语言，只是他可插入到HTML中，而后由浏览器执行。

2.JavaScript的两种引用方式

//第一种：直接在Script标签中引入 如：
<script>
		JS代码
</script>

第二种：在Script标签中引入JS文件 如：
<script src="JS博客整理.js"></script>

3.JavaScript的基本语法

1.注释

/*
 * 这里是注释
 * */ 

2.语句要以分号（；）结尾（也可不写，但习惯上要写）
3.变量声明

var 变量名 = 变量的值；

注意：变量不能以数字开头，但是可以以$字符开头，一般不会用到，同时，JS的变量属于动态类型，一个变量中可以存入不同类型的值，不必像C语言一样声明变量类型。

//let命令声明的变量只在局部的代码块中有效
如：for(let i = 0; i<num; i++){
}
该语句中的i只在for循环中有效

//const命令可以声明常量，一旦声明就不可以再改变
如: const PI =3.1415926535;

4.JavaScript的数据类型

1. 数值类型

var a =1	var b =3.14		var c =1234e2

2.特别注意NaN，全称（Not a Number）表示这不是一个数

//NaN的用法
parsent("1232")					//会返回1232
parsent("你真美")				//会返回NaN，因为你真美不是一个数

2.字符串（String）

var String1 = “你”；
var String2 = "好"；
var String3 = String1 + String2；
console.log(String3);			//这里即可输出你好二字
//由上面的例子可以看出字符串可以用加号（+）进行连接

3.字符串常用的方法

方法	说明
.length	返回字符串的长度
.trim()	移除字符串中的空白
.trimLeft() (.trimRight())	移出字符串中左边（右边）的空白
.charAt()	返回第N个字符
.concat(value,…)	拼接字符串
.indexOf(substring,start)	子序列的位置
.substring(from,to)	根据索引获取子序列
.slice(start,end)	切片
.toLowerCase()	小写
.toUpperCase()	大写

注意：要区别substring和slice的区别

4.布尔值

var a = true;
var b = false;

注意：空字符串，0，null，udefined，NaN都是false；

5.详解null和undefined

• null表示值为空，一般是清空一个变量为null，或直接赋值为空（var a = null）。
• undefined表示当声明一个变量但是还未初始化，该变量默认的值即为undefined。

**

5.JavaScript中的对象（object）

相信学过面向对象编程语言的同胞们对对象的定义并不陌生，这里就来简单介绍一些在JavaScript中的知识。
1.数组

定义：var a = {123 , "ABC"}
输出：console.log(a[1]);   输出ABC

2.数组常用的方法

方法	说明
.length	数组的长度
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift	获取头部的元素
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val,…)	连接数组
.sort()	排序
.forEach()	将数组的每一个元素回调给函数

/*forEach的用法*/
array.forEach（function(v){				遍历数组元素
	console.log(v);
}）

/*splice()的用法*/
splice(index,howmany,item1,...,itemX)		删除数组中的元素
其中index规定从哪里开始删除元素，howmany规定删除多少元素，item1为要添加的元素也可以不写

/*map()的用法*/
array.map(function(v){				返回该数组经过函数处理后的新数组
	处理该数组的语句
})

3.类型查询

用法：	   typeof	 "abc"				返回string
		   typeof	null				返回object
		   typeof 	true				返回boolean
		   typeof	123					返回number

注意：typeof是一个一元运算符，同加减乘除一样，不是函数也不是语句

4.运算符

运算符与其他语言相似，这里只说明 =，==，===号的区别

1.=是赋值号		如 a = 1;
2.==是若等于		 如 1 == "1"  		会返回true
3.===是强等于	 如 1 === "1"		会返回false

5.流程控制

流程控制包括 if , if else , switch , for , 三元运算符 ，用法与我们当初学过的C语言用法类似。

6.函数定义

/*函数有三种定义方式*/

1.普通函数的定义
function f1() {
	console.log("Hello World");
}
2.带参数函数的定义
function f1(a,b){
	console.log(a,b)
}
3.带返回值的函数
function sum(a,b){
	retrun a+b;
}
sum(1,2);
4.匿名函数的方式
var sum = function(a,b){
	return a+b;
}
sum(1,2);
5.立即执行函数的方式
（function(a,b){
		return a+b;
}）（1,2);

7.全局变量和局部变量
局部变量：
在JS函数内部声明的变量（var）是局部变量，所以只能在函数内部访问它。当函数执行完毕，该变量就会被删除。
全局变量：
在函数外部声明的变量是全局变量，网页上所有的函数都能访问它。
8.词法分析（暂时省略，还不太懂）
**

6.JavaScript中的一些内置对象

注意：var s1 = "abc"与var s2 = new string(“abc”）的区别是前者返回的是string对象，后者返回的是object

1.对象类型的介绍

类型	内置对象	介绍
数据类型	Number	数字对象
	String	字符串对象
	Boolean	布尔值对象
组合对象	Array	数组对象
	Math	数学对象
	Date	日期对象
高级对象	Object	自定义对象
	Error	错误对象
	Function	函数对象
	RegExp	正则表达式对象
	Global	全局对象

2.自定义对象
JavaScript的对象（Object）本质上是键值对的集合，但是只能用字符串作为键。

var a = {"name":"wunan","age":20};
console.log(a.age);
console.log(a["age"])；
二者返回值都为20

若要遍历该对象的所有内容：

var a = (var i in a){
	console.log(i,a[i]);
}

创建对象

var person = new object();   	//创建一个person对象
person.name = "wunan";      	//给person对象中的name属性赋值wunan
person.age = 20；				//给person对象中的age属性赋值20

JSON对象

var str1 = '{"name":"wunan","age":20}';
var obj1 = {"name":"wunan","age":20};
//将JSON字符串转换成对象
var obj = JSON.parse(str1);
//将对象转换成JSON字符串
var str = JSON.stringify(obj1);