数组一些常用方法

const arr = [1, 2, 3]
// map循环 当item是简单数据类型时,不会修改原数组,复杂类型时会修改
const newArr = arr.map(item => item*2)
console.log(arr, newArr);

// 这种会影响源数据
const arr1 = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr1 = arr1.map(item => {
  item.age = 2
  return item
})
console.log(arr1, newArr1);
// 这种不会
const arr1 = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr1 = arr1.map((item) => ({
  ...item,
  age: 2,
}));
console.log(arr1, newArr1);

// some循环数组中是否有这个值, 返回布尔值
const arr2 = [1, 2, 3, 4]
const newArr2 = arr2.some(item => item === 2)
console.log(arr2, newArr2);

const arr3 = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr3 = arr3.some(item => item.age === 19)
console.log(arr3, newArr3);

// filter循环 过滤符合条件  返回新数组 若不符合则返回空数组
const arr4 = [1, 2, 3, 4]
const newArr4 = arr4.filter(item => item>=4);
console.log(arr4, newArr4)

// find循环   返回符合条件的那一项 剩余不在继续查找  如果不符合返回undefined
const arr5 = [1, 2, 3, 4]
const newArr5 = arr5.find(item => item > 2);
console.log(arr5, newArr5)

const arr6 = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr6 = arr6.find(item => item.name === '李四');
console.log(arr6, newArr6)

// forEach 循环 和for循环差不多

// includes  返回布尔值  判断是否包含
const arr7 = [1, 2, 3, 4]
const newArr7 = arr7.includes(2);
console.log(arr7, newArr7)

const str = 'hello word'
const newStr = str.includes('word')
console.log(str, newStr);

// 数组的的常用操作
const arr8 = [1, 2, 3, 4]
// 前面添加 返回数组长度
const newArr8 = arr8.unshift(9)
// 前面删除 返回被删除的元素
const newArr8_ = arr8.shift()
// 想后面添加  返回数组的长度
const newArr8__ = arr8.push(5)
// 后面删除 返回被删除的元素
const newArr8___ = arr8.pop()

console.log(arr8,newArr8,newArr8_,newArr8__, newArr8___)

// splice数组截取、替换 会改变原数组  返回被截取的元素  splice(start, n) start开始索引位置, n需要截取的个数 若不填写n,则表示从start索引位置开始截取,直到结束  注意:[start, end)区间   splice(-10)表示截取最后10位,若不够10位则全部截取,当start小于0时,第二个参数无效
const arr9 = [1, 2, 3, 4]
const newArr9 = arr9.splice(1)
console.log(arr9, newArr9);
// 替换(本质是先删除,在原索引位置添加)
const arr9_ = [1, 2, 3, 4]
const newArr9_ = arr9_.splice(1,1,5)
console.log(arr9_, newArr9_);

// slice数组、字符串截取 不会改变原数组  返回被截取的元素  slice(start, end) start索引的开始位置, end索引的结束位置 若不填写end,则表示从start索引位置开始截取,直到结束  注意:[start, end)区间  slice(-10)表示截取最后10位,若不够10位则全部截取,当start小于0时,第二个参数无效。当end小于start时,返回空数组(没有截取的空间)
const arr10 = [1, 2, 3, 4]
const newArr10 = arr10.slice(1, 3)
console.log(arr10, newArr10);

const str5 = '1213113'
const newStr5 = str5.slice(0, 3)
console.log(str5, newStr5);

// every 用来检测数组是否每项都符合元素,返回布尔值  不会修改原数组  只要有一项不满足则返回fasle,剩余的不检测
const arr11 = [1, 2, 3, 4]
const newArr11 = arr11.every(item => item > 2)
console.log(arr11, newArr11);

const arr11_ = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr11_ = arr11_.every(item => item.name)
console.log(arr11_, newArr11_);

// sort 排序 会修改原数组 b-a 降序  a-b升序
const arr12 = [1, 3, 2, 5, 4]
const newArr12 = arr12.sort((a,b) => b - a)
console.log(arr12, newArr12);

// 根据某属性排序
const arr12_ = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr12_ = arr12_.sort((a,b) => b.age - a.age)
console.log(arr12_, newArr12_);

// concat 数组合并 es6拓展运算符 不会修改原数组  返回合并后的数组
const arr13 = [1, 3, 2, 5, 4]
const newArr13 = arr13.concat([9,8,7,6])
console.log(arr13, newArr13);

