三点运算符又称剩余参数或者扩展运算符
1：函数传不定参数，验证数组的长度。
// function demo(a,...b){
// console.log(a,b)
// }
//可以验证数组的长度 比如console.log(a,b.length)//获取他的长度
// demo(1,2,3,4,5)
//结果为：1 Array(4)
2:与解构使用
// let [a,...b]=[1,2,3,4,5]
// console.log(a,b)
//最终结果为 1 (4) [2, 3, 4, 5] 记得这里的三点运算符前面不用加数组变量名称 否则会报错
3:与数组解构使用 函数传对象
// function demo({username,password}){
// console.log(username,password)
// }
// demo({username:'root',password:'1234'})
//最终解构成root 1234
4:用...输出数组
// const arr=[1,2,3,4]
// console.log(...arr)
//最终结果为 1 2 3 4
5:合并数组
// const arr1=[1,2,3,4]
// const arr2=[5,6,7,8]
// const arr3=[...arr1,...arr2]
// console.log(arr3)
最终结果为 [1, 2, 3, 4, 5, 6, 7, 8]
6:将类数组转为真正的数组
//第一步先获取div的属性值
// const tark = document.querySelectorAll('div')
// //这里需要定义一个数组的变量名称
// const arr=[...tark]
// console.log(arr)
//最终结果为 [div, div, div]
与上内容不同型
// const str="12345"
// console.log([...str])
//最终结果为 ['1', '2', '3', '4', '5']
7，练习复制
// const arr=[1,2,3,4,5]
// let arr1=[...arr]
// console.log(arr1)
//最终结果为 [1, 2, 3, 4, 5]
与上内容不同型
// arr1[0]=7;
// console.log(arr1);
最终结果为 [7, 2, 3, 4, 5]
将上面的内容通过打印对比区别
console.log(arr,arr1)
最终结果为 [1, 2, 3, 4, 5] [7, 2, 3, 4, 5]
结论：复制是不会改变原本的内容，只会改变当前的内容
8：创建一个函数：用扩展运算符计算两个数的和
// function demo(a,b){
// return a+b
// }
// let tem=demo(1,2)
// console.log(tem)
//最终结果为 3
与上内容不同型
// function demo(a,b){
// return a+b
// }
// const arr1=[1,2]
// const arr2=[3,4]
// console.log(demo(...arr1),demo(...arr2))
最终结果为 3 7
补充点：Array的扩展方法 ...迭代器 三点运算符具有迭代器
ES6内置对象
1:Array.from() 将伪数组或可遍历对象转换为真正的数组
// const str = {
// 0: 'a',
// 1: 'b',
// length: 4,
// }
// console.log(Array.from(str));
结果如下：
//返回的值为
//0: "a"
// 1: "b"
// 2: undefined
// 3: undefined
// length: 4
与上内容不同型
// let str='1234'
// const arr=Array.from(str)
// console.log(arr);
打印其结果为 ['1', '2', '3', '4'] 将字符串转变为数组
2:array.find返回数组符合条件第一个元素的值
// const arr=[1,2,3,4,5]
// let num=arr.find(item=>item==2);
// console.log(num)
最终结果为2
3:array.every( )每一个都符合条件，有一个不符合的那么返回的是false ，如果都符合那么返回的是true
const arr1 = [10,20,30];
const flag =arr1.every((item)=>{
return item>=10;
})
console.log(flag);
最终结果为： true 若不是每一个都是大于指定的数值那么就返回false
与上内容不同型
// const arr1=[3,5,7,8]
// let nums=arr1.find(item=>item==3);
// console.log(nums)
//最终结果为 3
与上内容不同型
找数组包对象
// const arr=[
// {realname:"张三1",age:19},
// {realname:"张三28",age:14},
// {realname:"张三3",age:15},
// {realname:"张三4",age:17},
// ]
// console.log(arr.find(item=>item.age==14))
//最终结果为 {realname: '张三28', age: 14}
3:array.findindex找到符合条件的第一个元素的索引
// const arr=[
// {realname:"张三1",age:19},
// {realname:"张三28",age:14},
// {realname:"张三3",age:15},
// {realname:"张三4",age:17},
// ]
// //item是形参 arr.findIndex //注意findIndex中的I要大写否则会报错
// console.log(arr.findIndex(item=>item.age==15));
//最终结果为 2 打印初始是以0开始，按照数组下标计算
4：array.includes()：找出某个数组是否包含给定的值。
// const arrt=[1,2,3,4,5,6]
// console.log(arrt.includes(5))//直接在里面加值（这里不需要使用箭头函数）
//符合条件的返回的是true 不符合的则false
5, startsWith和endsWith用法
//startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
// let str = 'hello pleate';
// console.log(str.startsWith('hello'))
//返回的值是true
6,endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
// let str = 'hello pleate';
// console.log(str.endsWith('pleate'))
//返回的值是true ，若是hello便是返回false
补充知识点：
1.Object.values()//可以获取
const spec = {size:'40cm*40cm',color:'黑色'}
//所有的属性值回调
console.log(Object.values(spec));
最终实现结果为：['40cm*40cm', '黑色']
//接着上面的例子：
document.querySelector('div').innerHTML=Object.values(spec).join('/');
最终实现结果为：40cm*40cm/黑色
2，将伪数组转换为真数组
const lis = document.querySelectorAll('ul li')
// console.log(lis);
//打印结果为 [li, li, li]
//lis.pop()//报错
const liss = Array.from(lis);
liss.pop()
console.log(liss);
最终输出结果为：[li, li]
模板字符串
1,模板字符串的用法
// function demo(){
// return 'tabt';
// }
// let es6="es6!";
// let str=`hello,${es6},${demo()}`
// console.log(str);
//最终结果为 hello,es6!,tabt
灵活运用项目的实战案例
案例名称:找到一组同学中考试分数及格的第一个同学并输出到页面上。
html结构内容部分：
<ul id="scroce">
</ul>
<hr>
<h1>第一个及格的同学是:</h1>
<p id="name"></p>js实现内容部分：
const scroce=[
{realname:'张三',scroe:60},
{realname:'李四',scroe:70},
{realname:'王五',scroe:80},
{realname:'王三',scroe:50},
]
let str='';
let Names;
for(var i=0;i<scroce.length;i++){
str=str+`<li>姓名:${scroce[i].realname},分数:${scroce[i].scroe}</li>`
}
document.getElementById('scroce').innerHTML=str;
Names=scroce.find(item=>item.scroe==60);
document.getElementById('name').innerHTML=`姓名:${Names.realname},分数:${Names.scroe}`;最终实现效果：
案例名称:找出大于指定年龄（页面input框接收）的第一个人，并输出这个人的位置
HTML结构部分
<ul id="ages">
</ul>
<hr>
<input type="text" placeholder="请输入年龄" id="age">
<input type="button" value="查找" id="findes">
<p id="wb">与<span></span>年龄相等的人的位置:<span></span></p>js实现内容部分：
const Person =[
{realname:'张三',age:19},
{realname:'李四',age:20},
{realname:'王五',age:23},
{realname:'张思',age:15},
]
let str='';
let findes='';
for(var i=0;i<Person.length;i++){
//通过循环，利用字符串连接内部的存储数据
str=str+`<li>姓名:${Person[i].realname},年龄:${Person[i].age}</li>`;
}
//获取ul内的id属性添加值ul内部li元素中的值
document.getElementById('ages').innerHTML=str;
//获取点击按钮属性 赋给节点
let ages=document.getElementById('findes');
//设置监听事件
ages.addEventListener('click',()=>{
let nums;
//获取表单文本内的数据
findes = document.getElementById('age').value;
//通过点击按钮 去查找出第一个符合条件的数组成员的位置 item指的是当前的数组中的值 利用箭头函数去判断
nums=Person.findIndex(item=>item.age==findes);
//上面的判断会返回两种结果，一种是0，另一种是-1
//如果上面的执行判断符合条件那么就做下面的if判断语句
if(nums==-1){
//若nums是-1便是假 则打印在文本的内容如下：
document.getElementById('wb').innerHTML='没有该值';
}else{
//若nums是0便是真 则打印在文本的内容如下:
nums=nums+1;
document.getElementById('wb').innerHTML=`与${findes}年龄相等的人的位置:${nums}`;
}
})案例实现部分
总结部分：上面两个实战案例是在工作中常用到的，非该内容，但功能一样；
5381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
