javaScript
js是轻量型和解析型的脚本语言
解析的过程
被web浏览器解析
1. 语言分析 分析是否有js语法错误
2. 预编译 执行之前需要准备工作
3. 执行代码 按照从上往下 逐步执行
数据: 在js中放在那里,如何被使用
--> 变量中 通过使用[变量] 使用数据
变量的特点--->变量存的值是可变的
js的数据类型分类:
1. 基本类型:null number boolean string undefined
2. 引用类型:Object function Array
undefined 与 null 的区别:
undefined表示未定义:都会死给变量赋值,[存在值]值就是undefined,在内存中占空间 ,内存空间存在,直接更改数据
null: 空 表示值不存在,再内存中不占地 在内存中先开辟一个空间,在存'null'值
{key,value}:键值对 key 键 value 值
key: 作用存放js数据,key本身是string类型
value: 为js任意类型
隐式转换:
1. 当布尔类型遇到算数运算符一般转化为number类型
2. 数字字符串遇到除了+算数运算符转为number
3. 空字符隐式转化number为0
4. 非空非数字字符隐式转化number 为NaN
5. 任意数据与NaN运算结果都是NaN
6. undefined转为number为NaN
7. null转为number为0
8. 数组和对象转为number;先隐式转为字符串,在由字符串转为number
运算优先级:
括号成员最高级,全体单目排第二,乘除余三,加减四,移位五,关系六,等于不等于排老七,逻辑八,赋值九,逗号成员排最低
Number(): 将其他类型数据转为数值型.参数为js数据类型
parseInt():只看第一个字符,满足才继续解析
1.忽略字符串前面的空格,直到找到第一个非空字符串
2.空字符串,返回NaN
3.如果第一个字符不是数字或者符号,返回NaN
4.以0开头字符,省略0,除非以下为是非数字字符,返回0
5.以0开头的数字字符省略0,返回其他数字字符
6.如果字符串以0开头且后面跟数字字符,就会将其转为10进制数,同样,八进制也一样
7.如果第一个字符为数字,会继续解析第二个字符,直到解析完所有后续字符或遇到了一个非数字字符,返回解析的所有数字字符
parseFloat():从头到尾的解析,最后返回一个结果,该结果总结以下规律
1. 空字符 NaN
2. 十六进制 0
3. 解析为第一个有效小数点
4. 普通的飞空字符 非数字 NaN
5. 科学记数法字符 , 转为科学记数法
6. 0 开头字符 如果继续解析后面字符非数字 NaN, 是数字 省略0 返回有效数字
注意:隐式转换为number与Number函数规则一致,与parseInt parseFloat不一致0
日期格式化:
var date = new Date();
var obj = {
YYYY: date.getFullYear(),
MM: date.getMonth() + 1,
DD: date.getDate(),
hh: date.getHours(),
mm: date.getMinutes(),
ss: date.getSeconds(),
};
var format = "YYYY-MM-DD hh:mm:ss";
for (var x in obj) {
if (obj[x] < 10) {
obj[x] = "0" + obj[x];
}
console.log(obj[x]);
format = format.replace([x], obj[x]);
}
console.log(format);
什么是回调函数:当函数作为实参时,那么这个函数就叫做回调函数
arguments: 类数组,存放所有的实参;
类数组:具有索引,但是不能使用 数组下api(push pop...)
js解析过程:
1.语言分析,分析代码中是否有[语法错误].如果有则抛出错误
2.预编译:
2.1:底层创建对象,Global [Active Object] === 变量对象
2.2:打开浏览器运行代码前：创建 GO, 提升函数 变量声明提升，作为Go对象下属性
2.3:函数执行时；创建AO ,提升形参 提升函数声明，提升变量声明，形参实参相同一
3.解析[执行]
3.1:从上往下的执行。对Go 或者 AO 中属性重新赋值过程
3.2:函数执行完毕时，AO 销毁
3.3:浏览器关闭时,GO销毁
执行上下文分类:
1.全局执行上下文
2.局部执行上下文
每个执行上下文包含:
1.作用域链 scope
2.变量对象
3.this
扁平化:
将嵌套多层的数组,转为一层数组,叫做数组扁平化
对象分为:函数对象,其他对象
1.所有的对象都有原型对象
2.原型对象也是普通对象
3.所有的函数对象获取原型对象的方式 fun.prototype
4.new 实例的对象的原型对象与构造函数的原型对象是同一个
5.new 实例对象的constructor属性为构造函数
6.函数的原型的原型对象为Object.prototype
7.Object.prototype 是所有对象的最后一个原型对象,在.__proto__ 就是null
8.通过原型查找原型直到null为止,形成的这样链式的结构0;叫做原型链
9.在原型链上的属性,对象都可以直接获取
this的判断方式:
1.看this在哪里
全局 this === window
箭头函数中 没有this 使用上一层作用域中this ---> 判断上一层this
function函数方法体中
2.谁触发的函数,this 指向谁
new 触发的函数 thiss === new 实例化对象
coll apply bind 触发的函数 this === call/apply/bind 参一赋值的对象
普通对象触发的函数,谁调用的指向谁 this === 函数盘边的对象
执行上下文栈:
管理所有的执行上下文对象
当函数执行时 会创建执行上下文 存放多个执行上下文就叫执行上下文栈
执行上下文:
当函数执行会创建一个成为执行上下文的内部对象 一个执行上下文定义了一个函数执行时的环境
作用域链:
有多个执行上下文的变量对象构成的链表就叫作用域链
作用域和作用域分类:
作用域指的是程序运行代码声明变量的区域
分类: 全局 局部
css盒子模型与低版本IE盒子模型有什么不同:
盒模型:html元素本质上是一个盒子,盒模型是浏览器用于描述盒子的标准,盒模型中有以下内容:width heigth border padding margin
标准盒子模型: content-box 宽度决定 content 大小
IE盒子模型: border-box 宽度 pdding = content 大小
box-sizing属性:
border-box:IE盒模型 边框盒子,盒子内部大小 width-padding
content-box: 标准盒模型 内容盒子,盒子内部大小 width
我常用的是边框盒子,在布局中不但需要考虑盒子本身容器的大小 还需要考虑;盒子在父容器中占多大位置问题,我认为在父容器占位置,随着元素的增加减少相对计算,所以使用固定的值比较好,本身容纳元素,可以通过其他属性进行设置,遇到问题容易解决
比如:内容溢出,一般都是设置父容器解决问题
在初始化排版的时候,父容器大小存在默认情况;更大的考虑子容器占地问题,定值不容易算错
css选择器有哪些哪些属性可以继承:
标签选择器 id选择器 类名选择器
字体颜色,大小,样式可以继承
css选择器的作用是选中html元素,并设置css属性
常用的 class id 元素选择器 *
html之间具有一定关系的,css中部分属性是可以被继承的,比如:文本属性中,font-size font-weight color等
css优先级算法如何计算的:
优先级存在情况:当多个选择器选中同一个元素时,优先使用样式的问题
优先级:!important>行内样式>id选择器>类选择器>标签选择器
权重:1000 100 10 1
可以利用选择器优先级方式,解决样式冲突问题
为了提高性能以及样式的可维护性,尽量避免使用!important,尽量利用合理编写选择器,代替!important
css3新增伪类有:
我常用的有:
:hover :fouce :checked :active :nth-child()
为input中的伪类:编写特殊样式;比如switch开关,checkbox的选择框样式,可以用到
如何居中div,如何居中一个浮动元素,如何让绝对定位的div居中:
绝对定位 + transform:translate()
弹性布局
margin:0
display的属性,作用:
display:block 元素变为块级元素
display:inline 元素变为行内元素
display:inline-block 元素变为行内块
display:flex 设置弹性布局
display:none 元素隐藏
display:none 此元素不会被显示
display:block 此元素将显示为块级元素,此元素前后会带有换行符
display:inline 默认,此元素会被显示未内联元素,元素前后没有换行符
display:inline-block 行内块元素(css2.1新增的值)
display:list-item 此元素会作为列表显示
display:run-in 此元素会根据上下文作为块级元素或内联元素显示
display:compact css中有值compact,不过由于缺乏广泛支持,已经从 css2.1 中删除
display:marker css 中有值marker不过由于缺乏广泛支持,已经从 css2.1 中删除
display:table 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符
display:inline-table 此元素会作为内联表格来显示(类似<table>),表格前后没有换行符
display:table-row-group 此元素会作为一个或多个行的分组来显示(类似<tbody>)
display:table-header-group 此元素会作为一个或多个行的分组来显示(类似<thead>)
display:table-footer-group 此元素会作为一个或多个行的分组来显示(类似<tfoot>)
display:table-row 此元素会作为一个表格行显示(类似<tr>)
display:table-column-group 此元素会作为一个或多个列的分组来显示(类似<colgroup>)
display:table-column 此元素会作为一个单元格列显示(类似<col>)
display:table-cell 此元素会作为一个表格单元格显示(类似<td>和<th>)
display:table-caption 此元素会作为一个表格标题显示(类似<caption>)
display:inherit 规定应该从父元素继承display属性的值
position的值:
absolute 绝对定位
relative 相对定位
fixsd 生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过left,top,right,bottom属性进行规定
static 默认值,没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)
css3的新特性:
@keyframes 设置动画效果
box-shadow 设置阴影
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
font-face属性:定义自己的字体
圆角(边框半径):border-radius 属性用于创建圆角
边框图片:border-image: url(border.png) 30 30 round
盒阴影:box-shadow: 10px 10px 5px #888888
媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性
css3的flexbox(弹性盒布局模型)适用场景:
让父元素的子元素以行内块式排列,适用于导航栏,响应式布局
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局,对齐和分配空间,在传统的布局方式中,block布局是把快在垂直方向从上到下依次排列的,而inline布局则是在水平方向来排列,弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作
适用场景:弹性布局适用于移动前端开发,在Android和ios上也完美支持
去重:
方式一:
function do_weight(){
var res = []
arr.forEach(function(item){
if(res.indexOf(item)===-1){
res.push(item)
}
})
}
arr = do_weight(arr)
方式二:
function btn(array){
if(!Array.isArray(array)) throw new Error('parm must be Array')
var res = array.filter(function(item,index){
return array.indexOf(item) === index
})
return res
}
btn(array)
方式三:
var res = []
flag = false
for(var i= 0;i<arr.length;i++){
for(var j= 0;j<res.length;j++){
if(arr[i]===res[j]){
flag = true
break
}else{
flag = false
}
}if(!flag){
res.push(arr[i])
}
}
方式四:
for(var i = 0;i<arr.length;i++){
for(var j = 0;j<arr.length;j++){
if(arr[i]===arr[j]){
arr.splice(j,1)
j--
}
}
}
console.log(arr)
封装去重:
function btn(array){
if(!Array.isArray(array)) throw new Error('parm must be Array')
var res = array.filter(function(item,index){
return array.indexOf(item) === index
})
return res
}
btn(array)
封装求数组中最大值的函数:
function max(array){
var res = array.reduce(function(max,item){
return Math.max(max,item)
},0)
return res
}
console.log(max(array))
封装求最大值:
function max(arr){
var max = arr[0]
for(var i=0;i<arr.length;i++){
max = Math.max(max,arr[i])
}
return max
}
封装任意俩个随机数的函数:
方式一:
function random(max,min){
return Math.floor(Math.random()*(max-min+1)+min)
}
console.log(max,min)
方式二:
function random(){
if(typof argumenta[0] !== 'number' || typeof arguments[1] !==='number') throw new Error('parms must be number')
var res = [...arguments]
var max,min
if(res[0]>res[1]){
max = res[0]
min = res[1]
}else{
min = res[0]
max = res[1]
}
return Math.floor(Math.random()*(max-min+1)+min)
}
求任意随机数:
Math.floor(Math.random()*(max-min+1)+min)
forEach() 作用:遍历数组,无返回值
参数是函数
回参一: 数组元素
回参二:索引值
var res = arr.forEach(function(item,index){
console.log('索引值--',index)
console.log('遍历数组--',item)
document.write(`<li>${item.name}<li>`)
})
console.log(res)
用纯css创建一个三角形的原理:
将元素的宽度设为0,通过设置元素的box-shadow属性来实现三角形,改变box-shadow的宽度即可改变三角形的形状
加大变宽宽度,内容区为0
设置其他边框颜色为透明
品字布局:
先创建俩个div,宽为100%,高为父元素的50%,第二个div设置弹性布局在创建俩个div,宽为父元素的50%高为100%,
