JS的基础语法

## 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 =3var test;
console.log(test);//3
```
重新声明时如果带有赋值操作,那么会进行一个数据的覆盖。
例如:
```
var test =3var 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 
== != === !==  等于,不等于,全等,不全等
按位于
按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?:  三目运算符
= 赋值
多重赋值
原文地址:https://www.cnblogs.com/lyl-0667/p/11111578.html