本文详细介绍了JavaScript的基础知识，包括语言类型、JS组成、输入输出、变量、数据类型及其转换、运算符的种类和优先级、流程控制结构如三元表达式、if语句、switch语句和while语句。此外，还讲解了数组的创建、遍历和操作，函数的使用、参数、返回值以及作用域。最后，概述了对象的创建、内置对象的使用以及堆栈的概念。
目录
一、JS的基础
1.语言类型
运行在客户端的语言-------脚本语言
脚本语言：读一行，解释一行
2.JS的组成
ECMAScript JavaScript语法（JS的基础）
DOM 页面文档对象模型
BOM 浏览器对象模型
注：DOM与BOM统称为JS的API
3.书写
（1）行内JS ------写在body的元素内
（2）内嵌JS ------写在heard的scrpit内
（3）外部JS ------ 写在JS文件里面，通过src引用
4.输入与输出
（1）prompt（）————浏览器弹出输入框（提示信息）
（2）aleart（）————浏览器弹出警示框（展示内容）
（3）console.log（）————浏览器控制台打印
5.变量
定义：程序在内存中申请一块用于存放数据的空间
遵循原则：先声明在使用
关键字：var
var Myname = '吕布';
console.log(Myname);运行结果：在控制台打印 吕布 字符串
6.数据类型
JS是一门动态语言，变量数据可以改变
（1）简单的数据类型
Number：数值型 Boolean：布尔型（值为true或flase） String：字符型
infinity：无穷大 -infinity：负无穷大
NaN：非数字 undefined：访问的变量或对象为定义 null：缺失对象引用
isNaNa（）方法：判断是否为数字 {false（数字）；true（非数字）}
字符串的长度：length
字符串的拼接: +
检测数据类型：typeof（蓝色：数字；黑色：字符串；深蓝色：布尔型）
（2）复杂数据类型
在存储时变量中存储的仅仅是地址，通过 new 关键字创建的对象（系统对象、自定义对象），如 Object（对象）、Array（数组）、Date等；
（3）转义符
\n：换行 \t ：TAB缩进 \b：空格
7.简单数据类型转换
（1）转数字型
parseInt（）：自动转换为整数 parseFloat（）：自动转换为浮点型
Number（）：自动转换为数字型
隐式转换：-、+、/
（2）转布尔型
Boolean（）函数
=>代表空、否定值：false 如：0、NaN、null、undefined
=>其余值：true
（3）转字符串型
1）toString()
var num = 10;
var str = num.toString();2)String()
var num = 10;
console.log(String(num));3)隐式转换(' ')
var num = 10;
console.log(num + '');二、运算符
1.算术运算符
种类
+（加）、-（减）、*（乘）、/（除）、%（取余）
注：尽量不用在浮点数，因为精度不一样！
表达式与返回值
表达式：数字、运算符与变量组成是式子
返回值：表达式的值
2.递增和递减运算符
种类
++（加加1）、--（减减1）
运算
前：++x 先+1后运算（给x）
后：x++ 先运算后+1（给x）
3.比较（关系）运算符
种类
>（大于）、<（小于）、>=（大于等于）、<=（小于等于）、!=（不等于）、==（等于）
===（绝对等于）
注：比较双方数据类型必须一样，否则=>false
4.逻辑运算符
种类
&&（与、and）、||（或、or）、!（非）
返回值
true或false
值或表达式参与逻辑运算（重点=>短路运算）
=>短路运算（逻辑中断）
如果左边表达式的值可以确认结果则不算右边
（1）表达式1 && 表达式2
若1为真则返回2
若1为假则返回1
（2）表达式1 || 表达式2
若1为真则返回1
若1为假则返回2
5.优先级
“（）”>“++、--、！”>“+、-、*、/、%”>“>、>、=<、<=”>“==、！=、===、！==”>“&&、||”>“=”>“，”
三、流程控制
1.三元表达式
语法：条件表达式？表达式1：表达式2、
若条件为真 返回1
若条件为假 返回2
2.if语句
语法：
if(条件表达式) {
语句1;
} else if(条件表达式) {
语句2;
} else{
语句3;
}
3.swirch语句
语法：
switch() {
case value1:
执行语句1;
break; //跳出循环
case value2:
执行语句2;
break; //跳出循环
case value3:
执行语句3;
break; //跳出循环
...
default: //都找不到执行
执行语句；
}4.while语句
语法：
while(表达1) { //当表达式1为true时执行
循环体;
}注：当判断条件复杂时使用 while
四、数组（Array）
定义：一组数据的集合，把多个数据存在单个变量下
1.创建数组
（1）利用new创建数组
var arr = new Array();(2)利用数组字面量创建数组（常用）
var 数组名 = []; //可以存放任何类型注：数组中可以存放任何类型包括对象、数组（数组之间用逗号(,)隔开）
2.遍历数组
定义：将数组元素从头到尾访问一遍
for(var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}注：arr为需要遍历的数组名称（自定义的名称）
3.新增数组元素
（1）修改length长度
多余出的值为empty（空）
（2）修改索引号（增加式替换）
例：arr[3] = ‘张良’
五、函数
定义：函数就是封装了一段可以被重复调用的代码段
1.使用函数
（1）声明（function）
function fn(a,b) { //fm为自定义函数名 a,b为形参
函数体;
}注：形成可以有无数个但以逗号分隔
（2）调用
fn(a); //a为实参2.参数
（1）形参与实参
形参：function括号内的 形式上的参数，不用声明
实参：调用时括号内的 实际的参数，必须声明
注：形参是用于接受实参的
（2）形参与实参个数不匹配
1）实参个数大于形参：取实参的前几个
2）实参个数小于形参：形参是没有声明的变量但也是变量，没有的值为undefined，结果为 NaN
3.函数的返回值（return）
代码示例
return 返回值返回多个值
return [x+y,x-y,x*y] //已数组的形式注：若函数没有return则返回undefined
4.内置函数（arguments）
用处：
当我们不确定有几个参数传递时使用
注：arguments对象内存储了传递的所有实参
展示方式
向外展示：伪数组（1.具有length属性；2.按照索引方式存储；3.没有数组一些方法）
5.函数的声明方式
（1）利用关键字
function fn() {
函数体；
}（2）函数表达式（匿名函数）
var fn = function () {
函数体;
}6.作用域
（1）分类
1）全局作用域 2）局部作用域
注：在函数内部没有声明直接赋值的变量也是全局变量
全局变量只有浏览器关闭时才会销毁，比较浪费资源
局部变量当程序执行完毕就会销毁
（2）作用域链（就近原则）
内部函数访问外部函数，用链式查询（一级一级的找直到找到为止）
7.预解析（运行机制）
JS解析器运行JS代码分为两步：预解析与代码执行
定义：预解析会把JS中所有的var和function提升到当前作用域的最前面
注：只提升变量不提升赋值，函数也只提升不提升调用
例:
//源代码
var a = 10;
functon fn() {
console.log(20);
};
fn();
//预解析
var a;
function fn();
a = 10;
fn();六、对象（object）
定义：对象是一个具体的事物
组成
对象由属性和方法组成
属性：事物的特征 如：名字、年龄等
方法：事物的行为
优势：对象表达会更清晰
1.创建对象
（1）利用字面量（{}，常用）
var obj = {
name:'吕布',
age:20,
sex:'男',
fn:function() {
console.log('hi');
}
}使用方法：
1）调用对象属性：对象名.属性名
2）调用对象方法：对象名.方法名（）
obj.name //调用属性
obj['name'] //调用属性
obj.fn() //调用方法注：属性与属性，属性与方法之间用逗号分隔；obj为自定义对象名
（2）利用new object创建
var obj = new Object();
obj.name = '吕布'；
obj.age = 20;
obj.sex = '男';
obj.fn = function() {
console.log('hi')
}（3）利用构造函数创建（重点）
//创建
function Fn() {
this.name = '吕布';
this.age = 20;
this.sex = '男';
this.fn = function(){
console.log('hi')
}
}
//调用
new Fn()优势：可以创建多个对象（利用函数的方法，此函数就是构造函数）
构造函数：把对象中的一些相同属性封装到函数中去
注：
1）构造函数名首字母必须大写（如Fn）
2）不需要return就可以返回结果
3）通过new创建过程也叫实例化
2.遍历对象属性
方法：for...in... 用于对数组或对象属性循环
for(k in obj){
执行语句;
}注：k为属性名；obj[k]为属性值
3.JavaScript内置对象
内置对象：JS语言中自带的一些对象
文档：MDN（Mozilla开发者网络）
网址：http://developer.mozilla.org/zh-CN/
常用内置对象
（1）数学对象（Math）
Math.PI：Π值 Math.max（）/Math.min：最大值/最小值
Math.abs：绝对值 Math.floor/Math.ceil：向下/上取整
Math.round：四舍五入
（2）日期对象（Date）
Date是一个构造函数，所以必须用new来调用
var date = new Date();
常用的方法：
date.getFullYear（）：返回年 date.getMonth（）：返回月
date.getDate（）：返回日 date.getDay：返回周几（周日为0）
返回从1970年到至今的毫秒数（获取当前的毫秒数）：
var time = +new Date();H5中：Date.now（）
（3）数组对象（Array；重点！）
1）检测是否为数组
//第一种
var a = [];
console.log(a instanceof Array());
//第二种
console.log(Array.isArray(a));2)添加，删除一个数组
//push()数组末尾添加数据
var arr = [1,2];
arr.push(3,'郭嘉'); //1,2,3,'郭嘉'
//unshift()在数组开头添加数据
arr.unshift(0); //0,1,2,3,'郭嘉'
//pop()删除元素
arr.pop()3）数组排序
//1.reverse() 翻转数组
var arr = [1,2,3];
arr.reverse(); //3,2,1
//2.sort() 数组排序
arr.sort(); //对首位排序
arr.sort(function(a,b) {
return a-b; //a-b(升序);b-a(降序)
}) 4）数组索引（indexOf）
indexOf（参数）
返回索引号，只返回第一个，找不到返回-1
5）数组转为字符串
//1.toString()
arr.toString();
//2.join(分隔符)
arr.join('-') //里面添加自己想用的分隔符 1-2-3注：字符串不会改变内容而是开辟了一个新的内存
6）查询字符串的位置
indexOf（‘查询的字符’，[起始位置]）[ ]内为可选参数
console.log(str.indexOf('春',3)) //从第三个字符开始查询第一个春的位置7）根据位置查询下字符
//第一种
charAt(index(索引号)) //返回元素
//第二种
chaCodeAt(index) //返回ASCII值，用于判断用户按的哪个键
//第三种
str[index] //也可以放属性名，返回元素不过为HTML5考虑兼容问题
（4）字符串操作方法（String）
//1.拼接字符串
concat('字符串1','字符串2',.....)
//2.截取字符串
substr(start,length) //从第start开始截取，截取length个字符
//3.替换字符
replace('被替换的字符','替换为的字符')
//4.转换为数组
split('分隔符') //分隔符取决于字符串用什么分隔的七、堆与栈
栈：由操作系统自动分配释放函数的参数值、局部变量
注：简单数据类型放入栈内
堆：存储复杂数据类型（对象），一般有程序员分配释放，垃圾回收机制回收
注：复杂数据类型先在栈中存放地址，在根据地址在堆中查询数据
PS：本章节只是学习了JS语言中的基础与简单常用的一些函数与方法，在后续的学习中我们会继续学习DOM、BOM来加深JS语法的学习！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
