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

    相关文章

      网友评论

          本文标题:js相关

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