超级简历一面


找到数组中符合条件的数

find

find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

var newArray = {};
var array =[
{name:'aiai',aeg:12},
{name:'sisi',aeg:12},
{name:'lulu',aeg:12}
]
newArray = this.array.find((item)=>{
if(item.name==='sisi'){
return item
}
})

findIndex

findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

[1,2,3,4,5].findIndex(function(value,index,arr){
return value>2;
})   //2

for循环 加if判断

var newArray = [];
var j = 0;
var array =[
{name:'aiai',aeg:12},
{name:'sisi',aeg:12},
{name:'lulu',aeg:12}
]
for (let i in array){
if(array[i].name==='sisi'){
newArray[j++]=array[i]
}
}

filter

var array =[
{name:'aiai',aeg:12},
{name:'sisi',aeg:12},
{name:'lulu',aeg:12}
]
function filterByName(array,name){
return array.filter(item=>item.name===name)
}
console.log(filterByName(array,'sisi'))

includes

includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于ES7

[1,2,3,4,5].includes(2)//true

indexOf

if (arr.indexOf(el) !== -1) {
  // ...
}

遍历数组的方法

使用forfor/in,我们可以访问数组的下标,而不是实际的数组元素值箭头函数与普通函数的区别

for(let i=0;i>arr.length;i++){
console.log(arr[i])
}

for(let i in arr){
console.log(arr[i]);
}

for/of 可以直接访问数组的元素值

for (const v of arr){
console.log(v)
}

使用forEach(),则可以同时访问数组的下标与元素值

arr.forEach((v,i)=>console.log(v))

map方法 让数组通过某种计算产生一个新数组,影射成一个新的数组

var arr = [1, 2, 3]
var firearr = arr.map(current => current * 5)
console.log(firearr); //[ 5, 10, 15 ]

filter方法 筛选出过滤出数组中符合条件的项,组成新数组.

var arr = [2, 3, 4, 5, 6]
var morearr = arr.filter(function(number) {
    return number > 3
})
console.log(morearr);//[ 4, 5, 6 ]

箭头函数基本语法

  • 如果箭头函数没有参数,直接写一个空括号即可
  • 如果参数只有一个可以省略参数的括号
  • 如果有多个参数写在括号里用都好分割
  • 如果函数体只有一句代码或一个变量或简单的js表达式,可以省去函数体的大括号
  • 如果只有一条语句不需要返回值,可以在这条语句前加一个viod关键字
  • 箭头函数最常见的用处就是简化回调函数

箭头函数与普通函数的区别

  • 语法更加简洁、清晰
  • 箭头函数不会创建自己的this,它会捕获自己在定义时所处的外层执行环境的this,并且继承这个this值。所以箭头函数中的this的指向在它定义时就已经确定了,永远不会改变。
  • call()/apply()/bind()也无法改变箭头函数中this的指向
  • 箭头函数不能作为构造函数使用
  • 箭头函数没有原型prototype

vue生命周期

beforeCreate

实例初始化之后,数据观测和事件配置之前被调用(此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了)

created

实例完成创建之后被立即调用(此时data 和 methods已经可以使用 但是页面还没有渲染出来)调用后台数据

beforeMount

在挂载之前被调用(此时页面上还看不到真实数据 只是一个模板页面而已)

mounted

el被新创建的vm.$el替换,并挂载到实例上去之后调用改钩子( 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件) 修改switch开关的颜色 兄弟组件传值接收方监听事件

beforeUpdate

数据更新时调用,发生在虚拟DOM打补丁之前( 页面上数据还是旧的)

updated

由于数据更新导致的虚拟DOM重新渲染和打补丁,在这之后会调用改钩子(页面上的数据已经替换成最新的了)

beforeDestroy

实例销毁之前调用

destroyed

实例销毁之后调用

兄弟组件传值

  1. 兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据 提供事件中心 var hub = new Vue()
  2. 传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)
  3. 接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
  4. 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

父子组件传值

父组件向子组件传值

父组件发送的形式是以属性的形式绑定值在子组件的身上

子组件用属性props接收

子组件向父组件传值

$emit()参数一为自定义事件名,参数二是需要传递的数据

父组件用v-on监听子组件的事件

npm、cnpm、yarn 的区别

yarn的优点
  • 速度快:并行安装、离线模式
  • 安装版本统一
  • 更简洁的输出
  • 多注册来源处理
Yarn和npm命令对比
npm yarn
npm install yarn
npm install react –save yarn add react
npm uninstall react –save yarn remove react
npm install react –save-dev yarn add react –dev
npm update –save yarn upgrade

const、var、let区别,const定义对象,可以改变对象的属性嘛


文章作者: XiaoQi
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoQi !
 上一篇
Vuex Vuex
Vuex是一个全局数据管理的一种机制,可以方便的实现数据的共享 使用Vuex管理数据的好处A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,
2020-09-28
下一篇 
Vue Vue
数据与方法当一个 Vue 实例被创建时,它将 数据 对象中的所有的 属性加入到 Vue 的响应式系统中。当这些 属性 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。值得注意的是只有当实例被创建时就已经存在于数据中的属性才是响应式
2020-08-05 XiaoQi
  目录