JS是一门什么样的语言?

是一门解释性的语言，是一门脚本语言，一门弱类型的语言，一门基于对象的语言

是一门动态类型的语言

ECMAScript(ES): 规定了JS的一些基础核心的知识（变量，数据类型，语法规范，操作语句等）

DOM： document object model： 文档对象模型，里面提供了一些属性的方法，可以让我们操作页面中的元素

BOM： browser object model： 浏览器对象模型。里面提供了一些属性的方法，可以让我们操作浏览器。

前端常用浏览器：

-谷歌浏览器（chrome）:Webkit内核（v8引擎）

Safari、大部分主流浏览器（360、搜狗、QQ、UC、百度。。。）、安卓和ios手机浏览器

-火狐浏览器（firefox）:Gecko内核

-欧朋浏览器（opera）：Presto内核

IE浏览器：Trident内核

语法：

1.区分大小写：变量名、函数名、运算符以及其他一切东西都是区分大小写的。
2.他和php一样属于弱类型语言。
3.每行结尾的分号可有可无。(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐))

用法：

内部：

<script>
  ....
</script>

外部：

<script src="...."></script>

严格模式

ECMAScript 5引入了严格模式的概念；严格模式是为JavaScript定义了一种不同的解析与执行模型；严格模式通过抛出错误来消除了一些原有静默错误。严格模式可以消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

开启严格模式

在顶部添加如下代码：　　　

“use strict”

在函数内部的上方包含这条编译指示，也可以指定函数在严格模式下执行：

function doSomeThing() {
  "use strict";
　// 函数体
}

严格模式的限制

"use strict";x = 3.14;  // 报错 (x 未定义)
x = {p1:10, p2:20};  // 报错 (x 未定义)

"use strict";
var x = 3.14;
delete x;  // 报错

"use strict";
function x(p1, p2) {};
delete x;  // 报错

"use strict";
function x(p1, p1) {};   // 报错

"use strict";
var x = 010;  // 报错

"use strict";
var x = \010;  // 报错

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;  // 报错

"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14;  // 报错

"use strict";
delete Object.prototype; // 报错

"use strict";
var eval = 3.14;  // 报错

"use strict";
var arguments = 3.14;    // 报错

"use strict";
with (Math){x = cos(2)}; // 报错

"use strict";
eval ("var x = 2");
alert (x); // 报错

数据类型

1.基本数据类型

描述：JS中有六种数据类型，其中为五种基本数据类型和一种对象(object)类型

类型：

(1) number 数字类型

(2) string 字符(串)类型

(3) boolean 布尔类型

(4) undefined 未定义类型

(5) null 空类型

注意：JS中拥有动态类型，变量可以根据【保存的值的类型】不同，而表现为不同的类型。

2.数字类型number

描述：在JS中数字类型可以使用小数点、不使用小数点或伪科学计数法表示

例子：

var num1 = 3;
var num2 = 3.14;
var num3 = 314E3;
console.log(num3);

补充：在伪科学计数法中e可以小写也可以大写

3.字符(串)类型string

描述：在JS中字符串类型是用来存储字符的类型，可以使用单双引号定义。

注意：字符串在定义的时候只要写在引号内部即可，

但唯一不能写在内部的就是【外部定义时使用的引号】

例子:

var str1 = '';//空字符串，不是没有类型！！
var str2 = 'a';
var str3 = 'hello world!';
var str4 = "goodbye world!";
var str5 = 'my name is "frank"!';
console.log(str5);

4.布尔类型boolean

描述：可以用来判断真假的数据类型

类型：true(真)、false(假)

例子：

var flag = true;
var flag2 = false;
console.log(flag);
console.log(flag2);

5.未定义类型undefined

描述：是用来描述当变量的值不确定的时候，变量所表示的类型

注意：未定义类型中只有一个值就是undefined

例子：

var num ;
console.log(typeof num);

6.空类型null

描述：表示对象为空

运算符概述

(1)typeof

描述：用来获取当前变量的类型

语法：typeof 变量名

注意：尽管看起来不像，但typeof是一个运算符

例子：

var item = 15;
console.log(typeof item);  // number
item = 'frank';
console.log(typeof item);  // string

(2)赋值运算符【=】

描述：在JS中，=等号代表的含义是，将等号右面的值赋值给等号左面的变量。

注意：=等号在JS中绝对不等于数学中的含义

强调：使用赋值运算符的时候，变量应当写在左面！！！

例子：

var item= 15; //正确写法
15 = item;//错误写法，这样是把item赋值给15

(3)判断是否相等运算符【==】【===】

描述：

==【简要比较运算符】表示判断两个变量的值是否相同(忽略变量的类型)，相等返回true。

===【标准比较运算符】表示判断两个变量的值是否相同(包括变量的类型)，相等返回true。

例子：

var item1 = 10;
var item2 = '10';
console.log(item1==item2);   //true
console.log(item1===item2);  //false

(4)注释

a.单行注释：//，写在要加注释代码的前方

b.多行注释：/ *...* /，写在要加注释的代码段的开头位置

c.文档注释：/ **....* /，一般写在代码块的前面

算术运算符

1.类型：+(加法) -(减法) *(乘法) /(除法) %(取余)

基本功能：

var num1 = 3;
var num2 = 4;
var sum = num1+num2;console.log(sum);  // 7 
var cha = num1-num2;console.log(cha);  // -1 
var ji = num1*num2;console.log(ji);   // 12 
var shang = num1/num2;console.log(shang);  //0.75 
var quyu = num1%num2;console.log(quyu);  //3

特殊功能:

+:(隐式转换)：

a.如果加号两端有一端不是数字，那么先将数字转换成字符串，然后将两个字符串拼接。

b.如果多个加号同时存在，按照从左到右的计算规则计算

剩下的所有算术运算符：(隐式转换)

a.如果符号两端有一端不是数字，那么先将不是数字的内容转换成数字，然后在进行计算

b.如果不是数字的内容无法转换成数字，则结果是NAN（not a number）

例子：

var num1 = 10;
var num2 = 'abc';

var newNum = num1 - num2;
console.log(newNum); // NaN
console.log(typeof newNum); //number

1.算术运算符

描述：++(自增运算符)、--(自减运算符)

语法：++num、num++、--num、num--

功能：对本身进行加一或减一

例子：

var num = 10;
num++;
console.log(num); // 11

注意：

(1)如果出现在运算子的前面，则先将自己自增或自减，然后再执行当前语句。

(2)如果出现在运算子的后面，则先执行当前语句，执行完毕后在对自己自增或自减。

例子：

var num1 = 10;

//先参与语句执行，再计算本身

console.log(num1++);  // 10console.log(num1);  // 11


var num2 = 10;

//先计算本身，再参与语句执行console.log(++num2);  // 11console.log(num2);  // 11

2.赋值运算符

描述：+=、-=、*=、/=、%=

语法：num+=6;

解释：表示累加，【num+=6;】相当于【num = num + 6;】

例子：

var num = 10;
num += 1; // 等于 num = num+1 / num++;
console.log(num); // 11

3.比较运算符

描述：比较运算符能够根据规则比较两个变量的值，返回一个布尔值，用来表示是否满足规则。

类型：==、===、!=、!==、>、>=、<、<=

例子：

var num1 = 15;
var num2 = 15;
console.log(num1 >= num2); // true

问题：数字能够比较大小，那么字符串呢能不能比较？如果能，怎么比较？

补充：

var item1 = undefined;
var item2 = null;
console.log(item1 === item2); //false
console.log(undefined===undefined); //true
console.log(null===null); //true

4.布尔运算符

描述：!(非)、&&(与)、||(或)

(1) && 与运算符：(表达式1)&&(表达式2)

运算符两端表达式结果均为true的时候，整个表达式结果为true

只要有一个表达式结果为false，则整个表达式结果为false

var num1 = 10;
var num2 = 100;
var result = (num1 > 6) && (num2 < 50);
console.log(result); // false

  (2) || 或运算符：(表达式1)||(表达式2)

运算符两端表达式结果均为false的时候，整个表达式结果为false

只要有一个表达式结果为true，则整个表达式结果为true

var num1 = 10;
var num2 = 100;
var result = (num1 < 6) || (num2 < 50);
console.log(result); // false

(3) ! 非运算符：!(表达式)

表达式结果为true时，整个表达式结果为false

表达式结果为false时，整个表达式结果为true

var num1 = 10;
var result = !(num1<6);
console.log(result); // true

5.运算符优先级

初等单目一二级 ()小括号是初等运算符，因为优先级最高

乘除取余加减移

关系等于不等于

与或赋值终对齐

运算符的优先级按照出现的顺序排列，谁先出现谁优先级高。

6.三目运算符 ? :

描述：判断表达式的结果，从而根据结果执行不同的语句。

语法：

表达式1 ? 表达式2 ： 表达式3

解释：

首先计算表达式1的布尔值，如果是true，那么整个算式的结果是表达式2

