当前位置:网站首页>(elaborate) ES6 remaining parameters, ES6 built-in objects, template string content (detailed example Dictionary) and practical cases of flexible use of the project
(elaborate) ES6 remaining parameters, ES6 built-in objects, template string content (detailed example Dictionary) and practical cases of flexible use of the project
2022-07-19 05:12:00 【Create splendid -- hand in hand with you】
The three-point operator is also called residual parameter or extended operator
1: Function passes indefinite parameters , Verify the length of the array .
// function demo(a,...b){
// console.log(a,b)
// }
// The length of the array can be verified such as console.log(a,b.length)// Get his length
// demo(1,2,3,4,5)
// The result is :1 Array(4)
2: Use with deconstruction
// let [a,...b]=[1,2,3,4,5]
// console.log(a,b)
// The final result is 1 (4) [2, 3, 4, 5] Remember that the three-point operator here does not need to be preceded by the array variable name Otherwise, an error will be reported
3: Use with array deconstruction Function to object
// function demo({username,password}){
// console.log(username,password)
// }
// demo({username:'root',password:'1234'})
// The final solution consists of root 1234
4: use ... The output array
// const arr=[1,2,3,4]
// console.log(...arr)
// The final result is 1 2 3 4
5: Merge array
// const arr1=[1,2,3,4]
// const arr2=[5,6,7,8]
// const arr3=[...arr1,...arr2]
// console.log(arr3)
The final result is [1, 2, 3, 4, 5, 6, 7, 8]
6: Turn the class array into a real array
// The first step is to get div The attribute value
// const tark = document.querySelectorAll('div')
// // Here you need to define the variable name of an array
// const arr=[...tark]
// console.log(arr)
// The final result is [div, div, div]
Different from the above
// const str="12345"
// console.log([...str])
// The final result is ['1', '2', '3', '4', '5']
7, Practice copying
// const arr=[1,2,3,4,5]
// let arr1=[...arr]
// console.log(arr1)
// The final result is [1, 2, 3, 4, 5]
Different from the above
// arr1[0]=7;
// console.log(arr1);
The final result is [7, 2, 3, 4, 5]
Compare and distinguish the above contents by printing
console.log(arr,arr1)
The final result is [1, 2, 3, 4, 5] [7, 2, 3, 4, 5]
Conclusion : Copying will not change the original content , It will only change the current content
8: Create a function : Use the extended operator to calculate the sum of two numbers
// function demo(a,b){
// return a+b
// }
// let tem=demo(1,2)
// console.log(tem)
// The final result is 3
Different from the above
// function demo(a,b){
// return a+b
// }
// const arr1=[1,2]
// const arr2=[3,4]
// console.log(demo(...arr1),demo(...arr2))
The final result is 3 7
Add something :Array Extension method of ... iterator The three-point operator has an iterator
ES6 Built-in objects
1:Array.from() Convert a pseudo array or traversable object to a real array
// const str = {
// 0: 'a',
// 1: 'b',
// length: 4,
// }
// console.log(Array.from(str));
give the result as follows :
// The returned value is
//0: "a"
// 1: "b"
// 2: undefined
// 3: undefined
// length: 4
Different from the above
// let str='1234'
// const arr=Array.from(str)
// console.log(arr);
Print the result as ['1', '2', '3', '4'] Convert string to array
2:array.find Return the value of the first element of the array that meets the condition
// const arr=[1,2,3,4,5]
// let num=arr.find(item=>item==2);
// console.log(num)
The final result is 2
3:array.every( ) Each one meets the conditions , If there is an inconformity, the return is false , If all match, then the return is true
const arr1 = [10,20,30];
const flag =arr1.every((item)=>{
return item>=10;
})
console.log(flag);
The final result is : true If not all of them are greater than the specified value, then false
Different from the above
// const arr1=[3,5,7,8]
// let nums=arr1.find(item=>item==3);
// console.log(nums)
// The final result is 3
Different from the above
Find the array package object
// const arr=[
// {realname:" Zhang San 1",age:19},
// {realname:" Zhang San 28",age:14},
// {realname:" Zhang San 3",age:15},
// {realname:" Zhang San 4",age:17},
// ]
// console.log(arr.find(item=>item.age==14))
// The final result is {realname: ' Zhang San 28', age: 14}
3:array.findindex Find the index of the first element that meets the condition
// const arr=[
// {realname:" Zhang San 1",age:19},
// {realname:" Zhang San 28",age:14},
// {realname:" Zhang San 3",age:15},
// {realname:" Zhang San 4",age:17},
// ]
// //item It's a parameter arr.findIndex // Be careful findIndex Medium I Be capitalized, otherwise an error will be reported
// console.log(arr.findIndex(item=>item.age==15));
// The final result is 2 Printing starts with 0 Start , Calculate according to the index of the array
4:array.includes(): Find out whether an array contains a given value .
// const arrt=[1,2,3,4,5,6]
// console.log(arrt.includes(5))// Add value directly to it ( There is no need to use the arrow function )
// The qualified ones return true If it does not meet the requirements false
5, startsWith and endsWith usage
//startsWith(): Indicates whether the parameter string is in the header of the original string , Returns a Boolean value
// let str = 'hello pleate';
// console.log(str.startsWith('hello'))
// The value returned is true
6,endsWith(): Indicates whether the parameter string is at the end of the original string , Returns a Boolean value
// let str = 'hello pleate';
// console.log(str.endsWith('pleate'))
// The value returned is true , if hello Is to return false
Supplementary information :
1.Object.values()// Can get
const spec = {size:'40cm*40cm',color:' black '}
// All attribute value callbacks
console.log(Object.values(spec));
The final result is :['40cm*40cm', ' black ']
// Next, let's take the example above :
document.querySelector('div').innerHTML=Object.values(spec).join('/');
The final result is :40cm*40cm/ black
2, Convert pseudo array to true array
const lis = document.querySelectorAll('ul li')
// console.log(lis);
// The result is [li, li, li]
//lis.pop()// Report errors
const liss = Array.from(lis);
liss.pop()
console.log(liss);
The final output is zero :[li, li]
Template string
1, Template string usage
// function demo(){
// return 'tabt';
// }
// let es6="es6!";
// let str=`hello,${es6},${demo()}`
// console.log(str);
// The final result is hello,es6!,tabt
Flexible use of practical cases of the project
Case name : Find the first student in a group who has passed the exam and output it to the page .
html Structure and content :
<ul id="scroce">
</ul>
<hr>
<h1> The first student to pass is :</h1>
<p id="name"></p>
js Implement the content part :
const scroce=[
{realname:' Zhang San ',scroe:60},
{realname:' Li Si ',scroe:70},
{realname:' Wang Wu ',scroe:80},
{realname:' The king of the three ',scroe:50},
]
let str='';
let Names;
for(var i=0;i<scroce.length;i++){
str=str+`<li> full name :${scroce[i].realname}, fraction :${scroce[i].scroe}</li>`
}
document.getElementById('scroce').innerHTML=str;
Names=scroce.find(item=>item.scroe==60);
document.getElementById('name').innerHTML=` full name :${Names.realname}, fraction :${Names.scroe}`;
Final effect :
Case name : Find out if you are older than the specified age ( page input Box receive ) The first person , And output the location of this person
HTML The structural part
<ul id="ages">
</ul>
<hr>
<input type="text" placeholder=" Please enter age " id="age">
<input type="button" value=" lookup " id="findes">
<p id="wb"> And <span></span> The position of people of the same age :<span></span></p>
js Implement the content part :
const Person =[
{realname:' Zhang San ',age:19},
{realname:' Li Si ',age:20},
{realname:' Wang Wu ',age:23},
{realname:' Zhang Si ',age:15},
]
let str='';
let findes='';
for(var i=0;i<Person.length;i++){
// Through the loop , Connect the internal storage data with strings
str=str+`<li> full name :${Person[i].realname}, Age :${Person[i].age}</li>`;
}
// obtain ul Internal id Add value to property ul Inside li The value in the element
document.getElementById('ages').innerHTML=str;
// Get click button properties Assign to node
let ages=document.getElementById('findes');
// Set listening Events
ages.addEventListener('click',()=>{
let nums;
// Get the data in the form text
findes = document.getElementById('age').value;
// By clicking the button Find the position of the first qualified array member item It refers to the value in the current array Use arrow function to judge
nums=Person.findIndex(item=>item.age==findes);
// The above judgment will return two results , One is 0, The other is -1
// If the above execution judgment meets the conditions, then do the following if Judgment statement
if(nums==-1){
// if nums yes -1 Is false Then the contents printed in the text are as follows :
document.getElementById('wb').innerHTML=' The value is not ';
}else{
// if nums yes 0 It's true Then the contents printed in the text are as follows :
nums=nums+1;
document.getElementById('wb').innerHTML=` And ${findes} The position of people of the same age :${nums}`;
}
})
Case realization part
The summary part : The above two practical cases are commonly used in work , Not the content , But the function is the same ;
边栏推荐
猜你喜欢
Ucharts chart, pie chart, bar chart and line chart are used in uniapp
es6新增-Symbol数据类型
Internship project 1 - personalized homepage configuration
数据可视化
Applet editor rich text editing and rich text parsing
SQL statement learning
租用服务器,以及部署在pycharm专业版上的pytorch环境训练yolov5模型教程服务器环境安装库文件:
Internship project 3- change owner
Actual cases of data analysis and data mining local house price prediction (716):
Notes de formation pour la deuxième fois des modèles
随机推荐
滚动轮加载的两种js方法及模态框拖拽归总
uniapp 使用uview实现折叠面板
(精讲)Es6 剩余参数,ES6内置对象,模板字符串内容(详例宝典)及灵活运用项目的实战案例
学习C语言第三天
Simply and quickly establish a pytorch environment yolov5 target detection model to run (super simple)
Internship project 3- change owner
PAT乙级1002:写出这个数
Bi design: distributed high concurrency epidemic prevention health management system based on vue+socket+redis
【C语言—零基础第七课】顺序结构与选择结构
User management - restrictions
机器学习之特征提取(类别特征进行数值化、离散化、文本特征进行数值化)
STL容器——queue与deque的基本操作
02_電影推薦(ContentBased)_用戶畫像
IText modify PDF Text
小程序云开发 上传图片到云存储
PCA feature dimensionality reduction of machine learning + case practice
Harmonyos fourth training notes
cookie是否有效时间限定?如何设置cookie?手把手教你设置
PyGame aircraft War 1.0 (step + window no response problem)
PyGame installation -requirement already satisfied