zoukankan      html  css  js  c++  java
  • JS中常用的一切函数和写法

    一、箭头函数arrow funtion

     1.定义一个匿名函数常规语法:

    function (x) {
        return x * x;
    }

     2.该函数使用箭头函数可以使用仅仅一行代码搞定!

    x => x * x

     箭头函数相当于匿名函数,并且简化了函数定义

    箭头函数有两种格式:

    • 一种像上面的,只包含一个表达式,连{ ... }return都省略掉了。
    • 还有一种可以包含多条语句,这时候就不能省略{ ... }return。

    例如:

    x => {
        if (x > 0) {
            return x * x;
        }
        else {
            return - x * x;
        }
    }

    箭头函数的语法规则:

    (parameters) => { statements }

    如果函数有多个参数或者没有参数,可按照下面写法:

    如果返回值仅仅只有一个表达式(expression), 还可以省略大括号。

    // 无参数:
    () => 3.14
    
    //一个参数
    //如果只有一个参数,可以省略括号:
    x=>x*x
    
    // 两个参数:
    (x, y) => x * x + y * y
    
    // 可变参数:
    (x, y, ...rest) => {
        var i, sum = x + y;
        for (i=0; i<rest.length; i++) {
            sum += rest[i];
        }
        return sum;
    }

     注解:当传入的参数不确定时,使用rest运算符...rest

    注意:如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

    // SyntaxError:
    x => { foo: x }

     因为和函数体的 { ... } 有语法冲突,所以要改为:

    // ok:
    x => ({ foo: x })

    二、JS中filter的用法

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

    注意: filter() 不会对空数组进行检测。

    注意: filter() 不会改变原始数组。

    语法

    array.filter(function(currentValue,index,arr), thisValue)

    例子

    例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

    var arr = [1, 2, 4, 5, 6, 9, 10, 15];
     var r = arr.filter(function (x) {
        return x % 2 !== 0;
    });
    r; // [1, 5, 9, 15]

    把一个Array中的空字符串删掉,可以这么写:

     var arr = ['A', '', 'B', null, undefined, 'C', '  '];
     var r = arr.filter(function (s) {
         return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
     });
     r; // ['A', 'B', 'C']

    可见用filter()这个高阶函数,关键在于正确实现一个“筛选”函数。

    filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

    var arr = ['A', 'B', 'C'];
    var r = arr.filter(function (element, index, self) {
        console.log(element); // 依次打印'A', 'B', 'C'
        console.log(index); // 依次打印0, 1, 2
        console.log(self); // self就是变量arr
        return true;
    });

    利用filter,可以巧妙地去除Array的重复元素:

    'use strict';
    
    var
        r,
        arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
      r = arr.filter(function (element, index, self) {
         return self.indexOf(element) === index;
      });
    console.log(r.toString());
    //运行结果 apple,strawberry,banana,pear,orange

    去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。

    尝试用filter()筛选出素数:

    'use strict';
    
    function get_primes(arr) {
        var i;
        return arr.filter(function (element) {
                var flag=true;
                if(element<2){
                flag=false;
            }else {
                for(var i=2;i<element;i++){
                    if (element%i==0){
                        flag=false;
                        break;
                    }
                }
            }
            return flag;
        });
    }
    
    // 测试:
    var
        x,
        r,
        arr = [];
    for (x = 1; x < 100; x++) {
        arr.push(x);
    }
    r = get_primes(arr);
    if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
        console.log('测试通过!');
    } else {
        console.log('测试失败: ' + r.toString());
    }
    //运行结果:测试通过

    三、JS中map函数的使用

     map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。

    • map()不会对空数组进行检测
    • map()不会改变原始数组

    语法

    array.map(function(currentValue, index, arr), thisIndex)

    参数说明

    • function(currentValue, index, arr)必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:
    1. currentValue必须。当前元素的的值。
    2. index可选。当前元素的索引。
    3. arr可选。当前元素属于的数组对象。
    • thisValue可选。对象作为该执行回调时使用,传递给函数,用作"this"的值。

    实例

    返回由原数组中每个元素的平方组成的新数组:

    let array = [1, 2, 3, 4, 5];
    
    let newArray = array.map((item) => {
        return item * item;
    })
    
    console.log(newArray)  // [1, 4, 9, 16, 25]

    三、JS中find函数的使用

     定义和用法:

    find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

    find() 方法为数组中的每个元素都调用一次函数执行:

    • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
    • 如果没有符合条件的元素返回 undefined

    注意: find() 对于空数组,函数是不会执行的。

    注意: find() 并没有改变数组的原始值。

     语法:

    array.find(function(currentValue, index, arr),thisValue)

     参数:

     例子:

    //获取数组中年龄大于 19 的第一个元素
    let arr1 = [10, 12, 18, 20, 22]
    let newArr1 = arr1.find((item) => item > 19)
    console.log(newArr1, '-----大于19的值')
    //运行结果返回:20

    findIndex()方法的用法与find()方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

    let arr1 = [10, 12, 18, 20, 22]
    let newArr1 = arr1.findIndex((item) => item > 19)
    console.log(newArr1, '-----大于19的值的位置')
    //运行结果返回:3

    四、JS中forEach函数的使用

     遍历数组全部元素,利用回调函数对数组进行操作,自动遍历整个数组,且无法break中途跳出循环,不可控,不支持return操作输出,return只用于控制循环是否跳出当前循环。

      回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身。

    var arr = [1,2,3,4,5,] ;
    arr.forEach(function(item,index){
         console.log(item);
    });

     这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;

     但是可以自己通过数组的索引来修改原来的数组;

    var ary = [12,23,24,42,1];  
    var res = ary.forEach(function (item,index,input) {  
         input[index] = item*10;  
    })  
    console.log(res);//--> undefined;  
    console.log(ary);//--> 通过数组索引改变了原数组;  
    //运行结果 [120, 230, 240, 420, 10]

    五、some() 和 every()

     every()与some()方法都是JS中数组的迭代方法, 只返回布尔值。

    every()
    判断数组中是否每个元素都满足条件
    只有都满足条件才返回true;
    只要有一个不满足就返回false;


    some()
    判断数组中是否至少有一个元素满足条件
    只要有一个满足就返回true
    只有都不满足时才返回false

      // 判断数组arr1是否全是偶数
        // 判断数组arr2是否至少有一个偶数
         
        var arr1=[1, 2, 3, 4, 5];
        var arr2=[1, 4, 6, 8, 10];
        console.log(
            arr1.every(function(value, index, array){
                return value % 2 == 0;
            })
        );    // false
        console.log(
            arr2.some(function(value, index, array){
                return value % 2 == 0;
            })
        );    // true

    四、JS中常用函数...

    随机数生成器
    Math.random()
    
    装换为整数
    parseInt()
    
    日期时间函数(需要用变量调用):
    var b = new Date(); //获取当前时间
    b.getTime() //获取时间戳
    b.getFullYear() //获取年份
    b.getMonth()+1; //获取月份
    b.getDate() //获取天
    b.getHours() //获取小时
    b.getMinutes() //获取分钟
    b.getSeconds() //获取秒数
    b.getDay() //获取星期几
    b.getMilliseconds() //获取毫秒
    
    
    数学函数(用Math来调用):
    abs(x)    返回数的绝对值。
    ceil(x)    对小数进行上舍入。
    floor(x)    对数进行下舍入。
    round(x)    把数四舍五入为最接近的整数。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    sqrt(x)    返回数的平方根。
    random()    返回 0 ~ 1 之间的随机数。 
    
    字符串函数(用变量来调用):
    
    indexOf
    返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
    let str = 'vold.ndexx'
    var index1 = str.indexOf("e");
    console.log(index1,'字符串第一次出现的位置')
    
    charAt
    返回指定位置的字符。
    var index1 = str.charAt(7);
    
    lastIndexOf
    返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1var index1 =str.lastIndexOf('e');
    
    match
    检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 nullvar re = new RegExp(/^w+$/);
    var is_alpha1 = a.match(re);
    //is_alpha1 = "hello"
    var is_alpha2 = b.match(re);
    //is_alpha2 = null
    
    substring
    返回字符串的一个子串,传入参数是起始位置和结束位置。
    
    var sub_string2 = a.substring(1,4);
    //sub_string2 = "ell"
    
    substr ********
    返回字符串的一个子串,传入参数是起始位置和长度
    var sub_string1 = a.substr(1);
    //sub_string1 = "ello"
    var sub_string2 = a.substr(1,4);
    //sub_string2 = "ello"
    
    replace *******
    替换字符串,第一个参数代表被替换的字符串,第二个参数代表替换的字符串
    a.replace("he","aa")
    
    
    search
    执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1var index1 = a.search(re);
    //index1 = 0
    var index2 = b.search(re);
    //index2 = -1
    
    split ******
    通过将字符串划分成子串,将一个字符串做成一个字符串数组。
    var arr1 = a.split("");
    //arr1 = [h,e,l,l,o]
    
    length 属性 *******
    返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
    
    
    toLowerCase
    将整个字符串转成小写字母。
    var lower_string = a.toLowerCase();
    //lower_string = "hello"
    
    toUpperCase
    将整个字符串转成大写字母。
    var upper_string = a.toUpperCase();
    //upper_string = "HELLO"

     补充知识点:

    new set()数组去重
    //new set()数组去重
     var arr4 = [...new Set([1, 2, 1, 1, 2, 3, 3, 4, 4])];
     console.log("去重后的数组",arr4)
    //运行结果:1,2,3,4

      ...reset用法

    //...reset用法
    function foo(a,b,...rest){
         console.log(a);
         console.log(b);
         console.log(rest);           
    }
     
    foo(1,2,3,4,5)        //1,2,Array [3,4,5]
    foo(1)    //1, undefined, Array[]

     rest参数只能写在最后,前面用...标识,从运行结果可知,传入的参数先绑定ab,多余的参数以数组形式交给变量rest

    如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined)。

  • 相关阅读:
    EasyUI——常见用法总结
    递归算法(转)
    1215整理
    jQuery Ajax 实例 全解析(转)
    EL表达式 (详解)
    JSTL 核心标签库 使用(转)
    JSTL标签用法 详解(转)
    JDBC连接Oracle数据库时出现的ORA-12505错误及解决办法
    java中的基本jdbc中mvc基本示例
    Hibernate的QBC检索方式
  • 原文地址:https://www.cnblogs.com/1156063074hp/p/13719219.html
Copyright © 2011-2022 走看看