如果是false，那么整个算式的结果是表达式3

例子：

var num1 = 10;
var num2 = 100;
var result = (num1 == num2) ? 'num1等于num2' : 'num1不等于num2';
console.log(result); // num1不等于num2

7. JS中对于布尔值的一些隐式规则

true代表真-------非0即为真

false代表假-----0为假

分支语句if、if-else、if-else if、switch

1.if语句

描述：表示判断表达式是否成立，如果成立执行大括号中的语句。如果不成立直接跳过

语法：

if (表达式) {
  ...语句 
}

例子：

// 如果 num 大于10，那么就执行 ‘我大于10’
var num = 20;
if(num > 10) {
  console.log('我大于10');
}

注意：

(1)表达式必须放在小括号之中。执行语句必须放在大括号内。

(2)if条件语句最后不用加分号。

(3)执行语句如果只有一句，那么大括号可以不写。但是推荐所有情况都加上大括号。

【如果不写大括号，那么默认if后面的第一个语句是if的执行语句】

2.if-else语句

描述：如果满足条件执行if中的语句，如果不满足则执行else中的语句

语法：

if() {
....
} else {
...
}

例子：

// 如果 num 大于10，那么就执行 ‘我大于10’, 小于执行 ‘我小于10’
var num = 9;
if(num > 10) {
  console.log('我大于10');
} else {
  console.log('我小于10');
}

注意：

(1)if-else语句是if的升级版本，表示二元判断，一定会执行一种情况。

(2)if-else是一个语句，末尾不加分号。并不意味着执行语句不加分号！！

(3)if后面的表达式，只要能返回一个布尔值即可。

3.if-else if语句

描述：

判断表达式1是否成立,如果表达式1成立执行语句1并if结构立即结束。

如果不成立则判断表达式2是否成立，如果表达式2成立执行语句2并if结构立即结束。

如果不成立则判断表达式3是否成立，如果表达式3成立执行语句3并if结构立即结束。

...

如果以上所有条件都不成立，则直接执行else语句，并立即结束

语法：

if（表达式1）{
  语句1;
} else if（表达式2）{
  语句2;
}
...
else {
  语句4;
}

注意：

(1)if-else if末尾没有分号

(2)else语句不能单独存在，总是向上查找离他最近的if，构成if-else结构

例子：

var bmi = 22.9;
if (bmi > 22.3 && bmi < 23.9){
  console.log('健康');
} else if (bmi < 22.3){
  console.log('太瘦了');
} else {
  console.log('太肿了');
}

4.switch

描述：在多种情况下判断，并选择一种情况执行的语句结构

语法：

switch ( 表达式 ) {
  case 结果1: {
    ...执行语句1
  }
  break; // 当执行了语句1之后，能够跳出并结束switch语句
  
  case 结果2: {
    ...执行语句2
  }
  break;
  ...

  default: {
    ...执行语句n
  }
}

解释：如果【表达式的结果】等于【结果1】，就执行语句1，并结束switch。

如果不等于，则判断是否等于结果2，如果等于就执行语句2，并结束switch。

...

如果所有case后面的结果都不满足，那么直接执行default后面的语句，并结束switch。

注意：

(1)switch语句当中case后面的break必须要写。

如果不写，则会从满足的这个case开始将后面所有的情况全都执行一遍。

(2)default语句理论上可以不写，如果不写当都不满足时switch直接跳出。

(3)switch语句一定会执行一种情况对应的语句（语法结构完整情况下）

例子：

switch ('星期三'){
  case '星期一': {
    console.log('今天是星期一');
  }
  break;

  case '星期二': {
    console.log('今天是星期二');
  }
  break;

  case '星期三': {
    console.log('今天是星期三'); // 执行它
  }
  break;

  default: {
    console.log('今天是星期日');
  }
}

循环语句：while、do-while、for（辅助流程控制语句：break、continue）

1.while循环语句

描述：当满足循环条件的时候执行循环体，直到不满足为止，跳出循环。

语法：

while ( 循环条件 ) {
 循环体
}

注意：

(1) 循环变量必须在循环中，向着循环结束的方向发生变化。

【如果不改变，或改变方向反了，则会将循环变成无限循环。也叫死循环。】

(2) while循环最少执行次数为0次

(3) 循环执行开始之前，循环变量必须先赋初值

(4) 循环体中如果只有一条语句，那么大括号可以不写。（最好写上）

(5) while循环末尾没有分号！

例子：输出10以内的偶数

var num = 1;
// 只要满足条件，就意味着num还在1-10之间。
while (num < 11) {
  if(num % 2 == 0) {
    console.log(num);
  }
  num++;
}

2.do-while循环语句

描述：先执行一次循环体。

然后判断循环条件，如果满足则继续执行循环体。

如果不满足，则跳出循环，循环终止

语法：

do {
  循环体
} while ( 循环条件 );

说明：do-while循环的注意事项、逻辑结构基本都和while循环相同，

唯一的区别就是do-while循环会先执行一次循环体，

而while循环则是先判断循环条件。

例子：输出10以内的奇数

var i = 0;
do {
  if(i % 2 == 1) {
    console.log(i);
  }
  i++;
} while (i < 10);

3.for循环语句

描述：能够设定循环多少次，并直接设定循环条件和循环增量的语法结构

语法：

for( 表达式1; 表达式2; 表达式3 ) {
  循环体
}

例子：

var num = 10;
for (var i=0; i<num; i++) {
    console.log('我循环了' + i + '次');
}

解释：

【1】执行表达式1：var num=0; 循环变量赋初值

【2】执行表达式2：num<10; 判断循环能否继续执行

(1)满足条件，循环继续，执行循环体

(2)不满足条件，循环终止

【3】因为满足条件，因此执行循环体：console.log('我循环了' + i + '次');

【4】执行表达式3：num++; 让循环变量向着循环结束的方向变化

【5】执行表达式2...

注意：

(1)表达式1可以不写，如果不写需要在for循环之外，给循环变量赋初值

(2)表达式2可以不写，如果不写代表循环条件恒成立（死循环）

(3)表达式3可以不写，如果不写需要在for循环的循环体中，让循环变量发生改变

(4)三个表达式实际上可以都不写，但是用于间隔的分号必须写！

4.break

描述：用来终止代码块或者循环，循环立即终止

例子：

for (var i = 0; i < 100; i++) {
  if (i == 10) {
    console.log('我需要这个10');
    break;//循环在此立即终止
  }
  console.log(i);
}

5.continue

描述：用来终止本次循环，并立即开始下一次循环，循环不终止。

例子：

for(var i = 0;i<20; i++){
  if(i == 10){
     console.log('我需要这个10');
     continue; // 立即终止本次循环，并立即开始下一次循环。
  }
  console.log(i);
}

字符串概述

1.字符串

描述：由单引号或者双引号包裹起来的，零个或多个排列在一起的字符构成的结构

注意：

(1)字符串在定义的时候，不要使用容易引起歧义的内容

(2)由于JSON解析中规定字符串采用单引号定义，因此统一规定定义字符串时采用单引号。

补充：

字符串提供了一些特殊字符用来替代，在字符串中容易引起歧义的字符

(1) \' 代表 '

(2) \" 代表 "

例子：

var introduceWord1 = 'my name is \'frank\'.';
var introduceWord2 = "my name is\"frank\".";
console.log(introduceWord1); // my name is 'frank'.
console.log(introduceWord2); // my name is"frank".

扩展：

(1)字符串必须在一行之内定义，不能分成多行。

如果必须分成多行定义，可以采用【在一行末尾添加\反斜线】作为连接符

var str1 = 'hello\
world!\
goodbye\
world!';
console.log(str1);  // helloworld!goodbyeworld!

(2)实际上还能够通过“+”加号作为连接符，分成多行定义字符串。

var str2 = 'hello ' +
'world!' +
' goodBye' +
' world!';
console.log(str2); // hello world! goodBye world!

字符串长度

1.length属性：

描述：length属性能够返回一个数字类型的结果，表示字符串的长度，也就是字符串包含的字符个数

语法：

字符串变量.length

例子：

var str = 'frank';
console.log(str.length); // 5
console.log(typeof str.length); // number

案例：

【判断账户名长度】

var userNameInput = document.getElementById('userName');
var loginBtn = document.getElementById('login');

loginBtn.onclick = function () {
  
  var userName = userNameInput.value;
  if (userName.length >= 6 && userName.length <= 18) {
    console.log('登录成功');
  } else if (userName.length < 6) {
    console.log('用户名不得小于6位');
  } else {
    console.log('用户名不得超过18位');
  }

};

2.[]字符索引

描述：能够根据指定的下标获取字符串中的字符。

语法：

字符串变量[下标]

注意：

(1)下标：字符串中每一个字符自带的序号，下标从0开始，最后一个是length-1

(2)索引一次只能获得一个字符，不能一次获得多个字符

例子：

