十一月九日课堂笔记-JavaScript基础

条件语句
在默认的语句中，程序总是一行一行的去解析执行特定的语句，但是有的场景下，顺序的执行语句无法满足程序的要求。
1.if 结构

    // if结构语句的语法
    if (expression)
    {
        statement
    }
    // 表达式最后的值必须是个boolean值 true或者false

在条件表达式中，数字0和非0也可以表现为false和true。
在Javascript中，=、==、===的区别

“=”：赋值运算符
“==”：值相等
“===”：严格相等运算符

在statement中如果出现多行语句必须要使用{}包裹，如果只有一行可以不用{}；

在还是一个初级程序员的时候，为了代码的可读性，还是建议将只有一行代码的语句块用{}包裹。

2.if…else结构

    // if结构语句的语法
if (expression)
{
    statement
} else {
    statement
}
// 在else代码中执行的条件是紧跟着自己的if的非条件
// 使用if结构和if...else结构其实都是可以实现相同的功能的，只不过在表达方式上有所区别。
// 代码块说明


var age = 80;

if (age <= 18)
{
    console.log("1-我未满18岁");
}
if (age > 18 && age <= 30)
{
    console.log("1-我在18-30岁之间");
}
if (age > 30 && age <= 50)
{
    console.log("1-我在30-50岁之间");
}

if (age <= 18)
{
    console.log("2-我未满18岁");
} else {
    if (age <= 30)
    {
        console.log("2-我在18-30岁之间");
    } else {
        if (age <= 50)
        {
            console.log("2-我在30-50岁之间");
        }
    }
}

if (age <= 18)
{
    console.log("3-我未满18岁");
} else if (age <= 30){
    console.log("3-我在18-30岁之间");
} else if (age <= 50){
    console.log("3-我在30-50岁之间");
} else {
    //
    ;
}

3.switch结构
switch我们一般用在多个离散的值进行条件判断时使用，特别是有很多的值的时候。

var monthNum = 2;
switch (monthNum)
{
    case 1:
        console.log("一月");
        break;
    case 2:
        console.log("二月");
        break;
    case 3:
        console.log("三月");
        break;
    case 4:
        console.log("四月");
        break;
}

var sex = "man";
switch (sex)
{
    case "man":
        console.log("man");
        break;
    case "woman":
        console.log("woman");
        break;
    default:
        console.log("in default");
}

4. 三元运算符
三元运算符我们一般用简单的逻辑判断和赋值语句中。

    var sexFlag = 2;
    var sexStr;

    if (sexFlag === 1) {
        sexStr = "man";
    } else {
        sexStr = "woman";
    }
    // 语法(condition) ? expre1 : expre2;
    // 实现的效果和上述的if...else结构一样
    sexStr = (sexFlag === 1 ? "3-man" : "3-woman");
    console.log(sexStr);

循环语句
1.while循环
循环语句是用于重复执行某些操作。
语法：

    s1;
    while (expression) {
       statement;
    }
    s2;

当程序执行while语句时，判断expression的值是否为真，如果真，就执行{}里面的代码块，当代码块执行完成后，继续判断expression是否为真，直到为假的时候，才会执行到s2语句。

这里要注意的是，如果expression一直为真，那么程序就死循环了。
如果循环体内只有一条语句，那么{}可以省略，但是为了程序的可读性，不建议省略。

    var i = 1;
   var sumi = 0;
   while (i <= 10000) {
      sumi = sumi + i;
      i = i + 1;
   }
   document.write("sumi=" + sumi);

2.for循环
for循环可以指定循环的起点、终点和终止条件。
语法：

    for (initialize ; test; increment) {
      statement;
   }

initialize 初始化表达式：确定循环的开始条件，只在循环开始的时候执行一次。
test 测试表达式：检查循环条件，只要为真就执行循环体的内容。
increment 递增表达式：完成后续操作，然后返回上一步，再一次检查条件。

    var sumifor = 0;
    for (var i = 1; i <= 10000; i++) {
        sumifor = sumifor + i;
    }
    document.write("<br/>sumifor=" + sumifor);
