JavaScript 介绍

JavaScript 介绍
一：JavaScript与ECMAScript的关系

　　ECMAScrip 和 JavaScipt的关系是，前者是后者的规格，后者是前者的一种体现。

　　ps：一般来说ECMAScript就叫JavaScript。

　　

二：JavaScript引入方式

　　1：在script标签内部

　　2.：引入额外的JS文件
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    // 写js代码
    </script>
    
    <script src="myjs.js"></script>
</head>
<body>

</body>
</html>
```
　　ps：注释：// 是单行注释。/*多行注释*/ 。结束语：JavaScript 中是以；为结束符。

三：JavaScript语言基础

　　变量：

　　　　声明规则：var 变量名

　　　　变量名：可以使用_，数字,字母,$组成，不能以数字开头。

　　　　注意：变量名区分大小写的，推荐使用用驼峰体命名方式，保留过的字不能用做变量名。

　　ps：

　　　　ES6新增 let 来声明变量。相对于var的好处是 let 只在命令所在的代码块有效。比如在for循环内声明变量。

　　　　ES6新增const用来声明变量。一旦声明，其值就不能改变。
```
const PI = 3.1415;
undefined
PI
3.1415
PI = 3
VM61:1 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:1:4
(anonymous) @ VM61:1
var egon = 'lin';
undefined
egon
"lin"
var egon = 'hai';
undefined
egon
"hai"
var PI = 3;
VM167:1 Uncaught SyntaxError: Identifier 'PI' has already been declared
    at <anonymous>:1:1
(anonymous) @ VM167:1
```
ps :其他定义变量的方式：
```
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
```
四：JavaScript的数据类型　　

　　1.JavaScript拥有动态类型(ps:声明变量不赋值的话，默认值为underfined)

　　2.不区分整型和浮点型，只有一种数据类型。（parseInt 相当于python中的Int ，将字符串形式里面的数字转化为真正的数据类型,NAN表示不是数字）

　　3.字符串的常用方法：（打印：console.log(c);）

　　　　　　返回长度：.length
　　　　　　移出空白：.trim() .trimLeft() .trimRight() (只能移出两边的空格，不能移除中间的空格)

　　　　　　返回第n个字符：.charAt(n)

　　　　　　拼接：.concat(...) (根据原来的字符串往后拼接) 【拼接字符串常用符号是+号】

　　　　　　子序列位置：.indexOf(substring, start)

　　　　　　根据索引获取子序列：.substring(from, to)

　　　　　　　　　　语法：string.substring(start,stop)

　　　　　　　　　　1，start > stop ,start和stop将被交换

　　　　　　　　　　2，如果参数是负数或者不是数字，将会被0替换

　　　　　　切片：.slice(start, end)

　　　　　　　　　　语法：string.slice (start,stop)

　　　　　　　　　　1，start > stop ，不会交换两者。

　　　　　　　　　　2，start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)

　　　　　　　　　　3，stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

　　　　　　小写：.toLowerCase()

　　　　　　大写：.toUpperCase()

　　　　　　分割：.split(delimiter, limit)

　　　　　　ps:(ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）(ESC下面的符号)标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。)【如果在模板字符串内部要用到反引号，要加上/来转义】

五，布尔值

　　JavaScript的bool值是true 和 false（注意是小写）。

　　ps：空字符串，0，null，undefined，NaN都是false。

　　　　null：清空一个变量使用（name = null）

　　　　undefined：两种情况，1：声明一个变量未初始化。2：没有明确返回值的函数。

六，对象

　　JavaScript中的所有事物都是对象：字符串，数值，数组，函数等等，JavaScript允许自定义对象。

　　对象：既带有属性和方法的特殊数据类型。

七，数组

　　数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

　　方法：

　　获取数组的大小：.length

　　尾部追加元素：.push(ele)

　　获取尾部的元素,（将其从原列表中拿出）：.pop()

　　头部插入元素：unshift(ele)

　　头部移除元素：shift()

　　切片：slice(start,end)

　　反转：reverse()

　　将数据元素连接成字符串：join(seq)

　　连接数组：concat() (相当于python中的extend)

　　排序：.sort()

　　　　关于sort（）需要注意：

　　　　如果调用该方法没有使用参数，将按字母顺序对数组中的元素进行排序，排序的方式是按照字符编码的顺序进行排序。

　　　　因此需要把数组中的元素转化为字符串形式。

　　　　

　　将数组的每个元素传递给回调函数：.forEach()

　　　　语法：forEach(funtion(currentValue,index,arr),thisValue)

　　　　　　　　currentValue：必需。当前元素。

　　　　　　　　index：可选。当前元素的索引值。

　　　　　　　　arr：可选。当前元素所属的数组对象。

　　　　　　　　thisValue：可选。传递函数的值一般用‘this’值。如果这个参数为空，‘undefined’会传递‘this’值。
```
li.forEach(function(v,i,a){console.log(v,i,a)});
 77 0 (3) [77, 88, 99]
 88 1 (3) [77, 88, 99]
 99 2 (3) [77, 88, 99]
