蓝桥杯web组备考笔记（仅个人简单记录）

3.26

在数组循环中:

each遍历适用于Jquery，具体为$(arr).each( (index,item)=>{

.......

} ),其中index为元素下标，item为元素值

forEach遍历适用于JS，具体为arr.forEach( (value,index) =>{

.......

} ),其中value为元素值，index为元素下标，与each相反

3.27

调用 getAttribute() 的主体必须是元素(Element)

调用 attr() 的主体必须是对象(Object)

append()添加元素到末尾，但同时会删除dom元素，所以不能删除元素操作时使用克隆，即clone()

模板字符串中自定义属性的获取

3.28

封装的概念：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅仅对外公开接口

ajax即异步JavaScript和XML，使得页面能使网页实现异步更新，即数据在不刷新整个页面前提下部分数据能够获得更新，在ajax之前刷新页面部分数据需要刷新整个页面，且刷新过程不可进行操作。

Axios就是对Ajax 的封装

http是node中向服务器发送请求获取资源的工具

Promise是ES6中的新语法，用以解决函数的回调地狱问题，使得函数除去层层嵌套

3.29

1. 数组操作中indexOf(value),即value在数组中出现的位置下标
2. 数组方法splice（index，number，newvalue）删除数组元素，index为该元素的数组下标，number为从该元素开始删除number位元素，newvalue为删除后填补删除元素位置的新值
3. Vue中存储数据的data处，数据为数组，且数组内部元素为多个对象时，判断所有对象的属性是否属于同一对象，可借助forEach循环遍历所有数组元素（对象），再利用俩个if语句进行深度判断，例在a元素A对象的前提下再对b元素进行判断：if(a属于A){ if(b属于A) .... }

3.30

1. addEventListener是JavaScript中的一个方法，用于向指定的元素(具体需要监听的元素，而不是元素的父集)添加事件监听器。它可以接收三个参数：事件类型、回调函数和一个布尔值，用于指定事件是否在捕获或冒泡阶段处理
2. 获得元素属性值并且修改：Jquery中使用attr(),Js中使用setAttribute()
3. 获得元素样式值：setProperty()的时候一般会这么写element.style.setProperty("XXX","XXX","XXX")
4. Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，数组中顺序与使用 for...in 循环遍历该对象属性时一致。
5. Object.keys()方法用于遍历对象，返回值为对象所有属性名的【数组】

利用axios获取本地数据，做好echart图表数据更新，将数据渲染到页面。

Vue中于mothods中写入方法，axios请求本地数据，如请求成功，则将数据放入data中相应位置，如果请求失败，则

3.31

innerText 和 innerHTML 是 JavaScript 中的两个属性，用于访问和设置 HTML 元素中的文本内容。

• innerText 表示该元素的文本内容，不包括 HTML 标签。
• innerHTML 表示该元素的文本内容，包括 HTML 标签

4.1

1.Jquery中的eq(index)方法用于获取标签元素中的具体子元素。Index为元素位置下标。

2.在JS中的indexOF(‘val’)用于检测当前值在数组中出现的一个位置的下标

JS中splice(index,number,newValue)用于删除数组指定元素。Index为元素下标。number为从该元素开始删除number个元素，newValue为删除后添加的新值

4.2

1、在jquery中使用ajax请求数据时，先输出一下看看是否获取到了数据.

2、再定义一个变量接收获取到的数据(注意在调试输出窗口查看数据名，如数据中数组名字为result)，例如定义一个数组去接收获取到的数据(假设该数据为数组，元素为对象)。

3、然后通过模板字符串对接收到的数据进行拼接（数据的dom结构与原来的一样，注意类名相同，保证样式相同），让它与放入html页面的样式一致，再通过数组方法将拼接的数据放入对应html位置

 

 

4.3

1、Vue中axios的用法与juqery中不同，相比较起来vue中使用axios更为简便。具体

