4月28日学习 - 《JavaScript》

toString()
垃圾回收
数组
数组字面量
数组的4种方法
forEach
slice&&splice
数组去重
数组剩余方法
call 和 apply
arguments

toString()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
    //创建构造函数,专门来创建对象的
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    var per = new Person("Tom",18);
    //当我们直接在页面中打印对象时候，事实上输出的是对象的toString()方法的返回值
    console.log(per);
    console.log(per.toString());
    //在原型中寻找
    //可以自己添加
    per.toString = function(){
            return "Hello";
    };
    //不看到object
    per.toString = function{
          return "Person[name="+this.name+",age="+this.age
    }
    console.log(per);
    //修改原型
    per.prototype.toString = function{
          return "Person[name="+this.name+",age="+this.age
    }
    console.log(per);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

垃圾回收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
    var obj = new object();
    obj = null;//不能再操作
    //当一个对象没有任何的变量和属性对他进行引用，此时我们将永远无法操作该对象
    //js有垃圾自动回收装置
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

数组

数组也是对象
索引(index)-值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = new Array();
    //添加元素
        arr[0] = 10;
    //如果不存在，不会报错，而是undefined
    //获取长度
    console.log(arr.length);
    //修改长度
    arr.length = 10;
    //如果小于原长度，会自己删除
    arr[arr.length]=6;//在数组最后添加
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

数组字面量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = [];
    //使用字面量创建数组
    var arr = [1,2,3,4,5];
       var arr2 = new Array(10,20,30);
    //区别
    arr = [10];//arr[0]=10
    arr2 = new Array(10);//长度为10
    //数组中的数据类型可以是任何类型也可以是对象
    var obj = {name:"Tom"};
    arr[arr.length]=obj;
    conlose.log(arr[0].name);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

数组的4种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = ["Tom","Jack","Anna"];
    arr.push("Rain");//返回值为新的长度
    //pop unshift shift
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

forEach

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = ["Tom","Jack","Anna"];
        arr.forEach(function(a，b，c){
        console.log(a,b,c);
      });//(value,index,obj)
    //forEach需要一个函数作为参数
    //像这种函数叫做回调函数
    //浏览器会将遍历的元素以实参的形式传递进来
    //会传3个参数，1【当前正在遍历的元素】，2【当前遍历索引】，3【所有元素】
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

slice&&splice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = ["Tom","Jack","Anna"];
        //可以从数组提取选定的元素 切片
        var result = arr.slice(0,2);//不会改变原数组
        var result = arr.slice(1);
        var result = arr.slice(-1);
        //可以删除数组指定元素,会影响到原数组，返回值为删除的值
        //第一个开始的索引，第二个表示删除的数量
        var result = arr.splice(0,2);
        var result = arr.splice(0,2,"new","new2");//相当于替换
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

数组去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = [1,2,3,4,5,6];
   function distinct(arr){    
    for(var i = 0;i<arr.length;i++){
        for(var j = i+1;j<arr.length;j++){
          if(arr[i]==arr[j]){
            arr.splice(j,1);
            j--;
          }
        }
      }
    }
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

数组剩余方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var arr = [1,2,3,4,5,6];
           var arr2 = [1,2,3,4];
//concat() 不会对本身产生影响
    var result = arr.concat(arr2);
    var result = arr.concat(arr2，3，4);
//join() 该方法可以将数组转换为字符串
    result = arr.join();//用，链接
    result = arr.join('-');//用-链接
//reverse() 反转数组
    arr.reverse();
    //该方法会直接改变原数组
//sort()
    arr.sort();
    //即使对于纯数字的数组,使用sort()排序时,也会按照 Unicode编码来排序,所以对数字进排序时,可能会得到错误的结果
//我们可以在sort()添加一个回调函数,来指定排序规则,
//回调函数中需要定义两个形参,
//浏览器将会分别使用数组中的元素作为实参去调用回调函数
//使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
//浏览器会根据回调函数的返回值来决定元素的顺序
//如果返回一个大于0的值,则元素会交换位置
//如果返回一个小于0的值,则元素位置不变
//如果返回一个等于0的值,则认为两个元素相等,也不交换位置
    arr = [5,4,3];
    arr.sort(function(a,b){
          if(a>b){
          return 1;
        }else if (a<=b){
          return -1;
        }
    };//冒泡排序
       arr.sort(function(a,b){
          return a-b;//升序
          return b-a;//降序
    }
    </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

call 和 apply

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              function fun(){
            alert("Hello");
      }
    fun.call();
    fun.apply();
    //当对函数调用ca11()和app1y()都会调用函数执行
        //在调用ca11和app1y可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this
    //call()可以将实参对象后依次传递
    //apply()需要将实参封装到数组中统一传递
    var obj = {};
    function fun(a,b){
            console.log(a,b);
      };
    fun.call(obj,2,3);
    fun.apply(obj,[2,3]);
    //this的情况:
1.以函数形式调用时,this永远都是 window
2.以方法的形式调用时,this是调用方法的对象
3.以构造函数的形式调用时,this是新创建的那个对象
4.使用ca11和app1y调用时,this是指定的那个对象
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

arguments

在调用函数时,浏览器每次都会传递进两个隐含的参数:
1.函数的上下文对象 this
2,封装实参的对象 arguments
arguments类数组，在调用函数，所传递的实参都会在argumentsh中保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              function fun(a,b){
            console.log(arguments.length);
          console.log(arguments[0]);
          console.log(arguments.callee);//当前正在执行的函数对象
      };
    fun(1,2,3,4);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>