前端学习-JavaScript基础（数组下）

数组（Array）

数组的方法

这些方法是JavaScript自带的，可以直接对数组进行使用。

unshift、shift、push、pop 、join、splice、slice、concat、sort、reverse

1、unshift 给开头添加一个或多个元素，有返回值。

var arr=[1,2,3,4]
var a=arr.unshift('a')
console.log(arr)  //[a,1,2,3,4]
console.log(a)		//返回的是新数组长度 4

2、shift 删除数组第一个元素，有返回值。

var arr=[1,2,3,4]
var a=arr.shift()
console.log(arr)  //[2,3,4]
console.log(a)	//返回被删除的元素  1

3、push 给数组的末尾添加一个或多个元素，有返回值。

var arr=[1,2,3,4]
var a=arr.push('a')
console.log(arr)  //[1,2,3,4,'a']
console.log(a)	返回的是新数组长度 4

4、pop 删除数组最后一个元素，有返回值。

var arr=[1,2,3,4]
var a=arr.pop()
console.log(arr)  //[1,2,3]
console.log(a)	//返回被删除的元素  4

5、splice 对数组的增删改

var arr=[1,2,3,4,5]
//改：splice(开始的下标，删除的个数，添加新数据)
arr.splice(0,1,'a')  //['a',2,3,4,5]
//增  第二个参数为0就是不删除
arr.splice(1,0,'a')		//[1,'a',2,3,4,5]
//删  第三个值省略
arr.splice(1,0) 	//[1,3,4,5]

6、concat 数组的拼接

var arr=[1,2,3,4,5]
var brr=['a','b']
console.log(arr.concat(brr)) 	//[1,2,3,4,5,'a','b']

7、reverse 数组的反转

var a=[1,2,3,4,5]
console.log(a.reverse)  //输出 5  4 3 2 1

8、slice 截取数组

var a=[1,2,3,4,5]
//slice(开始截取的下标，结束的下标)  包前不包后
console.log(a.slice(1,3))  // [2,3,4]

//如果省略第2个参数，默认从开始下标截取到数组末尾
console.log(a.slice(1))  //[2,3,4,5]

9、join 将数组中的元素使用指定的连接符连接在一起

var arr = ['a','b','c'];
var str = arr.join('_') // 参数是连接符
console.log(str) // a_b_c

var str = arr.join() // 默认使用逗号连接
console.log(str) // a,b,c

var str = arr.join('')
console.log(str) // abc

10、sort 数组的排序

var arr = [8,6,3,7,1,2];
arr.sort() // 默认升序
console.log(arr) // [1,2,3,6,8]

arr.sort(function(a,b){  // a代表前面的数，b代表后面的数
    return a-b; // 升序 - 如果a-b>0，则交换位置
    return b-a; // 降序 - 如果b-a>0，则交换位置
})

ES5新增数组方法（常用）

1、indexOf 查找数组的开头第一次出现的下标

var arr=[1,2,2,3,4,5,5,6]
console.log(arr.indexOf(2)) // 找到2的下标为1
console.log(arr.indexOf('a'))  //没找到返回-1

2、lastIndexOf 返回一个指定的字符串值最后出现的位置；

var arr=[1,2,2,3,4,5,5,6]
console.log(arr.lastIndexOf(5)) // 6
//有2个值时，（查找的数据，开始检索的位置）
console.log(arr.lastIndexOf(2,7))

2、forEach

forEach() 用于遍历数组的，本身是不支持的 continue 与 break 语句

var arr=[ 1,2,3,'a','b','c']
arr.forEach(function(value,number,array)){
    console.log(value)    //遍历出的元素
	console.log(number)		//每个数据对应下标
	console.log(array)		//当前遍历的数组
}

效果如下图：

3、map

遍历数组，将每个元素都经过函数处理，处理成新的元素，将所有新的元素组成一个新的数组返回。

arr.map(function(value,number,array){}),参数与forEach里的一样。

var arr=[1,2,3,4]
var brr=arr.map(function(num){  //value给改了名num
    var  newnum = num + num*10
    return newnum
})
console.log(brr)

4、filter

先过滤数组 在 遍历数组，将数组中满足指定条件的元素，组成新的数组并返回。

arr.filter(function(value,number,array){}),参数与forEach里的一样。

var arr=[1,2,3,4,5,6,7]
var brr=arr.map(function(num){  //value给改了名num     
    return num>5
})
console.log(brr)

