随手笔记 - 05(数组)

  1. push() —— 向数组的末尾添加一个或多个元素,并返回数组的新的长度
let arr = ["孙悟空", "猪八戒", "沙和尚"]
let len = arr.push("唐僧", "白龙马")
console.log(arr) // ['孙悟空', '猪八戒', '沙和尚', '唐僧', '白龙马']
console.log(len) // 5
  1. pop() —— 删除数组最后一个元素,并将被删除的元素作为返回值返回
var arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.pop()) // 沙和尚
console.log(arr) // ['孙悟空', '猪八戒']
  1. unshift() —— 向数组开头添加一个或多个元素,并返回数组的新的长度
var arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.unshift("牛魔王", "二郎神", "哮天犬")) // 6
console.log(arr) // ['牛魔王', '二郎神', '哮天犬', '孙悟空', '猪八戒', '沙和尚']
  1. shift() —— 删除数组的第一个元素,并将被删除的元素作为返回值返回
var arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.shift()) // 孙悟空
console.log(arr) // ['猪八戒', '沙和尚']
  1. concat() —— 可以连接两个或多个数组,并返回新的数组,该方法不会对原数组产生影响
var arr = ["孙悟空", "猪八戒", "沙和尚"]
var arr1 = ['白骨精', '蜘蛛精'];
var arr2 = ['太上老君', '玉皇大帝'];
var concatArr = arr.concat(arr1, arr2, "唐僧");
console.log(concatArr) // ['孙悟空', '猪八戒', '沙和尚', '白骨精', '蜘蛛精', '太上老君', '玉皇大帝', '唐僧']
  1. join() —— 该方法可以将数组转换成一个字符串,该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回;toString() —— 将数组转换成一个字符串 arr.toString() 与 arr.join()输出相同,不过join里可以输入其它链接符
/**
*  在join()中可指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,如果不指定连接符,则默认使用","作为连接符
*/
var arr = ["孙悟空", "猪八戒", "沙和尚"]
var joinStr1 = arr.join();
var joinStr2 = arr.join("and");
console.log(joinStr1) // 孙悟空,猪八戒,沙和尚
console.log(joinStr2) // 孙悟空and猪八戒and沙和尚
/* toString()没有参数 */
var colors = ['red','blue','green']
colors.toString() //"red,blue,green"
  1. reverse() —— 用来反转数组(顺序颠倒),该方法会直接修改原数组
var arr = ["孙悟空", "猪八戒", "沙和尚"]
console.log(arr.reverse()) // ['沙和尚', '猪八戒', '孙悟空']
console.log(arr) // ['沙和尚', '猪八戒', '孙悟空']
  1. sort() —— 对数组进行排序,影响原数组,默认会按照Unicode编码进行排序
var arr = ["b", "d", "a", "e", "c"];
console.log(arr.sort()) // ['a', 'b', 'c', 'd', 'e']
console.log(arr) // ['a', 'b', 'c', 'd', 'e']

/**
 *  即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,
 *    所以对数字进行排序时,可能会得到错误结果。
 * 
 * 可以自己指定排序规则
 *    可以在sort()添加一个回调函数,来指定排序规则,
 *        回调函数中需要定义两个形参,
 *        浏览器将会分别使用数组中的元素作为实参去调用回调函数
 *        使用那个书U调用不确定,但是肯定的是在数组中a一定在b前边
 *  - 浏览器会根据回调函数的返回值来决定元素的顺序,
 *      如果返回一个大于0的值,则元素会交换位置
 *      如果返回一小于0的值,则元素位置不变
 *      如果返回0,则认为两个元素相等,也不交换位置
 * 
 *  - 如果需要升序排列,则返回a-b;
 *      如果需要降序排列,则返回b-a。
*/
let newArr = [7, 11, 2, 4, 3, 6, 5];
newArr.sort(function (a, b) {
  // 升序排列
  return a - b;
})
console.log(newArr) // [2, 3, 4, 5, 6, 7, 11]
  1. slice() —— 提取指定元素,该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
