• ES6 - 剩余参数，Array的扩展方法，String的扩展方法

    目录

    一，剩余参数

    1.传不定参数，验证数组的长度。

    2.剩余参数与解构使用

    3.与数组解构使用 函数传对象

      二，Array的扩展方法

      1.扩展语法

       1.1 用...输出数组

    1.2   合并数组

    1.3 将类数组转为真正的数组

     2.小练习

    2.1  复制数组

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

     3.Array.from()方法  

    4. Array.find() 方法

    5.Array.findindex()方法

    6.Array.includes()方法

    三，字符串扩展方法

    1.反引号定义模板

    2.模板字符串换行

    3.模板字符串中调用函数

    4.startsWith()、endsWith()的基本使用方法

    5.repeat字符串重复次数

    6.小例题

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

    2：找出大于指定年龄（页面input框接收）的第一个人，并输出这个人的位置 

    一，剩余参数

    剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数。

    1.传不定参数，验证数组的长度。

    1. 			function demo(a,...b){
    2. 				console.log(a,b);//b为数组 2,3,4,5
    3. 			}
    4. 			demo(1,2,3,4,5);

    2.剩余参数与解构使用

    1. 			 let [a,...b] = [1,2,3,4,5];
    2. 			 console.log(a,b);//1  [2,3,4,5]

    3.与数组解构使用 函数传对象

    1. 			 function demo({username,password}){
    2. 				 console.log(username,password);//root  123456
    3. 			 }
    4. 			 demo({username:'root',password:'123456'});

      二，Array的扩展方法

      1.扩展语法

           ... 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

       1.1 用...输出数组

    1.              const arr = [1,2,3];
    2. 			 console.log(...arr); //1,2,3,相当于下面的代码
    3.              console.log(1,2,3);

    1.2   合并数组

    1. 			 const  arr1 = [1,2,3];
    2. 			 const  arr2 = [4,5,6];
    3. 			 const  arr3 = [...arr1,...arr2];
    4. 			 console.log(arr3);// [1,2,3,4,5,6]

    1.3 将类数组转为真正的数组

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 		<div>1div>
    10. 		<div>2div>
    11. 		<div>3div>
    12. 				
    13. 		<script>
    14. 			
    15. 			 const divEle = document.getElementsByTagName("div");
    16. 			 const arr = [...divEle];
    17. 			 console.log(arr);
    18.  
    19. 			 let str = "1234";
    20. 			 console.log([...str]);
    21. 			 
    22. 		script>
    23. 		
    24. 	body>
    25. html>

     2.小练习

    2.1  复制数组

    1. 			 const arr1 = [1,2,3];
    2. 			 const arr2 = [...arr1];
    3. 			 arr2[0]=5;
    4. 			 console.log('这是arr1:'+ arr1+'\n'+'这是arr2:'+arr2);

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

    1. 			function demo(a,b){
    2. 				return a+b;
    3. 			}
    4. 			const arr1 = [1,2];
    5. 			const arr2 = [4,5];
    6. 			
    7. 			console.log(demo(...arr1));
    8. 			console.log(demo(...arr2));

     

     3.Array.from()方法  

    将伪数组或可遍历对象转换为真正的数组。

    1.     Array.from('12345') // [1,2,3,4,5]
    2.   
    3.     let  arr1 = {
    4. 			1:'a',
    5. 			2:'b',
    6. 			'length':3
    7.         }
    8.         console.log(Array.from(arr1));//undefined ,a,b.

    4. Array.find() 方法

    find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

    1.         let arr1 = [1,2,3,2];
    2.         let target = arr1.find( item => item==2);
    3.         console.log(target);//2,如果未找到，返回undefined
    4.  
    5.             
    6.  
    7.  
    8.  
    9.         let person = [
    10.         
    11. 			    {name:"张三",age:16},
    12. 			    {name:"李四",age:17},
    13. 			    {name:"王五",age:18},
    14. 		    ]
    15. 		
    16.         let target = person.find((item,index)=>{return item.name=='张三'});
    17.         console.log(target.name);//张三

    5.Array.findindex()方法

    找到符合条件的第一个元素的索引

    1. let ary = [1, 5, 10, 15];
    2. let index = ary.findIndex((item, index) => item > 9); 
    3. console.log(index); // 2

    6.Array.includes()方法

    找出某个数组是否包含给定的值。有就返回true 没有就返回false

    1. 			const arr = [1,2,3,4];
    2. 			console.log(arr.includes(10));//false

    三，字符串扩展方法

    使用反引号定义 let name = `张三`;

    1.反引号定义模板

    1. let name = '张三'; 
    2. let sayHello = `hello,my name is ${name}`; // hello, my name is Lee

    2.模板字符串换行

    1. 		let result = {
    2. 			name: '张三',
    3. 			age: 28,
    4. 			sex: '男'
    5. 		}
    6. 		let html =
    7. 			` 
    8. 		
    9. 				${result.name}
    10. 				${result.age}
    11. 				${result.sex}
    12.
  • `
  • console.log(html);

    • 3.模板字符串中调用函数

    1. 		const sayName = function () {
    2. 			return '张三';
    3. 		};
    4. 		let greet = `${sayName('张三')} ，你好！`;
    5. 		console.log(greet); //张三 ，你好！

    4.startsWith()、endsWith()的基本使用方法

    - startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

    - endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

    1.         let str = "hello,es6!";
    2. 			console.log(str.startsWith("hello"));
    3.             //判断某个字符串前面是否包含hello 有就为true
    4. 			console.log(str.endsWith("es6!"));//与startsWith相反

    5.repeat字符串重复次数

    repeat方法表示将原字符串重复n次，返回一个新字符串。

    console.log('hello'.repeat(2));//hellohello

    6.小例题

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.  
    13.     <ul id="scores">ul>
    14.  
    15.     <hr>
    16.  
    17.     <h1>第一个及格的学生是:h1>
    18.     <p id="findname">p>
    19.     <br>
    20.  
    21.     <script>
    22.         const scores = [
    23.             { realname: '张三', score: 23 },
    24.             { realname: '李四', score: 36 },
    25.             { realname: '王五', score: 63 },
    26.             { realname: '赵六', score: 88 },
    27.             { realname: '小明', score: 66 }
    28.         ]
    29.  
    30.         let str = '';
    31.         let findName = '';
    32.  
    33.         for (let i = 0; i < scores.length; i++) {
    34.             str = str + `
    35. 姓名：${scores[i].realname},分数：${scores[i].score}
      36. `
  • document.getElementById('scores').innerHTML = str
  • }
  • findName = scores.find(item => item.score >= 60);
  • document.getElementById('findname').innerHTML = `姓名：${findName.realname}
    分数：${findName.score}`
  • script>
  • body>
  • html>

    • 2：找出大于指定年龄（页面input框接收）的第一个人，并输出这个人的位置 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.  
    13.     <ul id="person">ul>
    14.     <hr>
    15.     <input placeholder="输入要找的人的年龄" type="text" id="findage" value="" />
    16.     <input type="button" value="查找" id="btn" />
    17.     
    18.     <h1>h1>
    19.     <script>
    20.         const persons = [
    21.             { realname: "小高", age: 16 },
    22.             { realname: "小明", age: 15 },
    23.             { realname: "小红", age: 14 },
    24.             { realname: "小丽", age: 19 },
    25.         ];
    26.  
    27.         let str = '';
    28.         let btn = document.getElementById('btn');
    29.         let findage;//接收查找的值
    30.  
    31.         for (var i = 0; i < persons.length; i++) {
    32.             str = str + `
    33. 姓名:${persons[i].realname},年龄:${persons[i].age}
      34. `
  • }
  • document.querySelector('#person').innerHTML = str;
  • btn.addEventListener('click', () => {
  • let num;
  • findage = document.querySelector('#findage').value;
  • num = persons.findIndex(item => item.age == findage);
  • // console.log(num)
  • if (num == -1) {
  • document.querySelector('h1').innerHTML = `查无此人`;
  • } else {
  • num = num + 1;
  • document.querySelector('h1').innerHTML = `与${findage}年龄相等的位置是：${num}`
  • }
  • })
  • script>
  • body>
  • html>

  • 相关阅读:
    模式分类识别 | Python实现基于Xboost的股票走势识别预测
    【C++】继承 ① ( 面向对象特点 | 类之间的关系 | 单继承与多继承 | 继承关系特性 )
    【C语言拓展】缓冲区、结构体大小计算、命令行参数
    有什么运动耳机比较好、适合运动的耳机推荐
    Tomcat - mac - 启动/关闭
    K8S搭建共享存储(以MySQL例)
    跨境电商怎么用Facebook引流—扬帆际海
    造轮子之种子数据
    一文搞懂底层mysql 索引那些事
    axios和fetch
  • 原文地址：https://blog.csdn.net/qq_52499703/article/details/125773438