03-JavaScript基本语法

变量

• 会变化的量，是用来存储数据的容器。

• 命名规范：

  • 可以由数字、字母、下划线、$组成，不能以数字开头;
  • 严格区分大小写;
  • 变量名中不允许有空格；
  • 不能使用关键字、保留字命名，不确定变量名是否是关键字、保留字时可以用 alert 弹出查看；
  • 长度不能超过255个字符；
  • 汉字可以作为变量名，但是不建议使用。

• 练习：

  • 用户输入一个数a，然后向用户弹出a的立方；
  • 用户输入两个数，然后向用户弹出这两个数的和；
  • 交换两个数字型变量的值（不使用第三个变量）。

• 在一行定义多个变量：var a=1,b=3,c;

数据类型

简单数据类型(值类型)：

• number（数字类型）：包含小数、整数;

  • 数字类型的表达方式：
    • 十进制；
    • 十六进制：从0-9，从a(A)-f(F)，以0x开头;
    • 八进制：以0开头。
  • 小数可以进行计算，但是千万不要进行比较，小数会有精度丢失。

• 字符串：凡是用双引号或者单引号表示的都是字符串。

• 布尔数据类型（boolean）：只有两个取值true和false。运算时0代表false，1代表true。

• undefined（变量未初始化）：定义了一个变量，但是没有初始化(没有给变量赋值)。

• null：变量值为空，未引用，属于复杂数据类型，是Object。

• 注：var n3="";，变量n3是存在的，值为空字符串。

• 判断数据类型：typeof(a);或者typeof a;;

复杂数据类型(引用类型)：

• Object、function、array、date、regExp、error...

字面量

• 固定的值，让你从“字面上”理解其含义；
• 数值字面量：var age = 18;，18为字面值。

算术运算符

• +：

  • 两个数字类型的数相加得到的是数字类型；
  • 字符串和数字类型的数相加得到的是字符串类型。

• -：

  • 数字类型和数字字符串相减，得到的是一个数字类型；
  • 数字类型和包含非数字的字符串相减，得到的是NaN（NaN也是数字类型）。

• /：

  • 数字类型和数字字符串相除，得到的是一个数字类型；
  • 数字类型和包含非数字字符串相除，得到的是 NaN，是数字类型；
  • 如果除数为零，得到 Infinity，仍然是一个数字类型。

• %:取余。

• NaN:

  • undefined和任何数值计算结果为NaN；
  • NaN与任何值都不相等，包括NaN本身；
  • isNaN：是否符合一个标准，不是一个数字的标准。

• 练习：如果今天是星期天，500天后是星期几（用一条语句完成）

• 比较运算符：

  • >、<、>=、<=、==、!=

Data对象

操作	说明
new Date()	创建时间
getDate()	获取日期(号)
getDay()	获取星期，第一天周日是0
getFullYear()	获取四位数年份
getHours()	获取当前时间的时
getMonth()	获取月份，第一个月从0开始
getTime()	返回从1970年1月1日至今的毫秒数

Math常用方法

方法	描述
max(a,b)	返回a,b最大值
min(a,b)	返回a,b最小值
floor(a)	对a向下取整
ceil(a)	对a向上取整
round(a)	对a进行四舍五入
random()	返回0~1之间的随机数，[0,1)
pow(a,b)	返回a的b次方
sqrt(a)	返回a的平方根

数据类型转换

• 数字类型转字符串

  • String(数值);
  • 数值.toString();
  • 变量 + "";

• 字符串转数字

  • Number(字符串)，如果包含非数字，返回NaN；
  • parseInt(数/字符串)：取整，从前往后读到非数字位停止，读到小数点时候也停止，如果以非数字开头结果就为NaN；
  • parseFloat(数字/字符串)：取数，从前往后读到非数字位停止，读到小数位时不停止，如果以非数字开头，结果就为NaN。

