目录
（1）array对象的方法
Array.from()方法：将伪数组或可遍历对象转换为真正的数组。
array.find() 方法：find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
array.findindex()方法：用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。
array.includes()方法： 判断某个数组是否包含给定的值，返回布尔值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//将伪数组可遍历对象转为真正的数组
// let str="1234";
// const arr=Array.from(str);
// console.log(arr);
// const Arr={
// 0:"a",
// 1:"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:20},
// {realname:"张三4",age:17},
// ];
// console.log(arr.find(item=>item.age==17));
// 3.array.findindex找到符合条件的第一个元素的索引
// const arr=[1,2,3,4,5];
// 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));
const arr=[1,2,3,4];
console.log(arr.includes(4));//有 true 没有 false
</script>
</body>
</html>（2) 模板字符串
ES6新增的创建字符串的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 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"));//判断摸个字符串前面是否为真
// console.log(str.endsWith("hello"));
//3.repeat字符串重复次数
console.log("hello".repeat(4));
</script>
</body>
</html>练习一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="score">
<!-- <li>姓名:张三,分数:40</li>
<li>姓名:李四,分数:50</li>
<li>姓名:王五,分数:60</li>
<li>姓名:赵六,分数:70</li> -->
</ul>
<hr>
<h1>第一个及格的同学</h1>
<p id="find"></p>
<script>
//练习：找到一组同学中考试分数及格的第一个同学并输出到页面上
const Person=[
{realname:"张三",score:40},
{realname:"李四",score:50},
{realname:"王五",score:60},
{realname:"赵六",score:70},
]
let str="";
let find="";
for(var i=0;i<Person.length;i++){
str=str+`<li>姓名:${Person[i].realname},分数:${Person[i].score}</li>`;
}
document.getElementById("score").innerHTML=str;
findname=Person.find(item=>item.score>=60);
document.getElementById("find").innerHTML=`姓名:${findname.realname},分数:${findname.score}`;
</script>
</body>
</html>练习二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="persons">
</ul>
<hr>
<input type="text" placeholder="输入要找的人" id="findage" value=""/>
<input type="button" value="查找" id="findbtn"/>
<h1><span id="age"></span> 与xxx年龄相等的人的位置是: <span id="num"></span></h1>
<p id="find">姓名：???,分数：???</p>
<h1></h1>
<script>
//2.找出等于指定年龄(页面input接收)的第一人，并输出这个人的位置
const persons=[
{realname:"张三",age:19},
{realname:"李四",age:17},
{realname:"王五",age:20},
{realname:"赵六",age:30},
];
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;
// console.log(findage);
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>（3）三点运算符的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>1</div>
<div>1</div>
<script>
//1.函数传不定参数
// function demo(a,...b){
// console.log(a,b.length);//一维数组
// }
// demo(1,2,4,5,6,7);
//2.与解构使用
//let [a,...b]=[1,2,3,4,5,5,6];
// console.log(a,b);
// 3.与数组解构使用 函数传对象
// function demo({username,password}){
// console.log(username,password);
// }
// demo({username:"root",password:"123456"});
// =>
//对象解构
// let {username,password}={username:"root",password:"123456"};
//扩展运算符(...)
//1.用...输出数组
// let arr=[1,2,3];
// console.log(...arr);
//2.合并数组
// const arr1=[1,2,3];
// const arr2=[4,5,6];
// const arr=[...arr1,...arr2];
// console.log(...arr);
//3.将类数组转为真正的数组
//const divEle=document.getElementsByTagName("div");
// console.log(divEle);
// const arr=[...divEle];
// console.log(arr);
// let str="1234";
// console.log(...str);
// =============练习=============
//复制数组
// const arr1=[1,2,3];
// const arr2=[...arr1];
// arr2[0]=5;
// console.log(arr1,arr2);
//创建一个函数，用扩展运算符计算两个数之间的和
// function demo(a,b){
// return a+b;
// }
// const arr1=[1,2];
// const arr2=[4,5];
// console.log(demo(...arr1));
// console.log(demo(...arr2));
</script>
</body>
</html>(4) setmap数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制，map的键不限于字符串，对象也可以称为键。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.set 定义加初始化
// const set=new Set([1,2,3,4]);
// // console.log(set);
// set.add(5).add(6);//加一个值
// console.log(set);
// set.delete(6);//删除指定的值
// console.log(set.has(6));//has 判断是否有指定的值 有返回true 反之返回false
// set.clear();
// console.log(set);//清除所有的值
// //遍历
// set.forEach(item=>console.log(item));
//2.map数据结构
// const Info={height:100,major:"计算机"};
// const map=new Map([["sex",1],["weight",180]]);
// //设置map的值 key->value
// map.set("realname","张三");
// map.set("age",19);
// map.set(Info,"个人详细信息");
// //get得到参数值
// console.log(map.get(Info));
// map.delete("age");
// console.log(map);
// console.log(map.size);
// console.log("age是否存在:"+map.has("age"));
// //获取map所有的key
// const keys=map.keys();
// console.log(keys);
// map.clear();
// console.log(map);
</script>
</body>
</html>(5) DOM ClassList属性
1、add(class1,class2)：
添加一个类，如果类不存在则不添加。
document.getElementById("mydiv").classList.add("demodiv","demodiv1");
2、contains(class)
判断元素中是否存在某个类。存在返回true，反之返回false。
let x = document.getElementById("mydiv").classList.contains("demodiv");
console.log(x);
3、item(index)
返回元素中索引值对应的类名。索引值从 0 开始。 如果索引值在区间范围外则返回 *null*
document.getElementById("mydiv").classList.item(0);
4、remove(class1,class2)
移除元素中一个或多个类名，移除不存在的类名，不会报错。
let mydom = document.getElementById("mydiv");
mydom.classList.add("demodiv");
console.log(mydom.classList.contains("demodiv")); // true
mydom.classList.remove("demodiv");
console.log(mydom.classList.contains("demodiv"));//false
5、toggle(*class,* true\|false)
在元素中切换类名。 第一个参数为要在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。 第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。
let mydom = document.getElementById("mydiv");
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));
mydom.classList.toggle("demodiv");
console.log(mydom.classList.contains("demodiv"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.class1{
background-color: red;
}
.class2{
color: linen;
}
.class3{
font-size: 20px;
}
</style>
</head>
<body>
<div id="demo">
我是一个容器
</div>
<button id="btn1">控制背景颜色</button>
<button id="btn2">控制字体大小</button>
<button id="btn3">判断是否有颜色样式</button>
<button id="btn4">判断索引1的类名</button>
<button id="btn5">删除颜色的样式</button>
<button id="btn6">控制字体toggle方式</button>
<script>
let Demo=document.getElementById('demo');
let btn1=document.getElementById('btn1');
let btn2=document.getElementById('btn2');
let btn3=document.getElementById('btn3');
btn1.addEventListener('click',()=>{
// console.log("改变颜色");
//classlist 添加多个样式
Demo.classList.add("class1","class2");
});
btn2.addEventListener('click',()=>{
Demo.classList.add("class3");
});
// classList.contains 判断是否存在某个样式
btn3.addEventListener('click',()=>{
console.log(Demo.classList.contains("class1")?"存在class1的样式":"不存在class1的样式");
});
//
btn4.addEventListener('click',()=>{
console.log(Demo.classList.item(1));
});
//classlist.remove 删除样式
btn5.addEventListener('click',()=>{
Demo.classList.remove("class1","class2");
});
btn6.addEventListener('click',()=>{
Demo.classList.toggle("class3");
// Demo.classList.toggle("class3",false); //第二个参数不管样式存在与否 true 强制加上 false 强制移除
});
</script>
</body>
</html>(6）arr的扩展方法
Array map()：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
Array filter()：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.array.map的用法 加工数组
// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
// const arr=[1,2,3,4];
// const newarr=arr.map((item)=>{
// return item+2;
// });
// const newarr1=arr.map(item=>item+2);
// console.log(newarr);
// 2.array.filter()过滤
// const arr=[1,2,3,4,5,6,7];
// const newarr=arr.filter(item=>item%2==0);
// console.log(newarr);
// 3.array.reduce()缩减 累加器
// total既是初始值，又是返回值
// const arr=[1,2,3,4,5];
// let sum=arr.reduce((total,currentValue)=>{
// console.log("total:"+total,"currentValue:"+currentValue);
// return total+currentValue;
// },10)
// console.log(sum);
// 4.fill填充
// let arr=[1,2,3,4,5,6,7];
// arr.fill('x',1,3);
// console.log(arr);
//求数组中的最大值
let arr=[11,26,12,67,89,100];
let max=arr.reduce((total,currentValue)=>{
return total<currentValue?currentValue:total;
})
console.log(max);
</script>
</body>
</html>总结：
-- filter() 不会对空数组进行检测。
-- filter() 不会改变原始数组。
本文含有隐藏内容，请 开通VIP 后查看