js4

arguments

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // var a = 10;
    // var b = 20;
    // var c = 30;
    // console.log(a, b, c);
    // function test(a, b, c) {
    //   // 我们可以通过arguments 获取函数调用的时候的实参
    //   // arguments非常想数组,但不是数组
    //   console.log(arguments);
    //   console.log(1);
    // }
    // test(4, 5, 6);
    // 
    // 
    // 求任意个数的最大值
    // getMax(数组)
    // function getMax() {
    //   var max = arguments[0];
    //   for (var i = 1; i < arguments.length; i++) {
    //     if (max < arguments[i]) {
    //       max = arguments[i];
    //     }
    //   }
    //   return max;
    // }
    // var max = getMax(5, 10, 1, 5, 100);
    // console.log(max);
    // 求任意个数的和
    function getSum() {
      var sum = 0;
      for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
      }
      return sum;
    }
    var sum = getSum(5, 1, 3, 4);
    console.log(sum);
  </script>
</head>
<body>  
</body>
</html>

函数案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 求斐波那契数列Fibonacci中的第n个数是多少?      1 1 2 3 5 8 13 21...
    // function getFib(n) {
    //   // 函数体
    //   var n1 = 1;
    //   var n2 = 1;
    //   var n3;
    //   for (var i = 3; i <= n; i++) {
    //     n3 = n1 + n2;
    //     n1 = n2;
    //     n2 = n3;
    //   }
    //   return n3;
    // }
    // var r = getFib(6);
    // console.log(r);
    // 翻转数组,返回一个新数组   [5, 4, 3, 2, 1] -> [1, 2, 3, 4, 5]
    // function reverse(array) {
    //   var newArray = [];
    //   for (var i = array.length - 1; i >= 0; i--) {
    //     newArray[newArray.length] = array[i];
    //   }
    //   return newArray;
    // }
    // // var arr = [5, 3, 2, 1];
    // // console.log(reverse(arr));
    // var arr = ['abc', 'xyz', '123'];
    // console.log(reverse(arr));
    // 对数组排序,从小到大  -- 冒泡排序
    // function sort(array) {
    //   // 外层循环 控制趟数
    //   for (var i = 0; i < array.length - 1; i++) {
    //     // 假设排好序了
    //     var isSort = true;
    //     // 内层循环 控制比较的次数
    //     for (var j = 0; j < array.length - 1 - i; j++) {
    //       if (array[j] > array[j + 1]) {
    //         isSort = false;
    //         // 交换位置
    //         var tmp = array[j];
    //         array[j] = array[j + 1];
    //         array[j + 1] = tmp;
    //       }
    //     }
    //     // 判断是否排好了
    //     if (isSort) {
    //       break;
    //     }
    //   }
    //   return array;
    // } 
    // var array = [34, 12, 88, 20, 30];
    // console.log(sort(array));
    // }
    // 输入一个年份,判断是否是闰年[闰年:能被4整数并且不能被100整数,或者能被400整数]
    // function isRun(year) {
    //   var result = false;
    //   if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
    //     result = true;
    //   } 
    //   return result;
    // }
    // console.log(isRun(2016));
    // 输入某年某月某日,判断这一天是这一年的第几天?
    // 1998 5 18 
    // 5月份 18
    // 4月份 30
    // 3月份 31
    // 2月份 闰年的时候29天  平年的时候28天
    // 1月份 31
    // 
    // 判断年份是否是闰年
    function isRun(year) {
      var result = false;
      if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
        result = true;
      } 
      return result;
    }
    // 获取年月日 是当前年的多少天
    function getDays(year, month, day) {
      // 计算总共有多少天
      var days = day;   // 当前月份的天数
      for (var i = 1; i < month; i++) {
        switch (i) {
          case 1:
          case 3:
          case 5:
          case 7:
          case 8:
          case 10:
          case 12:
            days += 31;
            break;
          case 4:
          case 6:
          case 9:
          case 11:
            days += 30;
            break;
          case 2:
            // 判断是平年28还是闰年29
            if (isRun(year)) {
              days += 29;
            } else {
              days += 28;
            }
            break;
        }
      }
      return days;
    } 
    console.log(getDays(1998, 5, 2));
  </script>
</head>
<body>
</body>
</html>

