ES6学习——三点运算符、array对象的方法、字符串扩展方法

目录

一、剩余参数

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

2、剩余参数与解构使用

二、扩展运算符（...）

1、输出数组。

2、合并两个数组。

3、将类数组（实现了Iterator 接口的）转为真正的数组(节点，字符串)。

三、Array的扩展方法

1、展开语法

2、Array.from()：将伪数组或可遍历对象转换为真正的数组（字符串，对象，类数组，set，map等）

3、array.find()：返回数组符合条件的第一个元素的值(数组与对象)

4、array.findindex()：找出符合条件的成员的位置。

5、array.includes()：找出某个数组是否包含给定的值。

四、string 的扩展方法

1、反引号定义模板

2、模板字符串换行

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

4、startsWith()、endsWith()

5、repeat() 重复一个字符串，返回新字符串。

---

一、剩余参数

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

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

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

2、剩余参数与解构使用

       数组

let numarr = [1,2,3];
let [num1,...numx] = numarr;
console.log(num1);//1
console.log(numx);// [2,3]


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

       函数传对象

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

二、扩展运算符（...）

1、输出数组。

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

2、合并两个数组。

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

3、将类数组（实现了Iterator 接口的）转为真正的数组(节点，字符串)。

        const divEle = document.getElementsByTagName("div");
        const arr = [...divEle];
        console.log(arr); //[div,div,div]

        let str = "1234";
        console.log([...str]); //['1','2','3','4']

练习：
1、复制数组。

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

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

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

三、Array的扩展方法

1、展开语法

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

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

2、Array.from()：将伪数组或可遍历对象转换为真正的数组（字符串，对象，类数组，set，map等）

        let str = '1234';
        const arr = Array.from(str);
        console.log(arr);  // ['1','2','3','4']

        const Arr = {
            2:"a",
            3:"b",
            length:4,
        }
        console.log(Array.from(Arr)); // [undefined,undefined ,'a','b']

3、array.find()：返回数组符合条件的第一个元素的值(数组与对象)

        const arr = [1, 2, 3, 4];
        let num = arr.find(item => item == 3);
        console.log(num); // 3

        // 找数组包对象
        const arr = [
            { realname: "张三1", age: 18 },
            { realname: "张三2", age: 17 },
            { realname: "张三3", age: 19 },
            { realname: "张三4", age: 17 },
        ];
        console.log(arr.find(item=> item.age==17));  // { realname: "张三2", age: 17 }

4、array.findindex()：找出符合条件的成员的位置。

定义：用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

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

5、array.includes()：找出某个数组是否包含给定的值。

定义：判断某个数组是否包含给定的值，返回布尔值。

let ary = [1, 5, 10, 15];
console.log(ary.includes(5));//ture

四、string 的扩展方法

1、反引号定义模板

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

2、模板字符串换行

        let result = {
			name: '张三',
			age: 28,
			sex: '男'
		}
		let html = ` 
		<div>
			<span>${result.name}</span>
			<span>${result.age}</span>
			<span>${result.sex}</span>
		</div> `;
		console.log(html);

 

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

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

4、startsWith()、endsWith()

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

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

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

5、repeat() 重复一个字符串，返回新字符串。

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

console.log("hello".repeat(4)); //hellohellohellohello

练习：

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

 <ul id="scores"></ul>
    <hr>
    <h4 id="score">第一个及格的同学</h4>
    <p id="find">姓名: , 分数: </p>

    <script>
        const scores = [
            { realname: "张三", score: 40 },
            { realname: "李四", score: 60 },
            { realname: "王五", score: 70 },
            { realname: "赵六", score: 80 },
        ];

        let str = "";
        let findname = "";

        for (var i = 0; i < scores.length; i++) {
            str = str + `<li>姓名：${scores[i].realname},分数：${scores[i].score}</li>`;
        }
        document.getElementById("scores").innerHTML = str;
        Findname = scores.find(item => item.score >= 60);
        document.getElementById("find").innerHTML = `姓名：${Findname.realname} , 分数：${Findname.score}`;


    </script>

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

  <ul id="persons"></ul>
    <hr>
    <input placeholder="输入要查找的年龄" type="text" id="findage" value=""/>
    <input type="button" value="查找" id="findbtn"/>
    <h4>与<span id="age"></span>年龄相等的人的位置是：<span id="num"></span></h4>

    <script>
        const persons = [
            { realname: "张三", age: 14 },
            { realname: "李四", age: 19 },
            { realname: "王五", age: 18 },
            { realname: "赵六", age: 20 },
        ];

        let str = "";
        let findbtn = document.getElementById("findbtn");
        let findage;

        for (var i = 0; i < persons.length; i++) {
            str = str + `<li>姓名：${persons[i].realname} , 年龄：${persons[i].age}</li>`;
        }
        document.getElementById("persons").innerHTML = str;

        findbtn.addEventListener("click", () => {
            let num;
            
            findage = document.getElementById("findage").value;
            num = persons.findIndex(item => item.age == findage);
            if (num == -1) {
                document.querySelector('h4').innerHTML = `查无此人`;
            } else {
                document.querySelector('h4').innerHTML = `与年龄为${findage}相等的人的位置是：${num}`;
            }
        })


    </script>