增加/删除 (改变原数组) push(), unshift(), pop(), shift()
const numbers = [2, 2, 2];
numbers.push(6);//[2, 2, 2, 6]
numbers.unshift(1);//[1, 2, 2, 2, 6]//at the beginning
numbers.pop();//return [1, 2, 2, 2] delete last one
numbers.shift();//return [2, 2, 2] delete first one
numbers[1] = 3;//[2, 3, 2]
numbers[6] = 6;//[2, 3, 2, empty × 3, 6]
slice(), 会改变原数组
arrayName.splice(startIndexNumber, deleteCount, addItem1, addItem2, ...);
const newArray = arrayName.slice(arrayIndexStart, arrayIndexEnd);
//return a new array.
concat()
Return (copy) a new array
after add items at the end. 不改变原数组
const newArray = arrayName.concat([newItem1, newItem2, ...]);
return the index number. *not work for object.
arrayName.indexOf(itemValue); //from first one, return index-number
arrayName.lastIndexOf(itemValue); //from last one
finding stuff in object.
find()
dose not create a copy.
const inventory = [
{name: 'apples', quantity: 2},
{name: 'cherries', quantity: 5}
];
const result = inventory.find( (item,index, items) => {
return item.name === 'cherries'} );
const resultIndex = inventory.findIndex( (item,index, items) => {
return item.name === 'cherries'} );
console.log(result, resultIndex);
// { name: 'cherries', quantity: 5 } , 1
查找 If cant find, return '-1'.
console.log(arrayName.includes(itemValue));//return true/false
排序
const arrayName = [71, 22, 103, 54, 65, 86];
const tax = 0.1;
const newArray = arrayName.sort((a, b)=> {
if (a > b){
return 1;
} else if (a === b){
return 0;
} else {
return -1;
}
});
console.log(newArray);
//[22, 54, 65, 71, 86, 103]
const arrayName = [1, 2, 3, 4, 5, 6];
const tax = 0.1;
const newArray = [];
arrayName.forEach((element, idx, elements)=>{
const newElement = {index: idx, number: element + tax};
newArray.push(newElement);
})
console.log(newArray);
//[{index: 0, number: 1.1}, {index: 1, number: 2.1}, {…}, {…}, {…}, {…}]
循环,返回新数组,不改变原数组
const arrayName = [1, 2, 3, 4, 5, 6];
const tax = 0.1;
const newArray = arrayName.map((element, idx, elements)=>{
const newElement = {index: idx, number: element + tax};
return newElement;
});
console.log(newArray);
//[{index: 0, number: 1.1}, {index: 1, number: 2.1}, {…}, {…}, {…}, {…}]
筛选,返回新数组,不改变原数组
const arrayName = [71, 22, 103, 54, 65, 86];
const filterArray = arrayName.filter((element, index, elements) => {
return element > 50;
})
console.log(`copy:`,filterArray);//[71, 103, 54, 65, 86]
处理
const arrayName = [1.1, 2.2, 3, 4, 5, 6];
const sum = arrayName.reduce((prevValue, curValue, index , Elements) => {
return prevValue + curValue;
}, 0);
console.log(sum);//21.3x
With all these useful array methods you learned about, it's important to understand how you can combine them. Let's take map()
and reduce()
as an example:
const originalArray = [{price: 10.99}, {price: 5.99}, {price: 29.99}];
const transformedArray = originalArray.map(obj => obj.price); // produces [10.99, 5.99, 29.99]
const sum = transformedArray.reduce((sumVal, curVal) => sumVal + curVal, 0); // => 46.97
Of course, you could skip the map step and just add the extraction logic to reduce()
:
const originalArray = [{price: 10.99}, {price: 5.99}, {price: 29.99}];
const sum = originalArray.reduce((sumVal, curVal) => sumVal + curVal.price, 0); // => 46.97
But let's say you have a more complex extraction logic and hence want to split this into multiple method calls. Or you have a re-usable map function which you want to be able to use in different places of your app. Then you can still write the initial example in a more concise way if you leverage method chaining:
const originalArray = [{price: 10.99}, {price: 5.99}, {price: 29.99}];
const sum = originalArray.map(obj => obj.price)
.reduce((sumVal, curVal) => sumVal + curVal, 0); // => 46.97
We call .reduce()
directly on the result of map()
(which produces an array, that's why this is possible). Hence we can avoid storing the mapped array in a separate constant or variable that we might not need in any other place.
string to array
const data = "Sydney;Canberra;Melbourne";
const array = data.split(";");
console.log(array);//["Sydney", "Canberra", "Melbourne"]
const nameFragments = ['Max','Zhang'];
const name = nameFragments.join(' ');
console.log(name);//Max Zhang
spread for copy or
const numbers = [1, 2, 3];
const newNumber = [...numbers];
numbers.push(4);
console.log(numbers, newNumber);
//[1, 2, 3, 4] //[1, 2, 3]
console.log(Math.min(...numbers));//1
�Copy:
包括上面的所有复制,object的refer都是相同的。(详情看堆内存详解)
改变原有array的object值,复制的array也会随之改变。(引申:浅拷贝,深拷贝)
const name = [{age : 1},{age : 2}];
const newName = [...name];
name.push({age : 3});
console.log(name, newName);
//[{age: 1}, {age: 2}, {age: 3}]
//[{age: 1}, {age: 2}]
name[0].age = 4;
console.log(name, newName);
//[{age: 4}, {age: 2}, {age: 3}]
//[{age: 4}, {age: 2}]
const nameFragments = ['Max','Zhang', 'male', 28];
const [firstName, LastName, ...others] = nameFragments;
console.log(firstName,LastName, others);
//Max Zhang ["male", 28]
3 major iterable data structures.(Array, Set, Map)
???????????????????????????????????
*两个array变成一个object:{array1 : array2}
*array 前面的property名字变换:
const array = [1, 2, 3, 4, 5, 6];
const arrayMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
const mapArray = arrayMonth.map( (val)=> {
return { [array[idx] + `月`]: val};
});
console.log(mapArray);
// 0: {1月: "Jan"}
// 1: {2月: "Feb"}
// 2: {3月: "Mar"}
// 3: {4月: "Apr"}
// 4: {5月: "May"}