```
　　删除元素，并向数组添加新元素：splice()

　　　　语法：splice(index,howmany,item1...itemx)

　　　　　　index：必需，规定从何处添加（删除）元素。该参数是删除元素的索引，必须是数字。

　　　　　　howmany：必需，规定应该删除多少元素，必需是数字，但可以是‘0’。如果未规定此参数，则删除从index开始到原数组所有元素。

　　　　　　item：可选。要添加到数组的新元素。
```
var li = [11,22,33,44,55];
undefined
li.splice(2,1,'a');
[33]
li;
(5) [11, 22, "a", 44, 55]
```
　　返回一个数组元素调用函数处理后的值的新数组：.map()

　　　　语法：map(function(currentValue,index,arr),thisValue)

　　　　　　　　currentValue：必需，当前元素的值。

　　　　　　　　idex：可选。当前元素的索引值。

　　　　　　　　arr：可选。当前元素属于的数组对象。

　　　　　　　　thisValue：可选。对象作为该执行回调时使用，传递给函数。用作‘this’的值。

　　　　　　　　　　　　　如果省略thisValue，‘this’的值为'undefined'
```
li.map(function(v,i,a){return v+2});
(9) [3, 4, 5, 6, 7, 8, 9, 10, 11]
```
八，运算符

　　1.算术运算符,

　　　　+ , - , / , * , % , ++ , --

　　　　ps：++ ， -- 在出现赋值符号的时候会有所不同。
```
var a, i = 10;
a = i ++; //这里i要先赋值，再自加。语句执行后a=10, i = 11;
而如果写成：
var a, i = 10;
a = ++i; //这里i要先自加，再赋值。语句执行后a=11, i = 11;
```
　　2，比较运算符

　　　　> , >= , < , <= , != , == , === , !==
```
1 == “1”  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
```
　　3，逻辑运算符

　　&& , | |, !

　　4，赋值运算符

　　= ， += ，-= ， *= ， /=

　　与python中一样。

九，流程控制

　　if - else 语法： if （条件） {执行代码} else{执行代码}；

　　if - else if - else ：if （条件）{执行代码} if else （条件）{执行代码} else {执行代码}；

　　switch :语法：switch （表达式）{case n ：代码块 break；case n ：代码块 break}

　　　　　　ps：计算一次switch表达式，把每个表达式的值与每个case的值进行对比。如果匹配，就执行相应的代码。

　　　　　　　　通常要加break，否则程序会继续执行后续case。
```
switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
} 
```
　　for：语法：for（表达式）{执行代码} ；
```
for (var i=0;i<10;i++) {
  console.log(i);
}
```
　　while：语法：while（条件）{执行代码}；
```
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
```
　　三元运算：

　　var voteable = (age < 18) ? "太年轻":"足够成熟";
　　条件成立返回：前面的结果给变量，否则返回冒号后面的结构给变量。
```
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
```
　　解释：因为a > b不成立所以执行第一个：后面的的代码，也就是 (b=="20")?a:b，也是一个三元逻辑运算，再做判断，明显，b == '20'成立，所以返回的结果是a，因此x的值为10.

九，函数：

　　普通函数定义:
```
function f1() {
  console.log("Hello world!");
}
```
　　带参函数定义：
```
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}
```
　　带有返回值的函数：
```
function sum(a, b){
  return a + b;
}
```
　　匿名函数：
```
var sum = function(a, b){
  return a + b;
}
```
　　立即执行函数（也就是定义完函数之后立马运行。）
```
(function(a, b){
  return a + b;
})(1, 2);
```
　　ps：一种特殊的定义函数的方式：var 函数名 = （参数）=> 返回值。
```
var f = v => v;
// 等同于
var f = function(v){
  return v;
}
```
　　函数中的arguments参数：arguments相当于包含传入的所有的参数。通过arguments[索引]取出对应的值。
```
function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)
```
　　ps:函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

　　函数的全局变量和局部变量：

　　局部变量：

　　　　在函数内部声明的变量（var），只能在函数内部访问它（其作用域就是在函数内部）。

　　只要在函数运行完毕，本地变量就被被删除。

　　全局变量：

　　　　在函数外声明的变量去全局变量，网页上的所有脚本和函数都能访问它。

　　变量生存周期：

　　　　局部变量会在函数运行以后被删除。

　　　　全局变量会在页面关闭后被删除。

　　作用域：

　　　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层（实际上与python作用域关系查找一样的。）
```
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
```
　　　　f（）；输出结果是 shenzhen
```
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
```
　　　　ret（）；输出的结果是 BeiJing

　　　闭包函数：
```
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();
```
十，词法分析：

　　JavaScript中在调用函数的那一瞬间，会先进行词法分析。

　　过程：

　　　　当函数调用的前一瞬间，会先形成一个激活对象：Actve Object（AO），并会分析以下3个方面：

　　　　1.函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。

　　　　2.函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。

　　　　3.函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

　　　　函数内部无论是使用参数还是使用变量都到AO上找。

　　　　词法分析例题：
```
var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 执行后的结果是？
```
　　案例分析：

　　　　词法过程：

　　　　　　1：foo函数没有参数，只产生了了AO对象

　　　　　　2：生成了局部变量：AO.age = unfefined。

　　　　　　3：之后又遇到了函数声明，被覆盖：AO.age = （以age为名字的函数）

　　　　执行过程：

　　　　　　1：执行第一个console,log（age）时，AO.age是个函数

　　　　　　2：执行第二个console.log（age）时，在此之前age = 22，执行了，因此结果为22

　　　　　　3：执行第三个console.log（age）时，age没有被修改，还是22.

十一：内置对象和方法

　　　JavaScript中的所有的事物都是对象：字符串，数字，数组，日期，等等。

　　　　数据类型：

　　　　　　数字对象：Number

　　　　　　字符串：String

　　　　　　布尔值对象：Boolean

　　　　组合对象：

　　　　　　数字对象：Array

　　　　　　数学对象：Math

　　　　　　日期对象：Date

　　　　高级对象：

　　　　　　自定义对象：Object

　　　　　　错误对象：Error

　　　　　　函数对象：Function

　　　　　　正则表达式对象：RegExp

　　　　　　全局对象：Global

　　　　自定义对象：

　　　　　　JavaScript得到对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

　　　　创建对象：

　　　　　　var person = new object（）（创建一个person对象）

　　　　　　person.name = ‘Alex’ （person对象的name属性）

　　　　ps：ES6中提供可Map数据结构。他类似于对象，也是键值对的集合，但是‘键’的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

　　　　　　Object结构提供了“字符串--值”的对应，Map结构提供了‘值--值’的对应，是一种更完善的Hash结构实现。
```
var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false
```
十二：Data对象：

　　创建Date对象

　　1：不指定参数：（输出结果为当前时间）
```
var d1 = new Date();
console.log(d1.toLocaleString());
```
　　2：参数为日期字符串：（输出结果为把输入的参数的格式转变为正常格式）
```
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
```
　　ps:（此参数的输出格式是日/月/年）：
```
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
```
　　3：参数为毫秒（打印结果为中文格式的日期和英文格式的日期）：
```
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
```
　　4：参数为年月日小时分钟秒毫秒（毫秒并不之间显示）
```
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());
```
　　date对象的方法：

　　　　获取日：getDate（）

　　　　获取星期：getDay（）

　　　　获取月：getMonth（）

　　　　获取完整年份：getFullYear（）

　　　　获取年：getYear（）

　　　　获取小时：getHours（）

　　　　获取分钟：getMinutes（）

　　　　获取秒：getSeconds（）

　　　　获取毫秒：getMilliseconds（）

　　　　返回累计毫秒数：getTime（起始日期是：1970/1/1）

　　案例：编写代码，当前日期按‘2017-12-27 11：11 星期三格式输出’。

　　第一步：首先必需要定义一个对应关系表（0-6对应星期日到星期六）。（最好用const定义成常量）

　　第二步：生成日期对象，取出年月日等需要的值（注意week要从定义的常量中取到值）

　　第三步：通过字符串拼接： var strTime = `${year}-${month}-${day} ${hour}:${minute} ${week}‘;