const arr13_ = [1, 3, 2, 5, 4]
const newArr13_ = [...arr13_,...[9,8,7,6]]
console.log(arr13_, newArr13_);

const arr13__ = [{name: '李四', age: 18},{name:'张三', age: 19}]
const newArr13__ = arr13__.concat({name:'王五', age: 20})
console.log(arr13__, newArr13__);

// join 数组转换字符串  返回拼接好的字符串
const arr14 = [1, 3, 2, 5, 4]
const newArr14 = arr14.join('-')
console.log(arr14, newArr14);

// split 将字符串转为数组 
const str1 = '1,2,3,4,5'
const newstr1 = str1.split(',') // newstr1:['1', '2', '3', '4', '5']
const newstr2 = str1.split('-') // newstr2:['1,2,3,4,5'] // 只有一项'1,2,3,4,5'
console.log(str1, newstr1, newstr2);

// toString、toLocalString 也可以将数组转化为字符串  
const arr15 = [1, 3, 2, 5, 4]
const newArr15 = arr15.toString() // 只有一项'1,2,3,4,5'
const newArr15_ = arr15.toLocaleString() // 只有一项'1,2,3,4,5'
console.log(arr15, newArr15, newArr15_);
// 多维数组也能转化
const arr16 = [1,[2,3],[4,5],[6,[7,8,[9]]]]
const newArr16 = arr16.toString() // '1,2,3,4,5,6,7,8,9'
const newArr16_ = arr16.toLocaleString() // '1,2,3,4,5,6,7,8,9'
console.log(arr16, newArr16, newArr16_);

const num = 123456
const newNum = num.toString()
const newNum1 = num.toLocaleString()
console.log(num, newNum, newNum1);
// 区别:1:当是4位数以上的时候 toLocaleString会有千位化 toString不会。2:toLocaleString能对时间格式化,toString不会。

// flat 将二维数组转化为一维数组,多维数组需要写成函数形式 Infinit无限,用来扁平化多维数组, 复杂数据类型也能扁平化
const arr17 = [1,[2,3],[4,5],[6]]
const newArr17 = arr17.flat()
const arr17_ = [1,[2,3],[4,5],[6,[4,[7]]]]
const newArr17_ = arr17.flat(Infinity)
console.log(arr17, newArr17,arr17_ , newArr17_ );

// indexOf 查找值所在的位置 若找到则返回索引  若没有找到返回-1 indexOf(start,index) start:需要找的值, index:从哪个索引开始找。默认0。    若找到,则剩余不在查找
const arr18 = [1, 3, 2, 5, 4]
const newArr18 = arr18.indexOf(2, 0)
console.log(arr18, newArr18);
// 若是字符串
const str2 = 'hello word'
const newStr2 = str2.indexOf('o', 2)
console.log(str2, newStr2);

// findIndex 查找出第一个符合条件中的数组元素,所在的索引位置 找不到则返回-1  若找到,则剩余不在继续查找
const arr19 = [1, 3, 2, 5, 4]
const newArr19 = arr19.findIndex(item => item > 2)
console.log(arr19, newArr19);

上传文件 校验文件格式的 避免文件名中包含文件文件后缀检测不出来的bug

  const fileType = ["doc", "docx", "xlsx", "xls"];
  const name = "xxx.doc文件.doc";
  console.log(name.substring(name.lastIndexOf(".") + 1)); // 返回文件后缀名 doc    name.substring(name.lastIndexOf(".")) 返回.doc
  console.log(fileType.includes(name.substring(name.lastIndexOf(".") + 1)));  // 文件中是否包含doc

限制input输入整数

  <a-input
    v-model="formValue.lv"
    placeholder="请输入..."
    oninput="value=value.replace(/[^0-9]/g,'')"
   />
// 字符串替换
function replaceSubstring(str, start, end, replacement) {
    return str.substring(0, start) + replacement.repeat(end - start) + str.substring(end);
}

let originalStr = "Hello, World!";
let startIndex = 4;
let endIndex = 8;
let replacementChar = '*';

let newStr = replaceSubstring(originalStr, startIndex, endIndex, replacementChar);
console.log(newStr); // 输出: Hell****World!
posted @ 2022-03-29 10:43  Life_countdown  阅读(57)  评论(0)    收藏  举报