Table of contents
2. StartsWith and endsWith usage
3.repeat string repetition times
Fourth, the traversal of the array
1.for of traverses the value of the array
1. Array object method
1.Array.from()
Convert a pseudo-array or iterable object to a real array (string, object, array-like, set, map, etc.)
let str = '1234';
const arr1 =Array.from(str);
console.log(arr1);//(4) ['1', '2', '3', '4']
const Arr = {
2:'a',
3:'b',
length:4,
}
console.log(Array.from(Arr));// (4) [undefined, undefined, 'a', 'b']
2.array.find()
Returns the value of the first element of the array that meets the criteria (array and object)
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()
Find out where eligible members are located.
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)); //1
4.array.includes()
Find out if an array contains a given value.
const arr = [1,2,3,4];
console.log(arr.includes(10));//有就返回true 没有就返回false
Two, Array extension
1.array.map()
return new array
const arr = [1,2,3,4];
const newarr = arr.map(item=>item+2);
console.log(newarr); //从新输出一个数组,不是改变原的数组
2. array.filter()
filter
const arr = [1,2,3,4,5,6,7];
const newarr = arr.filter(item=> item%2==0);
console.log(newarr);
3.array.reduce()
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()
filling
let arr = [1,2,3,4,5,6,7];
arr.fill('x',1,3);
console.log(arr);//[1, 'x', 'x', 4, 5, 6, 7]
Three, string extension
1. Usage of template strings
function demo(){
return "end";
}
let es6 = "es6!";
let str = `hello,${es6},${demo()}`;
console.log(str);//hello,es6,end
2. StartsWith and endsWith usage
let str = "hello,es6!";
console.log(str.startsWith("hello"));//判断某个字符串前面是否包含hello 有就为true
console.log(str.endsWith("es6!"));//判断某个字符串后面是否包含es6 有就为true
3.repeat string repetition times
console.log("hello".repeat(4));//hellohellohellohello
Fourth, the traversal of the array
1.for of traverses the value of the array
const arr = ["a","b","c","d"];
for(v of arr){
console.log(v); //a,b,c,d
}
2. for in traversal index
const arr = ["a","b","c","d"];
for(let k in arr){
console.log(k); //0,1,2,3
}
3.for of traversal object
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:20
4. The usage of 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:3
example
1. Find the first student with a passing test score in a group of students and output it to the page
<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. Find the first person who is older than the specified age (received by the input box on the page), and output the location of this person
<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. Output a group of personnel information, the output to the page information is as follows (name, score, 60 points for passing or not)
const person=[
{realname:'zs1',age:20,score:50},
{realname:'zs2',age:20,score:70},
{realname:'zs3',age:20,score:80},
{realname:'zs4',age:20,score:90}
]
// 使用 for of 将内容显示在网页上
// let arr='';
// for(let v of person){
// arr =arr+ `<li>姓名:${v.realname},年龄:${v.age}</li>`
// }
// document.querySelector('ul').innerHTML=arr;
let mark='';
let newarr = person.filter(item=>{
let rer= item.score>60?'及格':'不及格'
mark+=`<li>姓名:${item.realname},年龄:${item.age},分数:${item.score},${rer}</li>`
})
document.querySelector('ul').innerHTML=mark;