1.已知有字符串foo="get-element-by-id",写一个function将其转换成驼峰表示法"getElementById"
答案：
const foo = 'get-element-by-id';
const format = str =>{
return str.split('-').map((item,index)=>{
if(index === 0){
return item;
}else{
return item[0].toUpperCase() + item.substr(1);
}
}).join('');
}
console.log(format(foo));
2.var arr1=["a","c","m"],arr2=["k","u","y"];写一段程序将这两个数组合并且将合并后的第2个值删除
答案：
var arr1 = ["a","c","m"],arr2 =["k","u","y"];
var arr3 = arr1.concat(arr2);
arr3.splice(1,1);
console.log(arr3);
4.写一段程序，对二维数组求和：
const arr = [[1,2,3,4],[5,6,7,8,9,10]];
答案：
const arr =[[1,2,3,4],[5,6,7,8,9,10]];
const getTotal = arr => {
const newArr = arr.flat(); // - 数组扁平化
return newArr.reduce((pre,next) => {
return pre + next;
})
}
console.log(getTotal(arr));
注：flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
var newArray = arr.flat([depth])；
- 参数 depth 可选
指定要提取嵌套数组的结构深度，默认值为 1。 - 返回值
一个包含将数组与子数组中所有元素的新数组。
[reduce()方法详细用法见：]JS中reduce的用法 - 简书 (jianshu.com)
- 封装一个函数根据下面的地址栏进行参数的提取使得参数变成一个对象
答案：
var url = 'http://localhost/baidawu/html/hotel.html?cityId=2&date_in=2016-05-10&date_out=2016-05-25&name=如家连锁'；
const getParams = str =>{
const obj = {};
str = str.substr(str.indexOf("?")+1).split("&").forEach(item => {
const key = item.split('=')[0];
const val = item.split('=')[1];
obj[key] = val;
})
return obj;
}
console.log(getParams(url));
- 请编写代码实现计算30天后的今天是星期几？
答案：
//- 获取当前的日期对象
const nowData = new Date();
//- 重新指定日期对象
const setDate = new Date(nowData);
//- 设置新的日期对象的天数为30天之后
setDate.setDate(nowData.getDate()+30);
//- 获取当前的日期是星期几
console.log(setDate.getDay());
6.下列哪些属性不会触发BFC?
A.overflow: hidden;
B.position: relative;
C.float: left;
D.position: absolute;
答案：B
注：
只要元素满足下面任一条件即可触发 BFC 特性：
1.body 根元素
2.浮动元素：float 除 none 以外的值
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
- 从用户的角度看元素的展示的颜色是什么？
<style>
.f-1{
width:300px;
height:300px;
background-color:blue;
position:absolute;
z-index:2;
}
.f-2{
width:200px;
height:200px;
background-color:red;
position:absolute;
z-index:2;
}
.s-1{
width:100px;
height:100px;
heightground-color:green;
position:absolute;
z-index:5;
}
</style>
<div class="f-1">
<div class="s-1"></div>
</div>
<div class="f-2"></div>
答案：上：red , 中：green , 下：blue ;
8.不声明其他变量，完成两个变量值交换
var a=10;
var b=25;
答案：
var a = 10;
var b = 25;
a = a + b;
b = a - b;
a = a - b;
- link标签 与 @import的区别
答案：
（1）@import css2.1中提出的与否规则，link是html标签可以引入css样式
（2）@import 加载css的方式在页面完成后进行加载，link引入css文件是同时加载
（3）@import 兼容性 ie5+，link没有兼容性问题
- css中display属性，block,inline,inline-block的区别
答案：
- block
（1）block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
（2）block元素可以设置wdth,height属性。块级元素即使设置了宽度，仍然是独占一行。
（3）block元素可以设置margin和padding属性。- inline
（1）inline元素不会独占一行，多个相邻的行内元素，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
（2）inline元素设置width,height属性无效。
（3）inline元素的margin和padding属性，水平方向的padding-left，padding-right，margin-left,margin-right都产生边距效果；但竖直方向的padding-top，padding-top，padding-bottom，margin-top，margin-bottom不会产生边距效果。- inline-block
同时具有inline 和 block的特点可以改变宽高，但是不会独占整行。