var str3 = 'xiaoMingTongXue';
var resultStr = '';

for(var i=4; i<8; i++){
  resultStr += str3[i];
  //resultStr+=str3.charAt(i);
}

console.log(resultStr); // Ming

3.charAt()方法

描述：能够根据指定的下标获取字符串中的字符，作用等同于[]字符索引

语法：

字符串变量.charAt(下标)

4.charCodeAt()方法

描述：能够根据指定的下标获取字符串中字符对应的UniCode编码。

语法：

字符串变量.charCodeAt(下标)

注意：

(1)A--65、a--97需要记住的UniCode编码

(2)如果参数是负数或超过字符串长度，则本方法返回NAN

案例：

【判断首位是字母】

var userNameInput = document.getElementById('userName');
var loginBtn = document.getElementById('login');

loginBtn.onclick = function () {

  var userName = userNameInput.value;

  //先获取首位字符编码
  var firstCode = userName.charCodeAt(0);

  //只要判断编码在字母范围内，就是，否则就不是
  if( (firstCode >= 65 && firstCode <= 90) || (firstCode >= 97 && firstCode <= 122) ){
    console.log('登录成功');
  }else{
    console.log('首位不是字母，内容不合法');
  }

};

5.concat()方法

描述：concat()方法用于拼接多个字符串

语法：

字符串变量1.concat(字符串变量2, 字符串变量3, ...)

例子：

var str1 = 'abc-';
var str2 = 'def-';
var str3 = 'ghi';

var newStr = str1.concat(str2, str3);
console.log(newStr); // abc-def-ghi

转义字符&字符串对象

1.转义字符

描述：转义字符是\反斜线，配合一些字符能够组成带有特殊含义的符号，

用来避免字符串定义的时候出现混淆

类型：

\'  表示 '  

\"  表示 " 

\\  表示 \

\n  换行

\r  回车

例子：

var str = 'D:\\英语学习资料\\';
console.log(str); // D:\英语学习资料\

var str1 = 'hello \n world!';
console.log(str1);
// hello 
   world!

2.字符串对象

描述：字符串除了用单双引号定义之外，还能够通过new命令创建

语法：

var strObj = new String('字符串内容');

说明：

(1)通过new创建的字符串，并不是string类型，而是object类型

(2)创建字符串对象后，肯能会造成内存部分的问题。

例子：

var str = 'hello';
console.log(str);  // hello
console.log(typeof str); // string

var strObj = new String('hello');
console.log(strObj); // String {"hello"}
console.log(typeof strObj);  // object

字符串截取

1.subString()

描述：表示从参数一下标开始截取，到参数二下标为止之间的字符串。不包括参数二下标的字符

语法：

str.subString(fromIndex, toIndex);

注意：subString()方法的两个参数可以互相调换位置，对结果没有影响。

例子：

var str = 'welcome 19big victor zhaokai';
// var newStr = str.substring(8, 10);
  var newStr = str.substring(10, 8);
console.log(newStr); // 19

2.subStr()

描述：表示从参数一下标开始截取，截取参数二长度的内容

语法：

str.substr(fromIndex, strLength);

注意：substr()方法的两个参数不能互换位置

例子：

var str = 'welcome 19big victor zhaokai';

var newStr = str.substr(8, 2); // 第八开始，截取2位
console.log(newStr); // 19

3.slice()

描述：表示从参数一下标开始截取，到参数二下标为止之间的字符串。不包括参数二下标的字符

语法：

str.slice(fromIndex, toIndex);

注意：本方法两个参数不能互换位置，并且后一个参数必须大于前一个参数

【如果后一个参数小于前一个参数，则返回一个空字符串''】

例子：

var str = 'welcome 19big victor zhaokai';

var newStr = str.slice(8, 10);
console.log(newStr); // 19
console.log(newStr.length); // 2

PS：以上三个截取的方法都不会对原字符串造成影响。

4.小技巧：

如果以上三个方法在截取字符串的时候，只写第一个参数。

那么表示从参数下标开始，一直截取到字符串末尾。

例子：

var str = 'here is a string';

var subStr1 = str.slice(5);
var subStr2 = str.substring(5);
var subStr3 = str.substr(5);

console.log(subStr1); // is a string
console.log(subStr2); // is a string
console.log(subStr3); // is a string

字符串查找

1.indexOf()字符串查找

描述：在已知的字符串中，查找【目标字符串】第一次出现的下标。没有找到返回-1

语法：

str.indexOf(目标字符串, fromIndex);

注意：第一个参数是必要参数，第二个参数是可选参数。如果不写默认从下标为0开始查找。

例子：

var str = 'i im is string';

console.log(str.indexOf('s')); // 6
console.log(str.indexOf('o')); // -1

2.lastIndexOf()字符串查找

描述：在已知的字符串中，查找【目标字符串】最后一次出现的下标。没有找到返回-1

语法：

str.lastIndexOf(目标字符串, toIndex);

注意：第一个参数是必要参数，第二个参数是可选参数。如果不写默认查找到结尾为止。

例子：

var str = 'xiaoMingTongXue';

var lastIndex = str.lastIndexOf('i',3); //第二个参数表示找到哪个下标停止
console.log(lastIndex); // 1

// 例子2： 判断qq邮箱
//1.判断包含@qq.com
//2.判断只能包含一个@qq.com
//3.判断@qq.com在字符串末尾（@qq.com出现的下标恰好是末尾）
var userName = '469191420@qq.com';

var index = userName.indexOf('@qq.com');
var lastIndex = userName.lastIndexOf('@qq.com');

if( index != -1 && index == lastIndex && index == (userName.length -7) ){
  console.log('合法');
}else{
  console.log('不合法');
}

字符串替换

1.replace()

描述：将字符串中第一个出现的原字符串，替换为目标字符串。

如果没有找到，则将字符串复制一份返回

语法：

str.replace(oldStr, newStr);

注意：replace()方法尽管被称为替换，但不会对原字符串造成任何影响。

例子：

//1.要求将字符串中第一个frank，替换成(XXX)
var str = 'hello frank! goodbye frank!';

var newStr = str.replace('frank', 'xxx');
console.log(str); // hello frank! goodbye frank!
console.log(newStr); // hello xxx! goodbye frank!

字符串其他操作方法

1.trim()

描述：去掉字符串两端多余的空格

语法：

str.trim();

注意：

(1)小括号必须写，尽管小括号里面不需要写内容

(2)去掉空格是指字符串两端的空格，对字符串内部的空格无影响

(3)不会对原字符串造成影响

例子：

var str = ' hello world goodbye world ! ';

console.log(str.trim()); // 前后没括号 hello world goodbye world !
console.log(str); // hello world goodbye world !  

2.toUpperCase()、toLowerCase()

描述：将字符串中的英文字母转换成大写、小写

语法：

str.toUpperCase() 
str.toLowerCase()

注意：不会对原字符串造成影响

例子：

var str = 'Hello World!';console.log(str.toUpperCase()); //  HELLO WORLD!console.log(str.toLowerCase()); // hello world!
console.log(str); // Hello World!

3.match()

描述：方法用来在字符串中查找目标字符串第一次出现的信息，如果没找到返回null

语法：

str.match(目标字符串)

例子：

var str = 'hello frank! goodBye frank!';

var info = str.match('frank');
console.log(info); // ["frank", index: 6, input: "hello frank! goodBye frank!", groups: undefined]

4.search()

描述：方法用来在字符串中查找目标字符串第一次出现的下标，如果没有找到返回-1

语法：

str.search(目标字符串)

例子：

var str = 'hello frank! goodBye frank!';
var result = str.search('frank');
console.log(result); // 6

5.split()

描述：split()方法能够用来将字符串，按照指定的符号进行切割。

并将切割后的子字符串构成一个数组返回。

如果无法切割则将整个字符串当做一个数组元素返回。

语法：

str.split('分割符');

注意：

(1)参数不同，切割的结果也不同。

(2)如果分割符是空字符串''，则会把整个字符串逐个切开

(3)本方法不会对原字符串造成影响。

例子：

var str = 'hello world! goodBye world!';

var newStr = str.split(' ');
console.log(newStr); // (4) ["hello", "world!", "goodBye", "world!"]

数组概述

1.数组（数组实际上是一个容器）

描述：用【中括号包裹起来的】，【用逗号隔开每一个元素的】数据集合。

语法：

var arr = [item0, item1, item2,...];

注意：

(1)数组的元素是按照一定顺序排列的一组值，顺序体现在下标上。下标从0开始。

(2)数组元素：数组内的一个值称为一个数组元素，数组元素可以是任意数据类型。

例子：

var arr = ['数组1', '数组2', '数组3', '数组4'];
console.log(arr); // (4) ["数组1", "数组2", "数组3", "数组4"]

2.一维数组

描述：数组中的元素只需要一个参数就能够访问到的数组，称为一维数组

例子：

var arr = ['frank', 18, 'male'];
console.log(arr[0]); // frank

