（day45）JavaScript

目录

• 一、什么是JavaScript
• 二、注释
• 三、引入方式
  • （1）script标签内联
  • （2）script标签外联
• 四、变量
  • （一）变量声明
  • （二）命名规范
• 五、数据类型
  • （一）数值类型Number
    • （1）方法
  • （二）字符类型string
    • （1）方法
    • （2）模板字符串`和$
  • （三）对象object
    • （1）数组
    • （2）自定义对象
    • （3）Date对象
    • （4）JSON对象
    • （5）RegExp对象
    • （6）Math对象
• 六、运算符
  • （一）算术运算符
  • （二）比较运算符
  • （三）逻辑运算符
  • （四）赋值运算符
  • （五）typeOf
• 七、流程控制
  • （一）if判断
    • （1）单分支
    • （2）多分支
  • （二）switch判断
  • （三）for循环
  • （四）while循环
  • （五）三元表达式
• 八、函数
  • （一）分类
  • （二）=>
  • （三）函数的全局变量和局部变量
    • （1）局部变量
    • （2）全局变量
  • （四）作用域
  • （五）词法分析

一、什么是JavaScript

1. 前端的一门脚本编程语言，也叫ECMAscript，当前使用较多版本是5.1（版本变更）和6（添加类和模块）
2. node.js：支持前端js代码，在后端服务器上运行
3. 和Java没有关系，只是为了蹭热度取名JavaScript
4. js代码规定默认是以分号作为结束符，不写通常情况下也没事

二、注释

1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/

三、引入方式

（1）script标签内联

（2）script标签外联

四、变量

（一）变量声明

1. var：无论在哪里申明都是全局有效
2. let：在局部声明就是局部有效，全局声明就是全局有效（ES6新语法）
3. const：声明的变量为常量，无法被修改

var name= 'wick'
let name = 'nick'
const pi =3.1315

（二）命名规范

1. 数字、字母、下划线和$
2. 不能使用关键字
3. 推荐使用驼峰体

五、数据类型

（一）数值类型Number

1. Number：包含整型和浮点型
2. NaN：表示不是一个数字

（1）方法

1. parseInt：将字符串转换成数字
2. parseFloat：将字符串转换成数字

var x = 1;
typeof x; //number

var y = '123';
parseInt(y); // 123

var z = '123.132.3.21';
parseFloat(z); //123.132

（二）字符类型string

（1）方法

1. length：长度
2. trim()：移除两边空白，可自定义字符
3. trimLeft()：移除左边空白
4. trimRight()：移除右边空白
5. charAt(n)：相当于索引取值
6. concat()：拼接，资源消耗大，推荐使用“+”进行拼接
7. indexOf()：获取元素索引
8. substring()：切片，不支持负数，尾数字大于首数字会交换首尾数字
9. slice()：切片，支持负数，尾数字大于首数字不会交换首尾数字
10. toLowerCase()：大写
11. toUpperCase()：小写
12. splite()：分割

var x = 'wick';
typeof x;  /string/

（2）模板字符串`和$

字符串中嵌入变量

var name = 'wick',time  = 'today';
`Hello ${name},how are you ${time}`

（三）对象object

1. 所有事物都是对象（字符串、数字、数组、日期等）
2. 对象时带有属性和方法的特殊数据类型

（1）数组

相对于python中的列表

1. length：数组大小
2. push：尾部追加元素，相当于append
3. pop：弹出尾部元素
4. unshift：头部插入元素
5. shift：头部移除元素
6. slice：切片
7. reverse：切片
8. join：将数组拼接成字符串
9. concat：连接数组，相当于extend
10. sort：排序
11. forEach：把每个元素传递给回调函数
12. splice：删除指定索引后的指定元素个数，并添加多个新元素(可选参数)
13. map：返回一个数组元素调用函数处理后的新数组

//forEach()
var arr1 = [1,2,3,4];
arr1.forEach(function(value,index,arr){
    console.log(value,index,arr)
})
// 1 0 (4) [1, 2, 3, 4]
// 2 1 (4) [1, 2, 3, 4]
// 3 2 (4) [1, 2, 3, 4]
// 4 3 (4) [1, 2, 3, 4]

//map(function(currentValue,index,arr), thisValue)
arr1.map(function(value,index,arr){
    return value+1
})
// [2,3,4,5]

（2）自定义对象

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

   var dic = {'a':1,'b':2};
   typeOf dic;  // object
   
   dic.a // 1
   dic['a'] // 1
   
   // 创建对象 new
   var person=new Object();  // 创建一个person对象
   person.name="Alex";  // person对象的name属性
   person.age=18;  // person对象的age属性

2. ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

```javascript
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
```

（3）Date对象

1. 创建Date对象

   //方法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());  //毫秒并不直接显示

2. Date对象的方法

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

（4）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);

（5）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}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

RegExp

（6）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)      返回角的正切。

六、运算符

（一）算术运算符

1. x++：会先赋值再进行自增1运算
2. ++x：会先进行自增运算再赋值

+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;  // 10
res2;  // 12

（二）比较运算符

1. ==：弱等于，会自动转换数据类型
2. ===：强等于

// > < >= <= == === != !==

1 == '1' // true
1 === '1' // false

（三）逻辑运算符

1. &&：并
2. ||：或
3. !：非

（四）赋值运算符

= += -+ *= /=

（五）typeOf

一元运算符，返回值类型：

1. undefined
2. boolean
3. number
4. string
5. object

七、流程控制

（一）if判断

（1）单分支

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

（2）多分支

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

（二）switch判断

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句

var day = new Date().getDay();

switch (day){
    case 0:
        console.log('星期天');
        break;
    case 1:
        console.log('星期一');
        break;
    case 2:
        console.log('星期二');
        break;
    case 3:
        console.log('星期三');
        break;
    case 4:
        console.log('星期四');
        break;
    case 5:
        console.log('星期五');
        break;
    default:
        console.log('没有星期六')
}

（三）for循环

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

（四）while循环

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

（五）三元表达式

var a = 1;
var b = 2;
var c = a > b ? a : b;
// a>b成立返回a，否则返回b，可以嵌套

var a=10,b=20;
var x=a>b ? a :(b =='20') ?a:b
// 10

八、函数

（一）分类

1. 函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。
2. arguments相当于一个包含了传入参数的数组

// 无参函数
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);

（二）=>

ES6中允许使用“箭头”（=>）定义函数，

var f= v => v;
// 等同于
var f = function(v){
  return v;
}

var sum = (n1,n2) => n1+n2;
// 等同于
var sum = function(n1,n2){
    return n1+n2;  // 只能返回一个值
}

（三）函数的全局变量和局部变量

（1）局部变量

1. 在函数内部声明的变量就是局部变量，只能在函数内部访问
2. 函数运行完毕，本地变量就会被删除

（2）全局变量

函数外声明的是全局变量，网页上所有脚本和函数都能访问，页面关闭后删除

（四）作用域

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

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

f();  //输出结果是？

// 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();

（五）词法分析

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

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive 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();  // 执行后的结果是？