JS简介
JavaScript 简称JS,在用户浏览器内部运行,能够检测和响应特定的用户操作,比如鼠标点击和键盘操作。更重要的是:几乎每种 Web浏览器都支持JavaScript。 是一种具有函数优先的轻量级,解释型 或即时编译型的编程语言,
它是作为Web页面的脚本语言,同时也被用到很多非浏览器环境中,并且支持面向对象,命令式,声明式和函数编程范式,可插入 HTML 页面的编程代码 ,插入 HTML 页面后,可由所有的现代浏览器执行
1.变量
变量就是一个容器,用于保存特定数据的容器,就像法海的紫金钵,都是用来装东西的,我们可以通过变量名过去数据
1.1变量声明
// 声明变量
var age;// 声明一个名称为age 的变量
var是一个JS关键字,用来声明变量( vaiable 变量的意思),使用该关键字声明变量后,计算机会自动为变量分配内存空间,
age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
1.1.1同时声明多个变量
同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开。
var age = 10, name='zs',sex=2;
1.1.2声明变量特殊情况
情况 | 说明 | 结果 |
var age , console log (age), | 只声明 不赋值 | undefined |
console.log(age) | 不声明 不赋值 直接使用 | 报错 |
age = 10, console log (age) | . 不声明 只赋值 | 10 |
1.2赋值
age = 10; // 给age 这个变量赋值为 10
= 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思。
1.3变量名的命名规范
变量可以用任何方式进行命名,但我们一般只使用字母、数字、美元符号($)和下划线
1.变量命名必须以字母或是下标符号”_"或者"$"为开头。
2变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)
2.数据类型
数据类型是JS的重要组成部分是一种值
2.1基本数据类型
number 数值型
此类型用来表示整数和浮点数(小数)值。比如:数字10、10.01、100、-100 等等
我们JavaScript是弱数据类型,变量是没有固定数据类型的,给变量一个什么值,它就是什么数据类型的变量。
还有一种特殊的数值,即NaN(非数值 Not a Number),是一种缩写。
isNaN()
如果里面 是个数字返回的是 false
如果里面 不是个数字,近回的是 true
alert(isNaN(10));//false
alert(isNaN("blue"));//true
string 字符串型
用来表示字符串,可以由单引号('’)双引号("")表示
var str = "天安门下白云飘";
console.log(str);
var str1 = "我爱'北京'天安门";
console.log(str1);
boolean 布尔型
是逻辑型,只有两个值 true和false 其中true表示真(对)false表示假(错)
var flag = true;
var flag1 = false;
console.log(flag + 1); //2 布尔类型在和数字型相加的时候,true为1,false为0
console.log(flag1 + 1); //1 flag flag1 都是布尔型
undefined 未定义型
声明一个变量没有赋值,就是undefined 称为未定义数据类型
var str; // 相当于var str=undefined
console.log(str);
console.log(str + '张三丰');
console.log(str + 100); //undefined和数字型相加 结果都是NaN
null 空型
声明一个变量给null值,里面存的值为空
var space = null;
console.log(space);
2.2使用typeof判断数据类型
typeof 可以用来检测变量中存放的值属于哪种数据类型
语法:
typeof something;
var num = 1000;
console.log(typeof num); //number
var str = '啦啦啦';
console.log(typeof str); //string
var flag = true;
console.log(typeof flag); //boolean
var variable;
console.log(variable); //undefined
var timer = null;
console.log(typeof timer); //object
var age = prompt('请输入你的年龄');
console.log(age); //
console.log(typeof age); //string
因为它本身是运算符,不是函数,所以使用时没必要加小括号
2.3数据类型转换
就是把一种数据类型的变量转换成另外一种数据类型。
1.转换为字符串类型
方式 | 说明 | 案例 |
toString | 转成字符串 | var num = 1alert(num.toString()) |
String()强制转换 | 转成字符串 | var num = 1alert(String(num)) |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1alert(num+"我是字符串”) |
注意:
。toString()和 String()使用方式不一样。
。三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一种方式也称之为隐式转换
2.转换为数字型(重点)
方式 | 说明 | 案例 |
parselnt(string)函数 | 将string类型转成整数数值型 | parseint(78') |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat('78.21) |
Number()强制转换函数 | 将string类型转换为数值型 | Number('12) |
js隐式转换(-"/) | 利用算术运算隐式转换为数值型 | '12'-0 |
。注意parseint和parseFloat单词的大小写,
Number()可以把任意值转换成数值。
// parseInt(变量) 可以把字符串的数据类型转换成数字型数据,得到的是整数
console.log(parseInt('3.1415')); //取整数 3 没有四舍五入
console.log(parseInt('4.98')); //4
// parseFloat(变量) 可以把字符串的数据类型转换成数字型数据,得到的是浮点小数
console.log(parseFloat('3.98')); //3.98
console.log(parseFloat('120pxrem')); //120
console.log(parseFloat('rem120px')); //NaN
//总结 parseInt()和parseFloat()单词注意大小写
//他们都可以把字符串转换为数字型,只不过一个是整数,一个有小数,
3.转换为布尔型
以下值转换布尔 | 结果为 |
false、undefined、null、0、 | false |
true、1、"somestring" | true |
console.log(Boolean('')); // false
console.log(Boolean(0));// false
console.log(Boolean(NaN));// false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(小白'));// true
console.log(Boolean(12)); // true
2.4复杂数据类型
object 对象
Array 数组
function 函数
Date 构造函数
RegExp 正则
3.运算符
JavaScript 算数操作符 可以分为两类:
(1).基本算术操作符 进行加、减、乘、除、取模(取余)等。
对应的是:+.、".1%
口诀:数值相加,字符相连。
(2)一元操作符自加、自减、正号、负号
对应的是:++,-,+.-
3.1 ++前置和++后置的区别
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(-)运算符来完成,递增(++)和递减()既可以放在变最前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变是后面时,我们以称为后置递增(递减)运算符。
++前置 先自加1,后运算
++后置 先运算,后自加1
var num = 1; //num就是1
//num = num + 1; //可以简写成++num
++num;
console.log(num); //2
var num = 10;
//num++; //类似于num=num+1
++num;
console.log(num); //实现变量的自动加上1效果
3.2算术优先级
一元操作符级别是最高的,后面就是先算小括号里面的,先乘除,后加减
3.3浮点数的精度问题
浮点数值的最高精度是17位小数
不要直接判断两个浮点数是否相等!
3.4表达式和返回值
表达式就是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们称为返回值
4.比较运算符
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较算的结果。
运算符名称 | 说明 | 案例 | 结果 |
< | 小于号 | 1<2 | true |
> | 大于号 | 1>2 | false |
>= | 大于等于号(大于或者等于) | 2>=2 | true |
<= | 小于等于号(小于或者等于) | 3<=2 | false |
== | 等号 | 37==37 | true |
!= | 不等号 | 37!=37 | false |
=== !== | 全等 要求值和数据类型都一致 | 37 === '37 | false |
console.log(3 < 5); //true
console.log(2 > 1); //true
console.log(100 <= 99); //false
console.log(55 >= 33); //true
var num1 = 10;
var num2 = 100;
var res1 = num1 > num2;
var res2 = num1 == 11;
var res3 = num1 != num2;
console.log(res1);
console.log(res2);
console.log(res3);
console.log(18 === '18');
4.1== 和 =-=有何区别?
==:判断值是否相等
===:判断值相等类型也相同
4.2优先级:
1. < <= > > =
2 == != === !==
5. 逻辑操作符
是用来进行布尔值运算的运算符,其返回值也是布尔值,逻辑运算符也称作布尔运算符
逻辑运算符 | 说明 | 案例 |
&& | "逻辑与”,简称"与" and | true && false |
|| | “逻辑或”,简称“或" or | true l false |
! | ”逻辑非”,简称"非" not | ! true |
总结
逻辑与&& 两边都是true 才返回true 只要有一边是false那就返回false
逻辑或 || 两边都是false才返回false 两边只要有一边是true那就返回true
逻辑非 ! 也叫作取反符 用来取一个布尔值相反的值 ,如果为true那就返回false 如果为false 那就返回true
逻辑与&& 两边都是true 才返回true 只要有一边是false那就返回false
逻辑或 || 两边都是false才返回false 两边只要有一边是true那就返回true
逻辑非 ! 也叫作取反符 用来取一个布尔值相反的值 ,如果为true那就返回false 如果为false 那就返回true
console.log(3 > 5 && 3 > 2); //false
console.log(3 < 5 && 3 > 2); //true
console.log(3 > 5 || 3 > 2); //true
console.log(3 > 5 || 3 < 2); //false
console.log(!(3 > 5)); //true
console.log(!false); //true
var isOk = !true;
console.log(isOk);
优先级
!> && > ||
6.赋值操作符
概念:用来把数据赋值给变量的运算符。
作用:将等号右边结果赋值给等号左边的变量。
赋值运算符 | 说明 | 案例 |
= | 直接复制 | userName=“我是值” |
+=,-= | 加、减一个数后再复制 | var age =10;age+=5://15 |
*=,/=,%= | 乘、除、取模 后再赋值 | var age =2;age*=5;//10 |
7.操作符优先表
优先级 | 运算符 | 符号 |
1 | 小括号 | () |
2 | 一元运算符 | ++ -- |
3 | 算术运算符 | 先* / %后+- |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先!再&& 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |