JavaScript基础知识《四》

常用运算符

算数运算符

• 算术运算符用于执行两个变量或值的运算。

• 以下表格将向你说明算术运算符的使用： y = 5

  • 

• 任何类型的数据都可以使用算数运算符参与运算

  • var a = 10;
    var b = false;
    document.write(a + b);
    

赋值运算符

• 赋值运算符用于给 javascript 变量赋值。
• 下面的表格解释了赋值运算符: x = 10; y = 5
  • 

比较运算符

• 比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

• 下表展示了比较运算符的使用： x = 5

  • 

• 数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符 串转换成数字然后再进行比较

  • var a = 125;
    var b = "123";
    document.write("字符串与数字比较的结果："+ (a>b)+"<br/>");
    

逻辑运算符

• 逻辑运算符用来确定变量或值之间的逻辑关系。
• 下表展示了逻辑运算符的使用： x = 6 , y = 3、
  • 

三目（元）运算符

• var age = 24;
  document.write("是成年人吗？"+ (age >= 18 ? "是":"不是")+"\<br/>");
  

流程控制语句

• 高级语言中的三种基本结构：顺序、分支、循环

if 判断

if语句

• 在一个指定的条件成立时执行代码。

  • if(条件表达式) {
    //代码块;
    }
    

if…else语句

• 在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

  • if(条件表达式) {
    //代码块;
    }else {
    //代码块;
    }
    

if…else if…else 语句

• 使用这个语句可以选择执行若干块代码中的一个。

  • if (条件表达式) {
    //代码块;
    }else if(条件表达式) {
    //代码块;
    }else {
    //代码块;
    }
    

• 条件判断可以使用非逻辑运算符

  • 

循环

for循环

• 循环指定次数

  • for (var i=0; i<10; i++) {
    //需要执行的代码;
    }
    

while循环

• 当指定的条件为 true 时循环执行代码

  • while (条件表达式) {
    // 需要执行的代码;
    }
    

do-while循环

• 最少执行1次循环

  • do {
    // 需要执行的代码;
    }
    while (条件表达式)
    

break和continue

• break: 跳出整个循环
• continue：跳出本次循环

在浏览器中调试

• IE、Chrome、FireFox中调试的快捷键：F12

设置断点

• 

语法错误

• 

函数

• JavaScript 使用关键字 function 定义函数。
• 函数可以通过声明定义，也可以是一个表达式。

函数的声明

• 一个函数的声明（或者说是函数的定义）包含：

  • 1. 关键字function
    2. 函数名称
    3. . 参数列表，包围在括号中并由逗号分隔
    4. 定义函数的 JavaScript 语句，用大括号 {} 括起来

  • function functionName(parameters){
    // 执行的代码
    }
    

  • 例如：定义一个 square 函数：

  • function square(number) {
    return number * number;
    }
    

  • 函数 square 使用了一个参数，叫作 number 。这个函数只有一个语句，它说明该函数将函数的参数 （即 number ）自乘后返回。函数的 return 语句确定了函数的返回值。

  • 函数声明后不会立即执行，会在我们需要的时候调用。

  • 原始参数（比如一个具体的数字）被作为值传递给函数；值被传递给函数，如果被调用函数改变了这个 参数的值，这样的改变不会影响到全局或调用函数。

  • var num = 10;
    var r1 = square(10); // 调用函数
    num = 11;
    

  • 如果你传递一个对象（即一个非原始值，例如 Array 或用户自定义的对象）作为参数，而函数改变了这 个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示:

  • function myFunc(theObject) {
    theObject.make = "Toyota";
    }
    var mycar = {make: "Honda", model: "Accord", year: 1998};
    var x, y;
    x = mycar.make; // x获取的值为 "Honda"
    myFunc(mycar);
    y = mycar.make; // y获取的值为 "Toyota"
    // (make属性被函数改变了)
    

函数表达式

