## JavaScript概述
1·JavaScript的发展史大致可分为4个阶段,分别为javaScript起源,第一次浏览器大战,第二次浏览器大战和javaScript蓬勃发展。
2·java和javaScript是两个不相干的语言,两者除了名字和历史渊源外,几乎没有任何关系。
3·1997年,以javaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA)̶ 262,也就是ECMAScript。
4·2002年,Mozilla在Navigator浏览器的基础上,推出了火狐浏览器。
5·2005年,Google公司推出了Ajax技术,并将其应用到了自家的Gmail上面,Ajax的出现,大大的改变了用户的上网体验,可以无刷新的改变页面内容,而Ajax的主体就是JavaScript。
6·2009年,RyanDahl在V8引擎的基础上发布了Node.js。至此,JavaScript不再局限于客户端的开发,而是可以进行服务器端的开发了。
**NPM**
1·安装NPM指令:(淘宝镜像:在命令行中敲入)
npm insrall -g cnpm --registry=https://registry.npm.taobao.org
2·初始化设置
npm init
3·安装输入模块
npm install readline-sync
4·执行命令结果:
node 文件夹名
## JavaScript编程基础
**JavaScript基础语法**
*1-1 注释*
1·单行注释:// ctrl+/
2·多行注释:
/*
*
*这是一个较长的多行注释
*
*/
*1-2语句*
在javaScript中,语句一般我们都会采用以分号结尾,每条语句独占一行的形式来书写代码。
*1-3标识符*
所谓标识符,就是指用来标识某个实体的一个符号。其命名规则分为2大类:
硬性要求:
1·可以是由数字,字母,下划线和美元符号组成,不允许包含其他特殊符号。
2·不能以数字开头。
3·禁止使用JavaScript中的关键字和保留字来进行命名。
4·严格区分大小写。
软性要求:望文知意
**命名的3中方法**
1·匈牙利命名法:
是微软公司下面以为匈牙利籍的程序员所发明的命名法则,其特点是标识符的名字以一个或者多个小写字母开头,表示该变量的数据类型;
数据类型 | 对应前缀 |
Array数组 | a |
Boolean布尔 | b |
Float浮点 | f |
Function | fn |
Interger(int)整型 | i |
Object对象 | o |
Regular Expression正则 | re |
String 字符串 | s |
前缀之后的是一个单词或多个单词的组合,该单词表明表明变量的用途。
例如:a_array,o_object,i_userAge ,b_isPassed.
2·驼峰命名法:
大驼峰:就是每一个单词都是首字母大写。例如:UserName
小驼峰:第一个单词的首字母是小写,后面单词的首字母是大写。例如:userName。
3·蛇形命名法:
特点在于单词与单词之间使用下划线进行分隔。
这种命名法常见于Linx内核,c++标准库,Boost以及Ruby,Rust等语言。
例如:user_name,my_name.
*1-4关键字和保留字*
JavaScript中的关键字和保留字:
abstract,await,boolean,break,byte,case,catch,char,class,const,contine,
debugger,default,deldte,do,double,else,enum,export,extends,false final,finally,float,
for,function,goto,if,implements,import,in,instanceof,int,interface,let,long,native,new,
null,package,private,protected,public,teturn,short,static,super,switch,synchronized,
this,throw,throws,transient,true,try,typeof,var,volatile,void,while,with,yield
*1-5数据类型介绍*
数据类型分为两大类:简单数据类型和复杂数据类型。
简单数据类型:
分为6种:string,symbol,number,Boolean,undefined,null
复杂数据类型:object,就这一种,包括javascript中的数组,正则等,其类型都是object类型。
*查看数据类型*
在javascript中,我们通过typeof运算符来查看一个数据的数据类型。
例如:
console.log(typeof 10);//number console.log(typeof true);//boolean console.log(typeof 'hello');//string console.log(typeof [1,2,3]);//object
*2-1变量*
变量:就是用于引用内存中储存的一个值,
*2-2声明变量*
在javascript中声明变量的方式由3种:var let const。其中var现在已经不推荐使用了。
const:
所声明的变量如果是简单数据类型,那么是不能够再改变的。
例如:
const name ='Bill'; name ='Lucy'; let: 所声明的变量无论是简单数据类型还是复杂数据类型,在后面是可以改变的。 例如: let name ='Bill'; name ='Lucy'; console.log(name);
*2-3变量的赋值与初始化*
我们可以利用 =来给一个变量进行赋值,给变量第一个赋值的过程,叫做变量的初始化。一般我们在声明变量的时候就会将变量给初始化。
例如:let a =3;
一次性初始化多个变量:let x =3, y =4, z =5;
如果声明变量时没有赋予初值,那么默认值为undefined。
*2-4使用var声明变量*
1,重复声明:
重复声明不带由赋值操作时JS引擎会自动忽略后面的变量声明
例如:
var test =3; var test; console.log(test);//3 ``` 重新声明时如果带有赋值操作,那么会进行一个数据的覆盖。 例如: ``` var test =3; var test =5; console.log(test);//5
2·遗漏声明:
如果试图读取一个没有声明的变量的值,JS会报错,JS允许遗漏声明,即直接对变量赋值二无需事先声明,赋值操作会自动声明该变量。
例如:
{a =5; console.log(a);//5 } console.log(a);//5
*2-5作用域*
1·全局作用域:
这是JS引擎一进来就处于的运行环境,在全局作用域的中所有声明称之为全局变量。全局变量的特点在于变量在任何地方都能被访问。
2·局部作用域:
在js中,一对大括号就可以产生一个局部作用域,只能在这个恐惧不的作用域里面能访问到,外部时访问不到的。
在大括号中使用var声明的变量不是局部变量,而是一个全局变量。
在局部作用域里面,如果变量名和全局作用域里面的变量名冲突,优先使用局部作用域里面的变量。
## 3-1数据类型
3-1-1 undefined类型:
undefined类型只有一个值,那就是undefined。在使用变量但没有为其赋予其值的时候,这个变量就是undefined。
没有声明的变量,使用时会报错,而不是undefined。
3-1-2null类型:
null类型的值只有一个,就是null。null表示一个空的对象,
3-1-3布尔类型boolean:
就是真和假,这个类型的值只有两个,true和false。
**9个值对应布尔类型里面的假值**
"":双引号的空字符串 '':单引号的空字符串 ``:空字符串模板 0 :数字0 -0:JS中-0和0 为不同的值 NaN: false null undefined
*3-2数字类型*
1·整数:
可以分为正整数和负整数:例如:let a =12;let b =-7;
2·实数:
就是平常所常见的小数,或者称之为浮点数。
在javascript中,表示浮点数的方式由两种:小数型和科学计数法型
例如:let a =3.14;let b =9.12e+2;console.log(a,b);//3.14 912
3·NaN:
全称为Not a Number ,即非数值。是恶个数值用于表示本来要返回数值的操作未返回数值的情况。
NaN有两个特点:1·任何涉及NaN的操作都会返回NaN.2·NaN和任何值都不相等,包括它自己本身。
除此之外,ECMAScript还定义了一个isNaN()函数,来帮助我们判断一个参数是否是数值。
例如:
console.log(isNaN(NaN));//true console.log(isNaN("123"));//false console.log(isNaN(123));//false console.log(isNaN("hello"));//true console.log(isNaN(true));//false
NaN时属于number类型的。
4.数值转换:
在javascript中有三个函数可以将非数值的数据转为数值。
分别是:Number(),parse Int()转为整数,parseFloat()转为浮点数,小数
1· Number():可以将非数值转为数值
注意规则:
- 如果时Boolean值,true和false将分别被转换为1和0,
- 如果时数字,那么就是简单的传入和返回,
- 如果是null值,那么返回0,
- 如果是undefined,那么返回NaN,
示例:
console.log(Number(true));//1 console.log(Number(false));//0 console.log(Number(10));//10 console.log(Number(null));//0 console.log(Number(undefined));//NaN
如果是字符串,那么又是如下的规则:
- 如果字符串只包含数字,则将转为十进制,即1会变成1,123变成123,而011会变成11.
- 如果字符串中包含有效的十六进制格式,如1.1,则将其转换为对应的浮点数值。
- 如果字符串中包含有效的十六进制格式,例如0xf,则将其转换为相同大小的十进制整数。
- 如果字符串是空的,则将其转换为0,
- 如果字符串包含上述格式之外的字符,则将其转换为NaN
示例:
console.log(Number("1"));//1 console.log(Number("012"));//12 console.log(Number("0o10"));//8 console.log(Number("ob111"));//7 console.log(Number("3.14"));//3.14 console.log(Number("0xf"));//15 console.log(Number(""));//0 console.log(Number("123Hello"));//NaN
2·paeseInt():也是将一个非数值转为数值
相比number()函数,parseInt()会更多的看是否有数字,有就会将其转换为数值,最简单的例子为number()函数转换123hello时会转换为NaN,而parseInt()则会将其转换为123.
碰到空字符串时,number()函数会将其转换为0,而parseInt()则会将其转换为NaN。
最后时碰到小数时,会有一个取整的过程,例如3。14会被转换为3.
3·parseFloat():将非数值转为浮点数
parse Float()只解析十进制值,没有第二个参数,该函数会将带有小数点的字符串转换为小数,如果没有小数点的树会被转换为整数。同样的parseFloat()也是尽可能转换更多的数值,例如: 123hello会被转换为123.
ES6将全局方法paeseInt()和parseFloat()等方法,移植到number,行为完全保持不变,是为了逐步减少全局性的方法,使得语言逐步模块化。
例如:
console.log(Number.parseInt("12.34"));//12 console.log(Number.parseFloat("12.34#"));12.34
4·toFixed():按照指定的小数点返回数值四舍五入后的字符串表示(常用于处理货币值),toFixed()里的参数只接受0-20,若不传参数或者参数为undefined则相当于参数为0.
示例:
let num = 10.456; console.log(num.toFixed(2));//10.46 console.log(num.toFixed());//10 console.log(num.toFixed(0));//10 console.log(num.toFixed(undefined));//10 console.log(num.toFixed(-1));//报错
*3-3字符串类型*
3-3-1字符串介绍:
可以使用单引号,也可以使用双引号。
字符串的内容本身包含单引号或者双引号的话,需要和字符串界限符区分开。
示例:
let a ="hello 'world',welcome";//正确 let a ='hello"world",welcome';//正确 let a ="hello"world",welcome";//错误 所以,使用转义字符是一个很好的选择。 示例: let a = "Hello 'World',welcome";// 正确 let b = 'Hello "World",welcome';//正确 let c = "Hello "World",welcome";//正确
字符串这种数据类型非常霸道,它和其他数据类型相加都会被转换为字符串类型。
示例:
let a = "abcd"; let b = 13 + a; let c = 3.14 + a; let d = true + a; let e = null + a; let f = undefined + a; console.log(typeof b);//string console.log(typeof c);//string console.log(typeof d);//string console.log(typeof e);//string console.log(typeof f);//string
所以,我们要让一个非字符串的变量转换为字符串的话,只需要和一个空字符串相加就可以了。
*3-4字符串模板*
在ES6中新增了模板字面量是增强版的字符串,它用反引号(`)标识
如果在字符串中包含反引号,只需要用反斜杠转义即可
在反引号之内的所有空白符都是字符串的一部分,因此需要特别注意缩进。
变量占位符${name},可替换的不仅仅是变量名,可以嵌入运算符,函数调用。
*3-5类型转换*
1·隐性转换:
当不同的数据类型进行相互运算的时候,当对布尔类型的数据求布尔值的时候。
预期为数字的时候:
算术运算的时候,我们的结果和运算的数都是数字,数据会转换为数字进行计算(-*/%)
类型 | 转换前 | 转换后 |
number | 4 | 4 |
string | ’1‘ | 1 |
string | ’abc‘ | NaN |
string | ’‘ | 0 |
boolean | true | 1 |
boolean | false | 0 |
undefined | undefined | NaN |
null | null | 0 |
预期为字符串的时候:
转为字符串使用+号时候,会自动转换为字符串。
预期为布尔的时候:
转为布尔值,undefined,null,“” , 0, NaN转为false,其余转为true。
2·强制转换:
转换数值为number(),parse Int(),parseFloat()转换函数小技巧:
- 转换字符串:a =""+数据
- 转换布尔:!数据类型
- 转换数值:数据类型*或/1
**4-1运算符**
*4-1-1算术运算符*
+(加) ,- (减),* (乘法),/ (除法),%(求余,即两数相除后的余数)
**(求幂)
*4-1-2一元运算符*
就是只作用于一个操作数的运算符,有两种:
1·赋值运算符:
最常见的就是=,还有+=,-=,*=, /=,%=等
示例:
let a = 5; a += 5; console.log(a); // 10 a -= 3; console.log(a); // 7 a *= 5; console.log(a); // 35 a /= 5; console.log(a); // 7 a %= 2; console.log(a); // 1
2·递增和递减:
有前置和后置的区别:
前置:那就是先自增或自减,然后参与运算。后置:则是先参与运算,然后再自增或自减。
前置示例:
let a = 2; let b = 10; let c = --a + b; let d = a + b; console.log(a,b,c,d);//1 10 11 11 后置示例: let a = 2; let b = 10; let c = a-- + b; let d = a + b; console.log(a,b,c,d);//1 10 12 11
自增自减操作符不仅局限于数值,其他类型需遵循以下规则:
- 在应用一个包含有效数字字符的字符串时,现将其转换为数字值,在执行加减1操作,字符串变量变为了数值变量。
- 在应用于一个不包含有效数字字符的字符串时,将变量的值设置为NaN,字符串变量变成数值变量。
- 遇布尔值false时,先将其转换为0再执行加减1操作,布尔值变量变成数值变量。
- 遇布尔值true时,先将其转换为1再执行加减1操作,布尔值变量变成数值变量。
- 在应用浮点数数值时,执行加减1操作。
示例:
let s1 = "123"; let s2 = "123Hello"; let s3 = "Hello"; let s4 = true; let s5 = 3.14; console.log(--s1);//122 console.log(--s2);//NaN console.log(--s3);//NaN console.log(--s4);//0 console.log(--s5);//2.14
**比较运算符**
*4-1-3关系运算符*
大于,小于,小于等于,大于等于
示例:
console.log(5 > 3);//true console.log(3 > 5);//false 字符串的比较: console.log("c" > "b");//true console.log("c" > "box");//true
这里的比较主要是按照ASCII码来进行比较的。
如果是一个字符串和一个数字进行比较,那么会将字符串先转换为数字,如果不能转换为数字 ,则转换为NaN
示例:
console.log("5" > 3);//true, 因为"5" 转换为了 5 // 任何一个数与NaN进行关系比较,返回的都是false console.log("Hello" > 3);//false, 因为"Hello" 转换为了NaN
**完整规则如下**
- 如果两个数都是数值,则执行数值比较。
- 如果两个都素字符串,则比较两个字符串对应的字符编码
- 如果一个操作数是数值,则将另一个操作数转换为一个数值,然后执行数值的比较。
- 如果一个操作时时对象,则调用这个对象的valueof()方法,用得到的结果按照前面的规则执行比较,如果对象没有valueof()方法,则调用toString()方法,并用得到的结果根据前面的规则执行比较。
- 如果一个数时布尔值,则先将其转换为数值,然后再进行比较。
还需注意的时,任何数和NaN进行比较反坏的都是false。
*4-1-4相等和不相等*
==表示相等,!=表示不相等,
转换规则:
- null和undefined时相等的
- 如果有一个操作数时NaN,则返回false,NaN和NaN比较也是false。
- 如果时数字的字符串和数字进行比较,会将字符串转换为数字
- 布尔值里面true转换为1,false转换为0.
一些特殊情况:
表达式 | 值 |
null == undefined | true |
"NaN" == NaN | false |
5 == NaN | false |
NaN == NaN | false |
NaN != NaN | true |
false == 0 | true |
true == 1 | true |
true == 2 | false |
undefined == 0 | false |
null == 0 | false |
"5" == 5 | true |
*4-1-5全等和不全等*
全等时 === ,不全等时 !== ,这个时必须数据类型和数值都相等。
示例:
console.log("5" == 5);//true console.log("5" === 5);//false
*4-1-6逻辑运算符*
1·非:!
就是取反,非真即假,非假即真
示例:
let i = true; console.log(!i);//false
非运算符不仅只能用于布尔值,其他数据类型如下:
- 如果操作数是一个对象,返回false
- 如果操作数是一个空字符串,返回true
- 如果操作数是一个非空字符串,返回false
- 如果操作数是数值0,返回true
- 如果操作数是任意非0数值(包括Infinity),返回false
- 如果操作数是null,返回true
- 如果操作数是NaN,返回true
- 如果操作数是undefined,返回true
示例:
console.log(!false);//true console.log(!"blue");//false console.log(!0);//true console.log(!NaN);//true console.log(!"");//true console.log(!12);//false
2·与: &&
作用于两个到多个值,并且只有所有的操作数都是真值时,才是true
示例:
console.log(false && true);//false console.log(true && true);//true
短路现象:
-第一个操作数为真,会进入第二个操作数的判断,且无论第二个操作数的真假,都会返回第二个操作数。
- 第一个操作数为假,不会进入第二个操作数的判断,直接返回第一个操作数。
示例:
console.log(3 && 5);//5 console.log("Hello" && 20);//20 console.log("Hello" && false);//false console.log("" && "shoe");//"" console.log("Hello" && '');//''
3·或:||
同样时作用于两个到多个值,但是只要有一个操作数为真,就返回真。
示例:
console.log(false || true);//true console.log(true || false);//true
短路现象:
-第一个操作数为真,则不会进入第二个操作数的判断,所以无论第二个操作数的真假,都会直接返回第一个操作数。
- 第一个操作数为假,则会进入第二个操作数的判断,但无论第二个操作数的真假,都会直接返回第二个操作数。
示例;
console.log(false || true);//true console.log("Hello" || "");//Hello console.log("Hello" || "str");//Hello console.log(NaN || "");//"" console.log(0 || "Hello World");//Hello World console.log('' || 'str');//str console.log('' || false);//false
**4-2运算符优先级**
运算符优先级有一套规则,具有较高优先级的运算符先于较低与优先级的运算符执行。
下表按从高到低的优先级列出js运算符。具有相同优先级的运算符按照从左到右的顺序求值。
运算符 | 描述 |
. [] () | 字段访问,数组下标,函数调用以及表达式分组 |
++ -- - ~ ! delete new typeof void | 一元运算符,返回类型,对象创建,未定义值 |
* / % | 乘法,除法,取余 |
+ - + | 加法,减法,字符串拼接 |
<< >> >>> | 移位 |
< <= > >= instanceof | 小于,小于等于,大于,大于等于,instanceof |
== != === !== | 等于,不等于,全等,不全等 |
& | 按位于 |
^ | 按位异或 |
| | 按位或 |
&& | 逻辑与 |
|| | 逻辑或 |
?: | 三目运算符 |
= | 赋值 |
, | 多重赋值 |