3.do...while

语法：

    do {
       statement;
    } while (expression)

do…while循环和while循环本质的差异在于，while循环体内的代码可能存在一次都不会执行，但是do…while的循环体内代码至少会执行一次。

    var sumdo = 0;
    var i = 5;
    do {
       sumdo = sumdo + i;
    } while (i != 5);

    var sumdo2 = 0;
    var i2 = 5;
    while (i2 != 5) {
        sumdo2 = sumdo2 + i2;
    }

    document.write("<br/>sumdo=" + sumdo);
    document.write("<br/>sumdo2=" + sumdo2);

4.break和continue关键字的作用
break和continue都有跳出循环的作用，就是让代码不按照既有的顺序往下执行；
但是break是直接跳出循环，执行循环的下一条语句。

    var sumifor = 0;
    for (var i = 1; i <= 100; i++) {
        document.write("<br/>======================================");
       if (i <= 88) {
            var currentSum = sumifor;
            sumifor = sumifor + i;
            document.write("<br/>" + currentSum + " + " + i + " = " + sumifor);
       } else {
          break;
       }
    }

continue：当在循环体内出现continue关键字，则continue关键字下面的语句不会执行，但是程序会继续执行循环，不会跳出循环执行循环的下一条语句。

var sumifor = 0;
for (var i = 1; i <= 100; i++) {
    document.write("<br/>======================================");
   if (i != 88) {
        var currentSum = sumifor;
        sumifor = sumifor + i;
        document.write("<br/>" + currentSum + " + " + i + " = " + sumifor);
   } else {
      continue;
   }
    document.write("<br/>"+i +"++++++++++++++++++++++++++++++++");
}
document.write("<br/>END");

冯小童 09:20:07
typeof运算符
用于确定当前变量的值是什么数据类型
在Javascript中有3种方法确定一个值的数据类型
typeof运算符
instanceof运算符
object.prototype.toString方法

    console.log(typeof 123); // number
    console.log(typeof '123'); // string
    console.log(typeof true); // boolean
    console.log(typeof test); // function
    console.log(typeof undefined); // undefined
    console.log(typeof [1,2,3]); // object
    console.log(typeof {}); // object
    console.log(typeof null); // object

数组的类型也是object，这说明在Javascript中，数组本质上只是一种特殊的对象。
遗留的问题：null和undefined的区别；
数值类型
1.整数和浮点数
在Javascript内部，所有的数字都是以64位浮点形式存储的，即便是整数也是如此，所以，在Javascript中1 和1.0，是同一个数字。

console.log(1 === 1.0); // true

由于浮点数不是精确的值，所以在计算的时候要特别的小心。

console.log(0.1 + 0.2 === 0.3); // false
console.log(0.3 / 0.1); // false

遗留问题：至于浮点数为什么不能表示精确的值，自己找相关的资料。
Javascript所能表示的数值范围：

    console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
    console.log(Number.MIN_VALUE); // 5e-324

遗留的问题：数值的表示方法，16进制、8进制、科学计数法等。
关于+0和-0的概念（在Javacript中任何一个数都有一个负值，0也不例外）

    console.log(+0 === -0); // true
    console.log(1 / +0); // +Infinity
    console.log(1 / -0); // -Infinity
    console.log(1 / +0 === 1 / -0); // false

2. NaN(Not a Number)
主要出现在将字符串错误的解析为数字。

    console.log(5 - 'x'); // NaN
    console.log(0 / 0); // NaN
    console.log(Math.sqrt(-9)); // NaN

3.与数值类型相关的几个全局方法
parseInt()：把字符串解析为整数，要注意的是，字符串在解析为整数的时候，是一个个字符解析的，如果遇到不能转为数字的字符，就不再解析下去，返回已经解析完成的字符数字。

        console.log(parseInt('12px')); // 12
        console.log(parseInt('012')); // 12
        console.log(parseInt(' 12')); // 12
        console.log(parseInt('12  abc 12')); // 12