函数其它

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // //1 函数声明 - 命名函数
    // function fn() {
    // }
    // //2 函数表达式  -- 后半部分  匿名函数
    // var fn = function () {
    // }
    // 
    // 3 自调用函数  -- 当函数书写完成之后立即调用
    // (function () {
    //   console.log('我是自调用函数');
    // })()
    // 
    // 
    // 4 函数也是一种数据类型  function 也是一种数据类型
    var n = 5;
    var str = '123';
    var fn = function () {
      console.log('我是传过来的函数');
    }
    // console.log(typeof fn);
    // 4.1 因为函数是一种数据类型,所以函数可以作为另一个函数的参数
    // function test(fun) {
    //   // 当我们调用函数的时候。如果没有传递参数,此时形参的值是什么?
    //   // 此时fun的值是undefined
    //   // console.log(fun);
    //   fun();
    // }
    // test(fn);
    // 
    // 4.2 因为函数是一种数据类型,所以函数可以作为另一个函数的返回值
    function test(a) {
      var b = 5;
      return function () {
        console.log(a + b);
      }
    }
    var fn = test(2);  // 此函数返回的结果是一个函数
    fn();
  </script>
</head>
<body>
</body>
</html>

作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 在函数内部定义的变量,在函数外部是否可以访问
    // function fn() {
    //   var num = 5;
    // }
    // // num is not defined
    // console.log(num);
    // 
    // 作用域:变量或者函数可以起作用的访问
    // ECMAScript
    // 全局作用域:在script或者一个独立的js文件中,在全局作用域中定义的变量  全局变量。在任何位置都可以访问
    // var num = 15;
    // function fn() {
    //   // 全局变量   不建议这样,这样是不规范的
    //   str = 'abc';
    //   console.log(num);
    //   console.log(str);
    // }
    // fn();
    // console.log(str);
    // 局部作用域:任何一个函数的内部都有一个局部作用域,在局部作用域中定义的变量 局部变量。局部变量只有在定义该变量的函数中可以访问
    // function fn() {
    //   // 局部变量
    //   var num = 5;
    // }
    // // num is not defined
    // console.log(num);
    // 
    // 
    // 块级作用域:在ECMAScript中没有块级作用域。
    // 代码块
    {
      // 代码块
      var num = 5;
      console.log(num);
    }
    console.log(num);
  </script>
</head>
<body>
</body>
</html>

作用域链

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 全局作用域 -- 0级作用域链
    var num = 5;
    function f1() {
      // f1 局部作用域   -- 1级作用域链
      // var num = 15;
      function f2() { 
        // f2 局部作用域  -- 2级作用域链
        console.log(num);
      }
      f2();
    }
    f1();
  </script>
</head>
<body> 
</body>
</html>

预解析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // console.log(num);
    // var num = 5;
    // 
    // f1();
    // function f1() {
    //   console.log('hello');
    // }
    // 
    // 预解析
    //    1 变量提升,把变量的声明提升到当前作用域的最上面,不包括变量的赋值
    //    2 函数提升,把函数的声明提升到当前作用域的最上面,不包括函数的调用
    //    
    // console.log(num);
    // var num = 5;
    // // 预解析
    // var num;
    // console.log(num);
    // num = 5;
    // f1();
    // function f1() {
    //   console.log('hello');
    // }
    // // 预解析
    // function f1() {
    //   console.log('hello');
    // }
    // f1();   
    // 案例1
    // var a = 25;
    // function abc() {
    //   alert(a); 
    //   var a = 10;
    // }
    // abc();
    // // 预解析
    // var a;
    // function abc() {
    //   // 局部作用域  预解析
    //   var a;
    //   alert(a); 
    //   a = 10;
    // }
    // a = 25;
    // abc();
    // // 案例2
    // console.log(a);
    // function a() {
    //   console.log('aaaaa');
    // }
    // var a = 1;
    // console.log(a);
    // 预解析
    // 在预解析的过程中如果函数和变量的名字相同,此时函数优先
    // var a;
    // function a() {
    //   console.log('aaaaa');
    // }
    // console.log(a);
    // a = 1;
    // console.log(a);   
    // 1、-----------------------------------
    // var num = 10;
    // fun();
    // function fun() {
    //   console.log(num);
    //   var num = 20;
    // }
    //2、-----------------------------------
    // var a = 18;
    // f1();
    // function f1() {
    //   var b = 9;
    //   console.log(a);
    //   console.log(b);
    //   var a = '123';
    // }
    // // 预解析
    // var a;
    // function f1() {
    //   var b;
    //   var a;
    //   b = 9;
    //   console.log(a);
    //   console.log(b);
    //   a = '123';
    // }
    // a = 18;
    // f1();
    // 3、-----------------------------------
    function f1() {
      var a;
      a = b = c = 9;
      console.log(a);
      console.log(b);
      console.log(c);
    }
    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    // var a = b = c = 9;
    // var a = 9;
    // // 全局变量
    // b = 9
    // c = 9;
  </script>
