Vue前置必会知识点_vue前置知识

Vue前置知识点

1.表达式,变量是什么

// 变量存储数据,表达式原地都有返回结果
// 变量的赋值 var let const (知道这三种声明变量的区别) 
// 表达式 = 数据 + 运算符
// 表达式是可以被求值的代码,javascript引擎会将其计算出一个结果，特点：
// 1. 表达式一定有结果。 返回运算的结果
// 2. 表达式返回的数据： 通常用一个新的变量来赋值

// 常见的表达式有如下几类：
// 1. 所有的字面量，比如：12，'hello', true, [], {}
// 2. 对象.属性，比如：obj.name
// 3. 由运算符参与的运算，例如：1 + 2， 4 < 5，true ? 'a' : 'b'
// 4. 函数或方法的调用，例如：fn(), obj.fn()，原地得到返回值
1
2
3
4
5
6
7
8
9
10
11
12

2.new的作用和含义

new 类名() - 原地得到一个实例对象 - 对象身上有key(或叫属性, 叫键都行), 对应的值是我们要使用的

3.实例化对象

实例化对象就是new 类名() 创造出来的对象, 身上包含属性(key, 键) 对应的值

4.什么是对象上的属性和方法

let obj = { // 属性指的是a, b, c, d, e这些名字
    a: 10,
    b: [1, 2, 3],
    c: function(){},
    d () {},
    e: () => {} // 值是冒号:右边的值
}
1
2
3
4
5
6
7

5.this的指向

1、以函数形式调用时，this 永远都是 window

2、以方法的形式调用时，this 是调用方法的对象

3、以构造函数的形式调用时，this 是新创建的那个对象

4、使用 call 和 apply 调用时，this 是指定的那个对象

5、箭头函数:箭头函数的 this 看外层是否有函数 如果有，外层函数的 this 就是内部箭头函数的 this 如果没有，就是 window

6、特殊情况:通常意义上 this 指针指向为最后调用它的对象。这里需要注意的一点就是 如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例

6.知道循环遍历是什么

let arr = ['第一个', '第二个', '第三个'];
// 索引就是数字, 标记每个值对应的序号, 从0开始
// 索引是0, 1, 2
// 数组需要用索引来换取值, 固定格式 arr[索引]
// 遍历就是挨个取出来
1
2
3
4
5

7.数组常用方法的使用(filter,splice,map,some,every,find,reduce…)

let arr = [19, 29, 27, 20, 31, 32, 35];
let newArr = arr.filter((val) => {return val >= 30})
// 数组调用.filter()方法 - 传入一个函数体 (固定格式)
// 运行过程: filter会遍历数组里的每一项, 对每一项执行一次函数体(会把每个值传给形参)
// 作用: 每次遍历如果val值符合return的条件, 就会被filter收集起来
// 返回值: 当filter遍历结束以后, 返回收集到的符合条件的那些值形成的新数组
console.log(newArr);
1
2
3
4
5
6
7

// splice()：删除、插入和替换。
// 删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。
// 书写格式：arr.splice( 1 , 3 )
// 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。
// 书写格式：arr.splice( 2,0,4,6 )
// 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
// 书写格式：arr.splice( 2,0,4,6 )
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); 　　　　　　　　　　　　　　　
//[5, 7, 9, 11]
console.log(arrRemoved); 　　　　　　　　　　　
//[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); 　　　　　　　　　　　　　　　
// [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); 　　　　　　　　　　// []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); 　　　　　　　　　　　　　　　
// [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); 　　　　　　　　　　
//[7]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
// 书写格式：arr.map()
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); 　　　　　　　
//[1, 4, 9, 16, 25]

1
2
3
4
5
6
7
8
9

// reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
// reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。
// reduce() 方法不会减少原始数组。
// 这个例子确定数组中所有数字的总和：
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
1
2
3
4
5
6
7
8
9
10

更多数组方法使用及介绍:

数组方法: https://www.w3school.com.cn/js/js_array_methods.asp

数组迭代: https://www.w3school.com.cn/js/js_array_iteration.asp

数组排序: https://www.w3school.com.cn/js/js_array_sort.asp

8.localStorage 浏览器本地存储语法使用

localStorage.setItem("key名", 值) - 把值存在浏览器本地叫key的对应位置上

localStorage.getItem("key名") - 把叫key的对应值, 从浏览器本地取出来

==值只能是字符串类型, 如果不是请用JSON.stringify转, 取出后用JSON.parse转==
1
2
3
4
5

9.JSON方法使用

JSON.stringify(JS数据) - 把JS数据序列化成JSON格式字符串

JSON.parse(JSON字符串)  - 把JSON格式化字符串, 再转回成JS数据
1
2
3

10.引用类型和基础类型的区别

let a = 10;
let b = a; 
b = 20; // 基础类型, 单纯的值的赋值

