前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
对称数
对称数
//判断是不是对称数
for (var i = 1; i <= 10000; i++) {
//将数字转换
var str_i = i.toString(),
l = str_i.length
var arr_i = str_i.split('') //将字符串转化为数组
var rev_arr = [] //命名一个空数组
for (var j = 0; j < 1; j++) {
//遍历1-10000之间的所有数字
rev_arr.unshift(arr_i[j]) //实现数组反转
}
var rev_str = rev_arr.join('') //将数组转换为数字
if (str_i == rev_str) {
document.write(str_i + '
') //如果是相等的 就是对称数 并返回
}
}
对象
引用数据类型 和值数据类型
function test(person) {
person.age = 26
person = {
name: 'yyy',
age: 30
}
return person
}
const p1 = {
name: 'yck',
age: 25
}
const p2 = test(p1)
console.log(p1) // -> { name: 'yck',age: 26}
console.log(p2) // -> { name: 'yyy',age: 30}
左边固定 右边自适应
左边固定 右边自适应
.main{
float:right;
width: 100%;
margin-left:-200px;
background-color: rgb(202, 158, 165);
}
.content{
margin-left:200px;
background-color: aquamarine;
}
.side{
float:left;
width: 200px;
background-color: pink;
}
geyao
fangfang
实现两栏布局1
实现两栏布局
/* 利用浮动,左边元素宽度固定 ,设置向左浮动。
将右边元素的 margin-left 设为固定宽度 。注意,因为右边元素的 width 默认为 auto ,所以会自动撑满父元素 */
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
margin-left: 200px;
height: 100%;
background: lightseagreen;
}
左侧
右侧
实现两栏布局2
实现两栏布局
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
overflow: auto;
height: 100%;
background: lightseagreen;
}
左侧
右侧
//同样利用浮动,左边元素宽度固定 ,设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ,BFC 的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠。
常见面试题实现两栏布局第三种
两栏布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
flex: 1;
height: 100%;
background: lightseagreen;
}
左侧
右侧
常见面试题两栏布局第四种
两栏布局第四种
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
position: absolute;
left: 200px;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: lightseagreen;
}
左侧
右侧
数组去重方式第五种
Document
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
let res = [],
obj = {}
//如果对象的属性值不存在 就放进去 不然就赋值+1
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
res.push(arr[i])
obj[arr[i]] = 1
console.log( obj[arr[i]],"obj[arr[i]]")
} else {
obj[arr[i]]++
console.log( obj[arr[i]],"obj[arr[j]]")
}
}
return res
}
console.log(ArrayCommon(geyao, 'geyao'))
数组方法slice
数组方法slice
var geyao=["1","2","3","4"]
var geyaotest=["1","2","3","4"]
var geyaofangfang=["1","2","3","4"]
var fangfang=["1","2","3","4"]
var fangfangTest=["1","2","3","4"]
//arr.slice([begin[, end]]) slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝
//从第一个位置开始截取到最后一个位置
console.log( geyao.slice(1),"geyao") // [ "2", "3", "4" ]
//从第一个位置截止到第二个位置
console.log( geyaotest.slice(1,2),"geyaotest") // [ "2" ]
//从第一个位置截取到最后一个位置
console.log( geyaofangfang.slice(1,5),"geyaofangfang") // [ "2", "3", "4" ]
//从最后一个位置开始截取
console.log( fangfang.slice(-1),"fangfang") // [ "4" ]
//从最后一个位置开始截取 截取当前倒数第二个
console.log( fangfangTest.slice(-2,-1),"fangfangTest") // [ "3" ]
常见面试题对BFC的一些理解
// BFC 即块级格式上下文, 根据盒模型可知, 每个元素都被定义为一个矩形盒子, 然而盒子的布局会受到尺寸, 定位, 盒子的子元素或兄弟元素, 视口的尺寸等因素决定, 所以这里有一个浏览器计算的过程, 计算的规则就是由一个叫做视觉格式化模型的东西所定义的, BFC 就是来自这个概念, 它是 CSS 视觉渲染的一部分, 用于决定块级盒的布局及浮动相互影响范围的一个区域。
// BFC 具有一些特性:
// 块级元素会在垂直方向一个接一个的排列, 和文档流的排列方式一致。
// 在 BFC 中上下相邻的两个容器的 margin 会重叠, 创建新的 BFC 可以避免外边距重叠。
// 计算 BFC 的高度时, 需要计算浮动元素的高度。
// BFC 区域不会与浮动的容器发生重叠。
// BFC 是独立的容器, 容器内部元素不会影响外部元素。
// 每个元素的左 margin 值和容器的左 border 相接触。
// 利用这些特性, 我们可以解决以下问题:
// 利用 4 和 6, 我们可以实现三栏( 或两栏) 自适应布局。
// 利用 2, 我们可以避免 margin 重叠问题。
// 利用 3, 我们可以避免高度塌陷。
// 创建 BFC 的方式:
// 绝对定位元素( position 为 absolute 或 fixed)。
// 行内块元素, 即 display 为 inline - block。
// overflow 的值不为 visible。
异步和同步转换
异步和同步转换
// 假设场景两个函数
// function fangfang() {
// setTimeout(() => {
// console.log("我给你钱")
// },1000)
// }
// function geyao() {
// setTimeout(() => {
// console.log("我去买东西")
// },500)
// }
// fangfang();
// geyao();
//我必须拿到钱 才去买东西 然后买好了
function fangfang(geyao) {
setTimeout(() => {
console.log("我给你钱")
geyao(kangkang)
},1000)
}
function geyao(kangkang) {
setTimeout(() => {
console.log("我去买东西")
kangkang()
},500)
}
function kangkang() {
setTimeout(() => {
console.log("我买好了")
},500)
}
fangfang(geyao)
总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net