剩余参数、数组对象的方法和字符串扩展的方法

最新推荐文章于 2024-08-17 14:22:19 发布

呦呦鹿鸣~@

最新推荐文章于 2024-08-17 14:22:19 发布

阅读量294

点赞数 6

分类专栏： ES6 文章标签：大数据

本文链接：https://blog.csdn.net/qq_53841687/article/details/125788795

版权

ES6 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的剩余参数，如用于函数传不定参数、与解构结合使用，以及与数组解构结合使用。此外，还探讨了扩展运算符的应用，包括输出数组、合并数组、转换类数组为真正数组，并提供了相关练习。同时，文章还讲解了数组对象的方法Array.from()、array.find()、array.findIndex()和array.includes()，以及字符串扩展的方法，如模板字符串、startsWith和endsWith以及repeat。最后，文章提供了一些实践性的编程练习题。

摘要由CSDN通过智能技术生成

2. 创建一个函数：用扩展运算符计算两个数的和

三、arr 对象的方法

1 Array.from() 将伪数组或可遍历对象转换为真正的数组

2 array.find返回数组符合条件第一个元素的值

3 array.findindex()：找出返回符合条件的第一个元素的索引，如果没有找到返回-1

4 array.includes()：找出某个数组是否包含给定的值，返回布尔值。

四、字符串扩展的方法

1:模板字符串的用法

2:startsWith和endsWith用法

3:repeat字符串重复次数

五、练习

1.找到一组同学中考试分数及格的第一个同学并输出到页面上

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>

呦呦鹿鸣~@

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
剩余参数、数组对象的方法和字符串扩展的方法

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数。为前缀的，则在函数被调用是，该形参会成为一个数组，数组中的元素都是传递给该函数的多出来的实参的值。//b为数组2,3,4。demo({realname'张三',age20});{realname'张三2',age22},{realname'张三3',age33},{realname'张三2',age22},{realname'张三3',age33},...
复制链接

扫一扫