• JavaScript 函数可以通过一个表达式定义。

• 函数表达式可以存储在变量中:

  • var square = function (number){ return number * number };
    

• 在函数表达式存储在变量后，变量也可作为一个函数使用：

  • var s = square(2);
    

• 以上函数实际上是一个 匿名函数 (函数没有名称)。

• 函数存储在变量中，不需要函数名称，通常通过变量名来调用。

• 上述函数以分号结尾，因为它是一个执行语句。

Function() 构造函数

• 通过前边的内容我们学习了函数通过关键字 function 来定义。

• 函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

  • new Function ([arg1[, arg2[, ...argN]],] functionBody)
    

• arg1, arg2, … argN

  • 参数名称是一个有效的JavaScript标识符的字符串，或者一个用逗号分隔的有效字符串的列表;例 如“ × ”，“ theValue ”，或“ a,b ”

• functionBody

  • 一个含有包括函数定义的 JavaScript 语句的字符串

  • var sum = new Function("square", "return number * number");
    

  • 上面的声明方式和我们之前函数表达式中声明的函数是一样的。

  • 实际上，很多时候你不用使用构造函数来声明函数。而且要避免使用 new 关键字

    使用 Function 构造器生成的 Function 对象是在函数创建时解析的。这比你使用函数声明或者 函数表达式并在你的代码中调用更为低效，因为使用后者创建的函数是跟其他代码一起解析的

    当一个函数是一个对象的属性时，称之为方法

调用函数

• 定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什 么。调用函数才会以给定的参数真正执行这些动作。例如，一旦你定义了函数 square ，你可以如下这 样调用它：

  • square(2);
    

  • 上述语句通过提供参数 2 来调用函数。函数执行完它的语句会返回值 4

  • 函数一定要处于调用它们的域(范围)中，但是函数的声明可以被提升(出现在调用语句之后)

  • 提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为

  • console.log(square(5)); // 调用
    function square(n) { return n*n } // 声明
    

  • 函数域是指函数声明时的所在的地方，或者函数在顶层被声明时指整个程序

  • 注意只有使用如上的语法形式（即 function funcName(){} ）才可以。而下面的代码是无效 的。就是说，函数提升仅适用于函数声明，而不适用于函数表达式。

  • console.log(square); // square is hoisted with an initial value undefined.
    console.log(square(2)); // TypeError: square is not a function
    var square = function (n) {
    return n * n;
    }
    

  • 函数可以被递归，就是说函数可以调用其本身。例如，下面这个函数就是用递归计算阶乘：

  • function factorial(n){
    if ((n == 0) || (n == 1))
    return 1;
    else
    return (n * factorial(n - 1));
    }
    

函数作用域

• 在函数内定义的变量不能在函数之外的任何地方访问，因为变量仅仅在该函数的域的内部有定义。相对 应的，一个函数可以访问定义在其范围内的任何变量和函数。换言之，定义在全局域中的函数可以访问 所有定义在全局域中的变量。在另一个函数中定义的函数也可以访问在其父函数中定义的所有变量和父 函数有权访问的任何其他变量。

  • // 下面的变量定义在全局作用域(global scope)中
    var num1 = 20,
    num2 = 3,
    name = "Chamahk";
    // 本函数定义在全局作用域
    function multiply() {
    return num1 * num2;
    }
    multiply(); // 返回 60
    // 嵌套函数的例子
    function getScore() {
    var num1 = 2,
    num2 = 3;
    function add() {
    return name + " scored " + (num1 + num2);
    }
    return add();
    }
    getScore(); // 返回 "Chamahk scored 5"
    

嵌套函数和闭包

• 你可以在一个函数里面嵌套另外一个函数。嵌套（内部）函数对其容器（外部）函数是私有的。它自身 也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的表达式（通常是函数）。

• 既然嵌套函数是一个闭包，就意味着一个嵌套函数可以”继承“容器函数的参数和变量。换句话说，内部 函数包含外部函数的作用域。

