一、列表动态渲染
列表的动态渲染是前端开发中最常见的效果,这个案例中我们需要将people
数组渲染在页面中,实现下面的列表:
牛油 1 号 20 岁
牛油 2 号 21 岁
牛油 3 号 19 岁
<body>
<ul></ul>
<script>
var people = [
{ name: '牛油1号', id: 1, age: 20 },
{ name: '牛油2号', id: 2, age: 21 },
{ name: '牛油3号', id: 3, age: 19 },
]
var ul = document.querySelector('ul');
// 补全代码
var str=''
people.forEach((item)=>{
str+=`<li>${item.name} ${item.age}岁</li>`
})
ul.innerHTML=str
</script>
</body>
复制代码
二、计算距离当前日期天数
案例要求:
根据已有的person
对象的注册时间求出距离当前时间的天数(天数向下取整)
将获得的天数和person
数据拼接成字符串,作为h2
标签的内容注意:使用模板字符串进行字符串拼接,字符串最终内容如:尊贵的牛客网 2 级用户小丽您好,您已经注册牛客网 3 天啦~
<h2></h2>
<script>
var person = {
level: '2',
name: '小丽',
registTime: '2021-11-01',
}
var h2 = document.querySelector('h2');
// 补全代码
// 当前时间戳
let now = new Date().getTime()
// 过去时间措
let past = new Date(person.registTime).getTime()
// 相距天数
let days = Math.floor( (now - past)/(24 * 60 * 60 * 1000))
h2.innerText = `尊敬的牛客网${person.level}级用户${person.name}您好,你已经注册牛客网${days}天啦~`
</script>
复制代码
解题步骤:
三、构造函数的继承
在ES6
的class
类诞生之前,我们是以函数的形式来书写构造函数,继承在构造函数的运用过程中扮演着非常重要的角色,看下面这个案例:
给Human
构造函数的原型对象添加getName
方法,返回当前实例name
属性
将Chinese
构造函数继承于Human
构造函数
给Chinese
构造函数的原型对象添加getAge
方法,返回当前实例age
属性
function Human(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
function Chinese(name,age) {
Human.call(this,name)
this.age = age
this.color = 'yellow'
}
// 补全代码
// 给"Human"构造函数的原型对象添加"getName"方法
Human.prototype.getName=function(){
return this.name
}
// 将"Chinese"构造函数继承于"Human"构造函数
Chinese.prototype=new Human()
Chinese.prototype.constructor=Chinese
// 给"Chinese"构造函数的原型对象添加"getAge"方法
Chinese.prototype.getAge=function(){
return this.age
}
复制代码
可以看到,普通的构造函数的继承我们主要是通过操作prototype
原型对象来进行实现的,这显然是比较麻烦又不太安全的,所以在ES6
之后就诞生了class
类来替换这种写法
四、类的继承
ES6
新增了class
类,其能够很好的替代上述构造函数的使用,class
实际就是构造函数的语法糖,它的继承写法如下:
Chinese
类继承于Human
类
Human
类实现一个函数getName
,返回该实例的name
属性
Chinese
类构造函数有两个参数,分别为name
、age
Chinese
类实现一个函数getAge
,返回该实例的age
属性
class Human {
constructor(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
// 补全代码
getName () {
return this.name;
}
}
// 补全代码
class Chinese extends Human {
constructor(name,age){
super(name);
this.age=age;
}
getAge () {
return this.age;
}
}
复制代码
class
类是通过extends
关键字来继承基类的,同时使用super
来调用基类(Human
)的构造器(constructor
)
五、解析 URL 参数
解析 URL 参数在前端开发中也是非常常见的功能,看下面这个例子:
输入:getParams('https://nowcoder.com/online?id=1&salas=1000')
输出:{id:1, salas: 100}
const _getParams = (url) => {
// 补全代码
const params=url.split('?')[1].split('&')
const obj={}
params.forEach(item=>{
obj[item.split('=')[0]]=item.split('=')[1]
})
return obj
}
复制代码
这主要就是使用了分割字符串的方法split
六、生成页码
在前后端交互过程中,分页功能非常常见,这个案例就是实现前端显示页码的效果:
allItem
为总数据项个数,pageItem
为每页的数据项个数
li
标签内容为当前页码数,页码从 1 开始
具体要求实际就是需要在ul
内通过li
显示所有的页码,而_createPage
就是进行这一操作的函数
<body>
<ul id="ul"></ul>
<script type="text/javascript">
const _createPage = (allItem, pageItem) => {
// 补全代码
// ceil 向上取整
var liNum= Math.ceil(allItem/pageItem)
var nums=''
for(var i=1;i<=liNum;i++){
nums+=`<li>${i}</li>`
}
ul.innerHTML=nums
}
</script>
</body>
复制代码
这里注意一下,我们使用 ul.innerHTML
时并没有事先通过document.getElementById获取ul
,那我们为什么能直接操作这个ul
呢?
原因在于:目前不使用getElementById
方法,也可以用id
直接操作对应id
的元素,这也适用于一些元素的name
属性:
<img name="myDiv" alt="Ailjx"></img>
<img name="myDiv" alt="Ailjx2"></img>
<script>
console.log(myDiv[0].alt); // Ailjx
</script>
复制代码
但目前这种写法好像还没形成标准,所以保险起见尽量还是不要使用!
七、数据排序/总成绩排名
这个案例是需要将数组参数中的对象以总成绩(包括属性chinese
、math
、english
)从高到低进行排序并返回:
const _rank = array => {
// 补全代码
return array.sort((prevItem,nextItem)=>{
const prev = prevItem.chinese+prevItem.math+prevItem.english
const next = nextItem.chinese+nextItem.math+nextItem.english
return next - prev
})
}
复制代码
对于数组排序,一个sort
方法就可搞定!
八、计算子字符串频次
_searchStrIndexOf
函数接受两个参数分别为字符串str
、子字符串target
,要求返回子字符串target
在字符串str
中出现的频次:
const _searchStrIndexOf = (str, target) => {
// 补全代码
return str.split(target).length-1
}
复制代码
这个例子,巧妙的使用分割字符串的方法split
将字符串在子子字符串处进行分割,形成数组,最后根据数组长度-1 即可得到子字符串在字符串中出现的频次
九、判断斐波那契数列
要求以Boolean
的形式返回参数数组是否为斐波那契数列:
在数学上,斐波那契数列以如下方法定义:F(0)=0
,F(1)=1
, F(n)=F(n - 1)+F(n - 2)(n ≥ 2,n ∈ N)
注意:[0,1,1]
为最短有效斐波那契数列
const _isFibonacci = array => {
// 补全代码
if(array.length<3) return false
for(let i=0;i<array.length;i++){
if(i<2) {
return array[i]===i
} else {
return array[i]===array[i-1]+array[i-2]
}
}
}
复制代码
十、数组扁平化处理
将数组参数中的多维数组扩展为一维数组并返回该数组:
输入:[1,[2,[3,[4]]]]
输出:[1,2,3,4]
const _flatten = arr => {
// 补全代码
const newArr=[]
function each(arr){
arr.forEach(item=>{
if(!Array.isArray(item)){
newArr.push(item)
}else {
each(item)
}
})
}
each(arr)
return newArr
}
复制代码
结语
这篇文章内容非常简单,主要是为了巩固自己的基础,正可谓基础不牢,地动山摇!!!
评论