JavaScript常用的数组操作对象方法

对象方法

++搜索、索引

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

++截取、提取

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() 对数组的元素进行排序

+++数组排序

/***************排序数字****************/
let 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)
}
let 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"]
arr.reverse();//["dog", "cat", "banana", "apple"]

+++对象型数组排序

//对象数组排序
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 += `
${e}
`
})
str;
/*
** 此时的str为：
** "
前面漆黑一片
** 
什么也看不到
 
** 
也不是
** 
 天亮后会很美的
"
*/
	

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 `
${e}
`
})
str;
/*
** 此时的str为：
** "
我那么喜欢你
,
** 
你喜欢我一下会死啊？
"
** 细心的同学应该会发现返回的盒子与盒子之间是有逗号分隔的
*/

//此时我们可以用join()来处理掉逗号
var arr = ['我那么喜欢你','你喜欢我一下会死啊？']
var str = new String;
   str += arr.map((e,index)=>{
    return `
${e}
`
}).join('')
str;
/*
** 此时的str为：
** "
我那么喜欢你
** 
你喜欢我一下会死啊？
"
*/
	

经过这两个js数组的数据遍历的列子不难看出forEach()和map()：
forEach()没有返回值而map()则通过return返回参数，
并且map()返回的值会以逗号的形式相连接。

将数组的数据循环遍历到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 驼峰格式，请完成此转换功能

1. 以 - 为分隔符，将第二个起的非空单词首字母转为大写
2. -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

字符串操作对象方法

JavaScript常用的字符串操作对象方法