• JavaScript笔记(5)


    1.return 跳出当前函数 返回一个结果

    <script>
        //return可以跳出当前函数  所以return写在函数的最后一行
        function out() {
                return function (){
                    console.log("inner-before")
                    return "inner-fn";
                    console.log("inner-end")
                };
        }
    
        var inner = out();
        var str = inner();
        console.log(str); 
    </script>

    输出:
    inner-before
    inner-fn
    因为inner-end 写在return的后面,所以代码没有被运行,也就没有输出

    2.作用域

     在js中作用域一般都是函数作用域
    <script>
        
        function test() {
            var a = "a";
            console.log(a);
        }
    test(); console.log(a);
    输出结果为:a

    还报了一个错误:a is not defined
    因为a变量的值是定义在局部作用域中的

    所以外面的 console.log(a)全局作用域访问不到里面 取不到定义的a变量的值

    3.全局作用域

    <script> /*全局作用域*/
    
       
        function out() {
               
                return function inner(){
                    return "inner-fn";
                };
        }
    
       var inner =  out() ;
    
    </script>                                           
    
    

    4.函数内部属性 --> this

    this指向于谁
            得看函数调用位置上的调用形式
                普通调用        指向  -->                            window
                隐式调用        指向  -->                            调用对象
                显示调用        指向  -->                            指定对象
                构造调用        指向  -->                            构造出来的对象(实例)

    this的值必定是引用类型

    5.函数的属性:length

    <script>
        function test(a,b,c,d,f,){
    
        }
    console.log(test.length);
    
    </script>
    输出结果为:5

    length属性表示形参的个数

    6.函数的方法:apply() 和 call()

        function test(flag,flag1) {
            console.log(this,flag,flag1)
        }
        test("普通调用","普通调用2")
        test.call({a:"a"},"call调用","call调用2");         call函数的第二个参数 是当前函数的第一个参数
        test.apply({b:"b"});
     call() apply()调用(显示调用) 相比于 普通调用 可以改变 函数内部的this指向  
     call() 和 apply() 传参方式不一样

    7.new关键字解析

    分三步:
    1.创建一个新的对象 --->原型
    2.将this指向新的对象
    3.默认构造函数的最后一步
    return undefined
    因为undefined是基本数据类型
    return 新的对象

    8.构造函数

    JS中是不存在构造函数的定义语法的,只有函数的构造调用,当一个函数被构造调用时(new),
    当前这个函数就可以被认为是一个构造函数。
    构造调用:

    function Person(name,age) {
      this.name = name;
      this.age = age;
    }

    //无参构造调用 new Person
    // 构造调用的时候 函数执行的最后一步: return this 这是一个隐式的操作
    // 普通调用的时候 函数执行的最后一步: return undefined 这是一个隐式的操作

    9.数组

    数组是一个有序的数据集合(数据可以是原始类型 或 引用数据类型)var arr=[];
    相对于变量 ,数组可用于在一个变量中存储多个值。
    数组中的每一项都有一个数字附于其上,被称为索引。JavaScript,数组索引 从0开始
    JS数组中是可以自动扩容的

    10.数组的方法(当一个函数作为一个对象的属性存在时 那这个函数也可以叫做方法)

    静态方法(构造函数身上的方法):

    isArray :判断是否是数组
    obj:需要检测的值
    返回值:如果对象是Array,则为true;否则为false.
    语法:Array.isArray(obj)


    实例方法(实例身上的方法):
    方法名: 定义 语法 参数 返回值 是否影响老数组:
    push() push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度 arr.push(element1, ..., elementN) 被添加到数组末尾的元素 当调用该方法时,新的 length 属性值将被返回 影响
    unshift() unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度 arr.unshift(element1, ..., elementN) 要添加到数组开头的元素 当一个对象调用该方法时,返回其 length 属性值 影响
    pop() pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度 arr.pop() 从数组中删除的元素(当数组为空时返回undefined) 影响
    shift() shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度 arr.shift() 从数组中删除的元素; 如果数组为空则返回undefined 影响
    concat() concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组 arr.concat(arr1[, arr2[, ...[, arrN]]]) valueN-->待链接的数组 新的 Array 实例 不影响
    indexOf() indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1 arr.indexOf(searchElement) searchElement-->要查找的元素 首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1 不影响
    lastIndexOf() lastIndexOf() 方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1 arr.lastIndexOf(searchElement) searchElement-->要查找的元素 数组中最后一个元素的索引,如未找到返回-1 不影响
    join() join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串 arr.join(separator) separator ---> 指定一个字符串来分隔数组的每个元素。如果省略(),数组元素用逗号分隔。默认为 ","。 一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串 不影响
    toString() toString() 返回一个字符串,表示指定的数组及其元素。 arr.toString() 返回一个字符串。 不影响




    方法名: 定义 参数 返回值 是否影响老数组
    forEach() forEach() 方法对数组的每个元素执行一次提供的函数。

    参数1:callback (item index arr)

    参数2:thisArg可选参数。当执行回调 函数时用作this的值。

     undefined  由callback决定
    every() every() 方法测试数组的所有元素是否都通过了指定函数的测试

     参数1:callback (item index arr)

     参数2:thisArg可选参数。当执行回调 函数时用作this的值。

     true false  由callback决定
    some() some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试  参数1:callback (item index arr)

     参数2:thisArg可选参数。当执行回调 函数时用作this的值。

     true false  由callback决定
    filter() filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。  参数1:callback (item index arr)

     参数2:thisArg可选参数。当执行回调 函数时用作this的值

     一个新的通过测试的元素的集合的数组  由callback决定
    sort() sort() 方法使用in-place算法对数组的元素进行排序,并返回数组。
    默认排序顺序是根据字符串Unicode码点。
     默认从小到大排序a-b(从小到大)   b-a(从大到小)  返回排序后的数组  影响 原数组已经被排序后的数组代替。
    reverse() Reverse() 方法颠倒数组中元素的位置,并返回该数组的引用  语法: arr.reverse()
     参数:无
     该数组的引用。  影响
    map() map() 方法创建一个新数组,其结果是原数组中的每个元素都调用一个提供的函数后返回的结果。   参数1:callback (item index arr)

      参数2:thisArg可选参数。当执行回调 函数时用作this的值

     一个新数组,每个元素都是回调函数的结果。  由callback决定
    slice()  slice() 方法返回一个从开始到结束(不包括结束,左闭右开)选择的数组的一部分浅拷贝到一个新数组对象

     begin可选

      end 

      slice(begin,end):[begin,end)

     返回值:一个含有提取元素的新数组  不影响
    splice()   splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容 参数:

    start     从start开始删
    deleteCount      删几个
    item列表    删完之后在相同位置处加哪几个

     由被删除的元素组成的一个数组  影响
    reduce()   reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

    参数1:callback (current,item,index,arr)

    参数2:initialValue
    用作第一个调用 callback的第一个参数的值。

    如果没有提供初始值,则将使用数组中的第一个元素。

    在没有初始值的空数组上调用 reduce 将报错。

     累加器的值  不影响


    11.数组去重

    function distinct(arr) {
        var newArr= [];
        arr.sort().map(function (item, index, arr) {
          if (index === 0 || arr[index - 1] !== item) {
              newArr.push(item);
           }
         })
              return newArr;
          }

           var arr = [2,3,5,2,3,4,7,9,6,3,5,5];
           var newArr = distinct(arr);
           console.log(newArr);
    输出结果为:[2,3,4,5,6,7,9]
    第一步,先用sort()方法对数组进行排序。
    第二步,创建一个新的空数组用来存放去重之后的数组
    第三步,默认放入排序后数组的第一个元素,然后判断数组中的每一个元素是否等于当前元素的前一个元素,再用push()方法,如果相等就不放进去新的数组,如果不相等就放入新的数组。

    12.稀疏数组(千万不要创建稀疏数组)

    var arr =new Array(4) //不会拿undefined来填充默认值 empty *4
    var arr[];arr.length=4

    13.伪数组(类数组)

    具有length属性的对象(属性名是字符串类型的数字)
    通常拿到一个伪数组时,都需要将伪数组转为真数组(通过Array.prototype.slice.call/apply)将伪数组转换为真数组

      var obj ={};
          obj.length=3;
          obj["0"]="a";
          obj["1"]="b";
          obj["2"]="c";


    //每一个实例对象的实例方法 都是去 它构造函数的原型上找的
        var arr = Array.prototype.slice.call(obj)
            console.log(arr);
              arr.map(function (item) {
                  console.log(item)
            })

     

    arguments(函数内部属性)是一个类数组

    包含着传入函数中的所有参数。虽然 arguments 的主要用途是保存函数参数,

    但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。

    14.逗号问题

    从 ES5  规范开始就允许在列表(数组值、属性列表等)末尾多加一个逗号(在实际处理中会被忽略不计)。
    所以如果你在代码或者调试控制台中输入 [ , , , ] ,实际得到的是 [ , , ] (包含三个空单元的数组

    15.阶乘

    function factorial2(num) {

    // console.log(arguments.callee == factorial)

       if(num<=1){
        return 1;


        }else{


         return num * arguments.callee(num-1);
      }


    }
       var res = factorial2(4);
       console.log(res)

    //递归的思想  自己调自己

    argument.callee指代函数自己本身

    16.二维数组

    语法: var arr = [[]];

      var arr = [[3,8,2],[2,7],[9,0,1,6]];

         for(var i=0;i<arr.length;i++){
             for(var j=0;j<arr[i].length;j++){
                  document.write(arr[i][j]+"&nbsp;&nbsp;");
        }
             document.write("<br/>");
       }

    17.杨辉三角

    function yhsj(num){
     var outArr=[];
     for(var i=0;i<num;i++){
       var innerArr=[];
        for(var j=0;j<(i+1);j++){
         innerArr.push(0)
     }
       outArr.push(innerArr);
    }

    //存放杨辉三角所需的数据
     for(var a=0;a<outArr.length;a++){
      for(b=0;b<outArr[a].length;b++){
          if(b==0 || b==outArr[a].length-1){
        outArr[a][b]=1;
    }
          if(a>1 && b!==0 && b!==outArr[a].length-1){
             outArr[a][b]=outArr[a-1][b]+outArr[a-1][b-1];


                  }
             }
        }
         return outArr;

    }

      var arr=yhsj(10);
        arr.forEach(function(item){
         item.forEach(function(){
          document.write(item+"&nbsp;&nbsp;")
           })

       document.write("<br/>")
    })
  • 相关阅读:
    小程序云开发(一)
    原来你是这样的"layui"啊
    记个笔记(项目中遇到的关于input的一些操作)
    vue的学习之路 vue-cli与axios
    小程序 上传图片
    文字滚动
    css 隐藏滚动条
    linux基础
    接口测试
    整理python循环,列表,字典笔记
  • 原文地址:https://www.cnblogs.com/fxiong/p/10121800.html
Copyright © 2020-2023  润新知