数组的遍历+es5+es6新增数组方法+数组经典案例(冒泡,选择,快速,数组去重)

数组的遍历

1.for

 		var arr1 = [11, 22, 33, 44, 55];
        arr1.length = 20;
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }

2.for…in

  		var arr1 = [11, 22, 33, 44, 55];
        arr1.length = 20;
        for (var k in arr1) {
            console.log(k, arr1[k]);//k 下标,arr1[k]值
        }

for与for…in区别

 for 和for..in的区别?
            for是根据数组的length长度,来决定遍历的次数(遍历稀疏数组)
            for in 是根据内容来遍历次数(不遍历稀疏数组)
            for in 还能遍历下标不是数组,for只能遍历下标为数值的
            数组是特殊的对象
	 var arr = [11, 22, 33];
        arr["aa"] = 88;
        arr["bb"] = 99;
        console.log(arr);

        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);//11,22,33

        }
        for (var key in arr) {
            console.log(arr[key]);//11,22,33,88,99
        }

5.数组的方法(ES5)

1.forEach

forEach(function(items,index){}) 没有返回值

items是数组元素

index是元素索引

 /* 
            forEach  只能做遍历,没有返回值
            不能被中止
            可以制造异常,结合 try..catch中断
        */ 
	var arr = [11, 22, 33, 44, 55];
        try {
            // item 是值 index是索引
            arr.forEach(function (item, index, aaa) {
                console.log(item, index, aaa);
                if (index == 2) {
                    throw new Error("制造异常");
                }

            })
        } catch (error) {

        }
        console.log(111);

2.map()

map 能做遍历,返回一个新的数组

新数组的内容,由回调函数决定

 var arr = [11, 22, 33, 44, 55];
        var res = arr.map(function (item, index, arr) {
            return item * 10
        })
        console.log(arr);// [11, 22, 33, 44, 55];
        console.log(res);//[110, 220, 330, 440, 550]

3.some()

some 只要一个满足条件,就返回true

在遍历过程中,条件满足,就中断遍历

 var arr = [11, 22, 33, 44, 55];
        var res = arr.some(function (item) {
            console.log(item);
            return item == 33
        })
        console.log(res);

4.every()

every()所有结果都满足返回true ,否则返回(默认)false

  var arr = [11, 22, 33, 44, 55];
	var res=arr.every(function(item){
        return item>20;
    })
    console.log(res);//false 因为11不满足比20大,所有返回false

5.filter()

filter()过滤,返回一个新的数组,数组的内容,有回调函数的条件决定

  var arr = [11, 22, 33, 44, 55];
var res=arr.filter(function(item){
    return item>20;
})
console.log(res);//[22,33,44,55]  返回满足条件的新数组

6.reduce()

reduce()有两个参数,第一个参数是回调函数,第二个参数是给pre的初始值

 // var arr = [11, 22, 34, 44, 55]
        // arr.reduce(function (pre, cur) {
        //     console.log(pre,cur);
        //     return 1
        // },100)
        //  var arr = [11, 22, 34, 44, 55]
        // arr.reduce(function (pre, cur) {
        //     console.log(pre,cur);
        //     return 1
        // })
        var arr = [11, 22, 34, 44, 55]
        var res = arr.reduce(function (pre, cur) {
            // pre 11 cur 22 -->33
            // pre 33 cur 34    67
            // pre 67  cur 44  111
            // pre 111 cur 55  166
            return pre + cur
        })
        console.log(res);//166
        var arr = [11, 22];
        var res = arr.reduce(function (pre, cur) {
            return pre * cur
        })
        console.log(res);//242

6.数组的方法(ES6)

1.find()

通过条件查找某一项,如果存在就返回这一项

var arr = [
            { id: 1, name: "刘德华", age: 20 },
            { id: 2, name: "刘德", age: 20 },
            { id: 3, name: "刘", age: 20 },
            { id: 4, name: "华", age: 20 },
        ]
var res=arr.find(function(item){
    return item.id==1;
})
console.log(res)//{id: 1, name: '刘德华', age: 20}

2.findIndex()

返回满足条件的下标

var arr = [
            { id: 1, name: "刘德华", age: 20 },
            { id: 2, name: "刘德", age: 20 },
            { id: 3, name: "刘", age: 20 },
            { id: 4, name: "华", age: 20 },
        ]
