JS数组与字符串常用方法汇总

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

https://www.lodashjs.com/

数组的方法

1、增加

push  //改变数组的结构，只接收单个值  列表的上拉刷新
unshift  //历史记录

splice
var arr = [1, 2, 3, 4]
/* [1,2,"html","css",3,4] */
arr.splice(2, 0, "html", "css")
/* splice(index,howmany,..value) */
/* tips:  从index的后面添加 */
console.log(arr);

concat  //不会改变数据的结构,它会返回一个新的值,并且接收数组

2、删除

pop	从后删除
shift	从前删除
splice(index,howmany)

3、修改

/* splice(index,howmany,...value) */
var arr = [1, 2, 3, 4]
/* [1,2,"vue",4] */
// arr.splice(2,1,"vue");
arr[2] = "vue"
console.log(arr);

4、查询

indexOf

/* 查询 */
var arr = [3, 4, 5]
/* indexOf 返回数组的下标值,如果没有返回-1 */
console.log(arr.indexOf(6)) 

includes

返回boolean

slice

返回值是一个数组，slice(startIndex,endIndex)

var arr = [2, 3, 4, 5, 6];
/* [3,4,5]  */
/* slice(startIndex,endIndex)  不包含结束下标 
           startIndex<=len<endIndex
        */
console.log(arr.slice(1, 4));

5、遍历

forEach
for -in  //index
for -of  //value

var obj = {
  name: "html",
  age: 18
}
for (let key in obj) {
  // console.log(obj.key)
  console.log(obj[key]) //Tips:如果对象的属性是变量 使用[]读取
}

map  //可以返回一个新的数组
//例子
var total = [{ name: "html", id: 1001 },
             { name: "css", id: 1002 }, { name: "js", id: 1003 }]
/* ["html","css","js"] */
var result = total.map(item => {
  return item.name
})
console.log(result);

filter
every
some
find
findIndex

flat 可以将数组扁平化

var arr = [1, 2, [2, 3], [4, 5, [6, 7, [8, 9]]]];
/* [1,2,3,4,5,6] */
/* flat  */
var res = arr.flat(Infinity);
console.log(res);

6、其他

join 将数组拼接为字符串

var labels = [" 大鹏", "白客", "庄达菲"]
/* string   大鹏 / 白客 / 庄达菲  */
var str = labels.join("/");
console.log(str)

reduce 求和

var sum = arr.reduce((a, b) => a + b);
console.log(sum)

sort 排序 升序，降序 改变数组本身的结构

/* sort 改变数组本身的结构 */
var arr = [10, 9, 11, 8];
/* [8,9,10,11] */
var result = arr.sort((a, b) => a - b);
console.log(result)
console.log(arr)

var result = arr.sort((a, b) => b - a);
console.log(result)

reverse 翻转

7、总结 -记忆

25个 记住

//增加  4个
push,unshift,splice(index,0,value),concat
//删除  3个
pop,shift,splice(index,howmany)
//查询  3个
indexOf,includes,slice
//修改  1个
splice(index,howmany,value)
//遍历 10个
for-in,for-of,forEach,map,some,every,filter,find,findIndex,flat
//其他 4个
reduce,sort,join,reveser

8、例子

8-1、Object ->String

let data = {
  country: "美国",
  year: 1994,
  story: "犯罪"
}
/* object transfer string
        美国/1994/犯罪
         */
let result = [];
for (let key in data) {
  // console.log(data[key])
  result.push(data[key])
}
console.log(result.join("/"))

第二种

let str = Object.values(data).join("/");
console.log(str)

8-2、sort 排序

var arr = [
  { name: "lisi", age: 20 },
  { name: "张三", age: 18 },
  { name: "武汉", age: 9 },
  { name: "chen", age: 14 }
]
/* age  升序 */
arr.sort((a, b) => {
  return a.age - b.age;
})
console.log(arr);
/* age  降序 */
arr.sort((a,b)=>{
  return b.age-a.age
})

8-3、数据处理

var arr = [
  { name: "html", value: "12px" },
  { name: "css", value: "13px" },
  { name: "vue", value: "11px" }
]
/*
[
    {name: "html", value: 24}
    {name: "css", value: 26}
    {name: "vue", value: 22}
]         
*/
//   console.log(parseInt("12px"))
arr.forEach(item => {
  let value = parseInt(item.value);
  item.value = value * 2;
})
console.log(arr);