parseFloat()：概念同parseInt
字符串
字符串是一个或多个排在一起的字符，可以用单引号和双引号包裹。
在单引号包裹的字符串内部可以使用双引号，同样的，在双引号包裹的字符串内部也是可以使用单引号。

    console.log("hello,'world'!");
    console.log('hello,"world"!');

在源代码中如果需要使用多行字符串，我们一般使用 + 或者 \ ，但是一般都是使用 + 拼接。

    console.log('hello,world!' +
    'hello,world!' +
    'hello,world!hello,world!');
    console.log('hello,world!\
    hello,world!\
    hello,world!hello,world!');

1.转义字符
\0 null
\b 后退键
\f 换页符
\n 换行符
\r 回车符
\t 制表符
\v 垂直制表符
\’ 单引号
\” 双引号
\ 反斜杠

console.log('\t"hello,world!"\n' +
    'hello,world!\n' +
    'hello,world!\n' +
    'hello,world!\n');

冯小童 09:20:21
2.转换为字符串
有两种方式转换为字符串

        //几乎每个值都有toString方法，除了null和undefined
        var age = 11;
          var ageText = age.toString();
          console.log(ageText+1);
          var found = true;
          var foundText = found.toString();
          console.log(foundText);

          var value1 =10;
          var value2 = true;
          var value3 = null;
          var value4;
         //String()函数能将任何类型的
          console.log(String(value1));
          console.log(String(value2));
          console.log(String(value3));
          console.log(String(value4));

3.字符串和数组
字符串可以理解为一个特殊的字符类型的数组，因此可以使用数组的中括号返回某个索引位置的字符。但是不能通过索引位置赋值。

    var h = "hello";
    h[0] = "w"; // 此处不会修改h[0]的值
    console.log(h); // hello
    h.length = 7;
    console.log(h.length); // 5

布尔类型
在Javascript的boolean类型中，除true和false表现真假外，0也可以表示假，非0表示真。
函数
函数是一段可以反复调用的代码块，函数区别于代码块最显著的特征就是可以有输入参数，根据不同的输入参数，可以返回不同的结果。

1. 函数的声明
函数的声明有三种方式，常用的前两种。
1)function命令
function 命令后面是函数名，函数名后面是一对圆括号，里面是传入的参数。
// 函数的声明或者叫函数的定义

function p(str) {
   console.log(str);
}
// 调用函数
p("abc");

2)函数表达式
用变量赋值的写法去声明一个函数。

var print = function(str) {
   console.log(str);
};
print("xxxx");

在上述代码中，在赋值预算符=右边的函数，是没有名字的，我们把这种类型的函数也称之为匿名函数，匿名函数有时我们也叫做函数表达式。

在通过函数表达式定义一个函数的时候，在语句后面要加上“；”。
3)Function构造函数
很少用这种方式定义：语义不明确，代码的可读性差。
2.第一等公民
JavaScript将函数看做一个值，与其他类型的值（数值、字符串、布尔值等）地位相同。凡是可以使用值的地方都可以使用函数，可以把函数赋值给变量或对象的属性。也可以当做参数传递给其他函数，或者作为函数的结果返回。函数只是一个可执行的值，此外并无特殊之处。

function add(x, y) {
   return x + y;
}
var add = function(x, y) {
   return x + y;
};
var oper = add;
print(oper(2,2)); // 4
function a(op) {
   return op;
}
print(a(add)(1,2)); // 3

var o2 = {
   name : "Tom",
   add : add
};
print(o2.add(3,3)); // 6

3.函数名的提升
Javascript引擎将函数名视同变量名。所以采用function命令声明函数时，整个函数就会像变量声明一样，提升到代码头部。

4.函数的属性和方法
name属性：输入函数的名字
length属性：输入函数参数的个数
toString（）方法：返回函数的源码

print("add.name=" + add.name);
print("add.length=" + add.length);
print("add.toString()" + add.toString());