var res=arr.findIndex(function(item){
    return item.id==3;
})
console.log(res)//2

3.indexOf()

找到了返回下标,找不到返回-1

它有两个参数,第二个参数默认从0开始,也可以从指定的位置开始

        var arr = [11, 22, 33, 44, 55]
        console.log(arr.indexOf(22, 2));//-1 因为从第二个开始的后面没有22,所以返回-1
        console.log(arr.indexOf(22));//1

4.includes()

有就返回true ,没有就返回false

 var arr = [11, 22, 33, 44, 55]
        console.log(arr.includes(22));//true 有就返回true ,没有就返回false

7.数组的经典案例(冒泡,选择,快速排序,数组去重)

1.冒泡排序

冒泡排序口诀:

​ 1.外层循环-1

​ 2.内层循环-1-i

​ 3.内层循环两邻两个比较大小

​ 4.邻里交换位置

   var arr = [1, 9, 5, 6, 10, 3];
	//外层循环 循环次数 5个数循环4次 6个数循环5次 所以-1
	for(var i=0;i<arr.length-1;i++){
        //内层循环 循环躺数  -1是为了防止j+1造成下标越界,-i是因为比较一次下来,会出来一个最大的,就不要再			//比较,刚好跟i的增长一样
        for(var j=0;j<arr.length-1-i;j++){
            if(arr[j]>arr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1]
                arr[j+1]=temp
            }
        }
    }
console.log(arr)
 /*
            1.为什么外循环要-1?
            外层循环次数,交换四次,五个数交换4次,4个数交换三次,所以-1
            2.为什么内层循环-1又-i?
            -1防止下班越界 j+1容易出现越界 -i是因为比较一轮会选出一个最大的数,然后这个最大的数就不进行			比较刚好和i的增长是一样
            3.比较的时候为什么是j和j+1
            前一个数和后一个数进行比较

        */

2.选择排序

 		// 台上的和台下的进行比较	
		var arr = [5, 6, 7, 4, 3];
		//台上
		for(var i=0;i<arr.length-1;i++){
            //假设第一个是获胜
            var win=i;
            //台下
            for(var j=i+1;j<arr.length;j++){
                //如果我假设的这个输了,那就把赢的那个的下标赋值给我指定的这个win
                if(arr[win]<arr[j]){
                    win=j;
                }
            }
            if(win!=i){
                var temp=arr[win]
                arr[win]=arr[i]
                arr[i]=temp
            }
        }
	console.log(arr)

3.快速排序

    //1.定义个方法,输入一个数组
        function quickSort(arr) {
            //2.如果数组的长度小于2,就返回输入的数组(小于2个,没办法比较)
            if (arr.length < 2) {
                return arr;
            }
            //3.如果是大于等于2,找出下标,遇到不能被整除,向下取整
            var middleIndex = parseInt(arr.length / 2);
            //4.通过中间下标,得到中间数,并且要从原来数组扣出来
            var middleValue = arr.splice(middleIndex, 1);
            //5.准备2个空数组,左边和右边的空数组
            var left = [], right = [];
            //6.大于中间数放置右边数组,否则放置左边数组
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] > middleValue) {
                    right.push(arr[i])
                } else {
                    left.push(arr[i])
                }
            }

            //7.递归进行继续拆,拆到只有1个数的数组,就不拆
            //进行合并  左边数组+中间+右边数组
            return quickSort(left).concat(middleValue, quickSort(right));
        }
        var res = quickSort([5, 6, 7, 4, 3]);
        console.log(res);

4.数组去重

 // 数组去重
        var arr = [1, 2, 3, 2, 1, 4, 3, 6, 6, 9, 7, 9];
        function noRepeat(arr) {
            // 创建新数组
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                // 把每一项放到空数组,在放到空数组之前,问 是否已存在
                // 如果存在 就不添加
                // if (newArr.indexOf(arr[i]) == -1) {
                //     newArr.push(arr[i])
                // }
                // includes 找到了返回true,找不到返回false
                if (!newArr.includes(arr[i])) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(noRepeat(arr));

你可能感兴趣的:(es6,javascript,前端)