• Boolean转数字类型

  • undefined、null、数字0、""、NaN转完之后为false；
  • 所有的其它字符串转完之后都为true，包括"0"。
  • 转换为Boolean类型的方法：
    • Boolean(数字/字符串);
    • !!数字/字符串;

• 隐式数据类型转换

  • 在运算过程中，程序自己进行的数据转换(工程师没有操作)；
  • 只在运算过程中进行转换。

• NaN和undefined

• undefined == null为true；

• undefined === null为false；

• undefined + 10 = NaN；

• NaN + 10 = 10，此时NaN可以当作0。

• 练习：

• 用户输入一个三位数，输出三个数字的值。如输入123，输出6；输入987，输出24。

逻辑运算符

• &&（与）；
• ||（或）；
• ！（非）；
• 结果只有两个：true和false。

等号运算符

• =：赋值；
• ==：只判断内容是否相等；
• ===：判断内容和类型是否都相同；
• !=：判断内容是否不相等；
• !==:判断内容和类型是否都不相同。

判断语句

• 练习：
• 当用户点击确定时，弹出消息“您已退出”；当点击取消时，弹出消息“您已取消退出”。
• 用户输入一个数，如果是偶数，在控制台输出这个数；否则输出这个数不是偶数。
• 用户输入一个数，判断该数是否在20~70之间，如果在输出该数，否则输出该数不在范围内。
• 用户输入一个数字，该数和随机产生的数（0~99，包含0和99）进行比较，如果用户输入的数大，就输出您赢了，否则输出你输了。
• 用户输入一个年龄，判断在哪个阶段。比如0_{20为少年，20}30为青年，30_{50为中年，50}为晚年。
• 用户输入学生的成绩和姓名。判断学生成绩在哪个阶段（分为优良中下），并在控制台输出学生的姓名及成绩所在的阶段。

三元表达式

• 写法：表达式?结果1:结果2;，如果表达式为true就执行表达式1，否则就执行表达式2。

• 练习：

• 当用户点击确定时，弹出消息“您已退出”；当点击取消时，弹出消息“您已取消退出”。

• 用户输入一个数，如果是偶数，在控制台输出这个数；否则输出这个数不是偶数。

• 用户输入一个数字，该数和随机产生的数（0~99，包含0和99）进行比较，如果用户输入的数大，就输出您赢了，否则输出你输了。

• 代码调试

• 总练习：

• 92号汽油每升6元，如果大于等于20升，那么每升5.9；97号汽油，每升7元，如果大于等于30升，那么每升6.95。用户输入自己的汽油编号，然后输入自己加多少升，弹出所需支付的费用。

var a = prompt("请输入汽油号");
var b = prompt("要加多少升");
if (a == 92){
    if (b >= 20){
        alert(b * 5.9 + "元");
    }else {
        alert(b * 6 + "元");
    }
}else if (a == 97){
    if (b >= 30){
        alert(b * 6.95 + "元");
    }else {
        alert(b * 7 + "元");
    }
}

• 用户先输入用户名，如果不是admin，就停止程序，如果是就再让用户输入密码，如果密码是88888，就提示登录成功，否则提示登录失败。

var a = prompt("请输入用户名：");
if (a == "admin"){
    var b = prompt("请输入密码");
    if (b == 88888){
        alert("登录成功");
    }else {
        alert("登录失败");
    }
}

• 让用户输入三个数字，用三元运算符找出其中最大的一个。

var max = prompt("输入第一个数");
var b = prompt("输入第二个数");
var c = prompt("输入第三个数");
max = max>b?max:b;
alert(max>c?max:c);

switch语句

• 练习：
• 用户输入一个成绩（100，80，60，40），弹出对应的评语（优、良、中、下），如果输入其它值就弹出未参加考试。switch底层用的是===比较。

