当前位置：网站首页>ES6三点运算符、数组方法、字符串扩展方法

ES6三点运算符、数组方法、字符串扩展方法

2022-08-02 03:24:00 【yorup】

一、三点运算符使用

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

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

2:与解构使用

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

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

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

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

1:用...输出数组

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

2:合并数组

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

3:将类数组转为真正的数组

<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
</body>
<script>
             const divEle = document.getElementsByTagName("div");
			 const arr = [...divEle];
			 console.log(arr);

			 let str = "1234";
			 console.log([...str]);
</script>

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

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

三、Array对象的方法

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

let str = "1234";
const arr = Array.from(str);
console.log(arr);

在下面这种方法里面，对象里面的key和数组的下标对应，不能是其他值，length表示数组的长度

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

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

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

找数组包对象

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));

3:array.findindex找到符合条件的第一个元素的索引

const arr = [1,2,3,4];
console.log(arr.findIndex(item=>item==4));
			
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));

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

const arr = [1,2,3,4];
console.log(arr.includes(10));//有就返回true 没有就返回false

四、字符串扩展方法

1:模板字符串的用法 ${}

function demo(){
				return "end";
}
let es6 = "es6!";
let str = `hello,${es6},${demo()}`;
console.log(str);

2:startsWith和endsWith用法

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

3:repeat字符串重复次数

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

练习：

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

<body>
     <ul id="name">
        <li>张三，50</li>
    </ul>
    <hr>
    <h1>成绩及格的第一个同学为</h1>
    <p id="realname"></p>
    
    <script>

        var scores = [
            { name: '小李', score: 50 },
            { name: '小明', score: 40 },
            { name: '小红', score: 70 },
            { name: '小王', score: 90 },
        ]

        let str = '';
        for (let i = 0; i < scores.length; i++) {
            str = str + `<li>姓名：${scores[i].name}，分数：${scores[i].score}</li>`;
        }
        document.getElementById('name').innerHTML = str;
        let findscore = scores.find(item => item.score >= 60);
        // console.log(findscore);
        document.getElementById('realname').innerText = `姓名：${findscore.name}，分数：${findscore.score}`;
    </script>
</body>

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

<body>
    <ul id="persons"></ul>
    <input type="text" placeholder="请输入年龄" id="findage">
    <input type="button" id="findbtn" value="查找">
    <hr>
    <h1 id="res"></h1>
    <script>
    let findage = document.getElementById('findage');
        let findbtn = document.getElementById('findbtn');
        let res = document.querySelector('#res');
        var personsarr = [
            { name: '小李', age: 35 },
            { name: '小明', age: 23 },
            { name: '小红', age: 45 },
            { name: '小王', age: 12 },
        ];
        let str1 = '';
        let num;
        for (let i = 0; i < personsarr.length; i++) {
            str1 = str1+`<li>姓名：${personsarr[i].name}，年龄：${personsarr[i].age}</li>`;
        } 
        document.getElementById('persons').innerHTML = str1;
        findbtn.addEventListener('click',()=>{
            num = personsarr.findIndex(item=>item.age==findage.value);
            console.log(num);
            if (num==-1) {
                res.innerText = '查无此人';
            } else {
               res.innerText = `与${findage.value}相同年龄的人在第${num+1}个位置`
            }
        })
    </script>
</body>