目录
数组
遍历数组
方法一: some()方法
some() 有一个元素满足条件,即返回true。
用于检测数组中的元素是否满足指定条件。该方法会依次执行数组的每个元素。
如有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
注意:
some() 不会对空数组进行检测。不会改变原始数组。
const a = [1, 2, 3]console.log(a.some(v => v > 5)) //false
console.log(a.some(v => v < 2)) //true
方法二: every()方法
every() 所有元素满足条件,即返回true
const a = [1, 2, 3]console.log(a.every(v => v < 5)) //true
console.log(a.every(v => v < 2)) //false
方法三: filter()方法
filter() 返回包含满足条件元素的数组
const a = [1, 2, 3]
console.log(a.filter(v => v < 3)) // [1, 2]
方法四: map()方法
map() 返回一个新数组
const a = [1, 2, 3]
console.log(a.map(v => v + 5)) // [6, 7, 8]
list.map(x => {return x.imgUrl}) //将数组对象提取出固定id并组成新的数组
方法五: forEach()方法
forEach() 仅循环,无返回值,本质上相当于for
const a = [1, 2, 3]
a.forEach(v => console.log(v)) // 1 2 3
方法六: for()方法
const a = [1, 2, 3]
for (i = 0; i < a.length; i++) {
console.log(a[i])
}
操作数组
slice
用法: array.slice(start,end)
slice() 方法可从已有的数组中返回选定的元素。
该方法是对数组进行部分截取,并返回一个新的数组,包含选定的元素。
参数说明:
start:可选。开始取的位置,整数,指定开始选择的索引(第一个元素的索引为 0)。
如果是负数则会从末尾开始算。如果省略,则类似于 “0”。
end:结束的位置,参数等于你要取的最后一个字符的位置值加上1(可选)
可选。不填则会从开始位置取到末尾。整数,指定结束选择的位置。
如果省略,将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
// 从索引0开始,到索引最后一个结束,不包括最后索引项
arr.slice(0,-1); // ["A", "B", "C", "D", "E", "F"]
//最后索引项的获取
arr.slice(-1); // ["G"]
//当只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组
arr.slice(-8); //['A', 'B', 'C', 'D', 'E', 'F', 'G']
获取的部分数组元素
// 从索引0开始,到索引6结束,不包括最后索引项
arr.slice(0,6); // ["A", "B", "C", "D", "E", "F"]
// 从索引0开始,到索引6结束,获取全部元素
arr.slice(0,7); // ["A", "B", "C", "D", "E", "F", "G"]
// 默认获取全部元素
arr.slice(); // ["A", "B", "C", "D", "E", "F", "G"]
// 倒序索引6开始,倒数第二个元素
arr.slice(-2,-1); // ["F"]
// 倒序索引6开始,倒数第3个元素开始,不包括最后一个元素
arr.slice(-3,-1); // ["E", "F"]
//当传入两个参数一正一负时,length也会先于负数相加后,再截取
arr.slice(2,-3); //['C', 'D']
/// 如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾
arr.slice(0); // ["A", "B", "C", "D", "E", "F", "G"]
//当传入一个参数,大于length时,将返回一个空数组
arr.slice(8); //[]
获取数组中的最后几项
//传入正数表示从索引2开始到最后
arr1.slice(2) // ['C', 'D', 'E', 'F', 'G']
像jQuery中,利用slice方法给字符串转换为数组:
function toArray(str){
return Array.prototype.slice(str);
}
slice还有个用法就是复制数组对象,如
var arr=[1,2,3];
var copies = arr.slice(0);
arr.length=0;//arr数组删除所有元素
console.log(copies);
console.log(arr);
splice
用法: arrayObject.splice(index,howmany,item1,…,itemX)
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。
参数说明:
index:操作数组的位置
howmany:删除元素的数量,0为不删除
item1,…,itemX:插入的元素,可以不填
例如:
var arr=[1,2,3];
arr.splice(1,2);//删除第一个位置两个元素,arr=[1]
var arr=[1,2,3];
arr.splice(1,2,99);//删除第一个位置两个元素,并添加99,arr=[1,99]
var arr=[1,2,3];
arr.splice(1,0,99);//在第一个位置添加99 ,arr=[1,99,2,3]
利用splice方法给数组去重:
Array.prototype.distinct=function(){
for(var i=0;i<this.length;i++) {
if(this.indexOf(this[i])!=i){
this.splice(i,1);
i–;
}
}
return this;
}
var arr=[1,1,2,3,4,5,6,2,3,4,5,6,7,1,2,3,4,5,6];
arr.distinct();//arr=[1, 2, 3, 4, 5, 6, 7]
添加数组
const a = [1, 2, 3]
a.push(4); //返回新数组的长度:4
a[a.length] = 4;
a[6] =4; //添加最高索引的元素可在数组中创建未定义的“洞”:
删除数组
pop() 方法从数组中删除最后一个元素:返回删除的值:
var a = [1, 2, 3]
a.pop(); // 从 a 删除最后一个元素 3
数组转字符串
将数组元素用某个字符连接成字符串
var a= ['1','2'];
let b = a.join(",");
console.log(b)//1,2
数组排序
方法一:希尔排序(性能最好)
如果要从大到小排列,则 while(arr[n] > arr[n - interval] && n > 0) 。
// 希尔排序算法
function xier(arr){
var interval = parseInt(arr.length / 2);//分组间隔设置
while(interval > 0){
for(var i = 0 ; i < arr.length ; i ++){
var n = i;
while(arr[n] < arr[n - interval] && n > 0){
var temp = arr[n];
arr[n] = arr[n - interval];
arr[n - interval] = temp;
n = n - interval;
}
}
interval = parseInt(interval / 2);
}
return arr;
}
// Array
var arr = [10, 20, 40, 60, 60, 0, 30]
// 打印排序后的数组
console.log(xier(arr))//[0, 10, 20, 30, 40, 60, 60]
方法二、sort排序(普通数组 / 数组嵌套对象)
一堆数组排序
// Array
var arr = [10, 20, 40, 60, 60, 0, 30]
// 排序方法
arr.sort(function(a,b){
/*
* return b-a; —> 降序排序
* return a-b; —> 升序排列
*/
return a-b;
})//括号里不写回调函数则默认按照字母逐位升序排列
// 打印排序后的数组
console.log(arr)//[0, 10, 20, 30, 40, 60, 60]
对象数组排序(数组套对象)
//对象数组排序
var arr = [
{name:'syy', age:0},
{name:'wxy', age:18},
{name:'slj', age:8},
{name:'wj', age:20}
];
// 排序方法
function compare(property) {//property:根据什么属性排序
return function(a,b){
var value1 = a[property];
var value2 = b[property];
/*
* value2 - value1; ——> 降序
* value1 - value2; ——> 升序
*/
return value1 - value2;//升序排序
}
}
// 打印排序后的数组
console.log(arr.sort(compare('age')))
/*
0: {name: "syy", age: 0}
1: {name: "slj", age: 8}
2: {name: "wxy", age: 18}
3: {name: "wj", age: 20}
*/
vue示例:
sortBy(i) {
return function (a, b) {
return a[i] - b[i]; // a[i] - b[i]为正序,倒叙为 b[i] - a[i]
};
},
getDataList() {
arr.sort(this.sortBy("age"));
},
方法三、桶排序
特点:简单,但非常浪费内存,几乎不用。
桶中出现的数组元素都做个标记 1,然后将桶数组中有 1 标记的元素依次打印。
// Array
var arr = []
// 每个数组项做标记(1)
for(let i = 0; i < arr.length; i++) {
let key = arr[i]
arr[key] = 1
}
// 遍历打印出每项
for(let j in arr) {
debugger
console.log(j)
}
方法四、冒泡排序
性能:一般(需要每项进行比较)。
每一趟找出最大的值。
// Array
var arr = [10, 20, 40, 60, 60, 0, 30]
/*
* 总共比较次数为arr.length-1次
* 每次的比较次数为arr.length-1次
* 依次递减
*/
var temp;//交换变量标识
// 两层for分别表示当前项与第二项
for(let i = 0; i < arr.length - 1; i++) {
for(let j = 0; j < arr.length - 1; j++) {
// 如果当前项大于第二项(后一项)则交换
if(arr[j] > arr[j+1]) {
temp = arr[j]
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
// 打印排序后的数组
console.log(arr)//[0, 10, 20, 30, 40, 60, 60]
方法五、选择排序
性能:一般(需要每项进行比较)。
假定某个位置的值是最小值,与冒泡排序类似。
// Array
var arr = [10, 20, 40, 60, 60, 0, 30]
var temp;//交换变量标识
// 两层for分别表示当前项与第二项
for(let i = 0; i < arr.length - 1; i++) {
for(let j = i + 1; j < arr.length; j++) {
// 假设第二项是最小值(是则交换/否则继续比较)
if(arr[i] > arr[j]) {
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
// 打印排序后的数组
console.log(arr)//[0, 10, 20, 30, 40, 60, 60]
方法六、插入排序
// Array
var arr = [10, 20, 40, 60, 60, 0, 30]
// 排序算法
for(var i = 0; i < arr.length; i++) {
var n = i;
while(arr[n] > arr[n+1] && n >= 0) {
var temp = arr[n];
arr[n] = arr[n+1];
arr[n+1] = temp;
n--;
}
}
// 打印排序后的数组
console.log(arr)//[0, 10, 20, 30, 40, 60, 60]
数组去除空值
方法一:扩展Array方法
/**
* 扩展Array方法, 去除数组中空白数据
*/
Array.prototype.notempty = function() {
var arr = [];
this.map(function(val, index) {
//过滤规则为,不为空串、不为null、不为undefined,也可自行修改
if (val !== "" && val != undefined) {
arr.push(val);
}
});
return arr;
}
//调用方法
var a = [1, 2, undefined, 4, "", 5, null, 7, 0, 8];
var b = a.notempty();
//输出b [1, 2, 4, 5, 7, 0, 8]
方法二:map()获取数据
map在条件结束后还会继续执行循环,出现两个undefined数据,forEach由于不能返回结果,所以直接返回undefined
最好在循环时候把想要的数据拿出来,而不是循环完之后拿出来自己想要的数据
let arr = [
{id:'1',num:'1'},
{id:'2',num:'2'},
{id:'3',num:'3'},
];
let arr1 = [];
let arr2 = [];
arr.map(item=>{
if(item.id == 1){
return;
}else{
arr1.push(item.id);
}
});
[// '2', '3' ]
arr.forEach(item=>{
if(item.id == 1){
arr2.push(item.id);
}
});
//[ '1' ]
方法三:filter()
直接使用filter就能搞定了
var arr=[1,2,null,undefined,9];
arr=arr.filter(Boolean);
结果arr=[1,2,9]
方法四:if()
null,undefined,empty这些在if里面都是空值。所以可以if判断。
var arr=[1,2,null,undefined,9];
let newArr= []
//法1
arr.forEach(item => {
if (item) {
newArr.push(item)
}
})
结果arr=[1,2,9]
判断数组是否包含某个值
方法一:array.indexOf(item,start)
元素在数组中的位置,如果没与搜索到则返回 -1。
参数 描述
item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
var fruits = ["a", "b", "c", "d"];
var a = fruits.indexOf("b"); // 1
//输出结果意味着 "b" 元素位于数组中的第 2 个位置。
var fruits=["a","b","c","d","a","b","c"];
var a = fruits.indexOf("b",3); //5
//以上输出结果意味在数组的第三个位置开始检索
if (arr.indexOf(2) != -1){
console.log("数组含有2")
}else {
console.log("数组不含2")
}
方法二:array.find(callback)
find()用于找出第一个符合条件的数组元素。它的参数是一个回调函数,所有数组元素依次遍历该回调函数,直到找出第一个返回值为true的元素,然后返回该元素,否则返回undefined。
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
// 10
//实际用法:
arr.find(function(value) {
if(value === 要查找的值) {
...
}
})
arr.find(value => {
if (value === 2){
console.log("数组含有2")
}
})
方法三:array.findIndex()
array.findIndex()和array.find()十分类似,返回第一个符合条件的数组元素的位置,如果所有元素都不符合条件,则返回-1。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。 如果没有符合条件的元素返回 -1。
注意: findIndex() 对于空数组,函数是不会执行的。 findIndex() 并没有改变数组的原始值
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
console.log(ages.findIndex(checkAdult)) ;
}
myFunction()
//2
方法二和方法三,这两个方法都可以发现NaN,弥补了方法一IndexOf()的不足。
[NaN].indexOf(NaN)
//-1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
方法四:for()循环
遍历数组,然后 if 判断
var arr = [1, 10, 20, 30];
//传统for
for(let i=0; i<arr.length; i++) {
if(arr[i] === 查找值) {
...
}
}
// for...of
for(v of arr) {
if(v === 查找值) {
...
}
}
//forEach
arr.forEach(v=>{
if(v === 查找值) {
...
}
})
方法五:jquery的inArray方法
该方法返回元素在数组中的下标,如果不存在与数组中,那么返回-1,代码如下所示:
/**
* 使用jquery的inArray方法判断元素是否存在于数组中
* @param {Object} arr 数组
* @param {Object} value 元素值
*/
function isInArray(arr,value){
var index = $.inArray(value,arr);
if(index >= 0){
return true;
}
return false;
}
方法六、include()方法:
arr.includes(searchElement)方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。ES7新方法。
searchElement:必须。需要查找的元素值。
//例子 结果
[1, 2, 3].includes(2); //true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); //true
[1, 2, NaN].includes(NaN); //true
arr.includes(searchElement, fromIndex).fromIndex:可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
var arr = ['a', 'b', 'c'];
arr.includes('c', 3); //false
arr.includes('c', 100); // false
注意:如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索
// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
注意:如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
let arr = [1,2,3,4];
if(arr.includes(2)){
console.log("数组中有2");
}else{
console.log("数组中无2");
}
方法七、Jquery的$.each()
each() 方法为每个匹配元素规定要运行的函数。
var anArray = [‘one’,‘two’,‘three’];
$.each(anArray,function(n,value){
if(value==“two”){
…
}
}
);
function isStr(str, val) {
if (str.indexOf(val) != -1) {
return true
} else {
return false
}
}
var arr = ['123','456','789'];
console.log(isStr(arr, '456')); //true
console.log(isStr('45', '456')) //false
判断数组里面的对象是否包含一个字符串
function isObj(obj, val) {
var a;
obj.forEach(item=>{
if ( item instanceof Object) {
for (var i in item) {
if (item[i].includes(val)) {
a = item[i].includes(val)
return
}
}
}
})
return a
}
var arr2 = ['123', { a: '456' }, '789', { b: '015' }];
console.log(isObj(arr2, '456')); //true
console.log(isObj(arr2, '01')); //true
获取数组对象的某个属性集合
var data = [
{
a: 1,
b: 2,
c: 3
},
{
a: 4,
b: 5,
c: 6
},
{
a: 7,
b: 8,
c: 9
}
];
// 使用了 ES6 语法
data.map(item => item.a)
// 兼容的写法
data.map(function (item) {
return item.a;
});
获取数组中的对象中的所有数组对象
var array = [{ _id: 'main1',
target: [{ _id: '1', foo: ["bar"] }, { _id: '2', foo: ["bar"] } ]},
{_id: 'main2',
target: [ { _id: '3', foo: ["bar"] },{ _id: '4', foo: ["bar"]}]}]
// 获取 targets: [{ _id: '1', foo: [bar] },{ _id: '2', foo: [bar] },{ _id: '3', foo: [bar] },{ _id: '4', foo: [bar] }]
console.log( array.map(item => item.target) )
// [ [ { _id: '1', foo: [bar] } ] ]
//正确方法1:
var result = array.reduce((a,o) => a.concat(o.target), []);
//正确方法2:
let result = [].concat(...array.map(o => o.target));
数组对象多层数据的处理
多层数据,只保留两层
模拟数据:
let nav_list = [{
name: "权限管理",
code: "AuthorityManagement",
url: "",
component: "",
children: [{
name: "角色组管理",
code: "userRole",
url: "",
component: "",
children: [{
name: "添加角色组",
code: "addUserRole"
}]
},
{
name: "用户管理",
code: "userList",
url: "",
component: "",
children: [{
name: "编辑",
code: "edit"
}]
}
]
},
{
name: "系统管理",
code: "systemManagement",
url: "",
component: "",
children: [{
name: "应用管理",
code: "system",
url: "",
component: "",
children: [{
name: "应用详情",
code: "systemDetails"
}]
}]
}
]
用map() 方法遍历:
const result = nav_list.map(item => {
const children = item.children.map(every => {
return {
name: every.name,
code: every.code,
url: every.url,
component: every.component,
};
})
return {
...item,
children: children
};
})
最后得到的结果:
[{
name: "权限管理",
code: "AuthorityManagement",
url: "",
component: "",
children: [{
name: "角色组管理",
code: "userRole",
url: "",
component: ""
},
{
name: "用户管理",
code: "userList",
url: "",
component: ""
}
]
},
{
name: "系统管理",
code: "systemManagement",
url: "",
component: "",
children: [{
name: "应用管理",
code: "system",
url: "",
component: ""
}]
}
]
对象
判断对象中是否有某个属性
方法一: . 或 [ ]
当此属性的值为false、undefined、NaN、null、0、“” 时,此方法不适用。
if (obj2.a){
console.log("对象有此属性")
}else {
console.log("对象无此属性")
}
方法二: in运算符
如果某属性在指定对象或其原型链上则返回true,只需判断自身属性时,此方法不适用。
let obj2 = {a:1}
if ("a" in obj2){
console.log("对象或其原型链上有此属性")
}else {
console.log("对象或其原型链上无此属性")
}
方法三:obj.hasOwnProperty()
对象自身属性中含有某属性,返回true。
let obj2 = {a:1}
if (obj2.hasOwnProperty("a")){
console.log("对象上有此属性")
}else {
console.log("对象上无此属性")
}
动态获取/设置对象中某个属性
object={
“pro”:variate
}
var pro="pro";
obj[pro]=variate;
动态添加对象
// 第一种方法
var obj = { "name": "张三", "age": 18 }
var key = "height";
var value = 175;
obj[key] = value;
console.log(obj); // {name: "张三", age: 18, height: 175}
// 第二种方法
var obj1 = { "name": "张三", "age": 18 }
var value = 175;
obj1.height = value;
console.log(obj1); // {name: "张三", age: 18, height: 175}
// 第三种方法,扩展运算符
var obj1 = { "apple": 100, "pear": 200 };
var obj2 = { "cherry": 300 };
var obj3 = { ...obj1, ...obj2 };
console.log(obj3); // {apple: 100, pear: 200, cherry: 300}
// 第四种办法,合并多个对象 Object.assign
var obj1 = { a: "1" };
var obj2 = { b: "2" };
var obj3 = { c: "3" };
var obj = Object.assign(obj1, obj2, obj3);
console.log(obj); // {a: "1", b: "2", c: "3"}
console.log(obj1); // {a: "1", b: "2", c: "3"} //注意目标对象自身也会改变
console.log(obj2); //{b: "2"}
console.log(obj3); //{c: "3"}
字符串
字符串转数组
实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回
split
**用法:**string.split(separator,limit)
split方法把这个string分割成片段来创建一个字符串数组。可选参数limit可以限制被分割的片段数量。separator参数可以是一个字符串或一个正则表达式。如果
separator是一个空字符,会返回一个单字符的数组。
var a= "0123456" ;
var b=a.split( "" ,3); //b=["0","1","2"]
var s = "abc,abcd,aaa";
ss = s.split(",");// 在每个逗号(,)处进行分解。
判断是否包含某个字符串
包含返回下标 不包含返回-1
var i = str.indexOf("x")
最后一个下标的字符串
var i = str .lastIndexOf("")
转化大小写
str.toUpperCase() //转大写
str.tolowerCase()// 转小写
截取字符串
字符串.substr(“从哪开始”,“截取几个”)
str.substr(0,5)
循环拼接字符串
function getTextByJs() {
var str = "";
//根据name获取所有元素
var txts = document.getElementsByName("txt");
for (var i = 0; i < txts.length; i++) {
str += txts[i].value + ",";
}
//去掉最后一个逗号(如果不需要去掉,就不用写)
if (str.length > 0) {
str = str.substr(0, str.length - 1);
}
return str;
}
判断字符串是否包含某个值
方法一: indexOf() (推荐)
var str = "123"
console.log(str.indexOf("2") != -1); // true
封装
function isStr(str, val) {
if (str.indexOf(val) != -1) {
return true
} else {
return false
}
}
var str = '123456';
console.log(isStr(str, '456')); //true
方法二:match()方法
可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
var str = "123"
var reg = RegExp(/3/);
if(str.match(reg)){
//包含;
}
方法三: search()方法
可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
var str = "123"
console.log(str.search("2") != -1); // true
方法四: test()
RegExp对象的方法search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回 -1。
var str = "123"
var reg = RegExp(/3/);
console.log(reg.test(str) != -1); // true
方法五:exec()方法
用于检索字符串中指定的值。返回 true 或 false。
exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
var str = "123"
var reg = RegExp(/3/);
if(reg.exec(str)){
//包含;
}