/**
 * slice()参数:
 *   第一个:开始位置的索引(包括开始位置)
 *   第二个:结束位置的索引(不包括结束位置)
 *         - 如果省略第二个参数,则会截取到后边所有的
 *   也可以传递一个负数,负数的话将会从后边计算 -1 倒数第一个 -2 倒数第二个
*/
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马"];
console.log('newArr=', arr.slice(0, 2)); //  ['孙悟空', '猪八戒']
console.log('newArr=', arr.slice(1, -1)); // ['猪八戒', '沙和尚', '唐僧']
console.log('newArr=', arr.slice(1, -2)); // ['猪八戒', '沙和尚']
console.log('newArr=', arr.slice(1, -3)); // ['猪八戒']
console.log('arr=', arr); // ['孙悟空', '猪八戒', '沙和尚', '唐僧', '白龙马']
  1. splice() —— 用于删除数组中的指定元素,会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
/**
* splice() 参数
*   第一个,表示开始位置的索引
*   第二个,表示删除的数量
*   第三个及以后。。。 可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
*/
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白龙马"];
var result = arr.splice(1, 2, "牛魔王", "铁扇公主");
console.log('arr=', arr); // ['孙悟空', '牛魔王', '铁扇公主', '唐僧', '白龙马']
console.log('result=', result); // ['猪八戒', '沙和尚']
// 使用 splice() 去重
var numArr = [1, 2, 3, 2, 1, 3, 3, 4, 5, 6, 3, 4, 7, 8, 9, 0, 1, 1, 5, 8, 0, 7];
for (var i = 0; i < numArr.length; i++) {
  for (var j = i + 1; j < numArr.length; j++) {
    // 判断两个元素的值是否相等
    if (numArr[i] == numArr[j]) {
      numArr.splice(j, 1);
      // 当删除了当前j所在的元素后,后边的元素会自动补位
      // 此时将不会在比较这个元素,需要再比较一次j所在位置的元素
      // 使j自减,再检查一遍j所在位置的元素 
      j--;
    }
  }
}
// 去重可以使用 new Set()
var numArr = [1, 2, 3, 2, 1, 3, 3, 4, 5, 6, 3, 4, 7, 8, 9, 0, 1, 1, 5, 8, 0, 7];
console.log([...new Set(numArr )]) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
  1. join() —— 数组转字符串;split() —— 字符串转数组
var  arr = [1,2,3,4,5,6]
let str = arr.join("-")
console.log(str) // 1-2-3-4-5-6
let nArr = str.split("-")
console.log(nArr) // ['1', '2', '3', '4', '5', '6']
  1. Array.isArray()instanceof —— 判断一个数据是否为数组
// 方法一:Array.isArray() 
console.log(Array.isArray([1,2,3])) // true
console.log(Array.isArray({ a: [1, 2, 3] })) // false

// 方法二:instanceof  
console.log([1, 2, 3] instanceof Array) // true
console.log({ a: [1, 2, 3] } instanceof Array) // false
  1. arr.indexOf() —— 验证数组中是否含有某个元素,返回第一个匹配到的元素在数组中所在的位置,如果没有,则返回 -1;arr.lastIndexOf() —— 验证数组中是否含有某个元素,不过是从数组尾部开始查找,返回第一个匹配到的元素所在的位置,如果没有,则返回-1
var colors =  ["red", "gray", "yellow","gray"]
console.log(colors.indexOf('gray')) // 1
console.log(colors.indexOf('mm')) // -1
console.log(colors.lastIndexOf('gray'))  // 3
console.log(colors.lastIndexOf('mm')) // -1
  1. 遍历数组
    1). arr.every() —— 检查数组中的项是否满足某个条件,传入的函数对每一项都返回true,则返回true
var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let result1 = nums.every((item, index, arr) => item > 2)
console.log(result1) // false
let result2 = nums.every((item, index, arr) => item > 0)
console.log(result2) // true

2). arr.some() —— 检查数组中的项是否满足某个条件,只要传入的函数对数组中某一项返回true,则返回true

var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let result1 = nums.some((item, index, arr) => item > 2)
let result2 = nums.some((item, index, arr) => item > 5)
console.log(result1) // true
console.log(result2) // false

3). arr.filter() —— 筛选,对数组中的元素挨个进行检查,检查通过的,才能组成新的数组;原数组不变

