一.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);