简单排序

冒泡排序

相邻的2个元素进行大小比较，并交换。

var arr=[ 4,1,5,2,5,2,7]  		//定义数组
for(var a=0;a<arr.length-1;a++){      //遍历数组
	for(var j=0;j<arr.length-1-a;j++){     // //排一轮 [1,4,5,2,5,2,7]
        //循环一次，前一个与后一个比较大小，前一个比后一个大就进行换位
        if(arr[j]>arr[j+1]){    //从小到大排列
           var temp=arr[j]
           arr[j]=arr[j+1]
            arr[j+1]=temp
           }
    }
}
console.log(arr);

选择排序

每次排序找到最大值或最小值放在最前面。

var arr=[5,2,7,23,41,1] 
for(var j=0;j<arr.length-1;j++){
	for(var i=j+1;i<arr.length;i++){    //第一轮排序[1,2,7,23,41,5]
        if(arr[j]>arr[i]){			//前一个比后一个大，交换位置
           var temp=arr[i]
           arr[i]=arr[j]
            arr[j]=temp
           }
    }
}
console.log(arr);

图片出自https://www.cnblogs.com/xaimicom/p/9189471.html 侵权删

数组去重

把数据里重复的数据清除掉。这是其中一种方法，还有其他方法。

   var arr=[1,1,2,2,3,4,1,3,5,5]
		//遍历数组 arr.length要-1
    for(var a=0;a<arr.length-1;a++){
		//a+1 下标最大+1
        for(var i=a+1;i<arr.length;i++){
            if(arr[a]===arr[i]){
                arr.splice(i,1)   //删除下标为i的元素 ，i为开始下标，运行一次删除一个
                i--
            }
        }
    }
    console.log(arr)

*第二种：将不重复的元素都放在一个空数组中（我不会，所以把思路记下来，好用来复习）

思路：

1、 从arr中将不重复的元素找到

2、先将arr中的第一个元素放在空数组中

3、遍历arr，判断arr中的每个元素是否在brr中，如果在，不放进去，如果不在，就放进去

var arr=[1,1,2,2,3,4,1,3,5,5]
var brr=[]
// 遍历arr
for(var i=1; i<arr.length; i++) {
    // arr[i]是arr中的每个元素
    // 要判断每个元素是否在brr中 - 需要遍历brr
    for(var j=0; j<brr.length; j++) {
        if(arr[i] === brr[j]) {
            // arr[i] === brr[j]说明brr中已经有了arr[i]了 ，结束循环
            break;
        }
    }
    // 如果上面循环结束了，if也没有成立过一次，就放进去
    if(j === brr.length) { 
        brr.push(arr[i])   //push可以添加一个或多个元素，上面有提到
    }
}
console.log(brr);

*第三种：利用对象中的键是不重复的

思路：

1、遍历数组，把元素放到对象中

2、将对象中所有键都放在一个数组中

3、遍历对象得到所有的键，然后将所有的键都放在新的数组中

var arr=[1,1,2,2,3,4,1,3,5,5]
var ob={}
 for(var i=0; i<arr.length; i++) {
   // arr[i] 是每个值 - 当做ob的键放在ob中
    ob[ arr[i] ] = typeof arr[i]
 }
//定义新数组存放
var brr=[]
//遍历数组，把每个元素放到对象里
for(var i in ob){
     brr.push( ob[i] === 'number' ? Number(i) : i  )
}
console.log(brr);

引用对象作为跳板，感觉更麻烦了，咳咳我不会先你记下来。

多维数组转一维数组

//定义一个多维数组
var arr=[
    [1],
    [1,2,3],
    ['a','b',[4,5,[6,7,[8]]]],9
    
];

// 定义空数组
var brr=[]
//定义函数
function fn(arr){
    // 遍历数组
    for(var i=0;i<arr.length;i++){
        //判断是否是object类型
        if(typeof arr[i] === "object"){  
            // 是数组就递归
            fn(arr[i])
        }else{
            // 如果不是数组就放brr中
            brr.push(arr[i])
        }
    }
}
//调用
fn(arr)
console.log(brr)  
//控制台结果： [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]

昨天晚上熬太晚，今天没精神，感觉学习效率极低，然后打乒乓球运动一下，岔气了心脏贼贼难受。今天晚上就早点记录复习，小命要紧。各位小伙伴也不要经常熬夜哦，一起学习冲冲冲。