js/Vue中数组、字符串及对象的常用方法及项目常用案例
目录
1.增删改： unshift、push、splice、shift、pop、splice、slice
2.回调函数类： map、filter、reduce、find、findIndex 、some、every、sort
3.其他方法：join、split、reverse、concat、includes [ indexOf ] 、
1.split、substr、substring、slice、toUpperCase、toLowerCase、 replace、indexOf
1.split：根据某个字符 把字符串切割成数组 split(字符)
2.substr：截取字符串1 : substr （多） 字符串.substr(开始截取的索引,截取的数量（不给就到结尾）)
3.substring：字符串.substring(开始截取的索引位置,结束截取的索引位置); 包前不包后
7.replace:替换字符串 replace("要替换的值","替换的新值");
1.is、assign、Object.hasOwn、hasOwnProperty、keys、values、seal
3.1 hasOwnProperty：ES5判断某个属性是否 是对象的自身属性
3.2.Object.hasOwn：ES6判断某个属性是否 是对象的自身属性
6.Object.seal();可以把对象 变成不可配置对象；
1.数组方法
1.增删改： unshift、push、splice、shift、pop、splice、slice
1.unshift：在数组的头部添加内容
// 数组.unshift("添加的值");
var arr = ['a','b']
arr.unshift('c');
console.log(arr); //['c', 'a', 'b']
arr.unshift('d');
console.log(arr); //['d', 'c', 'a', 'b']2.push：在数组的尾部添加内容
// arr.push("值"); 会在改变原本的数组
var arr = ['a','b']
arr.push('c');
arr.push('d');
console.log(arr); //['a', 'b', 'c','d']3.splice 在数组的中部添加、删除内容
//3.数组的中间添加/删除元素
//数组.splice(添加或者删除的索引,删除的个数/添加就是0,要添加的值/删除可以不写)
//删除
var arr = ['a','b']
arr.splice(0,1)
console.log(arr); //['b']
//添加
arr.splice(0,0,'c');
console.log(arr); ['c', 'b']4.设置数组的长度
// 直接设置数组的长度 ；(了解)
var arr = [1,2,3,4,5];
arr.length = 3; // 人为设置 数组长度；
console.log(arr); // [1, 2, 3]5. shift 删除数组的头部元素
// 数组.shift() 删除一个元素
var arr = [1,2,3]
var res = arr.shift();
console.log(arr); // [2, 3]
// 返还值是删除的值；
console.log(res); //16. pop：尾部删除元素
//数组.pop()
var arr = [1,2,3]
var res = arr.pop();
console.log(arr);// [1, 2]
console.log(res);//37.splice：增加、删除、修改
增加
// 增加：ary.splice(n,0,m)从索引n开始删除0项把m或者更多的内容插入到索引n的前面
let arr = [1,2,3,4];
arr.splice(2,0,'a','b')
console.log(arr);//[1, 2, 'a', 'b', 3, 4]删除
// 数组.splice(删除开始的索引,删除的个数)
// 返还值是删除的元素
var arr = [1,2,3,4,5,6];
var res = arr.splice(1,1);
console.log(res); //[2]
console.log(arr); //[1, 3, 4, 5, 6]修改
// 修改：arr.splice(n,x,m)
//从索引n开始删除x个，m替换删除的部分把原有内容删除掉，然后用新内容替换掉
let arr = [1,2,3,4,5];
arr.splice(1,2,'x', 'y')
console.log(arr);// [1, 'x', 'y', 4, 5]8.slice:截取数组的元素 ；
不会改变原本数组，只能获取返还值；
//splice(索引开始,个数)
var arr = ["a","b","c","d","e"];
//0 1 2 3 4
var res = arr.slice(1,2);
console.log(res); //['b', 'c']2.回调函数类： map、filter、reduce、find、findIndex 、some、every、sort
1.map:映射
map是数组高阶函数，它可以遍历数组，然后经过处理进行返回,可以返回新数组，有返回值
//map(item数组每一项本身,index，代表数组下标,arr，代表这整个数组)
//第一个形参是必须写的，第二个第三个可以选填
let arr = [1, 2, 3, 4]
let newArr = arr.map(item => {
return item * 2
})
let newArr1 = arr.map(item => item * 2)
console.log(newArr1) //(4) [2, 4, 6, 8]
let newArr2 = arr.map(item => {
return { age: item }
})
console.log(newArr2)
//(4) [{…}, {…}, {…}, {…}]
//0: {age: 1}
//1: {age: 2}
//3: {age: 3}
//4: {age: 4}2.filter:过滤
将满足条件【return true】的保留，生成一个新的数组
// filter 过滤
/**
* 将满足条件【return true】的保留，生成一个新的数组
*/
let arr = [1, 2, 3, 4, 5, 6];
let newArr = arr.filter(item => item % 2 === 0)
console.log(newArr) //(3) [2, 4, 6]
let arr2 = [
{
id: 1,
name: '一',
money: 2000
},
{
id: 2,
name: '二',
money: 3000
},
{
id: 3,
name: '三',
money: 1000
},
{
id: 4,
name: '阿黄',
money: 1000
},
{
id: 5,
name: '阿汪',
money: 8000
}
]
let newArr2 = arr2.filter(item => item.money >= 5000)
console.log(newArr2) //0: {id: 5, name: '阿汪', money: 8000}
let arr3 = [
1, 2, 4, -4, undefined, null
]
// 按布尔值过滤
let newArr3 = arr3.filter(Boolean)
console.log(newArr3) //(4) [1, 2, 4, -4]3.reduce:累计
reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
/**
* reduce : 一般用来实现 累计
* reduce((上一次的值,当前值,索引)=>{},起始值)
*/
let arr = [1, 2, 3, 4, 5]
let total = arr.reduce((pre, cur, index) => {
// pre cur return
// 0 1 1
// 1 2 3
// 3 3 6
// 6 4 10
// 10 5 15
console.log('pre', pre);
console.log('cur', cur)
console.log('index', index)
return pre + cur
}, 0)
console.log(total) //15
let t = arr.reduce((pre, cur) => pre + cur, 0)
let todos = [
{
id: 1,
title: '吃饭',
isDone: true
},
{
id: 2,
title: '睡觉',
isDone: true
},
{
id: 3,
title: '打代码',
isDone: false
}
]
// 已完成工作的数量
let doneNum = todos.reduce((pre, cur) => pre + cur.isDone, 0)
console.log(doneNum) //24.find finIndex -查找
4.1 find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined
4.2 findIndex()方法常用来查找数组中满足条件的第一项元素的下标找到符合条件的一项，返回其下标,找不到 -1
注意：findIndex会给数组中的每一项执行一个函数来判断是否满足表达式，如果满足条件后，剩下的元素则不再执行
// find 找到符合条件的一项
// findIndex 找到符合条件的一项，返回其下标
// 找到是索引
// 找不到 -1
let todos = [
{
id: 1,
title: '吃饭',
isDone: true
},
{
id: 2,
title: '睡觉',
isDone: true
},
{
id: 3,
title: '打代码',
isDone: false
}
]
let todo = todos.find(item => item.id === 1)
// 找到符合条件的一项
console.log(todo) //{id: 1, title: '吃饭', isDone: true}
let index = todos.findIndex(item => item.id === 10)
//找不到为-1
console.log(index) //-1
let index2 = todos.indexOf({
id: 3,
title: '打代码',
isDone: false
})
//找不到为-1
console.log(index2) //-1
5.some every -检测
5.1 some:检测数组中是否存在符合指定条件的元素，存在就返回true，不存在就返回false
5.2 every:用于检测数组中某一个值是否都大于或小于或为true或为false。
// 返回一个boolean
// some : 有一个满足即可
// every: 每一个都要满足
let arr = [1, 2, 3, 4]
let res = arr.some(item => item > 30) // 只要有 > 3 的即为真
console.log(res) //false
let res2 = arr.every(item => item > 0)
console.log(res2) //true6.sort:排序
方法用于对数组的元素进行排序，并返回数组。默认排序
顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。
// sort : sort改变原来的数组，还会返回得到一个新数组,新数组就是原来的数组
let arr = [1, 23, 45, 3, 4]
let newArr = arr.sort(function (a, b) {
// return a - b; 升序
return b - a;
})
console.log(newArr, arr, newArr === arr)
//(5) [45, 23, 4, 3, 1] (5) [45, 23, 4, 3, 1] true
let names = [
{
id: 1,
name: '一',
hot: 2000
},
{
id: 2,
name: '二',
hot: 4000
},
{
id: 3,
name: '三',
hot: 3000
}, {
id: 4,
name: '阿旺',
hot: 22000
}
]
names.sort(function (a, b) {
return a.hot - b.hot
})
console.log(names)
//0: {id: 1, name: '一', hot: 2000}
//1: {id: 3, name: '三', hot: 3000}
//2: {id: 2, name: '二', hot: 4000}
//3: {id: 4, name: '阿旺', hot: 22000}
3.其他方法：join、split、reverse、concat、includes [ indexOf ] 、
1.join:拼接符
将数组以拼接符拼接成一个新的字符串
// join(拼接符) 将数组以拼接符拼接成一个新的字符串
let arr = ['a','b','c','d','e']
let str = arr.join('')
console.log(str) //abcde2.split:拆分符
将字符串以拆分符，拆分为一个新的数组
// split(拆分符) 将字符串以拆分符，拆分为一个新的数组
let arr = '12345'
let newArr = arr.split('')
console.log(newArr) //(5) ['1', '2', '3', '4', '5']
let arr1 = '1-2-3-4-5'
let newArr1 = arr1.split('-')
console.log(newArr1) //(5) ['1', '2', '3', '4', '5']3.reverse:翻转
方法用于颠倒数组中元素的顺序。
let str2 = '1-2-3-4-5'
let newArr3 = str2.split('-')
newArr3.reverse()
let newStr = newArr3
console.log(newStr); //['5', '4', '3', '2', '1']
let newStr1 = newArr3.join('-')
console.log(newStr1) //5-4-3-2-14.concat:拼接
方法用于连接两个或多个数组。
let arr1 = ["a", "b", "c"];
let arr2 = ["d", "e", "f"];
let arr3 = arr1.concat(arr2);
console.log(arr3); //['a', 'b', 'c', 'd', 'e', 'f']5.includes:判断
includes 可以判断一个数组中是否包含某一个元素，并返回true 或者false.与 indexOf相似
// 特殊 includes 返回false、true
// indexOf 索引 没找到返回-1
let arr = [1, 2, 3, 4]
let index = arr.indexOf(11)
// if(index !== -1){
// }
console.log(arr.includes(1111)) //false2.字符串常用方法
1.split、substr、substring、slice、toUpperCase、toLowerCase、 replace、indexOf
1.split：根据某个字符 把字符串切割成数组 split(字符)
var str = "a*b*c*d";
var arr = str.split("*");
console.log(arr); 2.substr：截取字符串1 : substr （多）
字符串.substr(开始截取的索引,截取的数量（不给就到结尾）)
var str = "abcdefg";
// var res = str.substr(2,2) ;
// var res = str.substr(2); // 截取到字符串结尾 ；
// console.log(res);3.substring：字符串.substring(开始截取的索引位置,结束截取的索引位置); 包前不包后
var str = "abcdefg";
var res = str.substring(2,4);
console.log(res);
4.slice：截取字符串
var str = "abcdefg";
var res = str.slice(2,4);
console.log(res);5.toUpperCase：把字符串里的英文变大写
var str = "abcDefG";
var res = str.toUpperCase();
console.log(res);6.toLowerCase：把字符串里的英文转小写
var str = "abcDefG";
var res = str.toLowerCase();
console.log(res);
// function fn(str){
// if(str.toLowerCase()==="red"){
// console.log("红色");
// }else if(str==="yellow"){
// console.log("黄色")
// }else{
// console.log("其他情况")
// }
// }
// fn("reD");7.replace:替换字符串 replace("要替换的值","替换的新值");
var str = "fdafdsaXXXfdafdasXXXddfsa";
str = str.replace("XXX","***");
str= str.replace("XXX","***");
console.log(str);8.indexOf:查找某个字符的索引
var str = "abcdefg";
var res = str.indexOf("h");
console.log(res);3.对象新增方法
1.is、assign、Object.hasOwn、hasOwnProperty、keys、values、seal
1.is:判断对象是否相同
// Object.is();
let obj1 = {
myname:"张三"
}
// let obj2 = {
// myname:"张三"
// }
let obj2 = obj1;
console.log(obj1===obj2); //true
console.log( Object.is( obj1,obj1)); //true
console.log(NaN===NaN); //false
console.log( Object.is(NaN,NaN)); //true2.assign：合并2个或者多个对象
// 相同键名会覆盖
// 是一个浅拷贝
let obj1 = {
name: "带带"
}
let obj2 = {
age: 20,
}
let obj3 = {
height: "188cm"
}
let res = Object.assign(obj1, obj2, obj3);
console.log(res); //{name: '带带', age: 20, height: '188cm'}
obj1.name = "王五";
console.log(res); //{name: '王五', age: 20, height: '188cm'}3.1 hasOwnProperty：ES5判断某个属性是否 是对象的自身属性
3.2.Object.hasOwn：ES6判断某个属性是否 是对象的自身属性
// es6 判断某个属性是否是对象的自身属性
// Object.hasOwn(对象,'对象属性')
// ES5
// obj.hasOwnProperty("对象属性")
let obj = {
myname: "带带",
age: 20
}
// ES5
console.log(obj.hasOwnProperty("key")); //flase
console.log(Object.hasOwn(obj, "age")); //true4.Object.keys(); 获取对象的所有键名
// Object.keys();
let obj = {
myname: "带带",
age: 20
}
let keys = Object.keys(obj);
console.log(keys); //['myname', 'age']5.Object.values(); 获取对象的所有键值
// Object.values();
// 获取对象的所有键名键值
let obj = {
myname: "带带",
age: 20
}
let values = Object.values(obj);
console.log(values); // ['带带', 20]6.Object.seal();可以把对象 变成不可配置对象；
// Object.seal();可以把对象 变成不可配置对象(不能添加或删除，可以修改)
let obj = {
myname: "带带",
age: 20
}
Object.seal(obj);
obj.myname = "芳芳";
console.log(obj); //{myname: '芳芳', age: 20}
//删除
delete obj.myname;
console.log(obj); //{myname: '芳芳', age: 20}4.项目常用案例
1.forEach遍历多层数组数据
classification.forEach(item => {
console.log(item.text); // 获取每个一级分类的text属性值
console.log(item.value); // 获取每个一级分类的value属性值
if (item.children) {
item.children.forEach(child => {
console.log(child.text); // 获取每个二级分类的text属性值
console.log(child.value); // 获取每个二级分类的value属性值
});
}
});2.filter方法 +includes方法来过滤数组
假设你有一个包含多个对象的数组，每个对象都有一个id属性。当有一个不固定的id数组，需要获取不固定id对应的对象数组集合。
let data = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' },
// ...
];
let idArray = [1, 3]; // 不固定的id数组
let filteredData = data.filter(item => idArray.includes(item.id));
3.使用some方法检查数组中是否存在需要的数据
例：在多条数据中如果含有一条未读消息，列表中将显示未读消息图标；否则，不显示未读消息图标。
// 示例数据
const messages = [
{ id: 1, content: "消息1", is_read: 1 },
{ id: 2, content: "消息2", is_read: 0 },
{ id: 3, content: "消息3", is_read: 1 },
{ id: 4, content: "消息4", is_read: 0 },
];
// 检查数组中是否存在未读消息
function hasUnread(messages) {
return messages.some(message => message.is_read === 0);
}
//<view class="" v-show="messages && hasUnread(messages)"></view>