var a = prompt("输入成绩");
switch (Number(a)){
    case 100:
        alert("优");
        break;
    case 80:
        alert("良");
        break;
    case 60:
        alert("中");
        break;
    case 40:
        alert("下");
        break;
    default:
        alert("未参加考试");
        break;
}

• 输入月份，弹出对应的季节。（比如3，4，5为春季）

var a = prompt("输入月份");
switch (Number(a)){
    case 3:
    case 4:
    case 5:
        alert("春季");
        break;
    case 6:
    case 7:
    case 8:
        alert("夏季");
        break;
    case 9:
    case 10:
    case 11:
        alert("秋季");
        break;
    case 12:
    case 1:
    case 2:
        alert("冬季");
        break;
    default:
        alert("输错啦");
        break;
}

while循环

• 练习：
• 将1-100中3的倍数打印到控制台。
• 将1~100之间的数相加，将和打印在控制台。
• 让用户输入用户名和密码，如果用户名不是admin或者密码不是88888，就要求用户重新输入，否则提示登录成功。
• 将1~50之间的所有奇数打印出来。

for循环

• 练习：换行用document.write("<br>");
• 计算1~100之间所有数之和并打印；
• 在页面打印两行十颗星；
• 打印一个直角三角形（由星组成，高10颗星，宽10颗星）;
• 打印乘法口诀。

<script>
    document.write("<table border='1'>");
    for(var i=1; i<=9; i++){
        document.write("<tr>");
        for(var j=1; j<=i; j++){
            document.write("<td>");
            document.write(j+"*"+i+"="+i*j);
            document.write("</td>")
        }
        document.write("</tr>")
    }
    document.write("</table>");
</script>

break

• 跳出当前这一层循环。
• 练习：
• 找出1~100之间所有的质数；（提示：用flag标志位）

function getPrimes(num) {
        var primes = new Array();
        for(var i=2; i<=num; i++){
            var flag = true;
            for(var j=2; j<=Math.sqrt(i); j++){
                if (i%j==0){
                    flag = false;
                    break;  //break结束循环（只能结束一层循环），return结束本次函数
                }
            }
            if (flag == true){
                primes[primes.length] = i;
            }
        }
        console.log(primes);
}
getPrimes(100);

continue

• 跳出本次循环。
• 练习：
• 请输出1~10之间所有的数，但是不输出6；
• 打印出1~100之间所有的数，但是不包括3的倍数。

数组

• 数组的创建：
• 用new关键字来创建:var a = new Array();；
• 直接创建：var a = [];；定义并初始化：var a = [12,32,"我爱中国"];；
• 获取数组的长度：a.length，可以通过for循环进行遍历；
• 数组的合并：concat，数组3 = 数组1.concat(数组2);
• slice(start,end):从当前数组中截取一个新数组，不影响原来数组，参数start从0开始，end从1开始；
• splice(start,deleteCount,options)：删除或替换当前数组的某些项目，参数start表示开始删除的位置，deleteCount表示删除的元素个数，options表示在删除的地方要添加的元素（可以是单个元素也可以是数组）：

var arr1 = [2,3,4,5,6,7];
var arr2 = ["a","b","c"];
var arr3 = arr1.concat(arr2);
console.log(arr3);  //[2, 3, 4, 5, 6, 7, "a", "b", "c"]
for(var a in arr2){
    document.write(arr2[a]);    //a b c
}
var s1 = arr3.slice(4,8);
console.log(s1);     //[6, 7, "a", "b"]
var s2 = arr3.splice(0,5,"x","y","z");  //返回被删除的元素：第一个数字为删除开始位置，第二个数字为要删除的元素的个数，之后的值为在删除元素位置插入的新值
console.log(s2);    //[2, 3, 4, 5, 6]
console.log(arr3);  //["x", "y", "z", 7, "a", "b", "c"]

• 位置方法：indexOf()、lastindexOf()：如果没有找到就返回-1；