8-4、分割数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8]
/* [[1,2,3],[4,5,6],[7,8]] */
/*
        0  2  slice(0,3)
        3  5  slice(3,6)
        6  8  slice(6,9)
*/

let sum = [];
for (let i = 0; i < arr.length; i = i + 3) {
  let item = arr.slice(i, i + 3);
  console.log(item);
  sum.push(item);
}
console.log(sum)

8-5、数据过滤

var arr = [
  {
    name: "李四",
    age: 16,
    sex: "male"
  }, {
    name: "张三",
    age: 18,
    sex: "female"
  }, {
    name: "王五",
    age: 19,
    sex: "male"
  }
]
/*
        [
            {name:"xx",age:"xx"},
            {name:"xx",age:"xx"}
        ]
         */
var result = [];
arr.forEach(item => {
  let { name, age } = item;
  result.push({
    name,
    age
  })
})
console.log(result)

8-6、string -翻转

var str = "hello";
/* olleh */
/* 1、string--array */
var res = str.split("").reverse().join("");
console.log(res);

8-7、Array-string

var arr = [1, 2, 3, 4, 5]
/* 0 2 4 */
/* "1-3-5" */
var result = arr.filter((item, index) => index % 2 == 0);
console.log(result.join("-"))

8-8、数组去重

var arr = [1, 2, 1, 4, 5, 4];
/* [1,2,4,5] */
/* set */
let result = new Set(arr);
console.log([...result])

8-9、String -> Object

var http = "https://192.168.4.18?limit=20&offset=0"
/* {limit:20,offset:0} */
var result = http.split("?")[1]
console.log(result)/* 1、[limit=20&offset=0] */
/* 2、[limit=20,offset=0] */
let arr = result.split("&");
console.log(arr);
/* 3、obj */
let obj = {};
arr.forEach(item => {
  console.log(item.split("="))
  let value = item.split("=")
  /* index=0  obj - key  index=1 obj- value */
  obj[value[0]] = value[1]
})
console.log(obj)

8-10、Object-Array

var obj = {
  A: [{ name: "html" }, { name: "ctc" }],
  B: [{ name: "汉口" }, { name: "武汉" }],
  C: [{ name: "vue" }, { name: "大汉王朝" }]

}
var keyword = "汉";
// ["汉口", "武汉", "大汉王朝"]
/* 1、获取对象所有的value */
let arr = Object.values(obj);
// console.log(arr);
let result = [];
arr.forEach(item => {
  result.push(...item);
})
let final_res = []
result.forEach(item => {
  if (item.name.includes("汉")) {
    final_res.push(item.name)
  }
})
console.log(final_res)

8-11、flat

const deps = {
  '采购部': [1, 2, 3],
  '人事部': [5, 8, 12],
  '行政部': [5, 14, 79],
  '运输部': [3, 64, 105],
}
/* 20岁以下的员工 */
let members = Object.values(deps).flat(Infinity);
console.log(members.filter(item => item < 20));

字符串

14必须记忆

一、增加

concat

数组也有这个方法

var a = "hello"
var b = "world"
// hello world
console.log(a.concat(b));

二、查询

1、slice(startIndex,endIndex)

2、substring(startIndex,endIndex)

3、substr(startIndx,length) ✅

4、arr.indexOf(value)

5、charAt(index)

var str = "xzdjy"
console.log(str[3])
console.log(str.charAt(3))

6、includes

返回boolean

7、search

返回number，就是字符串的下标值

var str = "江武,汉武,功武";
/* search */
console.log(str.search("武")) //index

8、match 匹配

返回array

/* match */
console.log(str.match("武"))//array

支持正则

var str = "江武,汉武,功武";
let reg = /武/g
console.log(str.match(reg))

9、str.length

三、其他

1、split

将string transfer array

var str = "发奖金";
console.log(str.split(""))

2、replace

var res = '江武,汉武,功武'
/* 武  中 replace */
console.log(res.replace("武", "中"))
// console.log(res.replaceAll("武", "中")) bug
console.log(res.replace(/武/g, "中"))

3、trim()

去除字符串前后的空格

4、startsWith

var flag = "武汉很好";
/* starsWith */
console.log(flag.startsWith("武汉"))
console.log(flag.endsWith("好"))

5、eval 了解

/* eval  将JS的字符串,转化为脚本执行 */
var str = `x=10;y=20;document.write(x*y)`;
eval(str)

四、支持正则的方法

search,match,replace