目录
1 Array.from() 将伪数组或可遍历对象转换为真正的数组
3 array.findindex():找出返回符合条件的第一个元素的索引,如果没有找到返回-1
4 array.includes():找出某个数组是否包含给定的值,返回布尔值。
2.找出大于指定年龄(页面input框接收)的第一个人,并输出这个人的位置
一、 剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。
如果一个函数的最后一个形参是以 ...
为前缀的,则在函数被调用是,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。所以...
的传参又称为三点运算符。
1.
函数传不定参数,验证数组的长度。
function demo(a,...b){
console.log(a,b); //b为数组 2,3,4
}
demo(1,2,3,4);
2. 与解构使用
let [a,...b]=[1,2,3,4];
console.log(a,b); //1 [2,3,4]
3. 与数组解构使用 函数传对象
function demo({realname,age}){
console.log(realname,age); //张三 20
}
demo({realname:'张三',age:20});
二、扩展运算符(...)
...扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
1. 用...输出数组
const arr1=[1,2,3];
console.log(...arr1); //1 2 3,相当于下面的代码
console.log(1,2,3);
2. 合并数组
const arr1=[1,2,3];
const arr2=[4,5,6];
const arr=[...arr1,...arr2];
console.log(arr); //[1,2,3,4,5,6]
3. 将类数组转为真正的数组
<div>1</div>
<div>2</div>
<div>3</div>
const divEle=document.getElementsByTagName('div');
const arr=[...divEle];
console.log(arr); //[div, div, div]
let str='1234';
console.log(...str); //1 2 3 4
console.log([...str]); //["1", "2", "3", "4"]
4 . 练习
1.复制数组
const arr1=[1,2,3];
const arr2=[...arr1];
arr1[0]=5;
console.log(arr1,arr2); //[5, 2, 3] [1, 2, 3]
2. 创建一个函数:用扩展运算符计算两个数的和
function demo(a,b){
return a+b;
}
const arr1=[1,2];
const arr2=[3,4];
console.log(demo(...arr1)); //3
console.log(demo(...arr2)); //7
三、arr 对象的方法
1 Array.from() 将伪数组或可遍历对象转换为真正的数组
let str='123';
const arr =Array.from(str);
console.log(arr); //["1", "2", "3"]
const arr={
2:'a',
3:'b',
length:4,
}
console.log(Array.from(arr)); //[undefined, undefined, "a", "b"]
const arr={
0:'a',
1:'b',
length:2,
}
console.log(Array.from(arr)); //["a", "b"]
2 array.find返回数组符合条件第一个元素的值
const arr=[1,2,3,4];
let num=arr.find(item=>item==3);
console.log(num); //3
//找数组包对象
const arr=[
{realname:'张三1',age:11},
{realname:'张三2',age:22},
{realname:'张三3',age:33},
{realname:'张三4',age:44},
]
console.log(arr.find(item=>item.age==33)); //{realname: "张三3", age: 33}
3 array.findindex():找出返回符合条件的第一个元素的索引,如果没有找到返回-1
const arr=[1,2,3,4];
console.log(arr.findIndex(item=>item==4)); //3
const arr=[
{realname:'张三1',age:11},
{realname:'张三2',age:22},
{realname:'张三3',age:33},
{realname:'张三4',age:44},
]
console.log(arr.findIndex(item=>item.age==33)); //2
4 array.includes():找出某个数组是否包含给定的值,返回布尔值。
const arr=[1,2,3,4];
console.log(arr.includes(1)); //true
console.log(arr.includes(4)); //true
console.log(arr.includes(5)); //false
console.log(arr.includes(7)); //false
四、字符串扩展的方法
1:模板字符串的用法
function demo(){
return 'end';
}
let str=`${demo()}`;
console.log(str); //end
let es6='es6!';
let str1=`hello,${es6},${demo()},`;
console.log(str1); //hello,es6!,end,
2:startsWith和endsWith用法
- startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
- endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值
let str='hello,word!';
console.log(str.startsWith('hello')); //true
console.log(str.endsWith('!')); //true
console.log(str.startsWith('llo')); //false
console.log(str.endsWith('es6')); //false
3:repeat字符串重复次数
repeat方法表示将原字符串重复n次,返回一个新字符串
console.log('es6! '.repeat(3)); //es6! es6! es6!
console.log('es6!'.repeat(3),`${'end '.repeat(2)}`); //es6!es6!es6! end end
let es6='esr!';
console.log(`'es6!'.repeat(3),${'end '.repeat(2)}`); //'es6!'.repeat(3),end end
五、练习
1.找到一组同学中考试分数及格的第一个同学并输出到页面上
<ul id="fs">
<li>1</li>
</ul>
<p id="p">页面</p>
<script>
const lis=[
{name:'张三',fens:50},
{name:'李四',fens:59},
{name:'王武',fens:78},
{name:'周六',fens:90},
]
let str='';
let str1='';
let fs=document.getElementById('fs');
let p=document.querySelector('#p');
for(var i=0;i<lis.length;i++){
str=str+`<li>姓名:${lis[i].name},分数:${lis[i].fens}</li>`;
}
console.log(str);
fs.innerHTML=str;
console.log(lis.findIndex(item=>item.fens>=60));
str1=lis.find(item=>item.fens>=60);
console.log(str1);
p.innerHTML=`姓名:${str1.name},分数:${str1.fens}`;
</script>
2.找出大于指定年龄(页面input框接收)的第一个人,并输出这个人的位置
<ul id="people"></ul>
<input type="text" id="ages" value="" placeholder="请输入年龄">
<input type="button" value="查找" id="btn">
<p></p>
<script>
let people=document.querySelector('#people');
let p=document.querySelector('p');
let btn=document.querySelector('#btn');
let ages=document.querySelector('#ages');
const lis=[
{realname:'张三',age:19},
{realname:'李四',age:20},
{realname:'王五',age:23},
{realname:'赵六',age:27},
]
let str='';
for(var i=0;i<lis.length;i++){
str=str+`<li>姓名:${lis[i].realname},年龄:${lis[i].age}</li>`;
}
people.innerHTML=str;
btn.addEventListener('click',()=>{
ages=ages.value;
let num=lis.findIndex(item=>item.age==ages);
if(num==-1){
p.innerHTML='查无此人';
}else{
num+=1;
p.innerHTML=`与${ages}年龄相等的人的位置是:${num}`;
}
})
</script>