3.二维数组

描述：数组中的元素需要两个参数才能访问到的数组，称为二维数组

本质：实际上二维数组就是（一个数组的元素还是一维数组）

例子：

var arr = [
  ['frank', 18, 'male'],
  ['liLei', 16, 'male'],
  ['hanMeiMei', 17, 'female']
];
console.log(arr[0]); // (3) ["frank", 18, "male"]
console.log(arr[0][0]); // frank

数组的特点

1.数组的本质

描述：数组本质上是对象类型的一种特殊表现形式。

例子：

var arr = ['frank', 18, 'male'];
console.log(typeof arr); // object

扩展：

数组除了直接通过[]中括号定义之外，还能够通过new命令来创建。

var arr = new Array('数组1', '数组2', '数组3');
console.log(arr); // (3) ["数组1", "数组2", "数组3"]
console.log(typeof arr); // object

2.数组的长度

描述：数组的长度实际上就是数组中元素的个数

语法：

arr.length

注意：数组的长度length属性是可读可写的。

(1)如果设置length长度小于数组本身长度，那么多余元素舍弃。

(2)如果设置length长度大于数组本身长度，那么缺少元素用空位补齐。

(3)如果设置length长度不是合法数值，那么会报错Invalid array length

例子：

var arr = ['a','b','c'];
console.log(arr); // ['a','b','c']
console.log(arr.length); // 3

arr.length = -1; //Uncaught RangeError: Invalid array length
console.log(arr); 
console.log(arr.length);

3.数组的遍历

描述：数组遍历实际上是通过 for-in 循环来遍历数组中每一个元素

语法：

for ( var 变量名 in 数组) {       
  循环体
}

例子：

var arr = ['a','b','c','d','e'];

for(var i=0; i<arr.length; i++){
  console.log(arr[i]);
}

//等价于
for(var i in arr){
  console.log(arr[i]);
}

4.数组的空位

描述：如果数组中某个位置是空元素，即两个逗号之间没有任何值。那么就说数组存在空位

例子：

var arr = ['a','b',,'d','e'];

注意：

(1)数组的空位是计算数组长度的，即上面的数组长度是5.

(2)数组的空位表现为undefined

5.数组的’删除‘

描述：delete 命令能够删除数组元素的值，从而形成空位

语法：

delete arr[下标]

注意：delete删除数组元素的时候，只能删除数组元素的值。而不是直接把数组删除。

例子：

var arr = ['aa', 'bb', 'cc'];
console.log(arr); // (3) ["aa", "bb", "cc"]
console.log(arr.length); // 3

delete arr[2];
console.log(arr); // (3) ["aa", "bb", empty]
console.log(arr.length); // 3

6.数组的调用

描述：数组调用的方法为通过数组名+下标的形式来访问每一个数组元素

语法：

数组名[下标]

说明：数组的调用有时也叫数组元素调用或访问数组元素。

例子：

var arr = [1, 2, 3, 4, 5];
for (var i in arr) {
  console.log(arr[i])
}

数组的操作方法

重要的方法：push, pop, shift, unshift, splice, indexOf, lastIndexOf

1.push()

描述：作用是向数组的末尾添加一个或多个元素，并返回添加后数组的新长度

语法：

arr.push(item1, item2,...);

注意：

(1)push()方法会对原数组造成影响

(2)可以根据需要来决定是否保存push()方法的执行结果

例子：

var arr = [];
var newArr = arr.push('数值一', 2);

console.log(newArr); // 2
console.log(arr); // (2) ["数值一", 2]

2.pop()

描述：作用是删除数组的最后一个元素，并将这个元素返回。

语法：

arr.pop()

注意：

(1) pop() 方法会对原数组造成影响

(2) 可以根据需要来决定是否保存pop()方法的执行结果

(3) pop() 方法没有参数！！！

例子：

var arr = ['aa', 'bb', 'cc'];
var newArr = arr.pop();

console.log(arr); // (2) ["aa", "bb"]
console.log(arr.length); // 2
console.log(newArr); // cc

3.unshift()

描述：作用是在数组的起始位置添加一个或多个元素，并返回添加后数组的新长度

语法：

arr.unshift(item1, item2,...);

注意：本方法会对原数组造成影响，可以根据需求决定是否保存结果。

例子：

var arr = ['关羽','张飞'];
var newrr = arr.unshift('刘备');

console.log(arr);  // (3) ["刘备", "关羽", "张飞"]
console.log(arr.length); // 3
console.log(newrr); // 3

4.shift()

描述：作用是删除数组开始位置的第一个元素，并返回这个元素

语法：

arr.shift();

注意：本方法会对原数组造成影响，可以根据需求决定是否保存结果。

例子：

var arr = ['董卓','吕布','王允','貂蝉'];
var newarr = arr.shift();

console.log(arr);  // (3) ["吕布", "王允", "貂蝉"]
console.log(arr.length);  // 3
console.log(newarr);  // 董卓

5.splice()

描述：截取并替换数组元素

语法：

arr.splice(index, howmany, item1, item2, ...);

注意：

(1) 本方法能够改变原数组结构

(2) 对于本方法，前两个参数为必要参数。后面所有的参数都是可选参数

例子：

var arr = ['aaa', 'bbb', '333', 'ddd', 'eee'];

// 删除下标为 2 的数值，并替换为 ccc
var newarr1 = arr.splice(2, 1, 'ccc');
console.log(newarr1); // 333
console.log(arr); // (5) ["aaa", "bbb", "ccc", "ddd", "eee"]

// 删除下标为 4 的数值
var newarr2 = arr.splice(4, 1);
console.log(newarr2); // eee
console.log(arr); // (4) ["aaa", "bbb", "333", "ddd"]

// 在下标为 3 的前面添加 '444'
var newarr3 = arr.splice(3, 0 , '444')
console.log(newarr3); // 
console.log(arr); // [] (6) ["aaa", "bbb", "444", "333", "ddd", "eee"]

6.indexOf

描述：在数组中查找元素第一次出现的下标，如果没有找到返回-1

语法：

arr.indexOf(item, fromIndex)

注意：第二个参数是可选参数，代表从第几个下标开始向后查找

强调：无论整数参数还是负数参数，查找顺序永远都是向后查找。

扩展：第二个参数允许是负数，负数代表从倒数第几个元素开始向后查找

例子：

var arr = ['小明', '小红', '小暗', '小蓝', '小明'];

var index1 = arr.indexOf('小红');
var index2 = arr.indexOf('小白');
var index3 = arr.indexOf('小暗', 3);
var index4 = arr.indexOf('小暗', -3);

console.log(index1); // 1
console.log(index2); // -1
console.log(index3); // -1 从下标 第三 开始找的，所以找不到
console.log(index4); // 2

7.lastIndexOf

描述：在数组中查找元素最后一次出现的下标，如果没有找到返回-1

语法：

arr.lastIndexOf(item, toIndex)

注意：第二个参数是可选参数，代表向后查找到第几个下标结束

扩展：第二个参数允许是负数，负数代表向后查找到【倒数第几个】结束

例子：

var arr = ['小明', '小红', '小明', '小蓝', '小明'];
var index1 = arr.lastIndexOf('小明');
var index2 = arr.lastIndexOf('小蓝', 1);
var index3 = arr.lastIndexOf('小红', -1);

console.log(index1);  // 4
console.log(index2);  // -1 查到坐标为 1 时结束，所以找不到小蓝
console.log(index3);  // 1

8.sort()

描述：能够根据提供的排序规则，对数组元素进行排序

语法：

arr.sort(排序规则)

说明：如果不写参数，默认按照编码方式（Unicode大小）进行排序

// 该方法的规则
function sortFunc (a, b) {
  return a-b < 0;
}

例子：

var arr = [3, 5, 1, 2, 4];

var newarr = arr.sort();
console.log(newarr); // (5) [1, 2, 3, 4, 5]

9.isArray()

描述：用来判断一个变量是否是数组。如果是返回 true，否则返回 false。

语法：

Array.isArray(数组变量);

注意：本方法不由数组变量调用，而是必须由Array调用

例子：

var arr = [1, 2, 3, 4, 5];
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

var obj = {};
console.log(typeof obj); // object
console.log(Array.isArray(obj)); // false

10.valueOf()

描述：返回数组本身

语法：

array.valueOf();

例子：

var arr = [1,2,3,4,5];
var newArr = arr.valueOf();

console.log(arr); // (5) [1, 2, 3, 4, 5]
console.log(newArr); // (5) [1, 2, 3, 4, 5]
console.log(arr === arr.valueOf()); // true

11.toString()

描述：能够将数组中的数组元素，拼接成以逗号隔开的字符串

语法：

arr.toString()

注意：toString()方法不仅能合并数组元素，对布尔值类型也能够生效

例子：

var arr = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
var str = true;

console.log(arr.toString()); // aaa,bbb,ccc,ddd,eee
console.log(str.toString()); // true

12.join()

