js基础讲解

最新推荐文章于 2022-09-19 19:06:59 发布

原创最新推荐文章于 2022-09-19 19:06:59 发布 · 置顶 · 391 阅读

1 ·

CC 4.0 BY-SA版权

TypeScript & JavaScript 专栏收录该内容

31 篇文章

订阅专栏

简介

js是一门脚本语言,弱类型语言,声明变量都要用var，解释性语言，动态类型的语言，基于对象的语言

编译语言:写的代码通过编译器编译,然后执行
脚本语言:写的代码直接执行,不需要编译
JavaScript语言分三个部分:
1.ECMAScript标准—js的基本语法
2.BOM—浏览器对象模型
3.DOM—文档对象模型
js的代码三种写法:可以怎么写

1.行内的方式写js的代码,把js代码写在了html标签中
<input type="button" value="点我啊" onclick="alert('哈哈,我又变帅了')" />
2.把js代码写在一对script标签中,方便维护(一般都会在script标签中加type=text/javascript这个内容,但是现在我们的这个html页面是基于h5的标准,所以,type的这个写法可以暂且的省略)
3.通过引入外部的js文件的方式写js代码(在script标签中加上 src=“js文件的路径即可”)第三种写法的时候要注意,这对script标签的作用就是引入外部文件,不要在这对标签中写任何的内容,有可能会出现问题(在jQuery中会有所体现)
html文件中是可以出现多对的script标签的

js语法:

变量声明：

   ```
   //声明一个变量
    var num;
    //一次性声明多个变量,用逗号隔开,该行代码结束用分号
    var num1,num2,num3,num4;
    num1=10;
    //变量的初始化(赋值)
    var number=10;
    //同时初始化多个变量
    var number1=10,number2=20,number3=30;
    ```

变量名的规范(规则):变量名要有意义,应该以字母,或者是下划线或者是$符号开头,中间可以包含,字母,下划线,$,数字
变量名最好是英文的单词,如果不会单词用拼音,但是要符合驼峰命名法(如果变量名是一个单词,那么都是小写的,如果变量名是多个单词,第一个单词的首字母是小写的,后面的每个单词的首字母是大写的)国际都认可的缩写是可以写大写的
关键字不能作为变量名使用
保留字不能作为变量名使用

变量的数据类型：简单类型和复杂类型

简单类型: Number,String,Boolean,Undefined,Null
复杂类型:Object
数字类型:Number
获取数字类型的最大值Number.MAX_VALUE
获取数字类型的最小值Number.MIN_VALUE
. isNaN(num));判断是不是一个数字—>,返回true不是一个数字,否则就是
字符串类型:String,在js中存储字符串的数据的值,可以使用单引号,也可以使用双引号(代码中的括号小括号,大括号,中括号,逗号,分号都是英文的)
布尔类型:Boolean,其他的语言中bool,布尔类型中的数据只有true(1)或者是false(0)
未定义:undefined–当一个变量声明了没有初始化(没有赋值),就是undefined
如果变量的值是Undefined和数字计算,结果是NaN—不是一个数字
空:null,当一个变量使用后,不想再使用了,可以赋值为null---->释放内存内存空间
Object:对象
识别该变量的类型—>typeof关键字
使用方式:两种
1. typeof 变量名
2. typeof(变量名)

类型转换

parseInt(变量);—转成整数的方式
parseFloat(变量)----转小数的方式
Number(变量)—数字类型
变量.toString()—转字符串
String(变量)----转字符串
Boolean(变量)—转布尔类型
非0数字转布尔类型的结果是true
非空的字符串转布尔类型结果是true
undefined和null转布尔类型是false

操作符

算数运算符:+ - * / %(取余)
- 关系运算符:> < >= <= == === != !==
- 逻辑运算符: &&—>逻辑与 || —>逻辑或 ! —>逻辑非
- 赋值运算符:=
- 赋值运算符中还有复合赋值运算符: += -= *= /= %=
- 一元运算符: 一个运算符,需要一个操作数
  ++和–
  如果++是在后面,参与运算的时候,先参与运算,然后运算完毕后再自身加1。如果++是在前面,先自身加1,再参与运算,

流程控制:控制代码的执行的顺序

顺序结构:代码的执行顺序,从上到下,从左到右
分支结构:if语句,if-else语句,if-else if-else if…语句,switch-case语句,三元表达式
语法：
```
 if(条件){
    语句(代码块)---->可以是一行代码,也可以是多行代码
  }
```
循环结构:while循环,do-while循环,for循环,for-in循环 break,continue
if语句:满足条件就执行
if-else语句:条件满足则执行if的大括号中的代码,否则执行else的大括号中的代码

if-else if-else if…else语句:多分支的情况,一般用在多分支范围判断
语法：

if(条件1){
 语句1;
}else if(条件2){
 语句2;
}else if(条件3){
   语句3;
}else if(条件4){
   语句4;
 }else{
   语句5;
  }

switch-case语句:多分支的情况,是针对值的判断,使用的是严格方式的判断,break是可以省略的
语法:
```
switch(表达式){
  case 值1:语句1;break;
  case 值2:语句2;break;
   case 值3:语句3;break;
   case 值4:语句4;break;
   ...
   default:语句;
 }
```
switch-case中匹配值的时候是按照严格的模式进行匹配的(相当于使用的是===的方式)
switch-case中的break是可以省略的,但是一旦和case后面的值匹配后,会继续的向下执行,一直到遇到break之后才会跳出当前的整个代码
三元表达式: var result=表达式1?表达式2:表达式3----->结果
console.log(90>89?90:89);// 90
循环:一直不停的重复的做一件事,循环必须要有结束的条件
while循环:先判断后循环,有可能一次循环体都不执行
```
var i=100;
while(i<100){
    循环体
    i++;
}
```
do-while循环:先执行一次循环体,再判断条件是否成立,最少执行一次循环体
for循环:
for(初始表达式;条件表达式;计数器){
循环体
}
break:跳出当前的循环
continue:继续下一次循环