• 总结

  • 1. 内部函数只可以在外部函数中访问。
    2. 内部函数形成了一个闭包：它可以访问外部函数的参数和变量，但是外部函数却不能使用它的参数 和变量。

  • function addSquares(a, b) {
    function square(x) {
    return x * x;
    }
    return square(a) + square(b);
    }
    a = addSquares(2, 3); // returns 13
    b = addSquares(3, 4); // returns 25
    c = addSquares(4, 5); // returns 41
    

• 由于内部函数形成了闭包，因此你可以调用外部函数并为外部函数和内部函数指定参数：

  • function outside(x) {
    function inside(y) {
    return x + y;
    }
    return inside;
    }
    fn_inside = outside(3); // 可以这样想：给一个函数，使它的值加3
    result = fn_inside(5); // returns 8
    result1 = outside(3)(5); // returns 8
    

闭包

• 闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套，并且内部函数可以访问定义在外部 函数中的所有变量和函数，以及外部函数能访问的所有变量和函数。但是，外部函数却不能够访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一定的安全 性。

函数参数

• 从ECMAScript 6开始，有两个新的类型的参数：默认参数，剩余参数。

默认参数

• 在JavaScript中，函数参数的默认值是 undefined 。然而，在某些情况下设置不同的默认值是有用的。 这时默认参数可以提供帮助。

• 在过去，用于设定默认参数的一般策略是在函数的主体中测试参数值是否为 undefined ，如果是则赋 予这个参数一个默认值。如果在下面的例子中，调用函数时没有实参传递给 b ，那么它的值就是 undefined ，于是计算 a*b 得到、函数返回的是 NaN 。但是，在下面的例子中，这个已经被第二行获 取处理：

  • function multiply(a, b) {
    b = (typeof b !== 'undefined') ? b : 1;
    return a*b;
    }
    multiply(5); // 5
    

• 使用默认参数，在函数体的检查就不再需要了。现在，你可以在函数头简单地把1设定为 b 的默认值：

  • function multiply(a, b = 1) {
    return a*b;
    }
    multiply(5); // 5
    

剩余参数

• 剩余参数语法允许将不确定数量的参数表示为数组。在下面的例子中，使用剩余参数收集从第二个到最 后参数。然后，我们将这个数组的每一个数与第一个参数相乘。

• 这个例子是使用了一个箭头函数，

  • function multiply(multiplier, ...theArgs) {
    return theArgs.map(x => multiplier * x);
    }
    var arr = multiply(2, 1, 2, 3);
    console.log(arr); // [2, 4, 6]
    
    

• 注意的事项

  • 1. 形参的类型：在函数定义的时候不用指定类型，因为是可变类型
    2. 函数的返回值：如果一个函数中需要返回值，直接使用return返回，如果没有返回值，不写 return。
    3. 关于函数的重载：在JS中没有函数的重载，同名的函数会覆盖原来的函数，调用的时候，只会调用 最后声明的函数，而且实参的个数与形参数的个数没有关系。
    4. 所有函数的内部都有一个类数组对象，名字叫：arguments，用来接收调用时提交的所有的参 数。

• 演示：定义一个函数，在函数的内部输出arguments的长度和其中的每个元素。

  • <script type="text/JavaScript">
    function sum (a,b) {
    //在函数的内部输出arguments的长度和其中的每个元素
    document.write("arguments数组的长度：" + arguments.length + "<hr/>");
    //输出每个元素
    for (var i = 0; i < arguments.length; i++) {
    document.write(arguments[i] + "<br/>");
    }
    document.write("a=" + a + "<br />");
    document.write("b=" + b + "<br />");
    }
    //调用
    sum(3,10,8);
    //sum(3);
    </script>
    

匿名函数

语法

var 变量名 = function(参数列表) {
函数体;
}

函数调用