　　PS:由于取分钟的时候不会显示02这类数字，因此需要额外做字符串拼接处理：

　　　　var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();
```
const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
}; 

function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1; 
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  
    var week = WEEKMAP[d1.getDay()];
    var strTime = `${year}-${month}-${day} ${hour}:${minute} ${week}`;
    console.log(strTime)
};

showTime();
```
十三，json对象

　　　　可以将自动转化为对象，可以点语法来取值语法：JSON.parse(JSON字符串)：
```
var str1 = '{"name": "Alex", "age": 18}';
var obj = JSON.parse(str1);
obj.name
"Alex"
obj.age;
18
```
　　　　也可以将对象转化为JSON字符串
```
var obj1 = {"name": "Alex", "age": 18};
var str = JSON.stringify(obj1);
```
十四，RegExp对象

　　　　方式一：new RegExp('正则表达式')；

　　　　方式二：/正则表达式/
```
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
```
　　　　ps：通过生成的RegExp.test(’字符串‘)的方式来判断是否满足正则。返回结果是布尔值，正则中不能又空格。

　　　　注意：

　　　　　　1，校验时不传参数默认校验'undefined'　　

　　　　　　2，全局匹配时有一个lastIndex属性。

十五，Math对象

　　方法：

　　　　返回数的绝对值：abs（x）