var arr1 = [2,3,4,5,6,7,8,6];
var i1 = arr1.indexOf(8);
console.log(i1);    //6
var i2 = arr1.indexOf(12);
console.log(i2);    //-1
var i3 = arr1.lastIndexOf(6);   //返回元素最后出现的位置
console.log(i3);    //7

• 清空数组的方法：

var arr = [1,2,34,5];
//方法一：
arr.splice(0,arr.length);
//方法二：
arr.length = 0;
//方法三：
arr = [];
console.log(arr);   //[]

• 迭代方法，不会修改原来的数组：every()、filter()、forEach()、map()、some()
• every():对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历every，返回false：

array.every(function(item,index,arr){
        //code
})

• 此类方法用的不多，在封装时候可能会用到，用到时候再查也行，forEach()会用的多一些。

• 将数组用“|”连成一个字符串：join

var arr1 = [1,2,3,4];
var arr2 = arr1.join("|");
//此时arr2为1|2|3|4

• 数组的排序sort：
• sort排序是先根据第一位数字排，第一位排完之后再排第二位，以此类推

var arr = [1,2,3,11,21,23];
arr.sort();
console.log(arr);   //[1,11,2,21,23,3]

• 利用回调函数进行升序排序

var arr3 = new Array(2,4,6,1,11,23,43,32);
alert(arr3.sort(function (a,b) {
      return a-b;
}));
alert(arr3);    //1,2,4,6,11,23,32,43

• 利用回调函数进行降序排序

var arr3 = new Array(2,4,6,1,11,23,43,32);
alert(arr3.sort(function (a,b) {
      return b-a;
}));
alert(arr3);    //43,32,23,11,6,4,2,1

• 翻转数组：

var arr = [2,3,4,5,7];
arr.reverse();
console.log(arr);   //[7,5,4,3,2]

• 判断一个对象是否是一个特定类的实例对象instanceof：

var arr1 = [1,2];
var arr2 = new Array(2,3);
var str1 = new String("aaa");
var str2 = "abc";
console.log(arr1 instanceof Array);     //true
console.log(arr2 instanceof Array);     //true
console.log(str1 instanceof String);    //true
console.log(str2 instanceof String);    //false

• 判断是否是数组的方法：

var arr = [1,3,5];
document.write(Array.isArray(arr));

• 添加、删除元素：

var arr = [2,3,4,5,6,7];
//push和pop从数组最后面操作
var p1 = arr.push(1);   //p1为数组的长度，7
console.log(arr);   //2,3,4,5,6,7,1
var p2 = arr.pop();     //p2为被删除的元素的值
console.log(arr);   //2,3,4,5,6,7
//shift和unshift从数组最前面操作
var s1 = arr.shift();   //s1为被从前面删除的元素
console.log(s1);    //2
var s2 = arr.unshift(9);    //6
console.log(arr);   //9,3,4,5,6,7

• 伪数组：不能修改长度的数组（可以修改元素，但是不能改变长短）：

function test(a,b,c,d) {
    //实参，arguments只在函数中使用
    console.log(arguments);  //伪数组[1,2]
    console.log(arguments instanceof Array);     //false
    console.log(Array.isArray(arguments));     //false
    console.log(arguments.length);      //2
//    arguments.push(1);    //报错
    arguments[1] = 8;
    console.log(arguments);     //[1,8]

    //形参
    console.log(test.length);   //4

    console.log(arguments.callee);  //打印整个函数，和打印test结果一样
}
test(1,2);

• 练习：
• 将1~100之间所有的奇数存放到数组arr1中：

<script>
    var arr1 = [];
    var j = 0;
    for(var i=1; i<=100; i++){
       if (i%2!=0){
           arr1[j++] = i;
       }
    }
    document.write(arr1);
</script>

• 将1~100之间所有能被3整除的数存放到数组arr2中：(第一题中定义了一个变量作为数组的下标；也可以使用数组的长度作为数组的下标，刚开始时数组的长度为0，数组的第一个元素下标也是0)