描述：能够以给定的分隔符做间隔，将数组中的元素合并为一个字符串

语法：

arr.join(‘分隔符’)

注意：无论是切割字符串，还是合并数组，都不会对原有的数据造成影响。

例子：

var arr = ['aaa', 'bbb', 'ddd', 'eee'];

var newStr = arr.join('-');
console.log(newStr); // aaa-bbb-ddd-eee
console.log(arr); // (5) ["aaa", "bbb", "ddd", "eee"]

13.reverse()

描述：方法能够将数组元素的顺序进行颠倒（反序排列）

语法：

arr.reverse()

注意：本方法能够改变原数组的结构

例子：

var arr = ['11111','22222','33333'];
console.log(arr.reverse()); // (3) ["33333", "22222", "11111"]

14.slice()

描述：从数组中下标为fromIndex开始截取，截取到下标toIndex为止。

将之间的数组元素构成一个新的数组返回

语法：

arr.slice(fromIndex, toIndex)

注意：

（1） 截取的时候是从 fromIndex 下标开始，到 toIndex 下标为止，不包括 toIndex 下标处的元素。

（2）slice方法不会修改原数组结构

（3）slice方法的参数允许为负数，负数意味着 “倒数第几个元素”

例子：

var arr = ['aaa', 'bbb', 'ccc', 4, 5, 6, 'ddd', 'eee', 'fff'];
var newarr1 = arr.slice(6);
var newarr2 = arr.slice(3, 6);
var newarr3 = arr.slice(-5);

console.log(arr); // (9) ["aaa", "bbb", "ccc", 4, 5, 6, "ddd", "eee", "fff"]
console.log(newarr1); // (3) ["ddd", "eee", "fff"]
console.log(newarr2); // (3) [4, 5, 6]
console.log(newarr3); // (5) [5, 6, "ddd", "eee", "fff"]

对象概述

1.对象

描述：对象是由大括号括起来的，无序的键值对的集合。键值对之间用逗号隔开。

语法：

var obj = {
  key1: value1,
  key2: value2,
  ...
};

注意：

(1) 键值对之间用冒号分隔，前面的称为键(键名)，后面的称为值(键值)。

(2) 对象定义需要采用分号结尾。

2.键名（对象的属性）

说明：

(1) 对象的属性默认都是字符串格式，所以写不写引号都可以

(2) 尽管对象的属性可以不写引号，但是如果属性不符合标识符的规则则必须写引号

【标识符规则：不能以数字开头，并不能有特殊符号】

3.键值（对象的属性值）

对象的属性值可以是任何的数据类型。

4.对象的创建

(1)直接通过大括号创建对象

(2)通过 new 命令创建对象

(3)通过 Object.create() 方法创建对象【除了在需要继承的场合可能会用到】

ps：如果对象中一个键值对都没有，那么这个对象叫空对象。

例子：

var obj = {};
console.log(obj); // {}

对象的方法

例子：

var frank = {
  peoName: '张先森',
  peoAge: 20,
  //如果对象的属性值是函数，那么此时这个属性就被称为方法（行为）
  //注意：方法中函数不写函数名，函数名用属性替代
  fun1: function () {
    console.log('吃饭!');
  },
  // ES6 简写
  fun2 () {}
};

// 让 frank 对象，执行 fun1 方法
frank.fun1();  // 吃饭！

对象属性的读写

1.读取对象的属性(对象也是一个容器)

描述：读取对象的属性，实际上是读取对象属性对应的属性值

语法：

var obj = {
 key1: value1,
 key2: value2
};

(1)通过.点运算符来读取对象的属性值：obj.key1

(2)通过[]运算符来读取对象的属性值：obj['key2']  // 使用中括号时需要添加单引号 

说明：点运算和中括号都能读取对象的属性值，功能上基本没有区别。

注意：访问对象中并不存在的属性的时候，不会报错而是会返回undefined

例子：

var obj = {
  name: 'wzc',
  age: 20
};

console.log(obj.name); // wzc
console.log(obj['age']); // 20
console.log(obj.sb) // undefined

2.写入对象的属性值

描述：点运算符和中括号都能够为对象的属性赋值，并能够为对象添加并不存在的属性。

语法：

var obj = { key1:value1 }; 

(1) obj.key1 = value1_new;
(2) obj['key2'] = value2;

例子：

var frank = {
  height:'183cm',
  peoName:'张先森'
};

console.log(frank); // {height: "183cm", peoName: "张先森"}


//修改已经存在的属性
frank.height = '181cm';
frank['peoName'] = '张先生';
console.log(frank); // {height: "181cm", peoName: "张先生"}

//添加不存在的属性
frank.peoSex = 'male';
frank['peoAge'] = 20;
console.log(frank); // {height: "181cm", peoName: "张先生", peoSex: "male", peoAge: 20}

3.中括号和点运算有什么区别

结论：中括号总是能替代点运算符，但是点运算不一定能替代中括号。

(1) 中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

var frank = {
  height:'183cm',
  peoName:'张先森'
};

var str = 'height';

console.log(frank.str); // undefined
console.log(frank[str]); //'183cm'

(2) 中括号运算符可以用纯数字为属性名。点运算符不能。

var arr = {};
arr[0] = 'aaa';
arr[1] = 'bbb';
arr[2] = 'ccc';
console.log(arr); // {0: "aaa", 1: "bbb", 2: "ccc"}

var arr2 = {};
arr.0 = 'aaa'; // Uncaught SyntaxError: Unexpected number

(3) 中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能

var obj = {};
obj.document = 'hello';
obj[document] = 'goodbye';

console.log(obj); // {document: "hello", [object HTMLDocument]: "goodbye"}

对象的操作

1.Object.keys(对象)

描述：用来获取对象中所有属性构成的数组

语法：Object.keys(对象)

例子：

var obj = {
  name: 'wzc',
  age: 20
};

var kes = Object.keys(obj);
console.log(kes); // (2) ["name", "age"]

2.delete

描述：删除对象的一个属性（删除的实际上是属性对应的键值对）

语法：delete obj.property

例子：

var obj = {
  name: 'wzc',
  age: 20
};

console.log(obj); // {name: "wzc", age: 20}

delete obj.age;
console.log(obj); // {name: "wzc"}
console.log(obj.age); // undefind

上面代码表示，一旦使用delete命令删除某个属性，再读取该属性就会返回undefined，而且该对象的属性中也将不再包括该属性。

ps:如果删除一个不存在的属性，delete不报错，而且返回true。千万引起注意！

3.in

描述：判断对象是否包含一个属性。true表示有这个属性。

语法：key in obj

例子：

var obj = {
  userName: 'frank',
  userAge: undefined
};

console.log(obj.userName); // frank
console.log(obj.userAge); // undefined
console.log(obj.userHeight); // undefined

console.log('userAge' in obj); // true
console.log('userHeight' in obj); // false

4. for-in 快速遍历

语法：for (var pro in obj) {...}

说明：语法中的pro变量代表的是对象的属性。

例子：

var car = {
  wheel: '防滑轮胎',
  color: '红色',
  type: '法拉利',
  price: '3块5'
};

for (var pro in car) {
  console.log(car[pro]);
  // wheel
  // color
  // type
  // price
}

//标准for循环写法
for (var i = 0; i < Object.keys[car].length; i++) {
  console.log(car[Object.key[car][i]]);
}

5.with()（不用）

描述：能够一次修改多个已经存在的对象的属性

语法：

with (对象) {
  key1 = value1;
  key2 = value2;
  ...
}

例子：

var car = {
  wheel: '防滑轮胎',
  color: '红色',
  type: '法拉利',
  price: '3块5'
};
console.log(car); // {wheel: "防滑轮胎", color: "红色", type: "法拉利", price: "3块5"}

with (car) {
  wheel = '爆炸轮胎';
  color = '黑色';
  lincense = '沪B12345';
}
console.log(car); // {wheel: "爆炸轮胎", color: "黑色", type: "法拉利", price: "3块5"}

对象的引用

1.对象的引用

基本引用类型：

var num1 = 10;
var num2 = num1;
var num3 = num1;

num1 = 20;
console.log(num2);//10
console.log(num3);//10

说明：如果一个变量指向（被赋值）了一个对象，那么这个变量就成为是【这个对象的引用】

特征：对一个对象的【对象引用】做出的修改，会影响这个对象上【所有对象引用】的状态。

对象的引用类型：

var obj1 = { fire:'burning' };
var obj2 = obj1;
var obj3 = obj1;

obj1.fire = '灭了';
console.log(obj2.fire);//灭了
console.log(obj3.fire);//灭了

函数概述

1.函数

描述：函数是具有某些特殊功能的，能够重复调用的，闭合的代码块

语法：

function 函数名 (函数参数1，函数参数2，...) {
  函数执行语句
}

注意：

(1) 函数允许没有参数

(2) 函数名的命名规则等同于变量名的命名规则