</head>
<body> 
</body>
</html>

对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 为什么要有对象
    // function printPerson(name, age, sex, salary) {
    // }
    // 
    // function printPerson(person) {
    //   console.log(person.name);
    // }
    // 什么是对象
    // 现实世界:万物皆对象,一切事物都是对象. 对象是一个具体的事物
    // 手机  不是对象  一类事物
    // 汽车  不是对象  一类事物
    // 
    // 对象:特征  名词 描述这个对象的  和行为 动词
    // 程序中的对象
    // 是对现实世界中事物抽象
    var student = {
      name: '张飞',
      age: 18,
      sex: '男',
      sayHi: function () {
        console.log('hello');
      }
    };   
    // 对象 具有  属性和方法
    // 属性: 特征
    // 方法: 行为
  </script>
</head>
<body>
</body>
</html>

对象字面量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 如何创建一个对象,如何使用对象的成员
    // 对象:属性和方法  -- 成员
    // 函数和对象有什么区别
    // 函数 - 可以封装一段代码
    // 对象 - 封装一组属性和方法
    // 创建dog对象
    // 属性:name 昵称  type 品种  age  color
    // 方法:bark 叫   eat  吃
    var dog = {
      name: 'puppy',
      type: '中华田园犬',
      age: 2,
      color: 'yellow',
      bark: function () {
        // 在方法中如何使用属性的值
        // this 在方法中代表的是当前对象 dog
        console.log(this.name + '汪汪汪');
      },
      eat: function () {
        console.log(this.name + '啃骨头');
      }
    }
    // 如何访问属性   对象.属性名
    console.log(dog.name);
    console.log(dog.type);
    // 如何访问方法   对象.方法名
    dog.bark();
    dog.bark();
    dog.eat();
    // 属性的另一种访问方式  
    // 访问数组中的某个元素  array[0]
    console.log(dog['name']);
    console.log(dog['age']);
    // 函数和方法有什么区别?
    // 函数: 独立存在的函数  
    // function fn() {
    // }
    // fn();  // 函数调用
    // //方法:属于对象的函数 
    // dog.bark();  // 方法的调用
    // 
    // 
    // 创建一个hero对象
    // 属性:name 名字  装备  weapon 武器  blood 
    // 方法:attack 攻击   run 
  </script>
</head>
<body>
</body>
</html>

