Js数组增删改查的方法以及他们的区别,
增:
push()方法:在数组最后一个添加参数,并隐含返回数组长度;
let arrs= []; // 创建一个数组
let count = arrs.push("a", "b");
console.log(arrs) // ['a','b']
console.log(count ) // 2
用法: arr.push(‘小李’);//其中加’,'可插入多条数据
unshift()方法: 在数组最前面添加参数,并隐含返回数组长度
let arrs= ['c']; // 创建一个数组
let count = arrs.unshift("a", "b");
console.log(arrs) // ['a','b','c']
console.log(count ) // 2
用法:arr.unshift(‘小李’); //其中加’,'可插入多条数据
splice()替换/添加/删除 一段元素
必填。整数,指定在什么位置添加/删除元素,使用负值指定从数组末尾开始的位置。
选填。要删除的元素数。如果设置为 0,则不会删除任何项目。
选填。要添加到数组中的新元素。
let arrs= ['a','b','c']; // 创建一个数组
let count = arrs.splice(1,0,"d", "e"); // 从索引为1开始,删除0个元素,添加 'd','e'
console.log(arrs) // ['a','d','e','b','c']
console.log(count ) // [] 新数组,包含删除的元素(如果有)。
concat()在被拼接的数组的末尾拼接任意数量的元素或数组
let arrs= ['a','b','c']; // 创建一个数组
let arrs2= ['d','e','f']; // 创建一个数组
let newArr=arrs.concat('d',arrs2,['g','h']) //拼接会按照先后顺序
console.log(newArr) // ['a', 'b', 'c', 'd', 'd', 'e', 'f', 'g', 'h']
删:
1.shift();方法:删除数组最前面的一条数据,并将删除的东西返回给我
let arrs= ['a','b','c']; // 创建一个数组
let count = arrs.shift();
console.log(arrs) // ['b','c']
console.log(count ) // a
2.pop();方法: 删除数组最后面的一条数据,并将删除的东西返回给我
let arrs= ['a','b','c']; // 创建一个数组
let count = arrs.pop();
console.log(arrs) // ['a','b']
console.log(count ) // c
3. splice()方法: 替换/添加/删除 用法: splice (‘想删除的索引元素’,’删除的元素数量‘)
let arrs= ['a','b','c']; // 创建一个数组
let count = arrs.splice(0,1); //从索引0开始 ,删除一个
console.log(arrs) // ['b','c']
console.log(count ) // a
4.slice()截取数组某一截 ,返回新的数组
两个参数 :
可选。整数,指定从哪里开始选择(第一个元素的索引为 0)。
可选。整数,指定结束选择的位置。
let arrs= ['a','b','c']; // 创建一个数组
let count = arrs.slice(0,1);
let count2 = arrs.slice(); // 默认0开始,末尾结束
console.log(arrs) // ['a','b','c']
console.log(count ) // ['a']
console.log(count2 ) // ['a','b','c']
改:
splice()方法: 一次替换多个值 用法:arr.splice(|想更改的下角标|,|想替换的几个元素 如两个|
slice()
截取数组某一截 ,返回新的数组
两个参数 :
可选。整数,指定从哪里开始选择(第一个元素的索引为 0)。
可选。整数,指定结束选择的位置。
let arrs= ['a','b','c']; // 创建一个数组
let count = arrs.slice(0,1);
let count2 = arrs.slice(); // 默认0开始,末尾结束
console.log(arrs) // ['a','b','c']
console.log(count ) // ['a']
console.log(count2 ) // ['a','b','c']
,‘替换内容1’,‘替换的内容2’)
查:
indexOf()返回元素在数组中的的索引值,没有则返回-1 所以可以根据返回的索引是否为-1 就可判断该数组是否包含该元素
let numbers = ['a', 'b', 'c', 'd', 'e', 'f'];
let i = numbers.indexOf('d')
console.log(i); // 3
includes()返回元素是否存在该元素的布尔值,存在为true,否则false
let numbers = ['a', 'b', 'c', 'd', 'e', 'f'];
let i = numbers.includes('d')
console.log(i); // true
find()
通过遍历,返回第一个符合条件的元素,剩下的不会检测直接跳过
参数:
回调函数 回调函数有三个参数:
1.当前的元素 2.当前元素的索引【选填】 3.当前元素的所属数组对象【选填】
1
const nums = [1, 2, 3, 4, 5, 6];
const num = nums.find((item, index, arr) => {
return item >= 5 // 返回 大于等于 5 的数
});
console.log(num); // 5
-哪个方法既可以进行添加也可以进行删除和修改,
splice()方法: 替换/添加/删除
-自己封装一个方法实现此方法,
1.输入一个值,返回其数据类型
function type(para) {
return Object.prototype.toString.call(para)
}
2.数组去重
function unique1(arr) {
return [...new Set(arr)]
}
function unique2(arr) {
var obj = {};
return arr.filter(ele => {
if (!obj[ele]) {
obj[ele] = true;
return true;
}
})
}
function unique3(arr) {
var result = [];
arr.forEach(ele => {
if (result.indexOf(ele) == -1) {
result.push(ele)
}
})
return result;
}
3.字符串去重
String.prototype.unique = function () {
var obj = {},
str = '',
len = this.length;
for (var i = 0; i < len; i++) {
if (!obj[this[i]]) {
str += this[i];
obj[this[i]] = true;
}
}
return str;
}
###### //去除连续的字符串
function uniq(str) {
return str.replace(/(\w)\1+/g, '$1')
}
-总结数组遍历的方法,并说出它们的区别,
foreach遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE
//1 没有返回值
arr.forEach((item,index,array)=>{
//执行代码
})
//参数:value数组中的当前项, index当前项的索引, array原始数组;
//数组中有几项,那么传递进去的匿名回调函数就需要执行几次
map有返回值 map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
arr.map(function(value,index,array){
//do something
return XXX
})
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,ary ) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10]; 原数组拷贝了一份,并进行了修改
console.log(ary);//-->[12,23,24,42,1]; 原数组并未发生变化
filter不会改变原始数组,返回新数组
var arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))
every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。返回布尔值
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
var stu = [
{
name: '张三',
gender: '男',
age: 20
},
{
name: '王小毛',
gender: '男',
age: 20
},
{
name: '李四',
gender: '男',
age: 20
}
]
function getStu(element){
return element.name == '李四'
}
stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}
findIndex返回索引值,如果没有符合条件的元素则返回-1
findIndex 不会改变数组对象。
[1,2,3].findIndex(function(x) { x == 2; });
// Returns an index value of 1.
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.
keys,values,entries
ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
-什么样的数据可以使用拓展运算符转换成数组,
遍历器接口的对象,都可以用扩展运算符转为真正的数组。
以遍历到DOM节点为例:
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
1
2
但是对于没有部署遍历器Iterator的对象,扩展运算符则束手无策:
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr = [...arrayLike];
console.log(arr);//TypeError: arrayLike is not iterable
-拓展运算符的遍历原理是什么
是否是数组,数组直接浅拷贝属性
是否实现Iterator接口,检测方式包括是否有实现Symbol.iterator、@@Iterator、是否是其他可迭代对象等(叫可迭代也不合适好像)、或者对象本身是否是Arguments
都不满足的话抛出类型错误。
-其他可以将数据转换成数组的方法有哪些?
Array.from()方法 使用场景: 该方法只可以将类似数组的对象和可遍历的对象转换成数组.
// 这里的对象得有伪索引,数组长度
let arr = {
0: 'a',
1: 'b',
length: 2
}
a = Array.from(arr)
console.log(a) // [ 'a', 'b' ]
扩展运算符... 使用场景:1)Dom操作返回的NodeList. 2) 函数的arguements对象.
1)Dom操作返回的NodeList
// 获取所有的P标签
let a = document.querySelectorAll('p');
// 将p标签转换成数组,并过滤到p中文字长度小于等于100的标签
a = Array.from(a).filter(n => n.textContent.length > 100) // (4) [p, p, p, p]
2)函数的arguements对象.
//
function foo() {
return [...arguments]
}
console.log(foo(1, 2, 3, 4, 5, 6)) //[ 1, 2, 3, 4, 5, 6 ]
split("")方法 使用场景:将字符串转换成数组
let arr = Array.from('hello')
console.log(arr) // [ 'h', 'e', 'l', 'l', 'o' ]
Array.of() 使用场景:将一组值转换成数组
// 只有一个参数时也会返回新的数组,Array()不会.
let arr = Array.of(1)
console.log(arr);
// 返回新的数组
let arr = Array.of(1, 2, 3, 4, 5)
console.log(arr);// [ 1, 2, 3, 4, 5 ]
-如何实现数组的去重操作(将知道的方法都写出来,可以使用数组的方法实现),
1.双循环去重
双重for(或while)循环是比较笨拙的方法,它实现的原理很简单:先定义一个包含原始数组第一个元素的数组,然后遍历原始数组,将原始数组中的每个元素与新数组中的每个元素进行比对,如果不重复则添加到新数组中,最后返回新数组;因为它的时间复杂度是O(n^2),如果数组长度很大,那么将会非常耗费内存
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = [arr[0]]
for (let i = 1; i < arr.length; i++) {
let flag = true
for (let j = 0; j < res.length; j++) {
if (arr[i] === res[j]) {
flag = false;
break
}
}
if (flag) {
res.push(arr[i])
}
}
return res
}
2.indexOf方法去重1
数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res,然后调用indexOf方法对原来的数组进行遍历判断,如果元素不在res中,则将其push进res中,最后将res返回即可获得去重的数组
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = []
for (let i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) === -1) {
res.push(arr[i])
}
}
return res
}
3.indexOf方法去重2利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,如果不等则说明该元素是重复元素
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
return Array.prototype.filter.call(arr, function(item, index){
return arr.indexOf(item) === index;
});
}
4.相邻元素去重 这种方法首先调用了数组的排序方法sort(),然后根据排序后的结果进行遍历及相邻元素比对,如果相等则跳过改元素,直到遍历结束
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
arr = arr.sort()
let res = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
res.push(arr[i])
}
}
return res
}
5.利用对象属性去重 创建空对象,遍历数组,将数组中的值设为对象的属性,并给该属性赋初始值1,每出现一次,对应的属性值增加1,这样,属性值对应的就是该元素出现的次数了
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
let res = [],
obj = {}
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
res.push(arr[i])
obj[arr[i]] = 1
} else {
obj[arr[i]]++
}
}
return res
}
6.set与解构赋值去重
ES6中新增了数据类型set,set的一个最大的特点就是数据不重复。Set函数可以接受一个数组(或类数组对象)作为参数来初始化,利用该特性也能做到给数组去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
return [...new Set(arr)]
}
7.Array.from与set去重
Array.from方法可以将Set结构转换为数组结果,而我们知道set结果是不重复的数据集,因此能够达到去重的目的
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
return Array.from(new Set(arr))
}
-说说数组冒泡排序和快速排序的原理。
冒泡排序:数组中前一位元素和后一位元素依次比较,如果前一位元素大于(或小于)后一位元素,就交换两元素的位置,这样就能保证最后在每一轮比较过后,后面的元素值是最大的。
快速排序:从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现在了最小索引处。