5.函数的作用域
作用域（scope）称之为变量存在的范围。
在Javascript中只有两种作用域，一种是全局作用域：即变量在整个程序中一直存在，所有的地方都可以读取。
另一种叫函数作用域：即变量只在函数内部存在。
var i = 0; // 这里的i是全局变量，可以在页面的任何位置引用

冯小童  09:20:22
function t() {
   var j = 0;
   console.log("j=" + j);
   console.log("i=" + i);
}
// console.log("out j = " + j); 
// 此处代码会报错，j is not defined
t();

函数体内的变量提升

function t() {
    console.log("j=" + j); // j=undefined
   var j = 0;
   console.log("i=" + i);
}

6.参数
函数在运行的过程中，有时需要提供外部数据，不同的外部数据可能会得到不同的结果，我们把这种外部数据叫做参数。需要特别注意的时，在Javascript语言中是不需要指定参数的数据类型的。

function p(str) {
   console.log(str);
}

参数的省略
在javascript中，函数的参数不是必须的，Javascript可以省略。

function p(str, flag) {
   console.log("str=" + str);
   console.log("flag=" + flag);
}
console.log("=======================");
p("hello");
console.log("=======================");
p("hello",true);
console.log("=======================");
p();
console.log("=======================");

被省略的参数的值变成“undefined”;
但是，没有办法只传递靠后的参数，省略靠前的参数，可以通过显示的传入undefined。
关于默认值的实现

function f(a) {
   a = a || 1;
   console.log("a:" + a);
}
f(); // 1

7.传递方式
函数参数如果是原始数据类型（数值、字符串、布尔型），都是传值传递，如果在函数体内修改了变量的值，不会影响到函数体外。

function f(o) {
   o = 5;
   console.log("o=" + o);
}
var i = "abc";
f(i);
console.log("i=" + i); // abc

但是，如果函数的参数是复合数据类型的值（数组、对象、函数等），传递方式是引用传递。也就是说，在函数内部修改了原对象的值，会影响到原来的值。

function fo(oj) {
    oj.name = "Jack";
    console.log("oj.name=" + oj.name);
}
var obj = {
   name : "Tom",
   age :20
};
fo(obj);
console.log("obj.name=" + obj.name); // Jack

数组
数组是按次序排列的一组值。每个值的位置都有编号（从0开始的）。整个数组用方括号表示。

数组的元素可以是不同的数据类型。
如果数组中的元素也为数组，那么就构成了一个二维数组

var arr = ['a','b','c'];
var arr2 = [];
arr2[0] = 'a';
arr2[1] = 'b';
arr2[2] = 'c';
var arr3 = ['a',12,true,{name:"Tom",age:18}];
console.log(typeof arr3[2]); // boolean

var arr4 = [[1,2],[3,4]];
console.log(arr4[1][0]); // 3

1. 数组的本质
本质上，数组就是一个对象。通过typeof运算符返回的类型就是object。

console.log(typeof arr4); // object
console.log("arr['1']=" + arr['1']); // b
console.log(Object.keys(arr)); // ["0", "1", "2"]

2.length属性
length属性返回的是数组的成员数量。
Javascript使用32位整数保存数组的元素个数，所以length的最大值为232-1。
只要是数组，就有length属性，而且length属性是一个动态的值，该值等于键名中的最大整数+1。
清空一个数组比较有效的方法就是设置length=0

var arr5 = [1,2,3,4,5];
console.log(arr5.length); // 5
arr5[100] = 100;
console.log(arr5.length); // 11
console.log(arr5[7]);

var arr6 = [1,2,3,4];
console.log(arr6[3]); // 4
arr6.length = 3;
console.log(arr6[3]);
for...in循环和遍历数组
var arr6 = ['a','b','c','d'];
arr6.score = 98;
for (var i  in arr6) {
   console.log(arr6[i]); // a b c d 98
}

通过for…in遍历数组的时候，会把非数字键的属性也遍历出来，所以不推荐使用for…in遍历数组
我们一般还是使用for或while循环去遍历数组

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

var i = 0;
while (i < arr6.length) {
    console.log("arr6[" + (i) + "]=" + arr6[i]);
    i = i + 1;
}