js 数组常用总结

js 数组 追加删除元素

push() 后增

push()方法可以向数组后添加一个新的元素，并返回新数组的长度。

unshift() 前增

unshift()可以向数组前添加一个或多个元素，并返回新的长度

pop() 后删

pop() 用于删除并返回最后一个元素。

shift() 前删

shift() 用于删除并返回首个元素

js 数组 分割数组

splice() 修改删除 (非常重要)

splice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素，并从index开始新增元素1~N，放回被删除的元素组成的数组
对数组进行删除修改，返回被删除的元素组成的数组，改变原数组

concat() 拼接

concat() 方法用来合并两个或多个数组
合并两个或多个数组，返回新数组，不会改变原数组

let c = a.concat(b) 

slice() 剪切

slice(startIndex,endIndex) 返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组
返回新数组，不改变原数组

js 数组 分割数组

sort() 排序

按ascii码排序
改变原数组，返回排序后的数组
可以使用后面函数进行指定排序方案

arr.sort(function(a, b){
	return a-b
});

reverse() 颠倒顺序

reverse() 方法用于颠倒数组中元素的顺序。
返回的是颠倒后的数组，会改变原数组。

js 数组 和字符串之间转换

split() 字符串转换为数组

返回数组 通过后面的参数分割

var string = '123,456,789';
var stringResult = string.split(',');

join() 数组转换为字符串

返回字符串

var array = ['abc', 'def', 'hig']
var arrayResult = array.join(',')

js 数组 查找是否包含 这个返回是真假

indexOf()和lastIndexOf()

indexOf(某元素,startIndex) 从startIndex开始，查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1
lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询
不会改变原数组，返回找到的index,否则返回-1
若不使用下标，则一般通过includes()方法代替indexOf()

includes()

includes()方法,返回一个布尔值。 参数是一个value,一般用于简单数组。
对于复杂数组，则可以使用some()方法替代includes()方法

let a = [1,2,3]
console.log(a.includes(1))  

some() （这个重要）（可以用它对比数组对象的id）

对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true

let a = [1,2,3,4,5]
let b = a.some(function(current,index,array){
       return current > 4
})
let c = a.some(function(current,index,array){
       return current > 5
})
console.log(b)  // true 
console.log(c)  // false 

every() （这个必须所有元素都满足）

对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true

let a = [1,2,3,4,5]
let b = a.every(function(current,index,array){
       return current < 6
})
let c = a.every(function(current,index,array){
       return current < 3
})
console.log(b)  // true 
console.log(c)  // false

js 数组 过滤数据 生成新数组

filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组，原数组不变
filter()的参数是一个方法

let a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
let b = a.filter(function(current,index,array){
    return current < 10
})
 
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
 
//数组对象根据某个对象中的值删除该对象
const arr = [
	{ name: '王佳斌', age: '20' },
	{ name: '孙玉红', age: '15' }
]
arr = arr.filter(item => item.age !== '15')
// arr = [{ name: '王佳斌', age: '20' }]

find()

找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。
和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组，
一般在需要使用找到的元素时，用find()方法

let a = [1,2,3,4]
// b在下面需要使用，则一般用find
let b = a.find(function(ele,index,array){
    return ele == 1
})
 
let c = 3
let d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)，则一般使用Array.includes(value)方法
// 如果为对象数组，则可以使用Array.some()方法
 
let a = [1,2,3]
console.log(a.includes(1))  // true
 
let a = [{"name": "xiaoming" },{"name": "xiaohong"}]
 
console.log(a.some(function(ele){
    return ele.name == 'xiaoming'
}))                            // true

findIndex()方法

findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

let a = [1,2,3,4]
let b = a.findIndex(function(ele,index,array){
    return ele === 2
})
let c = a.indexOf(2)  
console.log(a)  // [1,2,3,4]
console.log(b)  // 1
console.log(c)  // 1

js 数组 遍历数组

forEach() 数组遍历

遍历整个数组，中途不能中断(不能return)

let arr = ['a','b','c']
let copy = []
arr.forEach(function(item){
     copy.push(item)   
})
console.log(copy)

for…in… （这个是遍历对象，也可以遍历数组）

这个循环用的人也很多，但是效率最低（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名

var arr = ['我', '是', '谁', '我', '在', '哪']
for(let key in arr) {
    console.log(key)
}
// 0 1 2 3 4 5
let obj = {
        a: 11,
        b: 22,
        c: 33
}
for(let key in obj) {
	console.log(key)
}
// a b c 

for…of…（ES6）（这个不能遍历对象，可以遍历数组）

虽然性能要好于 for…in…，但仍然比不上普通的 for 循环
    注意：不能循环对象，因为任何数据结构只要部署 Iterator接口，就可以完成遍历操作，有些数据结构原生具备 Iterator 接口，比如Array、Map、Set、String等，而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的，而对象Object恰恰是没有Symbol.iterator属性的，所以无法被for…of遍历

var arr = ['我', '是', '谁', '我', '在', '哪']
for(var key of arr) {
    console.log(key)
}

// 我 是 谁 我 在 哪

map（ES6）（改变原有数组的元素内容）(非常重要，用于生成新的数组)

遍历每一个元素并且返回对应的元素(可以返回处理后的元素) (map 映射 一一 对应)
    返回创建的新数组和原来旧数组的长度是一样的，使用比较广泛，但其性能还不如 forEach
    前两种写法都会改变原数组，第三中方式则不会改变原数组
    注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try…catch可以实现跳出循环

// 一、会改变原数组
var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(function (item, idnex) {
    return item * item
})

console.log(arr)      // [1, 2, 3, 4, 5, 6]
console.log(newArr)   // [1, 4, 9, 16, 25, 36]

// 二、会改变原数组元素中对象的属性值
var arr = [{a: 1, b: 2},{a: 11, b: 12}]
let newARR = arr.map((item)=>{
    item.b = 111
    return item
})
console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]
console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

// 三、不会改变原数组
var arr = [{a: 1, b: 2},{a: 11, b: 12}]
let newARR = arr.map((item)=>{
    return {
    	...item,
    	b:111
    }
})
console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]
console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

// 四、使用try...catch...可以跳出循环
try {
    var arr = [1, 2, 3, 4];
    arr.map((item) => {
        //跳出条件
        if (item === 3) {
            throw new Error("LoopTerminates");
        }
        console.log(item);
        return item
    });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};
// 1 2

js 数组其他方案

Array.isArray()方法

用来判断一个元素是否为数组

Array.isArray([])  // true
Array.isArray({})  // false
``