//匿名函数
var sayHi = function(name) {
alert("Hello, " + name);
};
//调用
sayHi("Tom");

箭头函数

• 箭头函数表达式（也称胖箭头函数）相比函数表达式具有较短的语法并以词法的方式绑定 this 。箭头 函数总是匿名的.
• 有两个因素会影响引入箭头函数：更简洁的函数和 this

简洁的函数

var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
var a2 = a.map(function(s){ return s.length });
console.log(a2); // logs [ 8, 6, 7, 9 ]
var a3 = a.map( s => s.length );
console.log(a3); // logs [ 8, 6, 7, 9 ]

• map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值

this 的词法

• 在箭头函数出现之前，每一个新函数都重新定义了自己的 this 值（在构造函数中是一个新的对象；在严 格模式下是未定义的；在作为“对象方法”调用的函数中指向这个对象；等等）。

  • function Person() {
    // 构造函数Person()将`this`定义为自身
    this.age = 0;
    setInterval(function growUp() {
    // 在非严格模式下，growUp()函数将`this`定义为“全局对象”，
    // 这与Person()定义的`this`不同，
    // 所以下面的语句不会起到预期的效果。
    this.age++;
    }, 1000);
    }
    var p = new Person();
    
    

• 在ECMAScript 3/5里，通过把 this 的值赋值给一个变量可以修复这个问题

  • function Person() {
    var self = this; // 有的人习惯用`that`而不是`self`，
    // 无论你选择哪一种方式，请保持前后代码的一致性
    self.age = 0;
    setInterval(function growUp() {
    // 以下语句可以实现预期的功能
    self.age++;
    }, 1000);
    }
    
    

• 箭头函数捕捉闭包上下文的 this 值，所以下面的代码工作正常

  • function Person(){
    this.age = 0;
    setInterval(() => {
    this.age++; // 这里的`this`正确地指向person对象
    }, 1000);
    }
    var p = new Person();
    

预定义函数

• JavaScript语言有好些个顶级的内建函数

  • 

• NaN值 的产生:

  • 当算术运算返回一个未定义的或无法表示的值时， NaN 就产生了。但是， NaN 并不一定用于表示 某些值超出表示范围的情况。将某些不能强制转换为数值的非数值转换为数值的时候，也会得到 NaN 。

    例如，0 除以0会返回 NaN —— 但是其他数除以0则不会返回 NaN 。

js实现图片切换

• 步骤：

  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>图片切换</title>
    <style type="text/css">
    .container {
    /*居中*/
    margin: auto;
    border: 1px solid black;
    width: 850px;
    }
    imgs {
    width: 850px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <img src="../../imgs/4.jpg" id="pic">
    </div>
    <script>
    //全局变量
    var num = 4;
    //获取图片对象
    var picObj = document.getElementById("pic");
    //改变图片的src属性
    function changePicture() {
    //得到图片的src属性，替换它的值
    picObj.src = "../../imgs/" + num + ".jpg";
    //如果图片到了第4张图片，则重新变成第1张，否则就加1
    if (num == 6) {
    num = 4;
    } else {
    num++;
    }
    }
    //每过3秒调用一次
    setInterval("changePicture()", 2000);
    </script>
    </body>
    </html>
    
    
    

json

定义

• JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。采用完全独立于编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效 率。

语法格式

• json对象有三种数据格式

  • 

• JSON是存储和交换文本信息的语法，类似 XML。

• JSON 比 XML 更小、更快，更易解析。

JavaScript中json格式和json解析练习

练习

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* 案例一
* var person={key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
//json的定义
var person = {
"firstname": "张",
"lastname": "三丰",
"age": 100
};
//json解析
alert(person.firstname);
alert(person.lastname);
alert(person.age);
</script>
</body>
</html>

JSON对象及JSON字符串转

JSON.parse(jsonStr); // json字符串 --> json 对象
JSON.stringify(json); // json对象 --> json字符串```