JS中 常用排序和forEach()的小坑记录。

START

• 番茄又来写点啥了,说来有菜,今天遇到一个需求，写个排序,发现自己思路不清晰,尴尬。
• 记录一下常用的排序,首先是会写,其次懂原理,最后要求上手就来。
• 当然我也验证和记录一下啊,今天遇到的，和循环有关的，比较特殊的一些地方。

冒泡排序

代码

    // 我们的目标呢就是对一个数组进行排序 

    // 1.声明一个数组,这里简便起见呢,我就随便模拟一下数据。
    var arr = [1,2,5,3,1,23,5,7,10];


    //外层循环，控制比较次数，每一次找到一个最大值  （由于最后一个不需要比较，所以这里和后面的for循环都减1）
    for (var i = 0; i < arr.length - 1; 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);//[2, 4, 5, 12, 31, 32, 45, 52, 78, 89]

快速排序

• 后期再补充

循环有关特殊的细节

1.JS中的forEach() 无法修改元素的值？

听同事吐槽,说到js中forEach()无法修改元素的值？我听他说有点疑惑,随即特意去尝试了一下啊，发现这东西还挺有意思的，hh以前没注意到，记录一下。

1.1如果数组中是基础类型数据,无法直接修改item(元素)

 // 1. 如果数组中是基础类型数据,无法直接修改item(元素)
 var arr=[1,2,3,4,5]
 arr.forEach(item=>{
     if(item===2){
         item="我的值被修改了"
     }
 })
 console.log(arr)   //[ 1, 2, 3, 4, 5 ]

1.2 如果数组中是基础类型数据,无法直接修改item(元素),非要修改,可以通过数组本身加索引的方式去修改

 // 2. 如果数组中是基础类型数据,无法直接修改item(元素),非要修改,可以通过数组本身加索引的方式去修改
 var arr=[1,2,3,4,5]
 arr.forEach((item,index)=>{
     if(item===2){
         arr[index]="我的值被修改了"
     }
 })
 console.log(arr)   //  [ 1, '我的值被修改了', 3, 4, 5 ]

1.3如果数组中是引用数据类型,可直接修改item(元素)的属性

// 3.如果数组中是引用数据类型,可直接修改item(元素)的属性
var arr = [
    { name: "1" },
    { name: "2" },
    { name: "3" },
    { name: "4" },
    { name: "5" }]

arr.forEach((item, index) => {
    if (item.name === '2') {
        item.name = "我的值被修改了"
    }
})
console.log(arr) 
/* 
 打印：

 [
  { name: '1' },
  { name: '我的值被修改了' },
  { name: '3' },
  { name: '4' },
  { name: '5' }
]

*/ 

总结

• 猜测呢
  1.forEach()中这个item相当于在当前函数作用域下新建的变量
  2.然后这个item分别去全等于数组的每一项
  3.我们给item赋值,基础数据类型呢，两者存储再两个不同的栈stack内存中，此时修改item,并不会对原数组有任何影响
  4.但是引用类型呢，两者存储相同的堆内存地址，指向的堆heap内存是一样的，所以可以修改数组的元素

2.JS中的forEach() 中无法使用 brack; ?

今天突然心血来潮呢，想再循环中使用break; 而平时呢，又喜欢使用forEach(),那么这个问题就出现了。

• 代码

var arr = [1, 2, 3, 4, 5]
arr.forEach(item => {
    console.log("执行到：", item)
    if (item === 4) {
        console.log('准备执行break')
        break;
    }
})

• 输出

Illegal break statement
// 翻译过来呢，语法报错！所以记住啊，forEach中不可使用break;

截图

运行截图.png

• MDN官方说明

mdn对forEach()无法跳出循环的解释.png

END

• 暂时先写到这里，有关循环呢，肯定是经常会被用到的，熟练掌握肯定是很有必要的。
• 当然也不可避免的呢，会有一些细节以前没有注意到，一点一点积累即可。