javaScript

一  JS基础

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等；
• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动
• DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等

ECMAScript的历史

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式 添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5/ES5	添加"strict mode"严格模式 添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6/ES6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**） 增加Array.prototype.includes

1. 引入方式

　　放入标签的最后

1.1 Script标签内写代码

1.2 引入script文件

上述两种方法不能在一句中混用

2. JS规范

2.1 注释

// 这是单行注释

/*
这是
多行注释
*/

单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。

2.2 结束符

　　以分号（;）为结束符，每一条语句尾部需要添加分，函数声明例外。

3. 声明变量

var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，在JavaScript中，永远都是用var来定义变量；

• 变量名由 _，数字，字母，$组成，不能以数字开头
• 变量名区分大小写
• 关键字不能用做变量名
• 推荐使用驼峰式命名规则

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

二   数据类型

　　js为动态语言，无需事先声明变量；数据类型用  typeof  判断

1. 数字（Number）

　不区分整型和浮点型，只有数字一种类型，但还有parseInt和parseFloat

特殊值：

•  NaN，非数字。可使用 isNaN(num) 来判断。
• Infinity，无穷大。可使用 isFinite(num) 来判断。

常用方法：

parseInt（）返回数字类型

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

小数保留

var num = 2.379
var newNum = num.toFixed(2)
console.log(newNum)

2. 字符串（String）

字符串拼接主要用：+号

常用方法：

方法	说明
.length   #不加括号的是属性	返回长度
.trim()    #得到一个新值	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx	拼接
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串	返回第n个字符
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase()  #全部变大写	大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	分割

ES6中引入了模板字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

注意：如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

3. 布尔值（Bool）

var a = true;
var b = false;

　　都是小写，""(空字符串)、0、null（未声明，未赋值）、undefined（var声明，未赋值）、NaN都是false。

4. 数组（array）

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object

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

4.1 创建数组

var colors = ['red','color','yellow']; //字面量方式创建（推荐）
var colors2 = new Array();//使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象

4.2 数组赋值

var arr = [];
//通过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

关于sort()：

　　如果调用该方法时没有使用参数，先把数组的元素转换成字符串将按照字符编码的顺序进行排序。如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

遍历数组中的元素：

var a = [10, 20, 30, 40];
for (var i=0;i) {
  console.log(a[i]);
}

forEach方法遍历

var a=[1,2,3,34]
function f(value){
console.log(value)}
a.forEach(f)
 1
 2
 3
 34

5  自定义对象

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

创建对象及查找元素的两种方法：

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);；

 遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象的另一种方式：

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

6. Data对象

　js中的内置对象就相当于python中的内置函数

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
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对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

7. JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

遍历json对象内容

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

8. RegExp对象

//RegExp对象

//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式（逗号后面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式：g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


// 注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

9. Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

10. 数据之间的转换

 parseInt() ：字符串转数字

var a = '5'
var a = parseInt(a);
console.log(typeof(a))

//带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。
console.log(parseInt("2018你真帅！！")); 

//自动带有截断小数的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
var a = parseInt(5.8 + 4.7);
console.log(a);

  parseFloat() : 字符串转小数 

var a = parseFloat('5.8')+ parseFloat('4.7');
console.log(a);
var a = parseFloat('5.8' + '4.7');
console.log(a);

 String()和.toString：转字符串

var n1 = 123;
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

 Boolean()：任何数据类型都可以转成布尔值

var b1 = '123';  // true
var b3 = -123;  // true
var b4 = Infinity; //表示正无穷大 true

var b2 = 0;       // false
var b5 = NaN;     //false
var b6;              //表示undefined //false
var b7 = null;    //false

11. 内置方法

forEach（）

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

语法为：

array.forEach(function)

回调函数声明时：

function(currentValue, index)

• currentValue：值，必选
• index：索引值，可选

var a=[1,2,3,34]
function f(value,index){
console.log(value,index)}
a.forEach(f)

 1 0 2 1 3 2 34 3

三  函数

1. 函数的声明

// 普通函数定义
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;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

　　函数只能返回一个值，只会取最后一个，如果要返回多个值，将其放在数组或对象中返回。

function：是一个关键字。中文是“函数”、“功能”。
函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
参数：后面有一对小括号，里面是放参数用的。
大括号里面，是这个函数的语句。

1.1 arguments伪数组

　　arguments代表实参，不局限于形参，只在函数内部使用；实参个数多余形参时，取前部的实参

function add(a,b){
  console.log(a+b);
　console.log(add.length);　　//形参个数
  console.log(arguments.length)　　//实参个数
}
add(1,2)；add(1,2,3)

arguments可以修改元素，但不能改变数组的长短

    function fn(a, b) {
        arguments[0] = 99;  //将实参的第一个数改为99
        // arguments.push(8);  //报错
        var c =a+b//此方法不通过，因为无法增加元素
        console.log(c)
    }
    fn(1, 2)

101

2. 函数的全局变量和局部变量

局部变量：

　　使用 var声明的变量是局部变量，所以只能在函数内部访问。函数运行完毕，本地变量就会被删除。

全局变量：

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

变量生存周期：

　　JavaScript变量的生命期从它们被声明的时间开始。

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

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

3. 作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

 例1：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

 例2：

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f(); ret(); 

 例3：闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f(); ret();

4. 词法分析

词法分析的过程：

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

• 函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
• 局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
• 函数声明，如果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();  // 执行后的结果是？

5. 运算符

5.1 算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数
++	递加
--	递减

5.2 赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

5.3 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

5.4 逻辑运算符

 

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

 

5.5 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

6. 流程控制语句

6.1  if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

6.2 if-else if-else 

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else { console.log("a = 5"); }

6.3 switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1: console.log("Monday"); break; default: console.log("...") }

6.4  for

for (var i=0;i<10;i++) {
  console.log(i);
}

6.5   while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

6.6 三元运算 

var a = 1;
var b = 2;
var c = a > b ? a : b