11. 将字符串转换为驼峰格式
代码语言:js复制题目描述 css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式,请完成此转换功能
以 - 为分隔符,将第二个起的非空单词首字母转为大写 -webkit-border-image 转换后的结果为 webkitBorderImage
输入 : 'font-size' 输出 : fontSize
function cssStyle2DomStyle(sName) {
let arr = sName.split('-')
for(let i = (arr[0] ? 1 : 2); i < arr.length; i ) { // 分析字符串首尾是否有-
arr[i] = arr[i].slice(0,1).toUpperCase() arr[i].slice(1)
}
return arr.join('')
}
相关知识点:
- 数组常用方法
- split/join
- toUpperCase() —— toUpperCase将小写字符转成大写,toLowerCase将大写字符转成小写
- slice
12. 字符串字符统计
代码语言:js复制题目描述 统计字符串中每个字符的出现频率,返回一个 Object,key 为统计字符,value 为出现频率
不限制 key 的顺序 输入的字符串参数不会为空 忽略空白字
输入 : 'hello world' 输出 :{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}
function count(str) {
let obj = {}
for (let i = 0; i < str.length; i ) {
// 去掉空白字符
if(str[i] !== ' ') {
// 如果有该属性就 1,没有就设置值为1
obj[str[i]] = obj.hasOwnProperty(str[i]) ? obj[str[i]] 1 : 1
// obj[str[i]] = obj[str[i]] ? obj[str[i]] 1 : 1
}
}
return obj
}
相关知识点:
- 对象赋值
- hasOwnProperty
13. 加粗文字
代码语言:html复制题目描述 使用一个标签将“牛客网”三个字加粗显示
<!--方法一:html-->
<p><strong>牛客网</strong>,程序员必备求职神器</p>
<!--方法二:js标签选择器-->
let p = document.getElementsByTagName('p')[0]
p.innerHTML = p.innerText.replace('牛客网','<strong>牛客网</strong>')
<!--方法二:js h5选择器-->
let p = document.querySelector('p');
p.innerHTML = p.innerText.replace('牛客网','<strong>牛客网</strong>')
相关知识点:
- 获取元素及元素内容
- 加粗标签
14. 段落标识
代码语言:html复制题目描述 请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”
<!--方法一:html-->
<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>
<!--方法二:js-->
let p = document.createElement('p')
p.innerHTML = '牛客网是一个专注于程序员的学习和成长的专业平台。'
document.querySelector('body').append(p)
相关知识点:
- 创建标签createElement
- 将元素添加到body中 append()
15. 设置文字颜色
代码语言:html复制题目描述 请使用嵌入样式将所有p标签设置为红色文字
<!--方法一:行内样式-->
<p style="color:red;">欢迎来到牛客网</p>
<p style="color:red;">在这里,我们为你提供了IT名企的笔试面试题库</p>
<p style="color:red;">在这里,我们以题会友</p>
<p style="color:red;">QQ群号:272820159</p>
<!--方法二:css样式-->
<style>
p {
color: red;
}
</style>
<p>欢迎来到牛客网</p>
<p>在这里,我们为你提供了IT名企的笔试面试题库</p>
<p>在这里,我们以题会友</p>
<p>QQ群号:272820159</p>
<!--方法一:js-->
let p = document.querySelectorAll('p')
for(let i = 0; i < p.length; i ) {
p[i].style.color = 'red'
}
相关知识点:
- 获取所有p元素:querySelectorAll
- 给元素设置style样式:dom.style.color
16. 查找数组元素位置
代码语言:js复制题目描述 找出元素 item 在给定数组 arr 中的位置 输出描述: 如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1 输入: 1, 2, 3, 4 , 3 输出:2
// 方法一:简单遍历
function indexOf(arr, item) {
for(let i = 0; i < arr.length; i ) {
if(arr[i] === item) return i
}
return -1
}
// 方法二: ES6新增数组方法
function indexOf(arr, item) {
return arr.findIndex(val => val === item)
}
相关知识点:
- 数组遍历
- 函数返回值
17. 数组求和
代码语言:js复制题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入 : 1, 2, 3, 4 输出 : 10
// 方法一:简单方法,普通for循环这里不多加介绍
function sum(arr) {
let count = 0
arr.forEach((value, index) => {
count =value
})
return count
}
// 方法二:reduce
function sum(arr) {
return arr.reduce((prev, item) => item prev,0)
}
相关知识点:
- 数组遍历
- reduce
18. 移除数组中的元素
代码语言:js复制题目描述 移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr,结果返回新的数组 输入 : 1, 2, 3, 4, 2, 2 输出 : 1, 3, 4
// 方法一:简单遍历
function remove(arr, item) {
let newArr = []
arr.forEach(value =>{
if(value !== item) newArr.push(value)
})
return newArr
}
// 方法二:filter过滤方法
function remove(arr, item) {
return arr.filter(val => val !== item)
}
// 方法三:新数组中使用splice删除
function remove(arr, item) {
let newArr = arr.slice(0)
for(let i = newArr.length - 1; i >= 0 ; i--) {
if(newArr[i] === item) newArr.splice(i, 1)
}
return newArr
}
相关知识点:
- 数组方法哪些是在原数组中改的,哪些是返回新数组的?
返回新数组的API slice map filter reduce concat ... 返回原数组的API push unshift shift pop splice sort reverse ...
19. 移除数组中的元素
代码语言:js复制题目描述 移除数组 arr 中的所有值与 item 相等的元素,直接在给定的 arr 数组上进行操作,并将结果返回 输入: 1, 2, 2, 3, 4, 2, 2, 2 输出: 1, 3, 4
// 倒着遍历不用考虑数组长度
function removeWithoutCopy(arr, item) {
for(let i = arr.length - 1; i >= 0; i--) {
if(item === arr[i]) arr.splice(i,1)
}
return arr
}
相关知识点:
- 遍历 修改数组长度
20. 添加元素
代码语言:js复制题目描述 在数组 arr 末尾添加元素 item。不要直接修改数组 arr,结果返回新的数组 输入: 1, 2, 3, 4, 10 输出: 1, 2, 3, 4, 10
// 方法一:简单迭代
function append(arr, item) {
let newArr = []
arr.forEach(val => newArr.push(val))
newArr.push(item)
return newArr
}
// 方法二:slice
function append(arr, item) {
let arr1 = arr.slice(0)
arr1.push(item)
return arr1
}
/// 方法三:concat
function append(arr, item) {
return arr.concat(item)
}
相关知识点:
- 合并新元素,返回新数组
这次好多的方法都是数组方法,所以一定要非常的熟悉。这里再把数组的方法整理放上来。
Javascript常用的数组方法