/**
* var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
* callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:
* 	- element 数组中当前正在处理的元素。
* 	- index (可选) 正在处理的元素在数组中的索引
* 	- array (可选) 调用了 filter 的数组本身
* thisArg (可选) 执行 callback 时,用于 this 的值
*/

// 过滤掉num为2的留下num为1
let arr = [
  { num: 1, val: 'ceshi', flag: 'aa' },
  { num: 2, val: 'ceshi2', flag: 'aa2' }
]
let result = arr.filter(item => item.num != 2)
console.log(result) // [{flag: "aa",num: 1,val: "ceshi"}]

// 数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

4). arr.map() —— 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果;原数组不变

/**
* var new_array = arr.map(callback(element[, index[, array]]){}[, thisArg])
* callback 生成新数组元素的函数,使用三个参数:
* 	- element 数组中正在处理的当前元素
* 	- index (可选) 正在处理的元素在数组中的索引
* 	- array (可选) 调用了 map 的数组本身
* thisArg (可选) 执行 callback 函数时使用的this 值
* 返回值:一个新数组,每个元素都是回调函数的结果
*/

// 使用 map 重新格式化数组中的对象
var arr = [
 { key: 1, value: 10 },
 { key: 2, value: 20 },
 { key: 3, value: 30 }
];
var newArr = arr.map((obj)=>{
 let rObj = {};
 rObj[obj.key] = obj.value;
 return rObj;
});
// newArr 数组为: [{1: 10}, {2: 20}, {3: 30}]
// arr 数组未被修改: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

5). arr.forEach() —— 数组循环的一种方法,它自身包含三个参数(value(数组元素,必须),index(索引),arr(数组));这个方法没有返回值

//返回nums中每一项乘以2的数组
var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let result = nums.forEach((item, index, arr) => item * 2)
console.log(result) // undefined
  1. arr.reduce() —— 主要用于对数据进行归并操作,可以进行求数组中所有元素的和、求数组中所有元素的乘积、找到数组中的最大值或最小值、将二维数组转为一维数组、将数组中的元素合并成一个字符串、对数组中的对象进行分组或排序等操作
    1). —— 从左开始
/**
* 语法:arr.reduce(callback, [initialValue])
* - callback函数会接收4个参数:[前一个值prev | 当前值cur | 项的索引index | 数组对象本身arr]
*/
//求数组所有元素之和
var nums = [1,2,3,4,5]
let sum = nums.reduce((prev,cur,index,arr)=>prev+cur)
console.log(sum) // 15

/** 
* 如果没有提供initialValue,reduce会从索引1的地方开始执行callback方法,跳过第一个索引。
* 如果提供initialValue,从索引0开始 
*/

//无初始值initialValue
const arr = [1, 2, 3, 4];
const sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
//打印结果:
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

//有初始值initialValue
const arr = [1, 2, 3, 4];
const sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);
// 打印结果:
//0 1 0
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

2). arr.reduceRight() —— 从右开始

var nums = [1, 2, 3, 4, 5]
// 有初始值initialValue
let sum = nums.reduceRight((prev, cur, index, arr) => {
	console.log(index, prev, cur)
	return prev + cur
}, 0)
console.log(sum)
// 打印结果:
// 4 0 5
// 3 5 4
// 2 9 3
// 1 12 2
// 0 14 1
// 15

// 无初始值initialValue
let sum = nums.reduceRight((prev, cur, index, arr) => {
	console.log(index, prev, cur)
	return prev + cur
})
console.log(sum)
// 打印结果:
// 3 5 4
// 2 9 3
// 1 12 2
// 0 14 1
// 15
  1. ES6数组方法扩展
    1). 求一个数组中最大元素;由于js不提供求数组最大元素的函数,所以只能套用Math.max函数将数组转为一个参数序列,然后求最大值
// ES5的写法
console.log(Math.max.apply(null, [1, 3, 6])) // 6

// ES6的写法 —— 扩展运算符
console.log(Math.max(...[1, 3, 6])) // 6

2). 通过push函数将一个数组添加到另一个数组的尾部

// ES5的写法 —— push的参数不可以是数组,所以只好通过apply方法变通使用push方法
var arr1 = [1,2]
var arr2 = [4,5]
Array.prototype.push.apply(arr1,arr2) // 返回新数组长度,arr1改变
console.log(arr1) // [1, 2, 4, 5]