　　　　返回e的指数：exp（x）

　　　　对数进行下舍入：floor（x）

　　　　返回数的自然数对数：log（x）

　　　　返回x 和 y 中的最高值：max(x,y)

　　　　返回x 和 y 中的最低值：min(x,y)

　　　　返回x 的 y 次幂：pow(x,y)

　　　　把数四舍五入为最接近的整数：round(x)

　　　　返回数的正弦：sin(x)

　　　　返回0~1之间的随机数：random()

　　　　返回数的平方根：sqrt(x)

　　　　返回数的正切：tan(x)
相关阅读:
15、SQL基础整理（视图）
14、SQL基础整理（存储过程）
13、SQL基础整理（流程控制begin……end）
12、SQL基础整理（运算符与优先级）
11、SQL基础整理（变量）
10、SQL基础整理（约束2）
9、SQL基础整理（两表连接exists,join on,union）*Oracleも含む(INTERSECT＆MINUS)
20141113--SQL 事务
 20141111--SQL触发器
 20141110--SQL视图
原文地址：https://www.cnblogs.com/ay742936292/p/10955138.html

一：JavaScript与ECMAScript的关系

二：JavaScript引入方式

三：JavaScript语言基础

变量：

ps：

四：JavaScript的数据类型

五，布尔值

六，对象

七，数组

八，运算符

1.算术运算符,

2，比较运算符

3，逻辑运算符

4，赋值运算符

九，流程控制

九，函数：

函数的全局变量和局部变量：

作用域：

十，词法分析：

十一：内置对象和方法

十二：Data对象：

十三，json对象

十四，RegExp对象

十五，Math对象

　　变量：

　　ps：

四：JavaScript的数据类型　　

　　1.算术运算符,

　　2，比较运算符

　　3，逻辑运算符

　　4，赋值运算符

　　函数的全局变量和局部变量：

　　作用域：