美文网首页程序员
原生JS的魅力(1)

原生JS的魅力(1)

作者: 帅帅哒小白 | 来源:发表于2017-02-19 21:14 被阅读149次
@各位观众,好久不见,不知有木有想人家啊!(哇哇哇,233333)这段时间一直想写简书来着,但不知要写些啥东西!终于憋出一个大招,虽然被虐的体无完肤,但还是想分享一下这个小知识点!嘎嘎!

接招

题目

写一个方法,要求:给予两个数组a1和a2,然后返回一个已经排序的数组 r,其中数组 r 中的值是a1中的项并且能够在a2中找到这些字母的片段!(毕竟英语太次,翻译的太烂,各位看官多多包涵哈!==)

各位可以先思考,自己想想该怎么做!然后往下看!!!






我的想法是:利用两个循环,然后判断a1是否存在于a2之中,并且判断取出来的a1是否包含于arr之中,最后返回排序好的arr!

代码如下:

function inArray(array1,array2){
    var arr = [];
    for(var i in array1){
        for(var j in array2){
            if (array2[j].indexOf(array1[i])>-1 && arr.indexOf(array1[i]) == -1) {
                arr.push(array1[i]);
            }
        }
    }
    return arr.sort();
}

这里面用到了各种循环和判断,感觉有那么一点麻烦!这也是一般人都能够想到的!于是就看了大神到底是怎么想的?

大神代码来了!!!

function inArray(array1,array2){
    return array1.filter(function(str1){
        return array2.some(function(str2){
            return str2.indexOf(str1)>-1;
        })
    }).sort();

果然大神就是大神!利用了三个return和JS中已有的两个迭代方法filtersome,就轻松搞定!(厉害了我的哥!)

摘自《JavaScript高级程序设计》

ECMAScript5 为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象 -- 影响 this 的值。以下是这5个迭代方法的作用:
every():对数组中的每一项运行给定函数,如果每一项都返回true,则返回true。
filter():对数组中的每一项运行给定的函数,返回该函数会返回 true 的项组成的数组。
forEach():对数组中每一项给定函数,这个方法没有返回值。
map():对数组中的每一项给定函数,返回每次函数调用的结果组成的数组。
some():对数组中的每一项运行给定的函数,如果该函数对任一项返回 true,则返回true。
以上方法都不会修改数组中的包含的值。

结合以上文档来看,就不难理解大神写的代码了。

array1利用filter方法,array利用some方法,判断str2是否存在于str1中,只要**str1存在于str2中,some方法就会返回true,存放于filter中的数组里面。最后利用sort方法进行排序!得出结果。

总结:从这个小题目中发现自己的基础知识还是不牢固,对JS的基础知识还不能融会贯通,以后加强这方面的练习吧!

虽九死一生,依旧勇往直前!!!

相关文章

  • 原生JS的魅力(1)

    @各位观众,好久不见,不知有木有想人家啊!(哇哇哇,233333)这段时间一直想写简书来着,但不知要写些啥东西!终...

  • 20、jQuery 事件机制

    20、jQuery 事件机制 原生js事件与jQuery事件: (1)用原生的js给div注册事件 原生js注册相...

  • WKWebView与vue.js的交互

    原生调用js的方法 js写法 Swift写法 js调用原生的方法 js写法 Swift写法 1.创建和设置JSOb...

  • js拖拽

    (1)原生js实现checkbox全选

  • 原生js

    原生JS学习笔记1——基本数据类型和运算符 js的背景知识介绍,js的引入方式,js的变量及运算符 原生JS学习笔...

  • nodejs学习资料 - 第五节:模块系统&函数&

    模块系统 创建模块 mod1.js mod2.js main.js 模块调用规则 原生模块缓存 -> 原生模块目录...

  • JS原生项目

    JS原生项目 知识点-思维导图js原生项目.png JS作用 实际项目里js的应用点1.获取数据渲染页面2.页面上...

  • 原生js实现addClass,removeClass,hasCl

    第一部分:原生js实现addClass,removeClass,hasClass方法 1.原生js实现addCla...

  • 447,oc与js交互?(面试点:1,拦截url 2,WKScr

    WKWebView 原生与JS交互实现1、js给原生发送消息方法一,js通过触发URL的方式,定义一套协议头,把参...

  • jQuery入口函数

    1. 原生js入口函数写法 2. jQuery入口函数写法 3. jQuery入口函数和原生js入口函数的区别 原...

网友评论

    本文标题:原生JS的魅力(1)

    本文链接:https://www.haomeiwen.com/subject/asvbittx.html