JS概括及基本语法

 

一．概括

JavaScript常常被称之为Web语言。因为最早JavaScript就是用来制作网页特效和表单验证的。

搭建JavaScript开发环境

搭建环境，无外乎就是书写代码的环境以及运行代码的环境。

常见的文本型代码编辑器如下：

l  记事本

l  Sublime

l  Atom

l  Brackets

l  VScode

常见的集成开发环境如下：

l  Dreamwaver

l  Webstrom

安装过程Node.js

访问https://nodejs.org/en/

安装好后，可以在控制台里面通过node  -v命令查看当前安装的node版本

NPM介绍

NPM全称Node Package Manager，是一个由Node.js官方提供的包管理和分发工具。

1. 安装NPM指令：在命令行中敲入

npm install -g cnpm --registry=https://registry.npm.taobao.org

1. 安装好后对它进行初始化

npm init: npm 初始化设置

1. 安装好npm后，安装一个常用的输入模块，指令如下

npm install readline-sync: 安装输入模块

二．JavaScript基本语法

1.注释：

单行注释//注释内容

 多行注释/*

*

*

*

*/

2.语句

JS中用分号结尾，每条语句独占一行。不填分号也可以，也不会报错，但是代码压缩的时候可能会有问题，建议添加分号。

let i = 10;

console.log(i);//10

可以用一对大括号将多条语句组合到一个代码块里面

{

    let i = 10;

    console.log(i);//10

}

注：JS是逐层解析，若有一层出错，则后面的内容都不会进行解析。

3.标识符

含义：表示某一个实体的符号。也就是自己起一个名字，这个名字可以用来作为变量名，函数名，对象名等。

硬性要求
1.可以是由数字，字母，下划线和美元符号组成，不允许包含其他特殊符号

2.不能以数字开头
3.禁止使用JavaScript中的关键词和保留字来进行命名

4.严格区分大小写

软性要求
  望文知意

4.命名的三种方法

1. 匈牙利命名法是微软公司下面以为匈牙利籍的程序员所发明的命名法则，其特点是标识符的名字以一个或者多个小写字母开头，表示了该变量的数据类型。

例如：a_array, o_object, i_userAge, b_isPassed

2.驼峰命名法

驼峰命名法实际上分为两种，一种是大驼峰，另外一种是小驼峰。

●大驼峰又被称之为帕斯卡命名法，就是每一-个单词都是首字母大写

例如: UserName

●小驼峰和大驼峰的区别在于，小驼峰的第一个单词的首字母是小写，后面单词的首字母是大

写

例如: userName

3.蛇形命名法

这种命名法常见于Linux内核，C+ +标准库，Boost以及Ruby, Rust等语言蛇形命名法的特点在于单词与单词之间使用下划线进行分隔例如: user_ name, my_ first_ name

5.关键字和保留字

ECMA-262描述了-组具有特定用途的关键字。这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字是语言本身所保留的，不能用作标识符。

ECMA-262还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途。但它们有可能在将来被用作关键字。

JavaScript中的关键字与保留字如下:

abstract、await、 boolean、 break、 byte、 case、catch、 char、 class、 const, continue、debugger、default、 delete、 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、 return、short、static、 super、 switch、 synchronized、 this、 throw、 throws、 transient、 true、 try、typeof、var、 volatile、 void、 while、 with、 yield

6.数据类型介绍

在JavaScript中，数据类型整体上来讲可以分为两大类:简单数据类型和复杂数据类型

●简单数据类型

简单数据类型一共有6种:

string, symbol, number, boolean, undefined, null其中symbol类型是在ES6里面新添加的基本数据类型

●复杂数据类型

复杂数据类型就只有1种object

包括JavaScript中的数组，正则等，其类型都是object类型

查看数据类型

在JavaScript中，我们可以通过typeof运算符来查看一个数据的数据类型

console. log( typeof 10);//number

console. log(typeof true);//booleanconsole.

log(typeof 'Hello');//string

console. log(typeof [1,2,3]);//object

7.变量

      接下来我们需要探讨一下对于任何编程语言来讲都是非常重要的一个东西，变量。所谓变量，就是用于引用内存中存储的一一个值。当然， 我们在使用变量之前，还需要先做的一件事儿就是声明变量。

声明变量

      在JavaScript中声明变量的方式有3种: var ，let ，const 。其中var现在已经不推荐使用了，因为会有变量提升等问题。(后面我们会具体来探讨此问题)

      const和let的区别在于，const 所声明的变量如果是简单数据类型，那么是不能够再改变的。而let所声明的变量无论是简单数据类型还是复杂数据类型，在后面是可以改变的。示例如下:

const声明变量

      const name = 'Bill';name = 'Lucy';

      //TypeError: Assignment to constant variable. 

 

let声明变量

let name = 'Bill';

name = 'Lucy';

console.log(name);

 

变量的赋值与初始化

let a = 3;

也可以一次性初始化多个变量，将其写在一行

let x = 3,y = 4,z = 5;

如果声明变量没有赋予初值，那么默认值为undefined

let a;

console.log(a);//undefined

使用var声明变量

      前面有提到过，在JavaScript中声明变量的方式有3种: var, let ，  const。其中var现在已经不推荐使用了。这是因为使用var来声明变量会伴随着一些问题。 当然，这些问题也经常被看作是JavaScript的一些特点，例如重复声明和遗漏声明。

      重复声明

      如果是使用var关键字来声明的变量，那么是允许重复声明的。只不过这个时候会忽略此次声明。如果重新声明并且带有赋值，则相当于是重新赋值

      重复声明不带有賦值操作，JS引擎会自动忽略后面的变量声明

      var test = 3;

var test;

      console. log(test);//3

      重新声明时如果带有赋值操作，那么会进行一一个数据的覆盖

      var test = 3;

