基础编程
在js中怎么捕获异常？写出来看看？应该在哪些场景下采用呢？
try {
...
throw ...
...
} catch (err) {
...
} finally {
...
}
- 通过 throw 语句抛出错误；理论上可以抛一切值，但实际上建议只抛 Error 对象；
- try 块内 throw 的错误会导致停止执行，并将抛出的对象传给 catch 块；
从 ES2017 开始，如果不需要获取抛出的对象，则 catch 块 可以直接写为 catch { … } - catch 块一般用于对错误进行处理；
- finally 块中的语句不论是否抛出错误，都会执行。
使用场景： - 复杂逻辑代码库
- 发起 ajax、fetch 的时候
- 判断是否支持默写浏览器特性
window.onerror = function(message, source, lineno, colno, error) { ... } 可以在全局顶层监听未捕获的错误
window.addEventListener('unhandledrejection', event => ···);监听未捕捉的promise错误
说说你对hosts文件的理解，它都有哪些作用？
hosts 文件可以将名称映射到 IP 地址。在本机上所有对这个名称的访问相当于对它被映射到的 IP 地址的访问。可以说它起到了简易的本地 DNS 的作用。
a标签的href和onclick属性同时存在时，哪个先触发？
应该是onclick属性先触发，判断依据是在onclik中使用preventDefault方法可以阻止a标签的跳转，说明a标签的跳转行为是一个默认行为
数组去重
遍历循环 .indexOf()
let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];
function unique1(arr){
let result = [arr[0]];
for (let i = 1; i < arr.length; i++) {
let item = arr[i];
if(result.indexOf(item) === -1){
result.push(item);
}
}
return result;
}
console.log(unique1(arr));
利用Set类型
let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];
function unique4(arr){
return Array.from(new Set(arr));
}
console.log(unique4(arr));
解决0.1+0.2=0.30000000000000004
function add() {
const args = [...arguments]
const maxLen = Math.max.apply(
null,
args.map(item => {
const str = String(item).split('.')[1]
return str ? str.length : 0
})
)
return (
args.reduce((sum, cur) => sum + cur * 10 ** maxLen, 0) / 10 ** maxLen
)
}
console.log(add(0.1, 0.2)) // => 0.3
console.log(add(10, 11)) // => 21
console.log(add(0.001, 0.003)) // => 0.004
console.log(add(0.001, 0.003, 0.005)) // => 0.009
console.log(add(0.001)) // => 0.001
数组扁平化
function flatten(arr) {
let result = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]));
} else {
result = result.concat(arr[i]);
}
}
return result;
}
const a = [1, [2, [3, 4]]];console.log(flatten(a));
css实现五角星
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: "";
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: "";
}
css 实现提示框
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）
html,
body {
height: 100%;
}
.mainContent {
background: #66b1ff;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
footer {
height: 50px;
line-height: 50px;
text-align: center;
margin-top: -50px;
}
css上中下三栏布局
.layout.flexbox{
display: flex;
width: 100%;
height: 100%;
flex-direction:column;
}
.layout.flexbox .top{
height: 100px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .bottom{
height: 100px;
background: blue;
}
css 无线翻转
@keyframes rotate{
0%{
transform: rotate(0);
}
50%{
transform:rotate(200deg);
}
100%{
transform: rotate(0);
}
}
.rotate{
transition: 0.5s;
transform-origin: 30px 30px;
animation: rotate 10s linear infinite; /*开始动画后无限循环，用来控制rotate*/
}
其它
- 红绿灯程序
function sleep (t) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, t)
})
}
/**
* 循环显示红绿灯
* @param {number} green 绿灯显示毫秒数
* @param {number} yellow 黄灯显示毫秒数
* @param {number} red 红灯显示毫秒数
*/
async function light (green = 15000, yellow = 3000, red = 10000) {
let status = 'green'
while (true) {
await sleep(green).then(() => {
status = 'yellow'
console.log(status)
})
await sleep(yellow).then(() => {
status = 'red'
console.log(status)
})
await sleep(red).then(() => {
status = 'green'
console.log(status)
})
}
}
light(3000, 1000, 1000)
- 写一个方法判断两个字符串是否同态
同态：两个字符串，如果A字符串中的每一个字符都可以在B字符串中找到唯一对应，并且顺序一一对应；如果存在这样的函数，那么A和B同态。字符串同态就是字符串拥有同样的字符结构
function isomorphic (a, b) {
let res = true
if (a.length === b.length) { // 首先字符串长度肯定要一致
let ka = {}
let kb = {}
res = b.split('').every((item, idx) => {
if (!kb[item]) {
kb[item] = a[idx] // 存放b字符串当前字符对应于a字符串中的哪个字符（映射）
}
return kb[item] === a[idx] // 判断b字符串当前字符对应于a字符串中的映射是否与a字符串当前索引的字符一致
}) &&
a.split('').every((item, idx) => {
if (!ka[item]) {
ka[item] = b[idx] // 存放a字符串当前字符对应于b字符串中的哪个字符（映射）
}
return ka[item] === b[idx] // 判断a字符串当前字符对应于b字符串中的映射是否与b字符串当前索引的字符一致
})
} else {
res = false
}
return res
}
console.log(isomorphic('add', 'egg')) // true
console.log(isomorphic('paper', 'title')) // true
console.log(isomorphic('xyxx', 'xztt')) // false
console.log(isomorphic('aaaaa', 'abcda')) // false
- 找出字符串中出现最多的的字符及其长度
function findMaxLetter (str) {
let maxLetter = ''
let maxLen = 0
let key = {}
str.split('').forEach(item => {
if (key[item] === undefined) {
key[item] = 1
} else {
key[item]++
}
if (key[item] > maxLen) {
maxLen = key[item]
maxLetter = item
}
})
return [maxLetter, maxLen]
}
- 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子
- 图片等比缩放 img{ object-fit: cover/contain;}
- div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现
<!--img标签样式-->
<style>
div{
display:flex;
justify-content:center;
align-items:center;
width:100px;
height:100px;
}
img{
max-width:100px;
max-height:100px;
}
</style>
<div><img></div>
<!--img标签样式-->
<style>
.dv{
width: 100px;
height: 100px;
border: 3px solid #f00;
float: left;
margin-right: 20px;
}
.dv img{
object-fit: contain;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="dv">
<img src="./imgs/1.png" alt="">
</div>
<div class="dv">
<img src="./imgs/2.png" alt="">
</div>
<div class="dv">
<img src="./imgs/3.png" alt="">
</div>
</body>
<!--背景图样式-->
<style>
.dv{
width: 100px;
height: 100px;
border: 3px solid #f00;
float: left;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
}
.dv:nth-child(1){
background-image: url('./imgs/1.png');
}
.dv:nth-child(2){
background-image: url('./imgs/2.png');
}
.dv:nth-child(3){
background-image: url('./imgs/3.png');
}
</style>
</head>
<body>
<div class="dv">
</div>
<div class="dv">
</div>
<div class="dv">
</div>
</body>
- 分别封装精确运算的加减乘除四个方法
- 写一个还剩多少天过年的倒计时的方法：
const getLastDays = function () { return Math.floor((new Date('2019-12-31 23:59:59:999') - new Date().getTime())/(24*3600000)); }
//或者
Math.floor((new Date("2019-12-31") - Date.now()) / (10**5 *36*24))
- 请写出一个函数求出N的阶乘
function factorial(n) {
if (n > 1) return n*factorial(n-1);
return 1;
}
- 写一个函数找出给定数组中的最大插值
function difference(arr) {
return Math.max(...arr) - Math.min(...arr)
}
var arr = [1,2,3,4,5,6]
console.log( difference(arr) )
- 写一个方法，使得sum(x)(y)和sum(x,y)返回的结果相同
function sum(x){
if(arguments[1]){
var arr = Array.prototype.slice.apply(arguments);
x = arr.reduce((a, c)=> a+ c)
return x;
}else{
function add(b) {
x = x + b;
return add;
}
add.toString = function() {
return x;
}
return add;
}
}
var res1 = sum(1)(2)(3)(4)(5)(6);
var res2 = sum(1,2,3,4,5,6);
console.log(res1)//21
console.log(res2)//21
- 写一个格式化金额的方法
function moneyFormat(money, digit) {
digit = digit > 0 && digit <= 20 ? digit : 2;
money = parseFloat(money).toFixed(digit);
var integerArr = money.split(".")[0].split("").reverse();
var decimals = money.split(".")[1];
tempArr = "";
for (var i=0,k=integerArr.length;i<k;i++) {
var cammaTag = (i+1)%3==0 && (i+1)!=k ? "," : "";
tempArr += integerArr[i] + cammaTag;
}
money = tempArr.split("").reverse().join("") + "." + decimals;
return money;
}
- 用css写一个太阳
<style>
body{
margin: 0 0 0 0;
background-color: #2c3e50;
animation: skyanimation 10s infinite;
}
.grass {
background-color: green;
height: 600px;
width: 100%;
position: absolute;
}
.sun {
background: orange;
height: 200px;
width: 200px;
border-radius: 50%;
animation: sunanimation 10s infinite linear;
}
@keyframes skyanimation {
0% {
background-color: #2c3e50;
}
10% {
background-color: pink;
}
30% {
background-color: blue;
}
70% {
background: blue;
}
90% {
background: pink;
}
100% {
background-color: #2c3e50;
}
}
@keyframes sunanimation {
0% {
background-color: orange;
transform: translate(-100px, 200px);
}
10% {
background-color: orange;
transform: translate(calc(10vw - 100px), 120px);
}
20% {
background-color: orange;
transform: translate(calc(20vw - 100px), 70px);
}
35% {
background-color: yellow;
transform: translate(calc(35vw - 100px), 20px);
}
50% {
background-color: yellow;
transform: translate(calc(50vw - 100px), -10px);
}
65% {
background-color: yellow;
transform: translate(calc(65vw - 100px), 20px);
}
80% {
background-color: orange;
transform: translate(calc(80vw - 100px), 70px);
}
90% {
background-color: orange;
transform: translate(calc(90vw - 100px), 120px);
}
100% {
background-color: red;
transform: translate(calc(100vw - 100px), 200px);
}
}
</style>
<div class="sun"></div>
<div class="grass"></div>
- 请实现一个flattenDeep函数，把多维数组扁平化
// const newArray = arr.flat(depth)
const temp = [1,2,[1,2]];
console.log(temp.flat(Infinity));
// [1,2,1,2]
//方法二
function flattenDeep(arr, deepLevel = Infinity) {
if (deepLevel < 1) return arr;
var needMoreDeep = deepLevel > 0;
return [].concat(...arr.map(item => {
return Array.isArray(item) && needMoreDeep ? flattenDeep(item, deepLevel - 1) : item;
}));
}
console.log(flattenDeep([1,2,3,[4,[5,[6]]]], 2)); // [1, 2, 3, 4, 5, [6]]
- 写一个方法获取图片的原始宽高
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function() {
var obj = {
w: image.naturalWidth,
h: image.naturalHeight
}
resolve(obj);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
- 用css画一个爱心
怎么不喜欢贴预览链接呢。
- https://codepen.io/foreverZ133/pen/XLpJdK
- https://codepen.io/foreverZ133/pen/RzKNZB
- box-shadow ：https://wow.techbrood.com/fiddle/27194
- SVG 的：https://wow.techbrood.com/fiddle/36760
- 如何消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
- 写出唤醒拨打电话、发送邮件的例子
<a href="tel:139xxxxxxxx">一键拨打号码</a>
<a href="mailto:yuojian@163.com">一键发送邮件</a>
<a href="sms:139xxxxxxx">一键发送短信</a>
- 写一个字符串重复的方法
ES6本身提供了String实例的repeat方法，使用之前需要考虑兼容性问题
function repeat (str, times) {
if (typeof String.prototype.repeat === 'function') {
return str.repeat(times)
} else {
var arr = new Array(times)
for (var i = 0; i < times; i++) {
arr[i] = str
}
return arr.join('')
}
}
- 写一个方法随机生成指定位数的字符串
function getRandomString (length) {
let str = Math.random().toString(36).substr(2)
if (str.length >= length) {
return str.substr(0, length)
}
str += getRandomString(length - str.length)
return str
}
- 用CSS画出一个任意角度的扇形，可以写多种实现的方法
<div class="sector"></div>
<div class="sector" style="border-radius: 0;"></div>
.sector {
display: inline-block;
margin: 20px;
background: red;
width: 100px;
height: 100px;
border-radius: 100%;
animation: sector 4s linear both infinite;
transform: rotate(45deg);
}
@keyframes sector{
from {
clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
}
25% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
25.000001% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
}
50%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
}
50.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
}
75%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
75.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
}
to{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}
}
<div class="contain">
<div class="main"></div>
<div class="mask1 common"></div>
<div class="mask2 common"></div>
</div>
.contain {
position: relative;
width: 200px;
height: 200px;
}
.main {
height: 100%;
background: lightgreen;
border-radius: 100px;
}
.common {
position: absolute;
top: 0;
width: 50%;
height: 100%;
}
.mask1 {
transform: rotate(83deg);
border-radius: 100px 0 0 100px;
left: 0;
transform-origin: right center;
background: red;
}
.mask2 {
transform: rotate(-76deg);
transform-origin: left center;
left: 100px;
border-radius: 0 100px 100px 0;
background: blue;
}
- 用js实现一个九九乘法表
//字符串补全方法 padEnd和padStart(len,str) 根据给定长度自动在字符串的前/后补充字符串（只返回修改后的字符串，不修改原字符串）
//len 给定的长度，转换后
//str 想补充的字符串
const MAX_WIDTH = 7
let table = ''
for (let rhs = 1; rhs <= 9; rhs++) {
for (let lhs = 1; lhs <= 9; lhs++) {
if (lhs <= rhs) table += `${lhs}*${rhs}=${lhs * rhs}`.padEnd(MAX_WIDTH)
}
table += '\n'
}
console.log(table)
- 举例说明你对HTML5的ruby标签的理解，都有哪些应用场景？
ruby 包含多个rt,rp标签构成,用以表示注释
<ruby class="spz">
<rb>龙</rb>
<rt>lóng</rt>
<rb>行</rb>
<rt>xíng</rt>
<rb>龘</rb>
<rt>dá</rt>
<rb>龘</rb>
<rt>dá</rt>
<rb>犄</rb>
<rt>jī</rt>
<rb>角</rb>
<rt>jiǎo</rt>
<rb>旮</rb>
<rt>gā</rt>
<rb>旯</rb>
<rt>lá</rt>
</ruby>
- 写一个sleep（暂停）函数
//不要写同步的暂停函数。它会让你的程序卡死。
//写一个异步的暂停函数，这样可以在任何 async function 中暂停，且只暂停这一部分代码。
function sleep(milliseconds: number) {
return new Promise<void>(resolve =>
setTimeout(resolve, milliseconds))
}
void async function main() {
// … do something …
await sleep(5000)
// … do something else …
}()
- instanceof 运算符将检测右端值的 prototype 属性是否在左端值的原型链（[[Prototype]] 属性）上；
如果不在，则向上查找（[[Prototype]] 的 [[Prototype]]，…），直到找遍左端值的整个原型链。
function test(){
return test;
}
//原表达式相当于：test instanceof test
new test() instanceof test;
可以看到，原型链上没有 test.prototype 出现，所以 test 并不是 test 的一个实例。
所以 instanceof 运算符返回 false。
- 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？
- 方法一：flex布局
.leftBody {
display: flex;
flex-direction: column;
.leftBodyTop {
flex-basis: 300px;
background: #fff;
}
.leftBodyBottom {
background: #fff;
margin-top: 16px;
flex: 1;
}
}
- 方法二 利用css3的calc()
.top {
height: 300px;
background-color: #dbdd66
}
.bottom {
height: calc(100% - 300px);
background-color: #427cdd
}
- 方法三 table布局
.leftBody {
display: table;
.leftBodyTop {
background: #fff;
display: table-row;
height: 0; /* 尽可能的减小高度，即自适应内容 */
}
.leftBodyBottom {
background: #fff;
display: table-row; /* 占满剩余空间，自适应父类剩余高度 */
vertical-align: top; /* 将内容放在顶部 */
&::before { /* 设置 display：table-row; 时，margin 和 padding 设置会失效，故这里用伪元素代替显示 */
content: '';
display: block;
width: 100%;
height: 16px;
background: #edf0f4;
}
}
}
- 写一个方法随机打乱一个数组
- 洗牌算法
function shuffle(arr) {
let shuffled = arr.concat(), rand;
for (let i = shuffled.length; i--;) {
rand = Math.floor(Math.random() * (i + 1));
[shuffled[i],shuffled[rand]] = [shuffled[rand],shuffled[i]]
}
return shuffled;
}
- 方法二
class shuffle {
constructor(arr) {
this.oldArrLength = arr.length;
his.newArr = arr;
this._init()
}
_init() {
let j = this.oldArrLength / 2;
for (let i = 0; i <= j; i++) {
var randomNum = this._getRandomIndex(this.oldArrLength/ 2 -1 , this.oldArrLength);
[this.newArr[i],this.newArr[randomNum]] = [this.newArr[randomNum],this.newArr[i]]
}
}
_getRandomIndex(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
}
var myarr = new shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
console.log(myarr.newArr) //[6, 7, 1, 2, 10, 5, 4, 8, 9, 3]
- 自己实现数组的 map、filter、find方法
- map
function map (arr, fun) {
let res = []
arr.forEach((...args) => {
res.push(fun(...args))
})
return res
}
Array.prototype.newMap = function(fn, context) {
let newArr = new Array;
if(typeof fn !== "function") {
throw new TypeError(fn + "is not a function");
}
var context = arguments[1];
for (var i = 0; i < this.length; i++) {
newArr.push(fn.call(context, this[i], i, this))
}
return newArr
}
- filter
function filter (arr, fun) {
let res = []
arr.forEach((...args) => {
if (fun(...args)) {
res.push(args[0])
}
})
return res
}
Array.prototype.newfilter = function (fn, context) {
let newArr = new Array;
if (typeof fn !== "function") {
throw new TypeError(fn + "is not a function");
}
var context = arguments[1];
for (var i = 0; i < this.length; i++) {
if (fn.call(context, this[i], i, this)) { newArr.push(this[i]) }
}
return newArr
}
- find
function find (arr, fun) {
let res = undefined
arr.some((...args) => {
if (fun(...args)) {
res = args[0]
return true
}
return false
})
return res
}
Array.prototype.newFind = function(fn, context) {
let str;
if(typeof fn !== "function") {
throw new TypeError(fn + "is not a function");
}
var context = arguments[1];
for (var i = 0; i < this.length; i++) {
if(fn.call(context, this[i], i, this)) {str = this[i];break; }
}
return str
}
-
写出div在不固定高度的情况下水平垂直居中的方法
-
写例子说明如何给li绑定事件（ul下有1000+个li）？
采用事件委托，利用事件冒泡的原理把事件绑定到父元素，在父元素识别是哪个子元素触发
$('ul').click(function(e) {
switch(e.target.id){
case '1':
console.log(1)
break;
case '2':
console.log(2)
break;
default:
console.log('default')
}
})
- 如何更改placeholder的字体颜色和大小
<style>
/* Chrome浏览器 */
input::-webkit-input-placeholder {
color: red;
}
/* 火狐浏览器 */
input::-moz-placeholder {
color: red;
}
/* IE */
input:-ms-input-placeholder {
color: red;
}
</style>
<body>
<input type="text" placeholder="你好">
</body>
- 不用第三方库，说说纯js怎么实现读取和导出excel？
//IE10+
let blob = new Blob([res.data],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
let a = document.createElement('a')
a.download = 'XXX.xlsx'
a.href =URL.createObjectURL(blob)
document.body.appendChild(a)
a.click()
- 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子
- 图片等比缩放 img{ object-fit: cover/contain;}
- div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现
- 自适应缩放居中
img{
max-width:100%;
max-height:100%;
}
div{
display: flex;
align-items: center;
jutify-content: center;
}
- 能否正确获取本地上传的文件路径？如果可以怎么做？如果不可以解释下为什么？
file.addEventListener('change', () => {
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (e) {
console.log(e.target.result);//也许是base64数据 也许是虚拟路径 取决于浏览器的实现
}
})
- 写一个方法，将字符串中的单词倒转后输出，如：my love -> ym evol
(text)=>{ let arr= [...text]; return arr.reverse().join(''); }
const reverseStr = str => {
if (typeof str !== "string") throw new Error("The argument must be a string");
return str
.split(" ")
.map(v =>
v
.split("")
.reverse()
.join("")
)
.join(" ");
};
4348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
