前端笔记 --持续更新

Posted 2021-10-09 llfididi

ms笔记

星图

js

javascript的数字类型

console.log(typeof 666) 返回一个字符串，表示未经计算的操作数的类型)

•   undefined number string boolean null object
•   && es6中的Symbol 这种对象永不相等，解决属性名冲突的问题
•   引用类型object包含:Data function Array 正则等

原型和原型链

原型：在当前类可以调用的方法
原型链：__proto__链状结构，当前没有就找上一级

哪里用到了：Vue.prototype.$axios = this.$axios()
或求平均值:(在原型上直接调用)
let ddd = [1,3,4]
ddd.average()
Array.prototype.average = function(){
let sum = 0;
for(let i =0;i<this.length;i++){
sum+=this[i]
}
return sum/this.length
}

系统方法

Object类型-实例方法

toString()

功能：返回当前对象的字符串形式，返回值为String类型

let newarr = [1,\'2\',true];
console.log(newarr.toString()); //"1,2,true"

toLocaleString()

功能：返回当前对象的“本地化”字符串形式，以便于当前环境的用户辨识和使用，返回值为String类型

(1234567).toLocaleString(); //"1,234,567"
(6.37588).toLocaleString(); //"6.376"
(new Date()).toLocaleString(); //"2017/9/24 下午2:58:21"

valueOf()

功能：返回指定对象的原始值。

2.静态方法

parseFloat:1.字符串中只返回第一个数字。2.开头和结尾的空格是允许的。3.如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
console.log(parseFloat("10")); //10
console.log(parseFloat("10.33")); //10.33
console.log(parseFloat("34 45 66")); //34
console.log(parseFloat(" 60 ")); //60
console.log(parseFloat("40 years")); //40
console.log(parseFloat("He was 40")); //NaN
​
​

eval(string)：函数可计算某个字符串，并执行其中的的 JavaScript 代码。//没什么用处

RegExp对象方法

test

• 功能：用于检测一个字符串是否匹配某个模式。
• 参数：string，必须，要检索的字符串。
• 返回值：true或者false。

注意：支持正则表达式的 String 对象的方法有：search()、match()、replace()和split()。

Function类型

argumengts

1、arguments

• arguments.length：获取函数实参的个数
• arguments.callee：获取函数对象本身的引用
• arguments.callee.length：获取函数形参的个数

Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用每个实际传入的参数。

示例：

function say(a,b,c){
console.log(arguments.length); //2
console.log(arguments[0],arguments[1]); //hello world
}
say(\'hello\',\'world\');

String类型

length

功能：string对象的length属性声明了该字符串的字符数

String对象方法

charAt()

• 功能：返回指定位置的字符
• 参数：必须，为目标字符的下标位置

若参数index不在0与string.length之间，该方法返回一个空字符串

charcodeAt()

• 功能：返回在指定的位置的字符的Unicode编码
• 参数：必须，为目标字符的下标位置

若参数index不在0与string.length之间，该方法返回NaN

indexOf()

• 功能：检索字符串，返回指定子字符串首次出现的位置
• 参数1：检索目标子字符串，必须
• 参数2：在字符串中开始检索的位置，可选。其合法值是0到stringObject.length-1。如果省略该参数，将从字符串的首字符开始检索

如果要检索的字符串值没有出现，则该方法返回-1

indexOf() 方法对大小写敏感

lastIndexOf() =>从后向前搜索字符串

match() ?待理解

• 功能：返回指定位置的字符

replace()

• 功能：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
• 参数1：regexp/substr，必须，规定子字符串或要匹配的RegExp对象。
• 参数2：replacement，必须，用于替换的子字符串值。
• 返回值：替换后的一个新字符串

示例：

var s = \'hello world hello\';
console.log(s.replace(\'hello\',\'hi\')); //hi world hello
console.log(s.replace(/hello/,\'hi\')); //hi world hello
console.log(s.replace(/hello/g,\'hi\')); //hi world hi

replace方法返回一个字符串，并不会修改字符串。

split()

• 功能：用于把一个字符串分割成字符串数组，是Array.join() 的逆操作。
• 参数1：separator，必须，字符串或正则表达式，从该参数指定地点地方分隔原字符串。
• 参数2：howmany，可选，指定返回数组的最大长度。

示例：

var s = \'hi baby\';
console.log(s.split(\'\')); //[ \'h\', \'i\', \' \', \'b\', \'a\', \'b\', \'y\' ]
console.log(s.split(\' \')); //[ \'hi\', \'baby\' ]
console.log(s.split(\'b\')); //[ \'hi \', \'a\', \'y\' ]

slice()

• 功能：截取字符串的某个部分，并以新的字符串返回被提取的部分。
• 参数1：截取的起始位置，必须。
• 参数2：截取的结束位置，可选。
• 返回值：截取部分，一个新的字符串。

注意：String.slice() 与 Array.slice() 相似。 slice方法的两个参数接受负值，若为负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。 若未指定第二个参数，则默认截取至字符串的末尾。 slice方法不修改原字符串。

示例：

var s = \'hi baby\';
console.log(s.slice(3)); //baby
console.log(s.slice(1,5)); //i ba
console.log(s.slice(-4)); //baby
console.log(s.slice(-4,-2)); //ba

Global对象-全局对象 (属性）

关于全局对象：全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象

Infinity

代表正的无穷大的数值。

NaN

代表非数字的值。

Undefined

代表未定义的值。

Global对象-全局对象 (方法)

encodeURIComponent()

对编码的字符串进行解码decodeURI() 和 decodeURIComponent()、escape（）
var codeVal = encodeURIComponent(\'20180711#abc\');
var url = \'http://www.baidu.com?code=\' + codeVal;
url; //"http://www.baidu.com?code=20180711%23abc"

location.search //"?code=20180711%23abc"
decodeURIComponent("?code=20180711%23abc") //"?code=20180711#abc"
都是URI

parseInt(string,radix) ?

parseFloat()

功能：解析一个字符串，并返回一个浮点数。 该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止。

console.log(parseFloat(\'10\')); //10
console.log(parseFloat(\'10.00\')); //10
console.log(parseFloat(\'10.33\')); //10.33
console.log(parseFloat(\' 60 \')); //60 首尾的空格会忽略
console.log(parseFloat(\'23 34 45\')); //23 中间的空格不会忽略，会中断
console.log(parseFloat(\'23 years\')); //23
console.log(parseFloat(\'i am 23\')); //NaN

提示：开头和结尾的空格是允许的。如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。如果只想解析数字的整数部分，请使用 parseInt() 方法。

isFinite(number)

用于检查其参数是否无穷大
number(必须)：待检测数字。
如果 number 是有限数字（或可转换为有限数字），那么返回 true。否则，如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false。

console.log(isFinite(123)); //true
console.log(isFinite(-1.23)); //true
console.log(isFinite(5-2)); //true
console.log(isFinite(0)); //true
console.log(isFinite(0/0)); //false
console.log(isFinite(\'Hello\')); //false

isNaN(value)

如果给定值为 NaN则返回值为true；否则为false。
一个isNaN的 polyfill 可以理解为（这个polyfill利用了NaN自身永不相等于自身这一特征 ）：
var isNaN = function(value) {

var n = Number(value);
return n !== n;

};

Number(object)

把对象的值转换为数字
object(必须)：待转换的对象。
如果参数是 Date 对象，返回时间戳。
如果对象的值无法转换为数字，那么返回 NaN。
console.log(Number(new Boolean(true))); //1
console.log(Number(new Boolean(false))); //0
console.log(Number(new Date())); //1506266494726
console.log(Number(new String(\'999\'))); //999
console.log(Number(new String(\'999 888\'))); //NaN

String(object)

把对象的值转换为字符串
String(new Boolean(true)) //true

Math对象

Math.abs(); //取绝对值
Math.ceil(); //向上取整
Math.floor(); //向下取整
Math.round(); //四舍五入取整
Math.random(); //返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。
Math.max(x,y,z,x); //返回里面最大的
Math.min(x,y,z,x); //返回里面最小的

JSON对象

JSON.parse()

将字符串反序列化成对象

JSON.stringify()

将一个对象解析为json字符串

闭包

• 读取函数内部的变量
• 使这些变量的值始终保存在内存中

继承

• 类继承
• 构造函数继承
• 组合继承
• 寄生组合继承
• extends (es6)

事件流

事件代理 事件委托

跨域

jsonp : get请求

ifram：开启一个新的页面

cors：跨域资源共享（IE10以上，在请求头加origin）

proxy => nginx反向代理

es6

promise

promise库 => bluebird

class

vue

数据双向绑定

object.defineProperty

vuex

有哪几种属性:

• state => 基本属性
• getters => 从基本数据派生的数据,return后不会改变原数据。
• mutations => 提交更改数据的方法，同步！
• actions => 像一个修饰器，包裹mutations，使之可以异步。
• modules => 模块化vuex

vuex 的 store 特性是什么：

• vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的data
• state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这项数据的组件也会发生更新。

• 可以通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性（第二种方法）。

  1.从vuex中按需导入mapState函数
  import { mapState } from \'vuex\'
  computed:{

  ...mapState([\'count\'])

  }

vuex 的 getter 特性是什么：

• getter 可以对 state 进行计算操作，他就是 store 的计算属性。
• 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用。
• 如果一个状态只在一个组件中使用，是可以不用 getters。

vuex 的 mutation 特性是什么：

• action 类似于 muation，不同在于：action 提交的是 mutation，而不是直接变更状态。
• action 可以包含任意异步操作。

• 不要再组件中直接修改，要在mutation中修改。

  //在vuex中
  mutations:{

  add(state,step){//第一个参数接收state， 第二个参数是传过来的
      state.count++
  }

  }

  //组件中
  methods:{

  handle1(){
      this.$store.commit(\'add\',3)//把第二个参数传到vuex，
  }

  }

vue 中 ajax 请求代码应该放在组件的 methods 中还是 vuex 的 action 中

• 如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state 里。
• 如果被其他地方使用，请将请求放入 action 里，方便复用，并包装成 promise 返回。

不用 vuex 会带来什么问题

• 可维护性会下降，你要修改数据，你得维护三个地方。
• 可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
• 增加耦合，大量的上传派发，会让耦合性大大的增加，本来vue用component就是为了减少耦合，现在这么用，和组件化的初衷相悖

comtruted watch

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

https://blog.csdn.net/akatsuki233/article/details/89494859

axios挂载

算法

排序

无侵入无序数组求最大值

let arr = [12,435,354,6436,566,56546]
let res1 = Math.max.apply(null,arr) //56546
let res2 = Math.min.call(null,...arr) //56546

css

rem em

em相对于父元素

rem相对于根元素字体大小

居中

/ table-cell居中 /
display:table-cell;
vertial-align:middle;
text-align:center;

/ flex居中 /
display:flex;
justify-content:center;
align-items:center;

/ 定位居中 /

flex 盒子模型

修改checkbox样式

基本原理是利用after/ before插入新的元素。然后利用新元素的背景颜色或背景图片覆盖掉原来的样式。

<input type="checkbox" name="method" value="plus" checked>plus

<input type="checkbox" name="method" value="minus">minus

<input type="radio" name="method" value="plus">plus

<input type="radio" name="method" value="minus" checked>minus

input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}

input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}

input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
}

input[type=radio] {

margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;

}

input[type=radio]:after {

position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 50%;

}

input[type=radio]:checked:before {

content: "✓";
display: block;
position: relative;
top: -2px;
left: 3px;
width: 6px;
height: 6px;
color: #fff;
font-weight: 400;
z-index: 1;
}

cookie

fetch 获取资源接口 (跨域)

计算运行时间

console.time() => console.timeEnd()

console

console.dir() =>显示一个对象的所有属性和方法

console.dir(Function)

伪数组

伪数组：具备length属性，不能使用真数组的方法

什么是伪数组：querySelectAll,getElementByClassName,arugments

let args = arguments
console.log(args) //返回一个伪数组，__proto__显示是一个对象
args = Array.prototype.slice.call(args,0) //在数组的原型上，slice后面为0返回原来的数组
args.push(8) //伪数组没有push方法 通过上面转化变成了真数组

bug解析

overflow属性

scroll：必会出出现滚动条；（斯口柔）

auto：子元素内容大于父元素时出现滚动条

visible：溢出的内容出现在父元素之外（v ze bao）

hidden:溢出隐藏

targer

在html中通过标签打开一个链接，可以通过a的target属性规定在何处打开链接文档。

_blank

在新窗口中打开被链接文档。

_self

默认。在相同的框架中打开被链接文档。

_parent

在父框架集中打开被链接文档。

_top

在整个窗口中打开被链接文档。

framename

在指定的框架中打开被链接文档。

元素的alt和title

alt和title同时设置时，alt => 图片的替代文字 ，title => 图片的解释文字。

关于闭包的题

function Foo() {

var i = 0;
return function() {
    console.log(i++);
}

}

var f1 = Foo(),

f2 = Foo();

f1();//0
f1();//1
f2();//0

通过验证numb++：
let numb = 1;
console.log(numb++)//1
console.log(numb)//2

1.第一次f1，numb++是先输出了以后加的
2.var f1 = Foo() return 出的变量使函数形成了闭包,i在内存里,第二次访问f1函数时使用的是闭包return出来的值
3.f2和f1指向了不同的函数Foo，暂时先想象成类

有效的JavaScript变量定义规则

• 变量命名必须以字母、下划线”_”或者”$”为开头。 ...
• 变量名中不允许使用空格和其他标点符号，首个字不能为数字。
• 变量名长度不能超过255个字符。
• 变量名区分大小写。( ...
• 变量名必须放在同一行中
• 不能使用脚本语言中保留的关键字、保留字、true、false 和null 作为标识符

JavaScript系统方法

JavaScript常见事件触发

onmousedown：当用户按下鼠标按钮执行Javascript代码
<p onmousedown="myFunction("点击")" onmouseup="myFunction("松开")">点击</p>

onkeyoress：按下键盘
1.onkeydown：这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
2.onkeypress：这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
3.onkeyup：这个事件在用户放开任何先前按下的键盘键时发生。

onblur:离开input
HTML中
<element onblur="SomeJavaScriptCode">
JavaScript 中
object.onblur=function(){SomeJavaScriptCode};

onchange：会在域的内容改变时发生

HTML的Doctype和严格模式与混杂模式的描述

• ​

  声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

  ​

• 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
• DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

call和apply

共同作用：都是用来修改函数中this的指向问题

call => 第一个参数:借用方法的对象 可以传递多个参数

function.call(function2,1234,1,2,3)

apply => 第一个参数:借用方法的对象 传递数组

function.apply(function2,[1234,1,2,3])

bind => 第一个参数:借用方法的对象 可以传递多个参数 只改变this指向不执行函数 需要自己调用

function.bind (function2,1234,1,2,3)()

基本用法：

function add(a,b){

 return a+b

}
function sub(a,b){

return a-b

}
var a1 = add.apply(sub,[8,4]) //12 把sub放在add中进行
var a2 = sub.apply(add,[8,4]) //4

var name = \'张三\',

age =28;

var obj = {

name:\'李四\',
myfunction:function(){
    console.log(this.name + this.age)
}

}
var db = {

name:\'王五\',
age: 30

}
obj.myfunction() //李四 undefined
obj.myfunction.call() //张三 28 => 指向window
obj.myfunction.call(db) //王五 30 =>指向db
注意：call后面没有参数指向window

继承
function A() {

this.name = \'Kevin\'
this.showname = function(){
    console.log(this.name)
}

}
function B() {

this.name = \'kobe\'
A.call(this)  //this代表的是B

}
var B = new B()
B.showname() //Kevin

手动封装

webkit内核

Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由 此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。

另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核

js的一些待解决

arguments