var test = 5;

      console. log(test);//5

作用域

1. 全局作用域

这是JS引擎-进来就处于的运行环境。在全局作用域的中所声明变量称之为全局变量。全局变量的特点在于变量在任何地方都能被访问。
let a = 5;//这是一个全局变量
2.局部作用域

在JavaScript中，一对大括号就可以产生一个局部作用域。局部作用域里面的变量称之为局部变量，既然是局部变量，那么就只能在这个局部的作用域里面能访问到，外部是访问不到的。
{

leti=10;
console. log(i) ;//10
console.log(i);
//ReferenceError: i is not defined
顺带一提的是，在大括号中用var声明的变量不是局部变量，而是一个全局变量。这其实也是最早使用var来声明变量所遗留下来的一一个问题。

数据类型介绍

在JavaScript中，数据类型整体上来讲可以分为两大类:简单数据类型和复杂数据类型

●简单数据类型

简单数据类型一共有6种:

string, symbol, number, boolean, undefined, null其中symbol类型是在ES6里面新添加的基本数据类型

●复杂数据类型

复杂数据类型就只有1种object

包括JavaScript中的数组，正则等，其类型都是object类型

查看数据类型

在JavaScript中，我们可以通过typeof运算符来查看一个数据的数据类型

console. log( typeof 10);//number

console. log(typeof true);//booleanconsole. log(typeof 'Hello');//stringconsole. log(typeof [1,2,3]);//object

布尔类型

所谓布尔类型，也被称之为boolean 类型，就是真和假，这个类型的值只有两个，-一个是true,另一个 是false

let i = true;

console.log(i);//true

console. log(typeof i);//boolean

需要注意的是，这两个值与数字值不是一回事，因此true不一定等于1， 而false也不一 定等 于0。还有一-点就是Boolean类型的字面值true和false是区分大小写的。也就是说，True和False都不是布尔值。

虽然Boolean类型的字面值只有2个，但是ECMAScript中所有类型的值都可以转换为Boolean类型。可以使用Boolean() 函数将其他类型转换为布尔值。

console.log(Boolean("Hello"));//true

console. log (Boolean(42));// true

console. log(Boolean(0));//false

数字类型

1. 整数

二进制以0b开头，八进制以0开头，十六进制以0x开头

计算结果仍然为十进制

1. 实数

表示浮点数的方式有两种：小数型和科学计数型。

let a = 3.14;

let b = 9.12e+2;

console.log(a,b);//3.14 912

1. 数值扩展

JS支持的最小值console.log(Number.MIN_VALUE);//5e-324

JS支持的最大值console.log(Number.MAX_VALUE);//1.7976931348623157e+308

1. NaN：

英文全称Not a Number

任何涉及NaN的操作都会返回NaN

let a = NaN + 10;

console.log(a);//NaN

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类型的console.log(typeof NaN);//number

数值转换

number()可以将非数值转为数值

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

console.log(Number("1"));//1

console.log(Number("012"));//12

console.log(Number("0o10"));//8

console.log(Number("0b111"));//7

console.log(Number("3.14"));//3.14

console.log(Number("0xf"));//15

console.log(Number(""));//0

console.log(Number("123Hello"));//NaN

parseInt():将非数值转为整数值

console.log(parseInt("1"));//1

console.log(parseInt("012"));//12

console.log(Number("0o10"));//8

console.log(Number("0b111"));//7

console.log(parseInt("3.14"));//3

console.log(parseInt("0xf"));//15

console.log(parseInt(""));//NaN

console.log(parseInt("123Hello"));//123

console.log(parseInt("012"));//12

console.log(parseInt("012",8));//10

console.log(parseInt("AF"));//NaN

console.log(parseInt("AF",16));//175

静态方法

Number.isInteger():用来判断一个值是否为整数。

console.log(Number.isInteger(25));//true

console.log(Number.isInteger(25.0));//true

console.log(Number.isInteger(25.1));//false

console.log(Number.isInteger("15"));//false

console.log(Number.isInteger(true));//false

Number.isFinite():不是数字的时候返回false，是的话返回true。

console.log(Number.isFinite(true));//false

console.log(Number.isFinite(7));//true

console.log(Number.isFinite(NaN));//false

console.log(Number.isFinite(Infinity));//false

console.log(Number.isFinite("23"));//false

实例方法

toFixed()按照指定小数位返回数值四舍五入后的字符串表示

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));//报错

 

字符串类型

let a = "abcd";

let b = 'abcd';

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

 

 

toString()将除了null和undefined以外的数据类型转化为字符串

 

let a = 10,b = true,c = null,d;

console.log(typeof a.toString());//string

console.log(typeof b.toString());//string

console.log(typeof c.toString());//报错

console.log(typeof d.toString());

 

let i = 10;

console.log(i.toString());//10

console.log(i.toString(2));//1010

console.log(i.toString(8));//12

console.log(i.toString(10));//10

console.log(i.toString(16));//a

 

let a = 10,b = true,c = null,d;

console.log(String(a),typeof String(a));//10 string

console.log(String(b),typeof String(b));//true string

console.log(String(c),typeof String(c));//null string

console.log(String(d),typeof String(d));//undefined string

 

字符串模板

 

增强版的字符串

let str = `Hello World`;

console.log(str);//Hello World

console.log(typeof str);//string

console.log(str.length);//11

 

let str = `Hello

World`;

console.log(str);

//Hello

//World

console.log(typeof str);//string

console.log(str.length);//12

 

let name = "xiejie";

console.log(`Hello,${name}`);

//Hello,xiejie

 

let count = 10,price = 0.25;

console.log(`${count} items cost $${(count*price).toFixed(2)}`);

//10 items cost $2.50