JavaScript学习

回到主页

1.JavaScript介绍

JavaScript是客户端脚本语言，运行前无需编译，直接由Js引擎逐行解释执行，也可基于Node.js技术进行服务端编程。 JS由三部分组成：

  • ECMAScript JavaScript语法
  • DOM 页面文档对象模型
  • BOM 浏览器对象模型

1.1 JS书写位置

1.行内式（直接写在元素内部）

<body>
<input type="label" value="这是一个JavaScript标签">
</body>

2.内嵌式

<script>
alert('这是内嵌式写法');
</script>

3.外部js

<script src="JavaScript.md"></script>

PS：引用外部JS文件的script标签中间不能加代码

2.1 JS注释

单行注释快捷键：ctrl+/ 多行注释快捷键：ctrl+shift+/

3.JS输入输出语句

浏览器弹出警示框：alert(msg) 浏览器输入框：prompt(info) 控制台输出框：console.log(msg)

<script>
alert('警示信息');
prompt('请输入信息：');
console.log('给程序员看的信息');
</script>

2.JS变量

2.1 声明,赋值，初始化变量

var age;     //声明一个名称为age的变量
age=21;      //给age变量赋值为21
var age=21;  //声明变量同时赋值为21

2.2 声明变量的特殊情况

只声明不赋值 结果为undefined 不声明不赋值直接使用 结果报错 不声明只赋值 结果输出值

2.3 变量命名规范

  • 由字母(A-Z,a-z)，数字(0-9)，下划线(_)，美元符号($)组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字，如：var for while等
  • 变量名应有意义
  • 遵循驼峰命名法

3.JS数据类型

JavaScript是一种弱类型的动态语言，即不用提前声明变量的类型，在程序运行中类型会被自动确定。 JS拥有动态类型，这意味着相同变量可用作不同类型。

var x=6;
var x='A';
//以上是可行的

3.1 简单数据类型

3.1.1 Number类型

数字型，包含整型和浮点型，默认值为0 此外数字型有三个特殊值：infinity（无穷大），-infinity（无穷小）,NaN（非数值型） isNaN():判断是否为数字型，返回一个布尔值（true 或者 false）

var num=10;  //数字型
var num=012; //数字前加0为八进制
var num=0x9; //数字前加0x为十六进制
Number.MAX_VALUE=1.7976931348623157e+308 //数字型最大值
Number.MIN_VALUE=5e-324 //数字型最小值

3.1.2 Boolean类型

布尔型，true和false，值为1和0

3.1.3String类型

字符串类型 获取字符串长度：string.length 字符串拼接用加号

var str="这是一个字符串";
alert(str.length); //输出7
console.log("12"+12); //输出1212
console.log("新年"+"快乐！"); //输出 新年快乐！

3.1.4 Undefined类型

声明变量但未赋值时，变量=undefined

console.log(undefined+'变量'); //输出 undefined变量
console.log(undefined+1); //输出NaN
console.log(true +undefined); //输出1，因为ture的值是1

3.1.5 Null

空值

var a=null;
console.log(a+'空值'); //输出 null空值
console.log(a+1); //输出1

3.1.6 检测数据类型

var num=10;
var str='字符串';
var flag=true;
var vari=undefined;
var timer=null;
console.log(typeof num);   //输出number
console.log(typeof str);   //输出string
console.log(typeof flag);  //输出boolean
console.log(typeof vari);  //输出undefined
console.log(typeof timer); //输出object

PS：prompt('用户输入的内容')取过来的值是字符型

3.2 数据转换

3.2.1 字符型转换

tostring():转换成字符串 string():强制转换成字符串 加号拼接（隐式转换）:和字符串拼接的结果都是字符串

3.2.2 数字型转换

preselnt(string)：将string转成整数数值类型 parseFloat(string)：将string转成浮点数值型 Number()：强制转换为数字型 js隐式转换(- * /)：利用算术运算转换为数值型

3.2.3 布尔型转换

Boolean()函数：将其他类型转换为布尔型 代表空，否定的值会被转换为false例如'',0,NaN,null.undefined 其他值会被转换为true

4.运算符

4.1 算数运算符

加(+) 减(-) 乘(*) 除(/) 基本算数运算符不做概述

4.2 精度问题

var result=0.1+0.2; //结果不是0.3而是0.30000000000000004
console.log(0.07*100); //不是7而是7.00000000000001

同理，不能直接判断两个浮点数是否相等

4.3 递增，递减运算符

同c语言，c++

