photo of the day
Table of contents
The first section: the extension method of array,
...the spread operator converts an array or object into a comma-separated sequence of arguments.
Convert a pseudo-array or iterable object to a real array.
Definition: Determine whether an array contains a given value and return a Boolean value.
The repeat method means to repeat the original string n times and return a new string.
Common methods of Array objects
Responsible for converting a bunch of text or variables into an array.
The first section: the extension method of array,
1 Expand syntax
...the spread operator converts an array or object into a comma-separated sequence of arguments.
Convert class array to array
let eledivs = document.getElementsByTagName('div');
eledivs = [...eledivs];//Array.prototype.slice.call(eledivs);
2 Array.from() method
Convert a pseudo-array or iterable object to a real array.
Example 1:
Array.from('12345') // [1,2,3,4,5]
Example 2:
let arr1 = {
1:'a',
2:'b',
'length':3
}
console.log(Array.from(arr1));//undefined ,a,b.
3 array.find() method
The find() method returns the value of the first element of the array that passes the test (judged within the function).
Example 1 :
let arr1 = [1,2,3,2];
let target = arr1.find( item => item==2);
console.log(target);//2, if not found, return undefined
Example 2 :
let person = [
{name: "Zhang San", age: 16},
{name: "Li Si", age: 17},
{name: "Wang Wu", age: 18},
]
let target = person.find((item,index)=>{return item.name=='张三'});
console.log(target.name);
4 array.findindex() method
Definition: Used to find out the position of the first array member that meets the conditions, if not found, return -1.
let and = [1, 5, 10, 15];
let index = ary.findIndex((item, index) => item > 9);
console.log(index); // 2
5 array.includes() method
Definition: Determine whether an array contains a given value and return a Boolean value.
let and = [1, 5, 10, 15];
console.log(ary.includes(5));//true
Array.from
1:字符串形式
let str = "abcde";
console.log(Array.from(str));
2:将对象形式数组 转为数组
const Num = {
0:"0",
1:"a",
2:"b",
length:3,
}
console.log(Array.from(Num));
3:将类数组转为数组
const liNode = document.querySelectorAll("li");
console.log(Array.from(liNode) instanceof Array);
二 array.find 查找符合条件的第一个值
const persons = [5,11,19,20];
const item = persons.find(item=>item>10)
console.log(item);
const persons = [
{realname:"张三",age:15},
{realname:"李四",age:19},
{realname:"王五",age:20},
{realname:"赵六",age:14},
]
const Item = persons.find(item=>item.age>18);
console.log(Item);//查找符合条件的值（当前的值,"李四对象"）
三：array.findindex
const persons = [5,11,19,20];
const index = persons.findIndex(item=>item>10)
console.log(index);//1
const persons = [
{realname:"张三",age:15},
{realname:"李四",age:19},
{realname:"王五",age:20},
{realname:"赵六",age:14},
]
const index = persons.findIndex(item=>item.age>18);
console.log(index);//1
四：判断某个数组是否包含某个值
const arr = [1,2,3,4];
console.log(arr.includes(4));//true
template string definition
1. Template string
console.log(`Name: ${Person.realname}, age: ${Person.age}, ${say()}`);
2，startsWith()、endsWith()
- startsWith(): Indicates whether the parameter string is at the head of the original string, and returns a Boolean value
- endsWith(): indicates whether the parameter string is at the end of the original string, and returns a Boolean value
Example:
let str = "hello,zs!";
console.log(str.startsWith("h"));//true
console.log(str.endsWith("!"));//true
console.log(str.endsWith("..."))//false
console.log(str.repeat(2));3，repeat()
The repeat method means to repeat the original string n times and return a new string.
console.log('hello'.repeat(2));//hellohello
Common methods of Array objects
2.5.1 Array map()
The map() method returns a new array whose elements are the processed values of the original array elements after calling the function.
Example 1 :
let arr = [2,3,4,5,6];
let newarr = arr.map(v=>v+2)
console.log(arr );//2,3,4,5,6
console.log(newarr);//4,5,6,7,8
Example 2 :
let arr = [2,3,4,5,6];
function ckarr(v){
return v+2;
}
console.log(arr.map(ckarr));
Summarize:
-- map() will not check for empty arrays.
-- map() does not alter the original array.
2.5.2 Array filter()
The filter() method creates a new array whose elements are checked by checking all elements in the specified array that meet the criteria.
let arr = [2,3,4,5,6];
function ckarr(v){
return v>3; // return the value that meets the conditions
}
console.log(arr.filter(ckarr));
Summarize:
-- filter () will not check for empty arrays.
-- filter () does not alter the original array.
2.5.3 reduce() method
The reduce() method accepts a function as an accumulator, and each value in the array (from left to right) is initially reduced to a final value.
--The callback function will not be executed for an empty array.
var scar = [1, 2, 3, 4];
var sum = arr.reduce(function(total, currentValue, index, arr) {
return total + currentValue;
},10);
console.log(sum);
2.5.4 Array.of()
Responsible for converting a bunch of text or variables into an array.
// let arr = Array.of(3,4,5,6);
// console.log(arr);
let arr =Array.of('Zhang San','Xiao Shuai','Xiao Hong');
console.log(arr);
let a=1,b=2,c=3;
let arr =Array.of(a,b,c);
console.log(arr);
2.5.4 fill()
Syntax: array.fill(value, start, end)
Value: Required. The filled value.
Start: Optional. Start filling the position.
End: optional. The position to stop filling (defaults to array.length).
Example:
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('x',2,5);
console.log(arr); //[0, 1, "x", "x", "x", 5, 6, 7, 8, 9]
2.5.5 Array traversal
For..of traversal
for(let item of person){
console.log(item);
}
Description: item is the value of the current traversal
For..in traversal
for(let index in person){
console.log(index);
}
Description: index is the index of the current traversal
forEach()
method is called for each element of the array and passes the element to the callback function.
person.forEach(function(value,index){
console.log(value,index);
})
1:map遍历方法
const arr = [1,2,3,4];
//map会遍历数组 并对数组进行加工 返回新的数组（不会对空数组进行遍历）
const newarr = arr.map(item => item*10);//放大10倍
console.log(newarr);
2:filter 满足符合条件的所有元素
const arr = [10,23,28,29];
const newarr = arr.filter(item=>item>20);
console.log(newarr);
3:reduce缩减("累加器")
const arr = [1,2,3,4,5];
//total 即是初始值又是返回值,current为当前值
// 第二个参数指定初始值
let sum = arr.reduce(
(total,current)=>{
console.log(`初始值：${total},当前值：${current}`);
return total+current;
}
,10)
console.log(sum);
4:fill 填充数组
const arr = [0,1,2,3,4,5,6];
console.log(arr.fill("x",1,3));
5:of把一堆文本转为数组
let a = 1;
let b = 2;
console.log(Array.of(a,b));