目次
1.Array.from(): 擬似配列またはトラバース可能なオブジェクトを実際の配列 (文字列、オブジェクト、クラス配列、セット、マップなど) に変換します。
2.array.find(): 条件 (配列とオブジェクト) を満たす配列の最初の要素の値を返します。
3.array.findindex(): 適格なメンバーの位置を見つけます。
4.array.includes(): 配列に指定された値が含まれているかどうかを調べます。
1. 生徒のグループ内でテストの合格点を獲得した最初の生徒を見つけて、ページに出力します。
2. 指定された年齢 (ページ上の入力ボックスで受け取った) よりも年上の最初の人物を検索し、この人物の位置を出力します。
4. 人事情報のグループを出力します。ページに出力される情報は次のとおりです（名前、スコア、合否の 60 点）。
1. 配列オブジェクトのメソッド
1.Array.from(): 擬似配列またはトラバース可能なオブジェクトを実際の配列 (文字列、オブジェクト、クラス配列、セット、マップなど) に変換します。
let str = '1234';
const arr1 =Array.from(str);
console.log(arr1); // ['1', '2', '3', '4']
const Arr = {
2:'a',
3:'b',
length:4,
}
console.log(Array.from(Arr)); // [undefined, undefined, 'a', 'b']2.array.find(): 条件 (配列とオブジェクト) を満たす配列の最初の要素の値を返します。
const arr = [1,2,3,4];//数组
let num = arr.find(item=>item==3);
console.log(num);//3
const arr1 = [ //对象
{realname:"张三1",age:18},
{realname:"张三2",age:17},
{realname:"张三3",age:19},
{realname:"张三4",age:17},
];
console.log(arr1.find(item=>item.age==17));//age: 17 realname: "张三2"3.array.findindex(): 適格なメンバーの位置を見つけます。
const arr = [1,2,3,4]; //数组
console.log(arr.findIndex(item=>item==4)); //3
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)); //14.array.includes(): 配列に指定された値が含まれているかどうかを調べます。
const arr = [1,2,3,4];
console.log(arr.includes(10));//有就返回true 没有就返回false2、配列の拡張
1.array.map() は新しい配列を返します
const arr = [1,2,3,4];
const newarr = 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:即是初始值又是返回值
//currentValue:当前值
reduce第二个参数指定初始值
const arr = [1,2,3,4,5];
let sum = arr.reduce((total,currentValue)=>{
return total + currentValue;
},10) //可以指定初始值
console.log(sum);4.array.fill() 充填
let arr = [1,2,3,4,5,6,7];
arr.fill('x',1,3);
console.log(arr);//[1, 'x', 'x', 4, 5, 6, 7]3、文字列拡張
1. テンプレート文字列の使用方法
function demo(){
return "end";
}
let es6 = "es6!";
let str = `hello,${es6},${demo()}`;
console.log(str);//hello,es6,end2. StartsWith と EndsWith の使用法
let str = "hello,es6!";
console.log(str.startsWith("hello"));//判断某个字符串前面是否包含hello 有就为true
console.log(str.endsWith("es6!"));//判断某个字符串后面是否包含es6 有就为true3.repeat 文字列の繰り返し回数
console.log("hello".repeat(4));//hellohellohellohello4 番目、配列の走査
1.for of は配列の値を走査します
const arr = ["a","b","c","d"];
for(v of arr){
console.log(v); //a,b,c,d
}2. トラバーサルインデックスの場合
const arr = ["a","b","c","d"];
for(let k in arr){
console.log(k); //0,1,2,3
}3.トラバースオブジェクトのfor
const Person={realname:'zs',age:20}
const keys = Object.keys(Person);
for(let k of keys){
console.log(`k:${k}`,`v:${Person[k]}`)}; //k:realname v:zs k:age v:204. forEachの使用法
let arr = [1,2,3,4];
arr.forEach((item,index)=>{
console.log(`v:${item},k:${index}`);
}) //v:1,k:0 v:2,k:1 v:3,k:2 v:4,k:35. 例
1. 生徒のグループ内でテストの合格点を獲得した最初の生徒を見つけて、ページに出力します。
<ul class="score"></ul>
<hr>
<h1 class="username"></h1>
<script>
let person=[
{realname:'张三',score:'40'},
{realname:'李四',score:'40'},
{realname:'王五',score:'60'},
{realname:'赵六',score:'90'}
]
let str = '';
let userName='';
for(i=0;i<person.length;i++){
str = str + `<li>姓名：${person[i].realname},分数：${person[i].score}</li>`
}
document.querySelector('.score').innerHTML=str;
userName = person.find(item=>item.score>=60)
document.querySelector('.username').innerHTML=`姓名：${userName.realname},分数：${userName.score}`
</script>
2. 指定された年齢 (ページ上の入力ボックスで受け取った) よりも年上の最初の人物を検索し、この人物の位置を出力します。
<ul class="age"></ul>
<hr>
<input type="text" placeholder="请输入年龄" value="" class="mark">
<input type="button" value="查询" class="btn">
<h1></h1>
<script>
let person=[
{realname:'张三',age:'15'},
{realname:'李四',age:'18'},
{realname:'王五',age:'19'},
{realname:'赵六',age:'20'}
]
let str = '';
for(i=0;i<person.length;i++){
str = str + `<li>姓名：${person[i].realname},分数：${person[i].age}</li>`
}
document.querySelector('.age').innerHTML=str;
btn = document.querySelector('.btn')
btn.onclick=function(){
let num;
input=document.querySelector('.mark').value;//获得输入的值
num = person.findIndex(item=>item.age==input)//得到下标
if(num==-1){
document.querySelector('h1').innerHTML='查无此人';
}else{
num++;
document.querySelector('h1').innerHTML=`位置是${num}`
}
}
</script>
3. 人事情報群が表示用ページに出力されます。
<body>
<table border="1">
<thead>
<tr>
<th>学生姓名</th>
<th>得分</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
const arr1 = [
{ uname: '小红', score: 95 },
{ uname: '小蓝', score: 100},
{ uname: '小绿', score: 80 },
{ uname: '小明', score: 50 },
{ uname: '小花', score: 56 },
{ uname: '小草', score: 64 },
]
const arr2 = arr1.map(item=>{
return {...item}
});
let tbody = document.querySelector('tbody');
let str = '';
arr2.forEach(item => {
tbody.innerHTML = str += `<tr><td>${item.uname}</td><td>${item.score}</td></tr>`
})
</script>
</body>
4. 人事情報のグループを出力します。ページに出力される情報は次のとおりです（名前、スコア、合否の 60 点）。
<body>
<table border="1">
<thead>
<tr>
<th>学生姓名</th>
<th>得分</th>
<th>是否及格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 3：输出一组人员信息，输出到页面信息如下（（姓名，分数，是否及格60分）;
const arr1 = [
{ uname: '小红', score: 95 },
{ uname: '小蓝', score: 100},
{ uname: '小绿', score: 80 },
{ uname: '小明', score: 50 },
{ uname: '小花', score: 56 },
{ uname: '小草', score: 64 },
]
const arr2 = arr1.map(item => {
let pass;
if (item.score < 60) {
pass = '是'
}
else {
pass = '否';
}
return { ...item, pass }
})
console.log(arr2);
let tbody = document.querySelector('tbody');
let str = '';
arr2.forEach(item => {
tbody.innerHTML = str += `<tr><td>${item.uname}</td><td>${item.score}</td><td>${item.pass}</td></tr>`
})
</script>
</body>