1、切片 slice()
slice 方法返回一个 Array 对象,参数:start,截取数组开始下标。end截止的下标,但不包括end元素。注意:第二个参数是截止的下标,第一次使用误以为是截取的长度。
用法:一个数组['a','b','c','d','e','f','g','h']
,我们需要从d开始节取到最后得到一个新的数组
const arr = ['a','b','c','d','e','f','g','h'];
//注意:第二个元素是截止的下标,不是长度,并且要截取的长度如果超过数组长度的话,会自动截取到数组最后一个元素,
//并不会出现数组越界的情况!!!
newArr = arr.slice(3,8);
console.log(newArr);
// ["d", "e", "f", "g", "h"]
2、splice()
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
// 注释:该方法会改变原始数组。
// arrayObject.splice(index,howmany,item1,.....,itemX)
// 参数说明:
// index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
// item1, ..., itemX 可选。向数组添加的新项目。
const arr2 = ["a", "b", "c", "d", "e", "f"];
2.1、删除第0个元素
// console.log(arr2.splice(0, 1), arr2); // ['a'] [ 'a', 'b', 'c', 'd', 'e', 'f' ]
2.2、在第0个元素处添加一个新元素,没有删除任何元素
// console.log(arr2.splice(0, 0, 'w'), arr2); // [] [ 'w', 'a', 'b', 'c', 'd', 'e', 'f' ]
2.3、在第0个元素处删除元素'a',然后添加一个新元素 'w'
// console.log(arr2.splice(0, 1, 'w'), arr2); // [ 'a' ] [ 'w', 'b', 'c', 'd', 'e', 'f' ]
3、split()
用于把一个字符串分割成字符串数组(其实是字符串的方法),与数组的join()
方法正好相反
3.1、把字符串分割成字符串数组
const chars = "abcdefghijklmn".split("");
console.log(chars); // [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n' ]
3.2、取出下面字符串中的code值
const str = "http://adcfeg.xicp.net:1900/tbid/share.html?#/code=sdedop"
const splitArr = str.split("code=");
console.log(splitArr)
// [ 'http://adcfeg.xicp.net:1900/tbid/share.html?#/', 'sdedop' ]
console.log(splitArr[1])
// 'sdedop'
4、join()
用于把数组中的所有元素放入一个字符串。
// arrayObject.join(separator)
// separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
const arr3 = ["Wind", "Rain", "Fire"];
// console.log(arr3.join('|')); // Wind|Rain|Fire
// console.log(arr3.join('')); // WindRainFire
console.log(arr3.join()); // Wind,Rain,Fire
5、map()
,基本用法跟forEach()
方法类似,即原数组被“映射”成对应新数组,原数组不会被改变,可以对数组对每个元素进行操作,最终返回操作之后对数组。也可以利用每个对象的值创建多个标签元素
5.1 、得到一个数组对每个元素进行平方运算
const data = [1, 2, 3, 4];
const arrayOfSquares = data.map(function (item) {
return item * item;
});
console.log(arrayOfSquares);
// [ 1, 4, 9, 16 ];
5.2、在实际使用的时候,我们可以利用map方法方便获得对象数组中的特定属性值们,在组装成新的数据格式来使用。
const users = [
{name: "宁缺", "email": "ningque@email.com"},
{name: "三师姐", "email": "shijie@email.com"},
{name: "叶红鱼", "email": "yu@email.com"}
];
const emails = users.map(user => user.email)
console.log(emails)
//[ 'ningque@email.com', 'shijie@email.com', 'yu@email.com' ]
也可以返回二维数组
const emails = users.map(user => [user.name ,user.email])
console.log(emails)
// [ [ '宁缺', 'ningque@email.com' ],
// [ '三师姐', 'shijie@email.com' ],
// [ '叶红鱼', 'yu@email.com' ] ]
5.3、 返回标签(视图)数组
<View style={styles.container}>
{
this.props.data.map(name => {
return (
<TouchableOpacity key={name} onPress={() => this.props.onPress(name)}
style={[isFirst(name) ? first : styles.item, isActive(name) ? styles.itemActive : {}]}>
<View>
<Text style={[styles.text, isActive(name) ? {color: '#fff'} : {}]}>{name}</Text>
</View>
</TouchableOpacity>
);
})
}
</View>
5.4 、横向打印数组内容,在打印数据的时候比使用循环打印更直观一些,这个是受同事的启发,一时没想起来,其实还是自己掌握的不牢固
let arrA = [10, 3, 4, 12, 2, 6, 11, 9, 33, 15];
console.log(arrA.map(item=>item));
// [ 10, 3, 4, 12, 2, 6, 11, 9, 33, 15 ];
注意: map()函数需要return值,如果没有数组所有项都被映射成undefined。
map() 不会对空数组进行检测
map() 不会改变原始数组。
参考: https://www.cnblogs.com/xuan52rock/p/4460949.html
6 、sort()
let arr1 = [10, 3, 4, 12, 2, 6, 11, 9, 33, 15];
// 使用解构的写法避免原数组arr1被改变
arr2 = [...arr1].sort((data1, data2)=>{
return data1-data2;
})
console.log("arr1++++", arr1)
console.log("arr2++++", arr2)
// arr1++++ [ 10, 3, 4, 12, 2, 6, 11, 9, 33, 15 ]
// arr2++++ [ 2, 3, 4, 6, 9, 10, 11, 12, 15, 33 ]
假设array.sort((a, b)=>{})
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
7、reverse()
颠倒数组中元素的顺序
8、pop()
删除并返回数组的最后一个元素
9、shift()
删除并返回数组的第一个元素
10、unshift()
向数组的开头添加一个或更多元素,并返回新的长度
总结: 数组的那些方法会导致原数组改变?push()、pop()、splice()、
网友评论