对象的创建方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // 1 对象字面量
    // var hero = {
    //   name: '黄忠',
    //   weapon: '弓箭',
    //   equipment: ['头盔', '靴子', '盔甲'],
    //   blood: 100,
    //   attack: function () {
    //     console.log(this.name + ':射箭');
    //   },
    //   run: function () {
    //     console.log(this.name + ': 加速跑');
    //   }
    // }
    // console.log(hero.name);
    // console.log(hero.equipment);
    // hero.attack();
    // hero.run();
    // 2 new Object()     
    // Object 是一个构造函数
    // new 的方式来调用构造函数
    // new Object() 调用构造函数   会在内存中创建一个对象
    // var hero = new Object();   // 创建了一个空的对象
    // // 打印一个不存在的属性 输出 undefined
    // // console.log(hero.name);
    // // 属性
    // // JavaScript的动态特性
    // hero.name = '黄忠';
    // hero.weapon = '弓箭';
    // hero.equipment = ['头盔', '靴子', '盔甲'];
    // hero.blood = 100;
    // // 方法
    // hero.attack = function () {
    //   console.log(this.name + ': 射箭');
    // }
    // hero.run = function () {
    //   console.log(this.name + ': 加速跑')
    // }
    // // var fn = function () {
    // // }
    // // 
    // 3 工厂方法
    // function createHero(name, weapon, equipment, blood) {
    //   var hero = new Object();  //返回一个空的对象
    //   // 属性
    //   hero.name = name;
    //   hero.weapon = weapon;
    //   hero.equipment = equipment;
    //   hero.blood = blood;
    //   // 方法
    //   hero.attack = function () {
    //     console.log(this.name + ':攻击');
    //   }
    //   hero.run = function () {
    //     console.log(this.name + ':加速跑');
    //   }
    //   return hero;
    // }
    // var hero1 = createHero('黄忠', '弓箭', ['头盔', '靴子'], 100);
    // var hero2 = createHero('刘备', '剑', ['头盔', '盔甲'], 100);
    // 4 自定义构造函数
    // new Object();
    // new Hero();
    // 帕斯卡命名  第一个单词的第一个字母大写,后续的每一个单词的第一个字母都大写
    // 自定义构造函数
    function Hero(name, weapon, equipment, blood) {
      // this 动态的给对象增加成员
      // this 指向了当前对象
      this.name = name;
      this.weapon = weapon;
      this.equipment = equipment;
      this.blood = blood;
      this.attack = function () {
        console.log(this.name + ':攻击');
      }
      this.run = function () {
        console.log(this.name + ': 加速跑');
      }
    }
    var hero1 = new Hero('黄忠', '弓箭', ['头盔', '靴子'], 100);
    var hero2 = new Hero('刘备', '剑', ['头盔', '盔甲'], 100);
  </script>
</head>
<body>
</body>
</html>

new

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // Student 自定义构造函数
    // 属性:name age sex score
    // 方法:sayHi
    function Student(name, age, sex, score) {
      // 属性
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.score = score;
      // 方法
      this.sayHi = function () {
        console.log(this.name + ': hello');
      }
    }
    var stu1 = new Student('lilei', 18, '男', 100);
    var stu2 = new Student('hanmeimei', 17, '女', 100);
    // new 的执行过程
    // 1 在内存中创建了一个空的对象
    // 2 让构造函数中的this指向刚刚创建的对象
    // 3 执行构造函数,在构造函数中设置属性和方法(当然也可以做其它事情)
    // 4 返回了当前对象
  </script>
</head>
<body>
</body>
</html>

this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // this出现在以下位置,分别代表什么
    // 1 函数中   --  this 指向Window
    // 2 在方法中  --  this  指向的是这个方法所属的对象
    // 3 构造函数中  -- this 就是构造函数创建的对象
    // 函数
    // function fn() {
    //   console.log(this);
    // }
    // fn();
    // 对象
    // var obj = {
    //   name: 'zs',
    //   fn: function () {
    //     console.log(this.name);
    //   }
    // };
    // obj.fn();
    // 构造函数
    function Fn() {
      this.name = 'zs';
      this.age = 18;
      console.log(this);
    }
    // var o = new Fn();  // 调用构造函数
    Fn(); // 函数调用
  </script>
</head>
<body> 
</body>
</html>

遍历和删除对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // var obj = {
    //   name: 'zs',
    //   age: 18,
    //   sex: '男',
    //   sayHi: function () {
    //     console.log(this.name + ': hello');
    //   }
    // };
    // // 如何访问对象的属性
    // // obj.name
    // // obj['name']
    // // for in  可以遍历对象的成员
    // for (var key in obj) {
    //   console.log(key + '---' + obj[key]);
    // }
    // 
    // 
    // var o = {};
    // for (var i = 0; i < 10; i++) {
    //   o['a' + i] = i * 2;
    // }
    // for (var key in o) {
    //   console.log(key + '---' + o[key]);
    // }
    // 删除属性   delete 删除对象的成员
    var o = {
      name: 'abc',
      say: function () {
      }
    }
    // console.log(o.name);
    // delete o.name;
    // console.log(o.name);
    console.log(o.say);
    delete o.say;
    console.log(o.say);
  </script>
</head>
<body>
</body>
</html>
别废话,拿你代码给我看。
原文地址:https://www.cnblogs.com/lvxueyang/p/13707433.html