(3) 函数体允许有多句，他们是函数在执行的时候，要执行的代码

(4) 如何使用函数：函数名(函数参数1，函数参数2，...);

【函数在制作的时候有几个参数，使用的时候就有几个参数】

(5) 函数在制作完成后，如果不使用，那么函数体不执行

函数的声明

1.函数声明方式

描述：函数声明指的是函数的创建

类型：函数在JS中有三种常见的声明方式

(1) function命令声明函数

语法：

function 函数名 (函数参数1,函数参数2,...) {
 函数体
}

例子：

function fun1 () {
  console.log('本机器是做包子的');
}
baozi(); // 本机器是做包子的

(2) 函数表达式方式声明函数

语法：

var 变量 = function ( 参数1, 参数2 .... ) {
  函数体
};

例子：

var xianerBing = function (){
  console.log('本机器是做馅饼的');
};
xianerBing();

(3) 构造函数方式声明函数 (不推荐这种用法，容易出问题，通常用于原型链中)

语法：var 变量 = new Function();

2.函数的调用

描述：相较于函数声明方式的多种多样，函数调用通常情况下，

只要函数已被声明，那么直接写出函数名+函数参数即可调用函数

3.函数的特性：

(1) 函数存在【隐式函数提升】的特性，而所谓的隐式函数提升指的是，

通过function命令声明的函数，其调用语句可以写在声明语句之前。

PS: 函数表达式方式声明函数,没有【隐式函数提升】的特性

例子：

baozi();
function baozi(){
  console.log('本机器是做包子的');  // 本机器是做包子的
}

xianerBing();
var xianerBing = function (){
  console.log('本机器是做馅饼的');  // Uncaught TypeError: xianerBing is not a function
};

(2) 如果存在同名函数，则后写的覆盖先写的

例子：

function baozi(){
  console.log('本机器是做包子的');
}

function baozi(){
  console.log('本机器是做超级大包子的');
}

baozi();

函数的类型

1.函数的类型

描述：在这里所说的函数的类型是从结构上来区分的

2.专有名词解释

(1) 形式参数：函数在定义的时候写在小括号中的参数被称为形式参数。

形式参数只用来在函数内部使用，在函数外部形式参数失效。

通常形式参数不用var声明，直接写变量名即可

(2) 实际参数：函数在调用的时候写在小括号中的参数被称为实际参数。

(3) 返回值：【函数执行结束后】返回到【原本程序中函数所在的位置】,

用来替代整个函数的【结果】，被称为函数的返回值。

通常在函数内部，使用return关键词来实现。

例子：

function fun1(mianfen, zhurou, dacong) {
  console.log(mianfen);
  console.log(zhurou);
  console.log(dacong);
  return '包子';
}

var jieguo = fun1('高级面粉', '猪肉', '大葱');
console.log(jieguo);  //  高级面粉， 猪肉， 大葱， 包子

3.函数的类型

类型：

(1) 无参无返回值函数

function baozi(){}

(2) 无参有返回值函数

function baizi(){ return '包子'; }

(3) 有参无返回值函数

function baozi(cailiao1,cailiao2){}

(4) 有参有返回值函数

funciton baozi(cailiao1,cailiao2){
return '包子'; }

例子：求圆儿的面积

function qiuYMJ (radius) {
  return 3.14 * (radius*radius)
}
console.log(qiuYMJ(10)); // 314

例子：求平均值

function getAverage(tempArr) {

  //求数组元素加和
  var sum = 0;
  for (var i in tempArr) {
    sum += tempArr[i];
  }

  //返回平均值
  return sum / tempArr.length;

}

var arr = [1, 4, 7, 2, 5, 8, 3, 6, 9];
var result = getAverage(arr);
console.log(result);  // 5

例子：求长方形面积

var cfxSquare = function (chang, kuan) {
  return chang*kuan;
};

var result = cfxSquare(10,5);
console.log(result); // 50

函数的作用域

1.作用域

描述：变量生效的范围，称为作用域

2.作用域类型

描述：在JS中只有两种作用域

(1) 全局作用域：整个程序本身

(2) 函数作用域（局部作用域）：函数大括号内部

3.变量类型

描述：根据声明的位置不同，在JS中存在两种变量

(1) 全局变量：在全局作用域中通过var声明的变量、或直接写出变量名的变量（形参除外）

(2) 局部变量：在函数内部通过var声明的变量

注意：

(1) 全局变量在整个程序范围内都能够正常使用

(2) 局部变量只能在其声明的函数内使用，在函数外即宣告失效。

例子：

function fun1 () {
  var num = '我是函数内部变量';
  console.log(num);
}

fun1(); // 我是函数内部变量
console.log(num);  // Uncaught ReferenceError: num is not defined

变量内容

1.变量提升：

描述：

JS会将【var命令声明的全局变量】的声明语句提升到代码的头部，这个机制称为变量提升机制。

JS会将【var命令声明的局部变量】的声明语句提升到函数的头部

例子：

console.log(num);  // 结果不是报错，而是undefined       
var num = 1;   

// 上面的代码相当于下面的代码       

var num; // 声明语句提升到头部       
console.log(num);       
num = 1;

强调：变量提升只对var声明的变量有效，对于不使用var命令声明的变量无效。

例子：

console.log(num);       
num = 1;   //Uncaught ReferenceError: num is not defined

2.作用域

用var声明的变量：

console.log(num); // undefined
var num = 1;

不用var声明的变量：

console.log(num);
num = 1; // Uncaught ReferenceError: num is not defined

很明显的区别，不使用var声明的变量在使用时被系统识别为错误。这是因为javascript中存在一个叫做局部变量的东西：

var声明的变量称为局部变量。

局部变量仅在其所在的函数范围内生效，变量生效的范围被称为变量作用域。

而变量如果不适用var来声明，则表示变量在整个文件内生效。即全局变量。

3.一等公民

描述：在JS世界中，函数不仅拥有传统函数的功能（声明和调用），

还能够做到像简单值（数字、字符串、布尔..）一样赋值、传参、返回。

这样的函数称为第一级函数或一等公民。

例子：

(1) 函数可以直接赋值给变量

var func = function (){
  console.log('这是一个函数'); 
};           
console.log(func); // 这是一个函数

(2) 函数可以直接当做另一个函数的参数

function biaoWhite() {
  console.log('爱老虎油');
}           

function doSomething(func) {
  func();
}           
doSomething(biaoWhite);   // 爱老虎油

(3) 函数可以像简单值一样作为函数的返回值。 

触发返回值需要把它赋值给变量

function selfJieShao() {
  console.log('直接调用！');
  function caiyi() {
    console.log('赋值给变量才会调用它');
  }
  return caiyi;
}

selfJieShao(); // 直接调用！

var result1 = selfJieShao();
result1(); //直接调用！  赋值给变量才会调用它

4.函数名提升：

描述：通过function命令声明的函数，其声明语句会被提升到代码的头部。

例子：

function showWord(){       
  console.log('hello world');       
}       
showWord();  // hello world

注意：函数表达式方式声明的函数不会发生函数名提升。

扩展：设置默认参数

function func(num) {
  // 只要传入的参数不是undefined或null，那么传入什么就是什么
  // 不填参数默认为 1
  (num !== undefined && num !== null) ? num = num : num = 1;
  return num;
}
var result = func();
console.log(result); // 1

// ES6方法
function func2 (num = 1) {
  return num
}
var result2 = func2();
console.log(result2); // 1

值传递和地址传递

原始数据类型(数值、字符串、布尔值)的内容传递方式是值传递(pass by value)

【传递的内容是一个具体的数值,值传递】

var num1 = 10;
var num2 = num1;
var num3 = num1;

num1 = 20;
console.log(num2); // 10
console.log(num3); // 10

复合数据类型(数组、对象、其他函数)的内容传递是地址传递(pass by reference)

【传递的内容是一个具体的内存地址，地址传递】

var arr = [1, 2, 3, 4, 5];
var arr1 = arr;
var arr2 = arr;

arr.pop();

console.log(arr); // (4) [1, 2, 3, 4]
console.log(arr1); // (4) [1, 2, 3, 4]
console.log(arr1); // (4) [1, 2, 3, 4]

用法：值传递不会对原有的内容产生修改，而地址传递能够改变原数据。

扩展：数组做参数

var arr = [10, 20, 30];

function add(arrayObj) {
  for (var i in arrayObj) {
    // 时i为数组索引号, 各自加一
    arrayObj[i]++;
  }
}

add(arr);
console.log(arr); // (3) [11, 21, 31]

内存内容

1.函数同名参数

原则：

(1) 如果函数有同名参数，则取最后出现的参数值

(2) 如果函数调用时的参数，没有能够和声明时保持一致，则同名参数取undefined

例子：

function func(num,num,num){       
  console.log(num);       
}       

func(1,2);  // undefined       
func(1,2,3);  // 3

注意：原则上来讲不允许出现同名参数，并且声明时几个参数调用的时候最好也写几个参数。

