对象方法
++搜索、索引、过滤
indexOf() ：搜索首个数组出现的位置
var arr = ['不', '上', '班', '行', '不', '行'];
arr.indexOf('行') // 下标从0开始，返回数字3
arr.indexOf('行',3) // 指定下标从3开始，算上3，返回数字3
arr.indexOf('行',4) // 指定下标从4开始，算上4，返回数字5
arr.indexOf('啊') // 搜索不到时，返回数字-1
lastIndexOf() ：搜索最后出现的数组位置
var arr = ['不上班', '你养你', '啊', '？', '我养你', '啊','！'];
arr.lastIndexOf('啊') // 下标从0开始，返回数字5
arr.lastIndexOf('！') // 搜索不到时，返回数字-1
findIndex() ：返回符合传入测试（函数）条件的数组元素索引。
var fruit = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'orange' },
{ id: 3, name: 'grape' }
];
//find返回一整项，findIndex返回下标
var item = fruit.find(element => element.name == 'orange');
console.log(item); // { id: 2, name: 'orange' }
//根据对象某属性获得其在数组中的index
var index = fruit.findIndex(function(e) {
return e.name == 'orange';
});
console.log(index); // 1
//es6版
var index = fruit.findIndex(element => element.name == 'orange');
console.log(index); // 1
includes() ：判断一个数组是否包含一个指定的值。
var arr = ['apple', 'banana', 'cheery'];
arr.includes('apple');
// true
arr.includes('tomato');
// false
arr.includes('apple',1); //从下表1开始
// false
some() ：方法用于检测数组中的元素是否满足指定条件（函数提供）
var arr = [18, 19, 20];
arr.some((age)=>age==18);
// true
arr.some((age)=>age<18);
// false
every() ：方法用于检测数组所有元素是否都符合指定条件
var arr = [18, 18, 18];
arr.every((age)=>age==18);
// true
var arr = [18, 18, 19];
arr.every((age)=>age<=18);
// false
filter() ：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
var arr = [1,2,3,4,5];
arr.filter(item=>item>3)
// [4, 5]
++截取、提取
slice() ：添加或删除数组中的元素。
slice() 方法不会改变原始数组。参数一：可选。如果是负数则从数组尾部开始算起；参数二：可选。数组片断结束下标。如果没指定则提取到末尾。如果是负数则是从数组尾部开始算起的元素。
var arr = ['一万年太久', ',', '爱我', '就现在', '！'];
arr.slice(0, 4); // 从索引0开始到4（不包括4），返回["一万年太久", ",", "爱我", "就现在"]
arr.slice(2); // 返回["爱我", "就现在", "！"]
arr.slice(-2); // 从后面算起，返回空数组["就现在", "！"]
arr.slice(2,6); // 超出长度按数组长度算，返回["爱我", "就现在", "！"]
arr.slice(2,0); // 参数二为0时，返回空数组[]
arr.slice(2,-1); // 参数二为负数时结束从后面算起，返回["爱我", "就现在"]
arr.slice(-2,1); // 返回空数组[]
++添加、删除
splice() ：添加或删除数组中的元素（修改Array的“万能方法”）。
splice() 可传3个参数。参数一：必需。规定从何处添加/删除元素；参数二：可选。规定应该删除多少元素；参数三：可选。要添加到数组的新元素
var arr = ['小强', ',', '小强', '你怎么了','小强'];
// 只删除,不添加:
arr.splice(2, 2); // ["小强", "你怎么了"]
// 只添加,不删除:
arr.splice(5, 0, '！', '！'); // 返回[],因为没有删除任何元素
arr; // 原有数组已改变为["小强", ",", "小强", "你怎么了", "小强", "！", "！"]
// 从索引2开始删除3个元素,然后再添加一个元素:
arr.splice(1, 3, '啊'); // 返回删除了的元素[",", "小强", "你怎么了"]
arr; // 原有数组变为["小强", "啊", "小强"]
unshift()和push()：向数组开头添加一个、向数组末尾添加一个或更多元素
//头部添加
var arr =['需要吗？','不需要吗？','需要吗？'];
arr.unshift('喜爱一个人需要理由吗？') // 返回长度5
arr; // ["喜爱一个人需要理由吗", "？", "需要吗？", "不需要吗？", "需要吗？"]
//尾部添加
var arr =['喜爱一个人需要理由吗？','需要吗？','不需要吗？'];
arr.push('需要吗','？') // 返回长度5
arr; // ["喜爱一个人需要理由吗？", "需要吗？", "不需要吗？", "需要吗", "？"]
shift()和pop()：向数组开头删除一个、向数组末尾删除一个或更多元素
//头部删除
var arr =['你会爱上一个你讨厌的人吗？','会吗？','不会吗？'];
arr.shift(); // 返回已删除元素"你会爱上一个你讨厌的人吗？"
arr; // ["会吗？", "不会吗？"]
arr.shift();arr.shift();arr.shift(); // 数组空时shift不会报错，而是返回undefined
arr; // 返回[]
//尾部删除
var arr =['你会爱上一个你讨厌的人吗？','会吗？','不会吗？'];
arr.pop(); // 返回已删除元素"不会吗？"
arr; // ["你会爱上一个你讨厌的人吗？", "会吗？"]
arr.pop();arr.pop();arr.pop(); // 数组空时pop不会报错，而是返回undefined
arr; // 返回[]
++拼接
concat() ：连接两个或更多的数组
请注意，concat()方法并没有修改当前Array，而是返回了一个新的Array
var arr1 = ['只要你说我行，'];
var arr2 = ['就算全天下的人都说我不行，'];
var arr3 = ['我也不在乎。'];
arr1.concat(arr2,arr3) // ["只要你说我行，", "就算全天下的人都说我不行，", "我也不在乎。"]
arr1; // ["只要你说我行，"]
++转换成字符串
toString() ：无指定分隔符把数组转换为字符串
元素无指定分隔符进行分隔的，返回的字符串会用逗号分隔
var arr = ['那个人样子好怪','我也看到了','他好像一条狗']
arr.toString() // "那个人样子好怪,我也看到了,他好像一条狗"
join() ：有指定分隔符把数组转换为字符串
元素是通过指定的分隔符进行分隔的。
var arr = ['面子不是别人给的','是自己凑上来丢的']
arr.join() // 什么都不传默认用逗号分隔，返回"面子不是别人给的,是自己凑上来丢的"
arr.join('') // "面子不是别人给的是自己凑上来丢的"
arr.join('——') // "面子不是别人给的——是自己凑上来丢的"
++排序
reverse() 颠倒数组中元素的顺序
var arr = ['我','吻','你','准','不'];
arr.reverse() // ["不", "准", "你", "吻", "我"]
sort() 对数组的元素进行排序
+++数组排序
/***************排序数字****************/
var arr = [1, 100, 30, 20, 50, 40]
arr.sort() // 只能排序0-9以内的数组 结果[1, 100, 20, 30, 40, 50]
//所以需要封装一下
arr.sort(function(a,b){return a-b}); // [1, 20, 30, 40, 50, 100]
//写成ES6版
arr.sort((a, b) => a - b) //降序改为b-a
console.log(arr) // [1, 20, 30, 40, 50, 100]
//挂载到原型链的调用方式
Array.prototype.MySort = function() {
return this.sort((a, b) => a - b)
}
var arr = [1, 100, 30, 20, 50, 40]
arr.MySort() // 调用
console.log(arr) // [1, 20, 30, 40, 50, 100]
/***************排序英文**************/
var arr= ["apple", "banana", "cat", "dog"];
arr.sort(); // ["apple", "banana", "cat", "dog"]
+++对象型数组排序
//对象数组排序
var arr = [
{num:27,barrage:'第一'},
{num:0,barrage:'发条弹幕压压惊Σ(っ°Д°;)っ'},
{num:17,barrage:'(ノ°ο°)ノ前方高能预警'},
{num:7,barrage:'红红火火恍恍惚惚'}
];
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;//降序为value2 - value1
}
}
arr.sort(compare('num'))
/*
** 此时的arr为：
** [{num: 0, barrage: "发条弹幕压压惊Σ(っ°Д°;)っ"},
** {num: 7, barrage: "红红火火恍恍惚惚"},
** {num: 17, barrage: "(ノ°ο°)ノ前方高能预警"},
** {num: 27, barrage: "第一"}
*/
++循环遍历
forEach() ：无返回的循环遍历
| 语法 | array.forEach(function(currentValue, index, arr), thisValue) |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。 |
使用（这里就直接用ES6的语法了）
var arr = ['前面漆黑一片','什么也看不到','也不是',' 天亮后会很美的']
var str = new String;
arr.forEach((e,index)=>{
str += `<div id='${index}'>${e}</div>`
})
str;
/*
** 此时的str为：
** "<div id='0'>前面漆黑一片</div>
** <div id='1'>什么也看不到</div>
** <div id='2'>也不是</div>
** <div id='3'> 天亮后会很美的</div>"
*/
map() ：有返回的循环遍历
| 语法 | array.map(function(currentValue,index,arr), thisValue) |
|---|---|
| currentValue | 必需。当前元素 |
| index | 可选。当前元素的索引值。 |
| arr | 可选。当前元素所属的数组对象。 |
| thisValue | 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。 |
使用（这里就直接用ES6的语法了）
var arr = ['我那么喜欢你','你喜欢我一下会死啊？']
var str = new String;
str += arr.map((e,index)=>{
return `<div id='${index}'>${e}</div>`
})
str;
/*
** 此时的str为：
** "<div id='0'>我那么喜欢你</div>,
** <div id='1'>你喜欢我一下会死啊？</div>"
** 细心的同学应该会发现返回的盒子与盒子之间是有逗号分隔的
*/
//此时我们可以用join()来处理掉逗号
var arr = ['我那么喜欢你','你喜欢我一下会死啊？']
var str = new String;
str += arr.map((e,index)=>{
return `<div id='${index}'>${e}</div>`
}).join('')
str;
/*
** 此时的str为：
** "<div id='0'>我那么喜欢你</div>
** <div id='1'>你喜欢我一下会死啊？</div>"
*/
经过这两个js数组的数据遍历的列子不难看出forEach()和map()：
forEach()没有返回值而map()则通过return返回参数，
并且map()返回的值会以逗号的形式相连接。
flatMap() ：将结果压缩成一个新数组
var arr = [1, 2, [3], [4, 5], 6, []];
var newArr= arr.flatMap(num => num);
console.log(newArr); // [1, 2, 3, 4, 5, 6]
var arr = [1, 2, 3, 4];
arr.map(x => [x * 2]); // [[2], [4], [6], [8]]
arr.flatMap(x => [x * 2]); // [2, 4, 6, 8]
arr.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]
var arr = ["it's Sunny in", "", "California"];
arr.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]]
arr.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]
// 筛选出指定类型，并且按指定字段名输出
var arr = [
{ id: 1, type: 'fruits', Name: 'litchi', Price: '18' },
{ id: 2, type: 'vegetable', Name: 'water spinach', Price: '20' },
{ id: 3, type: 'fruits', Name: 'mango', Price: '19' }
]
var newArr1 = arr.filter(i => i.type === 'vegetable').map(i => ({ name: i.Name, price: i.Price }))
console.log(newArr1) // [{name: 'water spinach', price: '20'}]
const newArr2 = arr.flatMap(i => i.type === 'vegetable' ? [{text: i.Name, price: i.Price}] : [])
console.log(newArr2) // [{name: 'water spinach', price: '20'}]
reduce() ：将数组元素计算为一个值（从左到右）reduce
reduce求数组的和或者数组对象某值的和时非常好用，所以拿出来说下
// 求数组的和
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
// console.log(prev, cur, index);
return prev + cur;
})
console.log(sum); // 10
// 简写
var arr = [1, 2, 3, 4];
var sum = arr.reduce((prev, cur)=>prev + cur)
console.log(sum); // 10
/****************************************************/
// 求数组对象某值的和
var arr = [{num: 1}, {num: 2}, {num: 3}, {num: 4}];
var sum = arr.reduce(function(prev, cur, index, arr) {
// console.log(prev, cur, index);
return prev + cur.num;
}, 0); // 第二个参数可以指定初始值
console.log(sum);// 10
// 简写
var arr = [{num: 1}, {num: 2}, {num: 3}, {num: 4}];
var sum = arr.reduce((prev, cur) => prev + cur.num, 0);
console.log(sum);// 10
将数组的数据循环遍历到HTML中：需要学习的点这里(๑╹ヮ╹๑)ﾉ
需要看更多？
++菜鸟教程数组操作方法合集地址
++w3school数组操作方法合集地址
练手试题
题目、答案拷自牛客网，答案不是最简的，不过刚好可以运用到JS对象方法。
++ 数组去重（牛客网）
题目描述:
为 Array 对象添加一个去除重复项的方法
输入：
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’, ‘a’, NaN]
输出：
[false, true, undefined, null, NaN, 0, 1, {}, {}, ‘a’]
答案：(需要更多？)
Array.prototype.uniq = function () {
var resArr = [];
var flag = true;
for(var i=0;i<this.length;i++){
if(resArr.indexOf(this[i]) == -1){
if(this[i] != this[i]){ //排除 NaN
if(flag){
resArr.push(this[i]);
flag = false;
}
}else{
resArr.push(this[i]);
}
}
}
return resArr;
}
var arr = [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN];
arr.uniq()//[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']
++将字符串转换为驼峰格式（牛客网）
题目描述:
css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能
- 以 - 为分隔符，将第二个起的非空单词首字母转为大写
- -webkit-border-image 转换后的结果为 webkitBorderImage
输入：
‘font-size’
输出：
fontSize
答案：(需要更多？)
function cssStyle2DomStyle(sName) {
let sNameArr = sName.split(''); //["f", "o", "n", "t", "-", "s", "i", "z", "e"]
if(sNameArr.indexOf('-')==0){
sNameArr.splice(0,1)//删除连接符'-'
}
for(var i=1; i<sNameArr.length; i++){
if(sNameArr[i] == '-'){
sNameArr.splice(i,1);//删除连接符'-'
sNameArr[i]=sNameArr[i].toUpperCase();//将首个单词转换成大写
}
}
return sNameArr.join('');
}
cssStyle2DomStyle('font-size')//fontSize
扫一扫
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