<script>
    var arr2 = new Array();
    for(var i=1; i<=100; i++){
        if (i%3==0){
            arr2[arr2.length] = i;
        }
    }
    document.write(arr2);
</script>

• 求一个数组中所有数的和和平均值：

var arr = [21,32,43,54,65];
var sum = 0;
for(var i=0; i<arr.length; i++){
      sum += arr[i];
}
document.writeln(sum);
document.write(sum/arr.length);

• 求一个数组中的最大值和最小值，并求出它们的索引：

var arr = [-21,-32,-43,-54,-65];
var maxP = 0;
var min = arr[0];
var minP = 0;
for(var i=1; i<arr.length; i++){
        if (max<arr[i]){
            max = arr[i];
            maxP = i;
        }
        if (min>arr[i]){
            min = arr[i];
            minP = i;
        }
}
document.writeln(max);
document.writeln(maxP);
document.writeln(min);
document.writeln(minP);

• 将数组中所有值不为0的数存入新数组中：

var arr = ["张飞",0,"关于",0,"赵云",0,"吕布",0];
var newArr = [];
for(var i=0; i<arr.length; i++){
        if (arr[i] != 0){
            newArr[newArr.length] = arr[i];
        }
}
console.log(newArr);

• 翻转数组：使用三种方法

//翻转数组，方法一
var arr = ["刘备","关羽","张飞"];
var newArr = [];
for(var i=arr.length-1; i>=0; i--){
    newArr[newArr.length] = arr[i];
}
console.log(newArr);

//翻转数组二：将第一个和最后一个调换，将第二个和倒数第二个调换，以此类推，一直到中间一个调换完。
var arr = new Array();
arr = ["刘备","关羽","张飞","赵云","黄忠","张良"];
document.write(arr+"<br>");
for(var i=0; i<arr.length/2; i++){
    var temp = arr[i];
    arr[i] = arr[arr.length-1-i];
    arr[arr.length-1-i] = temp;
}
document.write(arr);

//使用API

• 冒泡排序：从头开始，两两进行比较，把较大值放在后面，第一趟比较完可以将最大值挑选出来放到最后，第二趟将倒数第二大的值挑选出来放在倒数第二的位置...直到完成所有数的排序：

var arr = [2,1,3,5,3,9,6,8,7,4];
document.write(arr+"<br>");
for(var i=0; i<arr.length-1; i++){
        for(var j=1; j<arr.length-i; j++){
            if (arr[j-1]>arr[j]){
                var temp = arr[j];
                arr[j] = arr[j-1];
                arr[j-1] = temp;
            }
        }
}
document.write(arr);

//冒泡排序的高级写法
var arr = [2,1,3,5,3,9];
document.write(arr+"<br>");
for(var i=0; i<arr.length-1; i++){
        for(var j=1; j<arr.length-i; j++){
            var flag = true;
            if (arr[j-1]>arr[j]){
                var temp = arr[j];
                arr[j] = arr[j-1];
                arr[j-1] = temp;
                flag = false;
            }
        }
        if (flag){
            break;
        }
}
document.write(arr);

如果没有加flag判断，执行15次，加了之后执行5次。

函数

• JS中没有函数重载，同名函数最后一个会对前面的函数进行迭代：

• 如果实参个数大于形参个数，正常执行，多余的实参会被忽略掉；

• 如果实参个数小于形式参数，要看程序具体情况，有可能会报错、报NaN，或者报undefined。

• 练习：

• 求：1!+2!+3!+4!+···+n!

function getMult(m) {
        var multiple = 1;
        for(var i=1; i<=m; i++){
            multiple *= i;
        }
        return multiple;
}
function product(n) {
        var sum = 0;
        for(var i=1; i<=n; i++){
            sum += getMult(i);
        }
        return sum;
}