2.arguments对象

描述：arguments对象包含了函数【运行时】的所有参数

用法：

arguments[0]代表函数运行时的第一个参数，

arguments[1]代表第二个参数，

...

注意：arguments对象只能在函数内部使用，在函数外部无效。

例子：参数值相加

function getSum (num1, num2) {
  var sum = 0;
  // 循环所有参数，让参数都相加
  for (var i=0; i<arguments.length; i++) {
    sum += arguments[i];
  }
  console.log(sum);
}

getSum(1, 1, 1); // 3

扩展：

(1) arguments.length 能够直接看到有几个参数

(2) arguments 对象还能够进行参数赋值（少用）

function getSum(num1, num2) {
  arguments[0] = 100;
  arguments[1] = 10;
  console.log(num1 + num2);
}
getSum(100000, 100000); // 110

3.eval函数

描述：eval 函数能够将字符串当做代码执行

语法：eval(string);

例子：

var str = 'var temp = 100;';   
eval(str);   
console.log(temp); // 100

4.instanceof类型检测

描述：用来检测变量是否归属于某个类型（仅对复合数据类型生效）

语法：变量 instanceof 类型

例子：

var arr = [];
console.log(arr instanceof Array); // true

var obj = {};
console.log(obj instanceof Array); // false

var fun = function () {};
console.log(fun instanceof Function); // true

Math对象

1.四舍五入

(1) Math.round(number);

标准：当参数为正数时，正常的四舍五入标准。（小于0.5取0，大于等于0.5取1）

当参数为负数时，向下取整标准。（小于等于-0.5取 0，大于-0.5取-1）

例子：

Math.round(3.6) // 4 
Math.round(-3.4) // -3

(2) Math.floor(number);

标准：返回小于参数的最大整数（舍去小数点）

当参数为负数时（舍去小数点，向上进一）

例子：

Math.floor(3.999)  // 3       
Math.floor(-3.000001) // -4

(3) Math.ceil(number)

标准：返回大于参数的最小整数（舍去小数点，向上进一）

当参数为负数时（舍去小数点）

例子：

Math.ceil(3.01);  // 4       
Math.ceil(-3.5);  // -3

2.Math.random()

描述：获取一个0~1之间的伪随机数，可能等于0，但一定小于1.

语法：var num = Math.random();

例子：

console.log(Math.random());  // 0.4653148115578041

（1）0~10之间的随机数（没有10）

Math.random() * 10

（2）10~15之间的随机数（没有15）

Math.random()*5 + 10 

（3）10~15之间的随机整数（没有15）

Math.floor( Math.random()*5 + 10 ); 

（4）m-n之间的随机整数

Math.floor( Math.random()*(n-m) + m ); 

（5）获取随机字符构成的，指定长度的字符串（获取验证码）

// 定义全局变量，给验证调用
code = "";

// 定义验证码的长度
var codeLength = 4;

// 所有候选组成验证码的字符，当然也可以用中文的
var allCharacter = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G',
  'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
  'Y', 'Z'];

// 组合4个字符成为验证码
for (var i=0; i<codeLength; i++) {
  var charaIndex = Math.floor( Math.random()*36 );  // Math.floor( Math.random()*36 ) // 0-35的随机整数
  code += allCharacter[charaIndex];
}

//显示验证码
console.log(code);  // 8Q0Y

Math属性和方法查询表

(1)Math对象属性：Math对象的属性表示只读的数学常数

// 常数e:  Math.E
console.log(Math.E); // 2.718281828459045

// 2的自然对数:  Math.LN2
console.log(Math.LN2); // 0.6931471805599453

// 10的自然对数:  Math.LN10
console.log(Math.LN10); // 2.302585092994046

// 以2为底的e的对数:  Math.LOG2E
console.log(Math.LOG2E); // 1.4426950408889634

// 以10为底的e的对数:  Math.LOG10E
console.log(Math.LOG10E); // 0.4342944819032518

// 常数Pi（π）:  Math.PI
console.log(Math.PI); // 3.141592653589793

// 0.5的平方根:  Math.SQRT1_2
console.log(Math.SQRT1_2); // 0.7071067811865476

// 2的平方根:  Math.SQRT2
console.log(Math.SQRT2) // 1.4142135623730951

【Math.abs()方法】：返回参数值的绝对值

Math.abs(1)  // 1
Math.abs(-1)  // 1

【Math.max()方法】：返回最大的参数

Math.max(2, -1, 5) // 5

【Math.min()方法】：返回最小的参数

Math.min(2, -1, 5) // -1

【Math. pow()方法】：返回以第一个参数为底数、第二个参数为幂的指数值

Math.pow(2, 2) // 4

Math.pow(2, 3) // 8

【Math. sqrt()方法】：返回参数值的平方根。如果参数是一个负值，则返回NaN

Math.sqrt(4) // 2

Math.sqrt(-4) // NaN

【Math. log()方法】：返回以e为底的自然对数值。

Math.log(Math.E) // 1
Math.log(10) // 2.302585092994046

【Math. exp()方法】： 返回常数e的参数次方。

Math.exp(1) // 2.718281828459045
Math.exp(3) // 20.085536923187668

【三角函数方法】

Math.sin  方法返回参数的正弦
Math.cos  方法返回参数的余弦
Math.tan  方法返回参数的正切
Math.asin  方法返回参数的反正弦
Math.acos  方法返回参数反余弦
Math.atan  方法返回参数反正切

Math.sin(0)  // 0
Math.cos(0)  // 1
Math.tan(0)  // 0

注意：三角函数方法中传入的参数是弧度值。

弧度转角度：180/π * 弧度

角度转弧度： π/180 * 角度

Date对象

0.在JS中日期的存储方式：距离1970年1月1日00:00:00的毫秒数。

1.Date()函数

描述：用来返回一个当前日期和时间构成的字符串

语法：var str = Date();

注意：没有参数，即使写了也没用。

例子：

var date1 = Date(2012, 12, 22);       
console.log(date1);  // Mon Oct 23 2017 17:27:35 GMT+0800 (中国标准时间)
// 星期，月份，日期，年，时，分，秒，地区

2.Date(日期字符串|日期参数)构造函数

描述：用来返回指定日期或时间构成的字符串。使用new来调用，能够生成的是日期对象。

(1) 语法：

var date1 = new Date(日期字符串);  // 创建指定日期的对象

例子： 

var tomorrow = new Date('2017-10-24'); // 年-月-日，输入几月就是几月       
console.log(tomorrow); // Tue Oct 24 2017 08:00:00 GMT+0800 (中国标准时间) 

(2) 语法：

var date2 = new Date(日期参数);  // 创建指定日期和时间的对象

例子：

(year, month, day, hours, minutes, seconds, ms) 年，月，日，时，分，秒，毫秒

var date1 = new Date(2017, 9, 24, 20, 31, 30);       
console.log(date1);  // Tue Oct 24 2017 20:31:30 GMT+0800 (中国标准时间)

使用日期参数时，年月必须写，其他则默认和可以省略，省略为0，月份0是代表1月

注意：如果对于构造函数Date()，不写参数表示当前时间，通过new Date()创建出来的实际上是对象，只不过表现为字符串的样子。

3.日期运算

规则：

两个日期对象进行减法运算，返回的就是它们间隔的毫秒数。

两个日期对象进行加法运算，返回的就是连接后的两个字符串。

例子：

var now = new Date();       
var tomorrow = new Date(2019,01,08,24,00);        
var sum = now + tomorrow;       
console.log(sum);  // Tue Jan 08 2019 22:10:46 GMT+0800 (中国标准时间)Sat Feb 09 2019 00:00:00 GMT+0800 (中国标准时间)        

var cha = tomorrow - now;       
console.log(cha); // 2684953299

4.日期对象的get*系列方法

var time = new Date();

// getTime()：返回距离1970年1月1日00:00:00对应的毫秒数，等同于valueOf方法
console.log('距离1970年1月1日00:00:00对应的毫秒数---' + time.getTime());

// getYear()：返回距离1900的年数
console.log('距离1900的年数---' + time.getYear());

// getFullYear()：返回四位的年份
console.log('四位的年份---' + time.getFullYear());

// getMonth()：返回月份（0表示1月，11表示12月）
console.log('月份---' + time.getMonth());

// getDate()：返回每个月的几号（从1开始）
console.log('每个月的几号---' + time.getDate());

// getDay()：返回星期几，星期日为0，星期一为1，以此类推
console.log('星期几---' + time.getDay());

// getHours()：返回小时（0-23）
console.log('小时---' + time.getHours());

// getMinutes()：返回分钟（0-59）
console.log('分钟---' + time.getMinutes());

// getSeconds()：返回秒（0-59）
console.log('秒---' + time.getSeconds());

// getMilliseconds()：返回毫秒（0-999）
console.log('毫秒---' + time.getMilliseconds());

DOM document节点

描述：

