https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
数组的方法
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