2、关于async和await的理解：与普通函数相比，被async标注的函数会进行异步操作且会返回一个promise对象，并且Promise还有state和result。

当想要async函数输出正常结果而不是pormise对象时，就需要使用.than()和.catch()方法了

 

 

1. Vue生命周期执行

1. 同步操作：同步操作是指，在处理完一个任务之后，必须等待它完成，才能处理下一个任务。也就是说，代码的执行是按照顺序依次进行的。

1. 异步操作，在处理完一个任务之后，不必等待它完成，就可以处理下一个任务。也就是说，代码的执行不是按照顺序依次进行的，而是采用回调函数的方式，等待任务完成后再执行回调函数。

1. Forin用来遍历对象，即for(let key in obj){}其中key值的是obj对象中的属性名，obj[key]值的是对象属性值

4.4

flex布局：

1. 使用display：flex规定该盒子为弹性盒子
2. 然后按需求felx-derection规定主轴方向，横向为主轴或者纵向为主轴，当主轴明确后，与之垂直的就为交叉轴
3. flex-wrap 属性定义，如果一条轴线排不下，如何换行
4. justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
5. align-items属性：定义项目在交叉轴上如何对齐

Css动画

4.5

1. Echart中的type类型：
2. type: ‘bar’：柱状/条形图
   type: ‘line’：折线/面积图
   type: ‘pie’：饼图
   type: ‘scatter’：散点（气泡）图，
3. category类目型数据（大多为文字），一个用来表示value连续性数据

display：inline-block 行内块元素：

当使用display：block造成dom样式改变时，使用display：inline-block。inline-block可以说是结合了inline和block的部分属性，最大的特点便是可以使元素在一行上显示 ，又能够改变元素的height，width的值. 使用padding，margin的top，left，bottom，right都能够撑开元素。

Show()和hide()内部传参

v-for

在vue中`v-for` 指令是 Vue 中用于循环渲染数组或对象的指令，它接收一个参数，通常格式为 `(item, index) in arr`，`item` 为当前遍历到的元素，`index` 为当前元素在数组中的索引值，`arr` 为需要遍历的数组或对象。

Vue.js 中的 `v-if` 是一种条件渲染的指令，用于根据表达式的值的真假（bool值）来有条件地渲染某部分内容。当表达式的值为真时，该指令所在的元素会被渲染出来；当表达式的值为假时，该元素则不会被渲染出来

4.6

在vue中使用axios请求数据过程：

1、在mounted中或者methodes（mounted中需先定义方法）中先成功请求数据，然后将请求到的数据赋值data中定义的数组中。

数据渲染到页面：在页面标签中使用v-for遍历数据，然后将对应数据放在相应位置，这里要注意，动态数据(使用数据的位置)需要使用v-bind(“ : ”)进行动态绑定，否则数据不生效

1. 都定义了一个变量去代替比较

1. Js数组升序排列 Array.sort()方法：

该方法可对数组进行排序，默认情况下按照Unicode编码顺序进行排序，可以传入一个回调函数作为参数，自定义排序规则。在回调函数中，如果第一个参数小于第二个参数，返回-1；如果第一个参数大于第二个参数，返回1；如果两个参数相等，返回0。

let arr = [3, 1, 5, 2, 4];

arr.sort((a, b) => a - b);

console.log(arr);  // [1, 2, 3, 4, 5]

降序排列：

let arr = [3, 1, 5, 2, 4];

arr.sort((a, b) => b - a);

console.log(arr);  // [5, 4, 3, 2, 1]

```

4.7

2. 使用map方法和Number函数将字符串转为数字。

var arr = ['1', '2', '3', '4', '5', '6'];

arr = arr.map(Number);

`filter()` 是 JavaScript Array 对象的一个原生方法，用于从数组中筛选出符合某些条件的元素，返回一个新的数组。

随机数Math.floor(Math.random()*x + y)