(1) DOM全称为 Document Object Model，即文档对象模型。是一套用来管理控制html文档的规则。

(2) document节点：document节点就是文档本身。

(3) DOM能够把文档解析成一系列的节点，并将这些节点构成一个树状结构（Dom Tree）。

通过操作这个树状结构来达到操作页面的目的。

注意：JS和DOM是两个不同的标准体系，只不过DOM的常见操作语言是JS，因此经常放在一起来说。

注意：

(1) 节点是对象的另一种叫法，在DOM规则中规定对象都称为节点。

(2) DOM规定页面中所有的元素都是节点。

(3) document节点会在页面加载的时候自动创建，不用手动创建直接使用即可。

例子：

console.log(document);  // document节点就是文档本身       
console.log(document instanceof Object);  // 节点是对象       
       
console.log(document.getElementById('div1'));  // 获取元素是DOM提供的方法       
console.log(document.getElementById('div1') instanceof Object);  // 元素也是对象

目的：

为了能够在脚本中操作页面，所以提出了dom规则，和document节点。

document节点的属性

一、能够返回具体某个标签的属性:

1.doctype属性

描述：表示页面的文档类型声明，如果页面没有DTD，则返回null

例子：

console.log(document.doctype); // <!DOCTYPE html>

扩展：

html4中有三种DTD（strict严格模式、transition过渡模式、frameset框架模式）

2.documentElement属性

描述：表示页面的html元素，html元素一般是页面的第二个直接子节点

例子：

console.log(document.documentElement);

3.body属性

描述：返回页面的body节点或frameset(框架集)节点，如果页面中没有这样的节点则返回null

例子：

console.log(document.body);

4.head属性

描述：返回页面的head节点，如果页面存在多个head，则返回第一个。

例子：

console.log(document.head);

二、能够返回文档的某个固有属性:

1.documentURI属性

描述：返回文档的url地址，所有的文档都具备此属性

例子：

console.log(document.documentURI);

2.URL属性

描述：返回html文档的url地址，本属性仅为html文档提供

例子：

console.log(document.URL);

注意：本属性是一个只读属性，不能通过本属性修改页面的URL地址

例子：

document.URL = 'http://www.baidu.com';  // 无效代码

3.domain属性

描述：返回文档的域名

例子：

console.log(document.domain);

4.lastModified属性

描述：返回文档最后修改的时间,格式是字符串

例子：

console.log(document.lastModified);

5.location属性

描述：location属性会返回一个url信息构成的对象

内容：

(1) document.location.href 属性用来读写页面的url地址

例子：

document.location.href = 'http://www.baidu.com';

(2) document.location.assgin 属性也能进行页面url的设置

例子：

document.location.assign('http://www.baidu.com');

(3) document.location.search 属性用来获取url中保存的信息

例子：

document.getElementById('getValue').onclick = function () {           
  console.log(document.location.search);           
};

6.title属性

描述：获取文档的标题，可读可写。

例子：

console.log(document.title);

7.characterSet属性

描述：返回文档的编码方式

例子：

console.log(document.characterSet);

8.readyState属性

描述：表示页面的加载状态

信息：本属性有三个可能值

(1) loading 表示页面正在加载（还没有完成解析操作）

(2) interactive 表示页面完成解析，但正在加载外部资源

(3) complete 表示页面加载完成

例子：

console.log(document.readyState);       
var timer = setInterval(function () {           
  console.log(document.readyState);           
  if(document.readyState == 'complete'){           
    clearInterval(timer);  // 清除定时器           
  }       
},20);

三、能够返回页面中指定元素的集合（不是数组！！！）:

1.anchors属性

描述：返回页面中所有带有 name 属性的 a 标签构成的集合

例子：

var collection = document.anchors;       
console.log(collection);       
console.log(collection.length);       
console.log(collection[0]);

2.images属性

描述：返回页面中所有img标签构成的集合

例子：

var collection = document.images;       
console.log(collection);

document节点选中页面元素：必须在页面加载完成才会查找成功

1. querySelector() 方法

描述：本方法用来选中页面元素，根据给定的选择器进行筛选。

如果有多个元素满足条件，则返回【第一个】满足条件的元素节点。

语法：document.querySelector('选择器名');

注意：查找失败返回null，不是undefined也不是报错

例子：

var p1 = document.querySelector('.ppp');    
console.log(p1);

2.querySelectorAll() 方法

描述：本方法用来选中页面元素，根据给定的选择器进行筛选。

如果有多个元素满足条件，则返回【这些元素】构成的集合。

语法：document.querySelectorAll('选择器名');

注意：

(1) 返回的结果是一个节点列表，不是数组，但能够像使用数组一样使用列表

(2) 如果查找失败不是返回null，而是返回一个空的节点列表（.length==0）

例子：

var pList = document.querySelectorAll('.ppp');    
console.log(pList[1]);

扩展：querySelector 和 querySelectorAll 选中元素的方法不仅能够被 document 节点调用，还能被其他的元素节点调用。

例子：

// 在整个文档中查找，满足选择器#p2的元素    
var p2 = document.querySelector('#p2');   
 
// 在p2元素节点中查找，满足选择器span条件的元素    
var p2_span = p2.querySelector('span');    
console.log(p2_span);

3. document节点中选中页面元素节点的方法(常用)

(1) getElementById('id名') 根据指定的id名选中页面元素

(2) getElementsByTagName('标签名') 根据指定的标签名选中页面中所有满足条件的元素

(3) getElementsByClassName('类名') 根据指定的类名选中页面中所有满足条件的元素

(4) getElementsByName('name属性') 根据指定的name值选中页面中所有满足条件的元素

例子：

var p2_id = document.getElementById('p2');    
var p = document.getElementsByTagName('p');    
var p_class = document.getElementsByClassName('ppp');    
var p_name = document.getElementsByName('p_name');

复杂document节点创建页面元素

1.createElement()方法

描述：本方法用来在内存中创建一个页面元素。

语法：

var 变量名 = document.createElement('标签名');

注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中，没有显示。

例子：新创建一个 h2

var h2 = document.createElement('h2');       
console.log(h2);

2.appendChild()方法

描述：给某个节点添加一个子节点

语法：

节点.appendChild(子节点);

例子：把 h2 添加到 body 中

var h2 = document.createElement('h2');       
document.body.appendChild(h2);

3.createAttribute()

描述：本方法用来生成一个属性节点。

语法：

var attrNode = document.createAttribute('属性名');

注意：

(1) 本方法创建的叫 属性节点，不叫 css 属性节点！！！！

(2) 创建的属性节点采用 .value = '' 进行赋值。

(3) 创建的属性节点采用 元素节点.setAttributeNode(属性节点) 方法绑定到元素上。

例子：

// 创建一个元素节点
var h2 = document.createElement('h2');

// 创建一个文本节点，并向 h2 标签中添加文字： '我是文本节点!'
h2.innerText = '我是文本节点!';

// 创建一个属性节点,并添加到元素上
var h2_ID = document.createAttribute('id');
h2_ID.value = 'H2';
h2.setAttributeNode(h2_ID);

var h2_style = document.createAttribute('style')
h2_style.value = 'color: #f00; font-size: 20px';
h2.setAttributeNode(h2_style);

// 将元素节点添加到body之内
document.body.appendChild(h2);

简便document节点操作页面元素属性

1.元素节点.style属性

描述：JS为元素节点提供了一个名为 style 的属性，用来读写和设置元素的行内样式表

语法：

元素节点.style.样式属性

注意：

(1) 使用style属性时，如果css属性存在横线则横线去掉，横线后第一个字母大写

(2) 如果css属性是js关键字（float），则调用属性之前添加css前缀，cssFloat

(3) 使用style属性时，属性赋值均采用字符串格式。包括单位。

例子：

var h2 = document.createElement('h2');       
h2.innerHTML = '这是一个非常非常非常非常长的h2';        
h2.style.textAlign = 'center';       
h2.style.color = 'red';       
h2.style.cssFloat = 'left';        
document.body.appendChild(h2);

2.元素节点.style.cssText属性

描述：本属性用来读写或删除整个style样式

语法：

元素节点.style.cssText = 'css样式';

注意：因为在cssText属性中是直接写css样式，因此不必进行任何改写。

例子：

var h2 = document.createElement('h2');       
h2.innerHTML = '这是一个非常非常非常非常长的h2';        
h2.style.cssText = 'text-align:center; color:red;';
document.body.appendChild(h2);

3.操作元素属性的方法

种类：

(1) 元素节点.setAttribute('属性名','属性值');   // 设置元素属性

(2) 元素节点.getAttribute('属性名');   // 读取元素属性值

(3) 元素节点.removeAttribute('属性名');   //  删除元素属性

注意：本系列方法可以操作元素的属性，不是只能操作css属性！！！！

例子：

var h2 = document.querySelector('h2');       
document.querySelector('button').onclick = function () {           
  h2.setAttribute('style', 'color:red;');
};