参考资料:《学习JavaScript数据结构与算法》
这本书可以和这个博客一起看:https://github.com/wengjq/Blog
数据结构和算法动态可视化: https://visualgo.net/zh
数组还可以查看参考资料:https://juejin.im/post/5c923e936fb9a070b96f06ff
1.创建和初始化数组
new Array();
new Array(7);
new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday')
[];
['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
2.数组元素的添加和删除
末尾元素的添加删除:push、pop
首位元素的添加和输出:unshift、shift
末尾添加元素:
var numbers = [1,2,3,4,5,6];
numbers[numbers.length] = 7;
数组首位插入元素(实现unshift功能):
//因为往后移一位,此时宽度就是numbers.length,所以有numbers[i]
var numbers = [0,1,2,3,4,5,6,7,8,9]
for(var i=numbers.length;i>=0;i--){
numbers[i] = numbers[i-1];
}
numbers[0] = -1
数组首位删除元素(实现shift功能):
var numbers = [0,1,2,3,4,5,6,7,8,9]
for(var i=0;i<numbers.length;i++){
numbers[i]=numbers[i+1];
}
我们注意最后一次是a[10]=a[9],此时a[9]是undefined,整个数组长度不变,只是最后一个是undefined。
3.在任意位置添加或删除元素
我们可以使用splice方法,简单地通过指定位置/索引,就可以删除相应位置和数量的元素:
//从下标开始,删除
[1, 2, 3, 4, 6, 6]
num.splice(1,2)
[1, 4, 6, 6]
splice还有更多参数,我们可以用于添加元素:
num = [1,2,3,4,5,6,7,8,9]
num.splice(1,0,2,2,3,3)
num
[1,2,2,3,3,2,3,4,5,6,7,8,9]
4.JavaScript数组方法参考
JavaScript数组方法:concat、every、filter、forEach、join、indexOf、lastindexOf、map、reverse、slice、some、sort、toString、valueOf
ECMAScript 6新增的数组方法:@@iterator、copyWithin、entries、includes、find、find Index、fill、from、keys、of、values
ES5中数组方法
//concat
arr = ["George","John","Thomas"];
arr2 = ["James","Adrew","Martin"]
arr.concat(arr2)
["George", "John", "Thomas", "James", "Adrew", "Martin"]
//join
arr = ["George","John","Thomas"];
arr.join()
"George,John,Thomas"
arr.join('.')
"George.John.Thomas"
//slice(如果没有指定end,那么到数组结束的所有元素)
arr = ["George","John","Thomas"];
arr.slice(1)
["John","Thomas"]
arr1 = ["George", "John", "Thomas", "James", "Adrew", "Martin"]
arr1.slice(2,4)
["Thomas","James"]
//indexOf
var str="Hello world!"
str.indexOf("Hello") 0
str.indexOf("World") -1
str.indexOf("world") 6
//toString() 有点类似默认join效果
["George", "John", "Thomas"]
arr.toString()
"George,John,Thomas"
//valueOf 和toString类似,将数组作为字符串返回
toString 将数组作为字符串返回
valueOf 和toString类似,将数组作为字符串返回
下面是some、every、filter、forEach、map(迭代器函数)
var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var isEven = function (x) {
// 如果x是2的倍数,就返回true
console.log(x);
return (x % 2 == 0) ? true : false;
};
//some
numbers.some(isEven);
1
2
true
//every
numbers.every(isEven);
false
//forEach(不需要判断,返回true/false,不需要返回值)
numbers.forEach(function(x){
console.log((x % 2 == 0));
});
false
true
false
true
false
true
false
true
false
true
false
true
false
true
false
//map
numbers.map(isEven)
[false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]
//filter
numbers.filter(isEven);
[2, 4, 6, 8, 10, 12, 14]
some 对数组中的每一项运行给定函数,如果任一项返回true,则返回true.
every 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true
forEach 对数组中的每一项运行给定函数。这个方法没有返回值
map 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
filter 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
ES5中数组迭代器函数总结:
forEach()无返回值,map()和filter()返回新数组,every()和some()返回布尔值
forEach(),用于遍历数组,用于对数组每一项进行操作,在原数组上操作,无返回值
map(),用于遍历数组,用于对数组每一项进行操作,返回处理之后的新数组
可以看到,该方法与forEach()的功能类似,只不过map()具有返回值,会返回一个新的数组,这样处理数组后也不会影响到原有数组。
every(),用于判断数组中的每一项元素是否都满足条件,返回一个布尔值、some(),用于判断数组中的是否存在满足条件的元素,返回一个布尔值
filter(),用于筛选数组中满足条件的元素,返回一个筛选后的新数组。
参考文章:https://www.jianshu.com/p/b728253c90b5
ES6数组方法:
ECMAScript 6新增的数组方法:@@iterator、copyWithin、entries、includes、find、find Index、fill、from、keys、of、values
[ ].slice.call():https://www.jianshu.com/p/ae57baecc57d
先放结论:[].slice.call(arguments)能将具有length属性的对象转成数组。
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
只要是部署了 Iterator 接口的数据结构,Array.from都能将其转为数组。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
Array.of
方法用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
fill方法使用给定值,填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
copyWithin方法复制数组中的一系列元素到同一个数组指定的起始位置。
Array.prototype.copyWithin(target, start = 0, end = this.length)
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
总结:
Array.from方法根据已有的数组创建一个新数组。
Array.of方法根据传入的参数创建一个新数组。
fill方法用静态值填充数组。
copyWithin方法复制数组中的一系列元素到同一个数组指定的起始位置。
数组实例的find方法,用于找出第一个符合条件的数组成员。
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
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"
数组实例的 includes(),如果数组里存在某个元素,includes方法会返回true,否则返回false。
console.log(numbers.includes(15));
console.log(numbers.includes(20));
总结:
indexof 返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1。
find 数组实例的find方法,用于找出第一个符合条件的数组成员,返回找到的数组成员。
findIndex 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
include 如果数组里存在某个元素,includes方法会返回true,否则返回false。
toString 将数组作为字符串返回。
value 和toString类似,将数组作为字符串返回。
join 默认情况下,join和上面两个方法一样,’,'组成的字符串,但是join可以指定连接符。
5.数组中排序
主要是两个方法:reverse()和sort()
1.reverse()反向输出数组:
[1, 2, 2, 3, 3, 2, 3, 4, 5, 6, 7, 8, 9]
num.reverse()
[9, 8, 7, 6, 5, 4, 3, 2, 3, 3, 2, 2, 1]
2.不加参数的sort():
[15, 14, 13, 12, 11, 10, 2, 3, 4, 5, 6, 7, 8, 9, 1];
nums.sort();
(15) [1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]
因为sort方法在对数组做排序时,把元素默认成字符串进行相互比较。
3.a-b、b-a的sort():
numbers.sort(functioni(a,b){
return a-b;
});
[1, 2, 2, 3, 3, 2, 3, 4, 5, 6, 7, 8, 9]
num.sort(function(a,b){return a-b})
[1, 2, 2, 2, 3, 3, 3, 4, 5, 6, 7, 8, 9]
[1, 2, 2, 3, 3, 2, 3, 4, 5, 6, 7, 8, 9]
num1.sort(function(a,b){return b-a})
[9, 8, 7, 6, 5, 4, 3, 3, 3, 2, 2, 2, 1]
a-b升序排序,b-a降序
4.对对象类型的数组排序
var friends = [
{name: 'John', age: 30},
{name: 'Ana', age: 20},
{name: 'Chris', age: 25}
];
function comparePerson(a, b){
if (a.age < b.age){
return -1
}
if (a.age > b.age){
return 1
}
return 0;
}
console.log(friends.sort(comparePerson));
在这个例子里,最后会输出Ana(20), Chris(25), John(30)。
5.对字符串排序
var names =['Ana', 'ana', 'john', 'John'];
console.log(names.sort());
你猜会输出什么?答案是这样的:
["Ana", "John", "ana", "john"]
既然a在字母表里排第一位,为何ana却排在了John之后呢?这是因为JavaScript在做字符比较的时候,是根据字符对应的ASCII值来比较的。
现在,如果给sort传入一个忽略大小写的比较函数,将会输出[“Ana”, “ana”, “John”,
“john”]:
names.sort(function(a, b){
if (a.toLowerCase() < b.toLowerCase()){
return -1
}
if (a.toLowerCase() > b.toLowerCase()){
return 1
}
return 0;
});