Tabla de contenido
3.array.findindex(): descubre la posición de los miembros elegibles.
4.array.includes(): descubre si una matriz contiene un valor determinado.
1.array.map() devuelve una nueva matriz
3.reducción de array.reduce ()
1. Uso de cadenas de plantilla
2. Comienza con y termina con el uso
3.repetir tiempos de repetición de cadenas
Cuarto, el recorrido de la matriz.
1.for of atraviesa el valor de la matriz
3. Un grupo de información del personal se envía a la página para su visualización.
1. Método de objeto de matriz
1.Array.from(): convierte una pseudomatriz u objeto transitable en una matriz real (cadena, objeto, matriz de clases, conjunto, mapa, etc.)
let str = '1234';
const arr1 =Array.from(str);
console.log(arr1); // ['1', '2', '3', '4']
const Arr = {
2:'a',
3:'b',
length:4,
}
console.log(Array.from(Arr)); // [undefined, undefined, 'a', 'b']2.array.find(): devuelve el valor del primer elemento del array que cumple los criterios (matriz y objeto)
const arr = [1,2,3,4];//数组
let num = arr.find(item=>item==3);
console.log(num);//3
const arr1 = [ //对象
{realname:"张三1",age:18},
{realname:"张三2",age:17},
{realname:"张三3",age:19},
{realname:"张三4",age:17},
];
console.log(arr1.find(item=>item.age==17));//age: 17 realname: "张三2"3.array.findindex(): descubre la posición de los miembros elegibles.
const arr = [1,2,3,4]; //数组
console.log(arr.findIndex(item=>item==4)); //3
const arrobj = [ //对象
{realname:"张三1",age:18},
{realname:"张三2",age:19},
{realname:"张三3",age:15},
{realname:"张三4",age:14},
]
console.log(arrobj.findIndex(item=>item.age==19)); //14.array.includes(): descubre si una matriz contiene un valor determinado.
const arr = [1,2,3,4];
console.log(arr.includes(10));//有就返回true 没有就返回falseDos, extensión de matriz
1.array.map() devuelve una nueva matriz
const arr = [1,2,3,4];
const newarr = arr.map(item=>item+2);
console.log(newarr); //从新输出一个数组，不是改变原的数组2. filtrado array.filter()
const arr = [1,2,3,4,5,6,7];
const newarr = arr.filter(item=> item%2==0);
console.log(newarr);3.reducción de array.reduce ()
//total:即是初始值又是返回值
//currentValue:当前值
reduce第二个参数指定初始值
const arr = [1,2,3,4,5];
let sum = arr.reduce((total,currentValue)=>{
return total + currentValue;
},10) //可以指定初始值
console.log(sum);4.array.fill() relleno
let arr = [1,2,3,4,5,6,7];
arr.fill('x',1,3);
console.log(arr);//[1, 'x', 'x', 4, 5, 6, 7]Tres, extensión de cuerda
1. Uso de cadenas de plantilla
function demo(){
return "end";
}
let es6 = "es6!";
let str = `hello,${es6},${demo()}`;
console.log(str);//hello,es6,end2. Comienza con y termina con el uso
let str = "hello,es6!";
console.log(str.startsWith("hello"));//判断某个字符串前面是否包含hello 有就为true
console.log(str.endsWith("es6!"));//判断某个字符串后面是否包含es6 有就为true3.repetir tiempos de repetición de cadenas
console.log("hello".repeat(4));//hellohellohellohelloCuarto, el recorrido de la matriz.
1.for of atraviesa el valor de la matriz
const arr = ["a","b","c","d"];
for(v of arr){
console.log(v); //a,b,c,d
}2. para en índice transversal
const arr = ["a","b","c","d"];
for(let k in arr){
console.log(k); //0,1,2,3
}3.para el objeto transversal
const Person={realname:'zs',age:20}
const keys = Object.keys(Person);
for(let k of keys){
console.log(`k:${k}`,`v:${Person[k]}`)}; //k:realname v:zs k:age v:204. El uso de forEach
let arr = [1,2,3,4];
arr.forEach((item,index)=>{
console.log(`v:${item},k:${index}`);
}) //v:1,k:0 v:2,k:1 v:3,k:2 v:4,k:35. Ejemplos
1. Encuentre el primer estudiante con una puntuación aprobatoria en la prueba en un grupo de estudiantes y envíelo a la página.
<ul class="score"></ul>
<hr>
<h1 class="username"></h1>
<script>
let person=[
{realname:'张三',score:'40'},
{realname:'李四',score:'40'},
{realname:'王五',score:'60'},
{realname:'赵六',score:'90'}
]
let str = '';
let userName='';
for(i=0;i<person.length;i++){
str = str + `<li>姓名：${person[i].realname},分数：${person[i].score}</li>`
}
document.querySelector('.score').innerHTML=str;
userName = person.find(item=>item.score>=60)
document.querySelector('.username').innerHTML=`姓名：${userName.realname},分数：${userName.score}`
</script>
2. Busque la primera persona que sea mayor que la edad especificada (recibida en el cuadro de entrada de la página) y genere la ubicación de esta persona.
<ul class="age"></ul>
<hr>
<input type="text" placeholder="请输入年龄" value="" class="mark">
<input type="button" value="查询" class="btn">
<h1></h1>
<script>
let person=[
{realname:'张三',age:'15'},
{realname:'李四',age:'18'},
{realname:'王五',age:'19'},
{realname:'赵六',age:'20'}
]
let str = '';
for(i=0;i<person.length;i++){
str = str + `<li>姓名：${person[i].realname},分数：${person[i].age}</li>`
}
document.querySelector('.age').innerHTML=str;
btn = document.querySelector('.btn')
btn.onclick=function(){
let num;
input=document.querySelector('.mark').value;//获得输入的值
num = person.findIndex(item=>item.age==input)//得到下标
if(num==-1){
document.querySelector('h1').innerHTML='查无此人';
}else{
num++;
document.querySelector('h1').innerHTML=`位置是${num}`
}
}
</script>
3. Un grupo de información del personal se envía a la página para su visualización.
<body>
<table border="1">
<thead>
<tr>
<th>学生姓名</th>
<th>得分</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const arr1 = [
{ uname: '小红', score: 95 },
{ uname: '小蓝', score: 100},
{ uname: '小绿', score: 80 },
{ uname: '小明', score: 50 },
{ uname: '小花', score: 56 },
{ uname: '小草', score: 64 },
]
const arr2 = arr1.map(item=>{
return {...item}
});
let tbody = document.querySelector('tbody');
let str = '';
arr2.forEach(item => {
tbody.innerHTML = str += `<tr><td>${item.uname}</td><td>${item.score}</td></tr>`
})
</script>
</body>
4. Genere un grupo de información personal y la información enviada a la página es la siguiente (nombre, puntuación, 60 puntos por aprobar o no).
<body>
<table border="1">
<thead>
<tr>
<th>学生姓名</th>
<th>得分</th>
<th>是否及格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 3：输出一组人员信息，输出到页面信息如下（（姓名，分数，是否及格60分）;
const arr1 = [
{ uname: '小红', score: 95 },
{ uname: '小蓝', score: 100},
{ uname: '小绿', score: 80 },
{ uname: '小明', score: 50 },
{ uname: '小花', score: 56 },
{ uname: '小草', score: 64 },
]
const arr2 = arr1.map(item => {
let pass;
if (item.score < 60) {
pass = '是'
}
else {
pass = '否';
}
return { ...item, pass }
})
console.log(arr2);
let tbody = document.querySelector('tbody');
let str = '';
arr2.forEach(item => {
tbody.innerHTML = str += `<tr><td>${item.uname}</td><td>${item.score}</td><td>${item.pass}</td></tr>`
})
</script>
</body>