var num=0;
num++; //先返回值，再自加1
++num; //先自加1，再返回值
var num1=0;
num--; //先返回值，再自减1
--num; //先自减1，再返回值

4.4 比较运算符

< 小于 > 大于 >= 大于等于号（大于或等于） <= 小于等于号（小于或等于） == （判等号，会转换类型） === （全等号，要求值和类型都一致） != （不等号）

console.log(1<2);     //true
console.log(1>2);     //false
console.log(2>=1);    //true
console.log(2<=1);    //false
console.log(1=='1');  //true
console.log(1==='1'); //false
console.log(1!=2);    //true

4.5 逻辑运算符

4.5.1 逻辑与

&& 逻辑与:全真则真，一假为假

console.log(3>5&&3>2); //false
console.log(3>2&&3>1); //true

4.5.2 逻辑或

||逻辑或:全假则假，一真为真

console.log(3>5||3>2); //true
console.log(3>5||3>6); //false

4.5.3 逻辑非

! 逻辑非:非真为假，非假为真

console.log(!true);  //false
console.log(!false); //true

4.5.4 短路运算（逻辑中断）

当有多个表达式（值）的时，左边的表达式可以确定结果时，就不再继续运算右边表达式的值了 逻辑与：

  • 表达式与：表达式1&&表达式2
  • 如果表达式1为真，则返回表达式2
  • 如果表达式1为假，则返回表达式1
console.log(1&&2); //返回2
console.log(0&&1); //返回0

逻辑或：

  • 表达式或：表达式1||表达式2
  • 如果表达式1为真，则返回表达式1
  • 如果表达式1为假，则返回表达式2
console.log(1||2); //返回1
console.log(0||1); //返回1

4.5.5 赋值运算符

=：直接赋值 +=,-=：加，减后再赋值 *=,/=,%=：乘，除，取模后再赋值

4.5.6 运算符优先级

1.小括号 （） 2.一元运算符 ++，--，！ 3.算数运算符 先*，/后+，- 4.关系运算符 >,>=,<,<= 5.相等运算符 ==，！=，===，! == 6.逻辑运算符 先&&后|| 7.赋值运算符 = 8.逗号运算符 ，

5.流程控制

5.1 流程控制

顺序选择循环三种流程，不做赘述

5.1.1 分支流程if语句

同c，c++种if语句，不做赘述

5.1.2 三元运算符表达式

条件表达式 ? 表达式1 : 表达式2 条件为真返回表达式1的值，条件为假返回表达式2的值

5.1.3 switch语句

同c，c++中switch语句

5.1.4 循环语句

for语句循环 while语句循环 do···while语句循环 基本语法懂得都懂

break 跳出整个循环 continue 结束一次循环

6.数组

6.1 数组基本知识

6.1.1 创建数组

1.利用new创建数组

var 数组名=new Array();
var arr=new Array();

2.利用数组字面量创建数组

var 数组名=[];
var 数组名=[1,2,3,4];
var arr=[1,'小白','小黑',a,b]; //数组中可以存放任意类型的数据

6.1.2 获取数组中的值

var arr=[1,2,3,4];
console.log(arr[0]); //输出1
console.log(arr[5]); //数组中没有这个数组元素，所以输出结果是undefined

6.1.3 遍历数组

1.for循环遍历数组

var arr=[1,2,3,4];
for(var i=0;i<4;i++){
    console.log(arr[i]);
}

2.数组长度

var arr=[1,2,3,4];
console.log(arr.length); //输出数组长度 4

3.求数组元素最大值

var arr=[1,2,3,4];
var max=arr[0];
for(var i=0;i<arr.length;i++){
    if(arr[i]>max){
        max=arr[i];
    }
}
console.log("数组最大值是"+max);

4.数组转换为字符串并用分隔符分开

var arr=['red','blue','green','yellow'];
var str='';
var sep='|';
for(var i=0,i<arr.length;i++>){
    str+=arr[i]+sep;
}
console.log(str);

6.1.4 冒泡排序

var arr=[4,1,5,3,2];
for(var i=0;i<=arr.length-1;i++){
    for(var j=0;j<=arr.length-i-1;j++){
        if(arr[j]<arr[j+1]){
            var temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }
}
console.log(arr);

7.函数

7.1 函数声明

function 函数名(){
    //函数体
}

7.2 形参和实参

function 函数名(形参1，形参2...){

}
函数名(实参1，实参2...);

本文章使用limfx的vscode插件快速发布