let a = {name: "哈哈"};
let b = a; // a变量的值是引用类型, a里保存的是对象在堆的内存地址, 所以b和a指向同一个对象 (引用类型=是内存地址的赋值)
b.name = "刘总";
console.log(a.name)
1
2
3
4
5
6
7
8

11.window.onload的作用

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

12.ajax是什么, axios必须会用

ajax是什么?

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

实现流程

1、创建 XMLHTTPRequest 对象,也就是创建一个异步调用对象.
2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.
3、设置响应 HTTP 请求状态变化的函数.
4、发送 HTTP 请求.
5、获取异步调用返回的数据.
6、使用 JavaScript 和 DOM 实现局部刷新.

封装一个ajax

function doGetObjects() {
// 1.创建ajax对象-异步访问服务器、异步刷新页面(是实现ajax的一个入口对象)
    var xhr = new XMLHttpRequest();
    console.log("xhr", xhr);
// 2.设置ajax对象的监听-通讯状态和响应状态(通讯是否结束，响应数据是否正确)
    xhr.onreadystatechange = function() {
// 基于请求响应状态处理结果
// 4表示服务端响应结束
// 200表示服务端响应ok(正确)
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);//服务端响应的文本
        }
    }
    //3.建立与服务端的连接-false表示同步，true表示异步-底层会启动工作线程
    var url="请求地址";
    xhr.open("GET", url, true);
    //4.发送请求
    xhr.send(null);//get请求此位置不传数据
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

13.promise的使用

Promise 是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层
嵌套的回调函数，要是为了解决异步处理回调地狱(也就是循环嵌套的问题)而产生的
Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回
调。在回调中执行一些操作(例如异步)，如果一切都正常，则调用 resolve，否则调用 reject。
对于已经实例化过的 Promise 对象可以调用 Promise.then() 方法，传递 resolve 和 reject
方法作为回调。then()方法接收两个参数:onResolve 和 onReject，分别代表当前 Promise 对
象在成功或失败时
Promise 的 3 种状态
Fulfilled 为成功的状态，Rejected 为失败的状态，Pending 既不是 Fulfilld 也不是
Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）

  myResolve(); // 成功时
  myReject();  // 出错时
});

// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);
1
2
3
4
5
6
7
8
9
10
11
12

14.async和await的作用-如何和Promise配合

使用 async/await, 搭配 Promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

async 函数表示函数里面可能会有异步方法，await 后面跟一个表达式
async 方法执行时，遇到 await 会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
1
2
3
4
5
6
7
8

15.同步异步的概念

同步
方法调用一旦开始，调用者必须等到方法调用返回后，才能继续后续的行为
异步
方法调用一旦开始，方法调用就会立即返回，调用者就可以继续后续的操作。而异步方法通常会在另外一个线程中，整个过程，不会阻碍调用者的工作

setTimeout、Promise、Async/Await 都是异步操作的api

16.url的组成部分有哪些,hash值指的什么?

host
简单的来说就是IP或者主机名domain

port
端口，我们访问的端口，譬如80 443 8080等等

path
访问资源的路径，相当于组件路径

params
参数，但是这个不常用，指定一些参数，譬如指定传输方式

query
查询参数，譬如我们get username=aaa&password=11111

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

hash

Hash也称散列、哈希，对应的英文都是Hash。基本原理就是把任意长度的输入，通过Hash算法变成固定长度的输出。这个映射的规则就是对应的Hash算法，而原始数据映射后的二进制串就是哈希值。活动开发中经常使用的MD5和SHA都是历史悠久的Hash算法。

hash值

哈希值其实就是一段数据(一个字符串)，只不过这个数据有特殊的含义，它是某个文件或者某个字符串的DNA，或者身份证。

17.import导入

// 导出 export.js
export function square(x) {
    return x * x;
}
// 引用
import { square } from './export';
console.log(square(11)); // 121
1
2
3
4
5
6
7

// 导入变量
// a.js
var firstname = "zhang"
var lastname="san"
function fullname (first,last){
return first+last
}
export {firstname,lastname,fullname}

// b.js
import {firstname,lastname,fullname} from "./a"
console.log(fullname(firstname,lastname))


1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 或者可以这样导入
// b.js
import * as test from "./a"
console.log(test.fullname(test.firstname,test.lastname))
1
2
3
4

##18.解构赋值

解构赋值是对赋值运算符的扩展。

// 数组
let [a, b, c] = [1, 2, 3];
// a = 1 // b = 2 // c = 3
let [x, y, ...rest] = [10, 20, 30, 40, 50];
console.log(x); // 10
console.log(y); // 20
console.log(rest); // [30, 40, 50]
// 对象
let ({a1, b1, ...rest} = {a1: 10, b1: 20, c1: 30, d1: 40});
console.log(a1); // 10
console.log(b1); // 20
console.log(rest); // {c1: 30, d1: 40}
let { baz : foo } = { baz : 'ddd' }; // foo = 'ddd'
1
2
3
4
5
6
7
8
9
10
11
12
13