js相关

作者: BugMyGod | 来源:发表于2019-02-19 22:13 被阅读0次
  • 数组去重
    方法一:es5--indexOf
var arr = ['1',1,1,2,2,3,3,'2','4']
    function func(arr) {
        var newArr = [];
        for (var i=0;i<arr.length;i++){
            if (newArr.indexOf(arr[i]) === -1){
                newArr.push(arr[i])
            }
        }
        return newArr
    }
    console.log(func(arr))
image.png

方法二:filter

 var arr = [1,1,1,2,3];
        function func(arr) {
            var res = arr.filter(function (item,index,arr) {
                return arr.indexOf(item) === index;
            })
            return res;
        }
        console.log(func(arr))
image.png

方法三:es6

  // es6 set结构
        let arr = [1,1,2,1,1,'1'];
        var str = 'aaadscccffggggg'

        let newArr = (arr) => [...new Set(arr)]
        console.log(newArr(arr))
        console.log(newArr(str).toString())
image.png
  • 数组排序
    方法一:sort() 语法:arrayObject.sort(sortby)
    这里的sortby是一个参数,规定排序的顺序,必须是函数。sort()的返回值是对该数组的引用,这里要注意的是,该排序方法会在原数组上直接进行排序,并不会生成一个排好序的新数组。还要注意的是:如果没有使用参数sortby,那么排序的时候将会按字母的顺序对数组中的元素进行排序,说精确点是按照字符编码的顺序进行排序。如果要实现这一点,首先应该把数组的元素都转化成字符串,以便进行比较。

sort()的返回值是对该数组的引用,这里要注意的是,该排序方法会在原数组上直接进行排序,并不会生成一个排好序的新数组。

//字母
 var arr = ["Zhangsan", "Lisi", "Wangwu", "Hanmei", "Chendu"];
 var res = arr.sort();
console.log(res);
//数字
var arr2 = [524, 684, 5, 69, 15];
var res = arr2.sort();
 console.log(res)

//数字需要加比较函数
function sortFunc(a,b) {
    return a-b;
}
var res2 = arr2.sort(sortFunc)
console.log(res2)
image.png

其他方法:
冒泡排序
快速排序
插入排序
希尔排序
选择排序
归并排序
堆排序

 //冒泡
        function bubbleSort(arr) {
            for (var i = 0; i < arr.length; i++) {
                for (var j = 0; j < arr.length; j++) {
                    if (arr[i] < arr[j]) {
                        var temp = arr[j];
                        arr[j] = arr[i];
                        arr[i] = temp;
                    }
                }
            }
            return arr;
        }
        var arr = [524, 684, 5, 69, 15];
        bubbleSort(arr);    // 结果为[5, 15, 69, 524, 684]
上面的代码就是一个很好理解的冒泡排序写法,采用两个for循环,当i=0的时候,将arr[0]与数组里面的每一项比较,如果arr[0]小于某一项,则替换它们的位置,以此类推。
  • 输出每个li的下标
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>

方法一:js原生

var list = document.getElementsByTagName("li");
        for (var i=0;i<list.length;i++){
            list[i].index = i;
            list[i].onclick = function () {
                console.log(this.index)
            }
        }

方法二:jquery

 $(function () {
            $('ul').find('li').each(function () {
                $(this).click(function () {
                    console.log($(this).index())
                })
            })
        })
  • 两组数组通过id关联,合并为一个数组
 a=[{id:1,age:11},{id:2,age:12},{id:3,age:23}];
 b=[{id:1,sex:'男'},{id:2,sex:'女'},{id:3,sex:'男'}]
  //合并后
 c=[{id:1,age:11,sex:'男'}, ...]

方法一:es6中 Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。

        a.map(function (val) {
            b.map(function (val2) {
                if (val.id === val2.id){
                    return Object.assign(val,val2);
                }
            })
        })
        console.log(a)
image.png

方法二:

       var c=[]
        a.forEach(function (val) {
            b.forEach(function(val2){
                if (val.id === val2.id){
                    c.push({
                        id:val.id,
                        age:val.age,
                        sex:val2.sex
                    })
                }
            })

        })
        console.log(c)
image.png

相关文章

  • 八、H5中对音视频的设计

    html5标签 video标签的属性 audio标签的属性 音视频js相关属性 音视频js相关函数 js相关事件

  • React native blob 数据

    相关源码 js: Blob.js 、BlobManager.js、NativeBlobModule.js and...

  • day33-总结(css部分+js)

    css其他属性 文字相关 列表相关 背景相关 JavaScript js基础语法 js中的注释// 这是单行注释/...

  • JS相关

    2017年第一波JavaScript前端面试题

  • js相关

    时间戳转字符格式 let和var对比: let允许把变量的作用域限制在块级域中。与 var 不同处是:var 申明...

  • js相关

    eventloop 主线程从任务队列中读取事件,这个过程是循环不断的,这种机制就是eventloop 宏队列也叫t...

  • js相关

    数组去重方法一:es5--indexOf 方法二:filter 方法三:es6 数组排序方法一:sort() ...

  • JS相关

    参考文献 https://juejin.cn/post/6925599792814882829[https://j...

  • JS相关

    1.倒计时效果代码

  • 实用代码 大杂烩

    date/****js相关********************************************...

网友评论

      本文标题:js相关

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