function product(n) {
        var sum = 0;
        for(var i=1; i<=n; i++){
            var multiple = 1;
            for(var j=1; j<=i; j++){
                multiple *= j;
            }
            sum += getMult(i);
        }
        return sum;
}

• 求200以内的质数（素数）：

function getPrimes(num) {
        var primes = new Array();
        for(var i=2; i<=num; i++){
            var flag = true;
            for(var j=2; j<=Math.sqrt(i); j++){
                if (i%j==0){
                    flag = false;
                    break;  //break结束循环（只能结束一层循环），return结束本次函数
                }
            }
            if (flag == true){
                primes[primes.length] = i;
            }
        }
        console.log(primes);
}
getPrimes(200);

• 求斐波那契数列第n项的数值（1，1，2，3，5，8，13，21...）：

function fb(n) {
        if (n==1){
            return 1;
        }
        if (n==2){
            return 1;
        }
        var n1 = 1;
        var n2 = 1
        for(var i=3; i<=n; i++){
            n3 = n1 + n2;
            n1 = n2;
            n2 = n3;
        }
        return n3;
}
alert(fb(7));

• 输入某年某月某日，输出这一天是这一年的第几天（闰年：能被4整除是闰年，但能被100整除的年不是闰年，不过可以被400整除的年也是闰年）:

function getDay(year,month,day) {
        var days = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
        //判断是否是闰年
        var isLeap = false;
        if (year%4==0 && year%100!=0 || year%400==0){
            isLeap = true;
        }
        //如果现在是第三个月，先获取前两个月的天数
        var getDay = 0;
        for(var i=0; i<month-1; i++){
            getDay += days[i];
        }
        //如果月份大于2并且是闰年，就加一天
        if (month>2 && isLeap) getDay += 1;
        getDay += day;
        return getDay;
}
alert(getDay(2000,3,1));

对象

• 创建对象的两种方法：
• var obj = new Object();
• var obj = {};
• 创建一个对象，并给他绑定属性和方法：

var p = new Object();
p.name = "王五";
p["say"] = function () {
    console.log(this.name + "好好生活");
};
console.log(p);
p.say();

• 自定义一个构造函数，并创建自定义对象

function Student(name) {
    this.name = name;
    this.sayHello = function () {
        console.log(this.name + "说话：你好！！！");
    }
}
var stu1 = new Student("张三");
console.log(stu1);
stu1.sayHello();
console.log(typeof stu1);   //Object

补充：进制转换（了解）

• 任意类型的数值转换为十进制parseInt:

document.writeln(parseInt(22,8));

• 十进制转换为任意进制toString:

var num = 30;
document.write(num.toString(8));

创建一个JSON，并对其进行遍历：

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

for(var k in json){
    document.writeln(json[k]);
}

构造函数原理(了解)

function  Num(aaa){
    this["[[PrimitiveValue]]"] = num/1;
    return  aaa/1;
}

• 练习：
• 找到数组["c","z","a","x","a","y","a","x","c","c","c"]中每一个元素出现的次数：
  • 利用对象来做。利用K:V相对比较方便，如果使用数组稍微复杂。思路：创建一个对象，判断数组中的元素在对象中是否存在，如果存在，值+1，否则创建一个数组元素的属性，然后给值赋值为1.

var arr = ["c","z","a","x","a","y","a","x","c","c","c"];
var obj = new Object();
for(var i=0; i<arr.length; i++){
        if (obj[arr[i]]){
            obj[arr[i]] += 1;
        }else {
            obj[arr[i]] = 1;
        }
}
console.log(obj);

• 去掉数组中的重复元素：

var arr = [2,3,4,5,6,7,8,5,5,4,3,5,2];
var newArr = [];
for(var i=0; i<arr.length; i++){
        var flag = true;
        for(var j=0; j<newArr.length; j++){
            if (arr[i] == newArr[j]){
                flag = false;
            }
        }
        if (flag == true) newArr[newArr.length] = arr[i];
}
console.log(newArr);