数组

数组的定义:
1.通过构造函数的方式创建数组
var 数组名=new Array();
2.通过构造函数的方式创建数组
var 数组名=new Array(长度);
3.字面量的方式定义数组
var 数组名=[];

* 通过数组名.length获取数组的长度
*    把一个数组中的数据进行反转

		```
		var arr = [10, 20, 30, 40, 50];
	 //循环的次数
		for (var i = 0; i < arr.length / 2; i++) {
		     var temp = arr[i];
		     arr[i] = arr[arr.length - 1 - i];
		     arr[arr.length - 1 - i] = temp;
		}
	 ```
* 冒泡排序:把一组数据按照一定的顺序进行排序(可以是从小到大,也可以是从大到小)


	 ```
		 var arr = [5, 10, 50, 40, 8, 100];
	     //控制比较的轮数
		  for (var i = 0; i < arr.length - 1; i++) {
		      //控制每一轮中的比较次数
		      for (var j = 0; j < arr.length - 1 - i; j++) {
		        if (arr[j] > arr[j + 1]) {
		          var temp = arr[j];
		          arr[j] = arr[j + 1];
		          arr[j + 1] = temp;
		        }
		      }
		    }
	 ```

对象

创建对象:三种方式:

通过调用系统的Object构造函数创建对象
var 对象名字=new Object();
Object实际上就是一个函数,函数名首字母是大写的
添加属性:
对象.属性名字=值;---->设置属性的值
例子:
obj.name=“小三”;
添加方法:
对象.方法名字=匿名函数;
例子:
obj.eat=function(){};
自定义构造函数创建对象
构造函数:就是一个函数,一般,这个函数的名字的首字母是大写的
当调用这个构造函数,new的时候,下面的函数,在内存中做了四件事:
1.在内存中开辟一块空间存储这个对象
2.把this设置为当前的对象
3.设置该对象的属性和方法的值
4.把this默认的返回出去.
```
function Person(name,sex,age) {
  //此时的this就是一个对象
  this.name=name;
  this.age=age;
  this.sex=sex;
  this.sayHi=function () {
      console.log("您好,我叫"+this.name+",今年"+this.age+"岁了,是"+this.sex+"孩");
  };
}
//创建对象
var per=new Person("小杨","男",18);
per.sayHi();
```
字面量的方式创建对象

函数:代码的重用

函数定义的语法:
1. 命名函数
function 函数名(){
函数体
}
2. 匿名函数：
3. 函数表达式
var f1=function () { console.log("哦哈哈"); };
函数的调用
函数名();
函数名字符合驼峰命名法
函数定义的时候函数名后面的小括号里面的变量叫形参; 函数调用的时候函数名后面的小括号里面的变量或者是值叫:实参
在函数定义的时候,如果说函数内部有:return关键字,就说,这个函数有返回值
如果函数定义的时候,函数中没有return.那么这个函数就没有返回值,
函数中,return下面的代码,不执行
函数没有返回值,接收返回结果的话,结果是undefined
函数可以作为另一个函数的参数----回调函数；函数也可以作为另一个函数的返回值
作用域:变量的使用范围
局部变量:在函数中定义的变量就是局部变量，只能在函数中使用
全局变量:除了函数以外任意的地方定义的变量,都是全局变量，在页面的任何位置都可以用
隐式的全局变量:声明变量的时候没有使用var
全局变量和隐式全局变量的区别:(页面中尽可能的少使用全局变量)
```
var x=10;
y=100;
delete x;//把全局变量删除
delete y;//把隐式全局变量删除
console.log(typeof x);//number
console.log(typeof y);//undefined
```
作用域链:全局变量的作用域链在0级,在一个函数中的作用域链在1级
在函数内部使用变量,首先在自己的函数中搜索,如果没有,就去上一级作用域链中搜索

沙箱:常用来避免全局变量污染

 (function () {

 })();

//把局部变量变成全局变量
 (function (window) {
   var num=10;//局部变量
   //把num这个局部变量暴露给window顶级对象
   window.num=num;
 })(window);//传入参数
 console.log(num);

预解析:在解释代码之前发生的事情
变量的预解析:在使用这个变量的时候,会把变量的声明提前,赋值不会提前.这个过程就叫预解析,函数中的变量的声明会提升到函数里面的最上面,不会提升到其他的作用域中
函数的预解析:在调用这个函数的时候,会把该函数的定义提前,这个过程,也叫预解析
预解析的时候,如果有多对的script标签,那么如果函数名相同,预解析的时候相互之间不会受到影响的

   console.log(num);// undefined
    var num=10;

    f1();// 可以输出我来了
    function f1() {
      console.log("我来了");
    }

var num;
 function f1() {
    var num;
    console.log(num);//undefined
    num = 20;
  }
  f1();
  num = 30;

var a = 18;
f1();
 function f1() {
   var b;
   b = 9;
   console.log(a);//undefined
   console.log(b);//9
   var a = '123';
 }

   function f1() {
      var a;
      b=9;
      a=9;
      console.log(a);//9
      console.log(b);//9
    }
    f1();
    console.log(b);//9
    console.log(a);//报错