// ES6的写法 —— 扩展运算符
var arr1 = [1,2]
var arr2 = [4,5]
arr1.push(...arr2) // 返回新数组长度,arr1改变

3). 合并数组

// ES5写法 —— concat()
var arr = [4,5]
console.log([1,2].concat(arr)) // [1, 2, 4, 5]

// ES6的写法 —— 扩展运算符
var arr = [4,5]
console.log([1,2,...arr]) // [1, 2, 4, 5]

4). Array.from() —— 将类似数组或可迭代对象(iterable)转换为真正的数组

/**
* 语法:Array.from(arrayLike[, mapFn[, thisArg]])
* - arrayLike:一个类似数组或可迭代对象,需要转换为数组的内容
* - mapFn(可选):对每个元素进行处理的回调函数
* - thisArg(可选):执行回调函数时的this值
*/

// 将字符串转化为数组
console.log(Array.from('hello')) // ["h", "e", "l", "l", "o"]

// 将类似数组的对象转化为数组
const obj = {0: "a", 1: "b", 2: "c", length: 3} // 一个类似数组的对象
const arr = Array.from(obj);
console.log(arr); // ["a", "b", "c"] // 将这个类似数组的对象转换为一个真正的数组

// 使用mapFn处理每个元素
const arr = [1, 2, 3];
const doubleArr = Array.from(arr, num => num * 2) // 使用mapFn对原始数组中的每个元素进行处理,并返回一个新的数组
console.log(doubleArr); // [2, 4, 6]

// 数组去重
function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 
var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n)); // [1, 2, 3]

// 遍历Nodelist对象
let ps = document.querySelectorAll('p')
Array.from(ps).forEach(function(p){
    console.log(p)
})

5). Array.of() —— 将一组值转换为数组。替代Array() 或 new Array(),并且不存在参数不同而导致的重载

console.log(Array.of(3, 4, 5)) // [3,4,5]
console.log(Array.of(2)) // 2
console.log(Array.of(3).length) // 1

6). arr.copyWithin() —— 将当前数组内部制定位置的成员复制到其他位置,返回当前新数组,原数组改变

/**
* 接收三个参数:[从该位置开始替换 | 从该位置开始读取数据 | 到该位置停止读取数据]
*/
// 将4,5移动到前两位
console.log([1,2,3,4,5].copyWithin(0,3)) // [4, 5, 3, 4, 5]

7). array.find() —— 找到满足条件的第一个元素返回,如果未找到,则返回undefined; array.findIndex() —— 找到满足条件的第一个元素,返回其位置,如果未找到,则返回-1

/**
* 接收三个参数:[当前值 | 当前的位置 | 原数组]
*/
let arr = [1, 4, 9, 10, 15]
// 返回满足条件的第一个值
arr.find((item, index, arr)=>{
    return item > 9;
}) // 10
// 返回满足条件的第一个值的索引
arr.findIndex((item, index, arr)=>{
    return item > 10;
}) // 4

8). arr.fill() —— 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

/**
* 语法:arr.fill(value[, start][, end])
* - value 用来填充数组元素的值
* - start 可选 起始索引,默认值为0(包括起始位置)
* - end 可选 终止索引,默认值为this.length (不包括终止位置)
* 	* 如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中length 是 this 对象的 length 属性值. 
* 	* 如果 end 是个负数, 则结束索引会被自动计算成为 length+end.
*/
[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1) // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1) // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]
Array(3).fill(4) // [4, 4, 4]
[].fill.call({ length: 3 }, 4) // {0: 4, 1: 4, 2: 4, length: 3}

9). arr.includes() —— 数组是否包含某个值,返回true 或 false

[1,2,3,4].includes(2) // true
[1,2,3,4].includes(0) // false

10). for…of… —— 遍历数组元素

const arr = [
  {color:'red'},
  {color:'blue'},
  {color:'yellow'}
]
/* 可以使用break continue提升效率 */
for (let item of arr) {
  console.log(item)
}
// 打印结果:
// {color: 'red'}
// {color:'blue'}
// {color:'yellow'}
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值