ES6+VUE初探
vue使用new map用法
vue使用new map用法Vue中的Map是ES6中新增的数据结构之一，与Array、Object相似，Map 也用于存储一组数据，不过它的存储方式与其他两种不同。
Map数据结构是一种能够将键值绑定在一起的对象，其中键和值都可以是任何类型。
Map对象在存储数据方面比简单对象更灵活，也更具可扩展性和可读性。
在Vue应用程序中，Map可以用于存储任意的键值对，并提供极快的存取和搜索。
在Vue中使用Map类型的变量，可以通过new Map的形式进行初始化。
在Vue组件中，在data中声明Map变量的用法与声明其他变量是相同的，例如：javascriptdata(){return {myMap: new Map(),};},经过初始化后，myMap就成为了一个Map对象实例，可以使用Map中实现的各种方法来操作其中的键值对。
以下是常用的Map对象方法：1. set(key, value)：向Map对象中添加键值对，如果Map对象中已经存在该键，则会更新键对应的值。
javascriptlet myMap = new Map();myMap.set('name', 'T om');2. get(key)：根据键来获取值，如果Map对象中不存在对应的键，则返回undefined。
javascriptlet myMap = new Map();myMap.set('name', 'T om');console.log(myMap.get('name'));3. has(key)：检查Map对象中是否存在对应的键，返回值为true或false。
javascriptlet myMap = new Map();myMap.set('name', 'T om');console.log(myMap.has('name'));4. delete(key)：删除Map对象中指定的键值对，删除成功返回true，如果Map 对象中没有对应的键值对则返回false。
前端使用面试知识点
前端使用面试知识点一、知识概述《前端使用面试知识点》①基本定义：前端开发在面试时会涉及到的一些知识内容，包括但不限于编程语言（如JavaScript、HTML、CSS）的掌握，框架（像Vue、React等）的使用，以及前端性能优化、页面布局、交互逻辑等多方面的知识，这是为了考察求职者是否具备前端开发的能力和经验。
②重要程度：这是进入前端开发岗位必须跨越的一道坎，就像钥匙对于锁一样重要。
如果在面试中对这些知识点不熟悉，很难得到工作机会，在整个前端开发行业里，这是求职的必经之路。
③前置知识：需要提前掌握基本的计算机操作知识，了解网络的基本原理，比如HTTP协议等。
还有一些基础的数学知识也很有帮助，像在布局计算的时候。
④应用价值：在实际开发工作中，这些知识是完成项目的基础。
例如在构建网站或者Web应用时，HTML负责构建页面结构，CSS负责样式设计，JavaScript负责交互逻辑，前端框架可以提高开发效率，性能优化知识能让用户体验更好。
二、知识体系①知识图谱：前端使用面试知识点涵盖了从基础语法到高级框架应用、性能优化等全方位知识，是前端开发知识体系中最关键的部分用于对接外部筛选和检验。
②关联知识：它与后端开发知识有关联，例如前端向后端发送请求获取数据。
与设计知识也相关，前端开发要把设计师的想法用代码实现。
③重难点分析：重难点在于JavaScript的高级特性理解和熟练运用，像闭包、原型链等。
框架的原理和生命周期也是难度比较大的部分，关键在于不断的实践和深入底层原理学习。
④考点分析：在面试考试中非常重要，大多会通过问答、现场编码等形式考查，会让写出某种功能的代码实现或者解释某种前端现象的原理。
三、详细讲解【理论概念类】①概念辨析：- JavaScript：是一种脚本语言，能让网页有交互性。
就好比是网页的大脑，指挥着网页进行各种动态的活动。
- HTML（超文本标记语言）：用来构建网页结构，像是房子的框架，把网页各部分像一个个房间一样规划好。
es6语法菜鸟教程
es6语法菜鸟教程ES6语法介绍ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。
变量声明var:它是用来声明变量的。
如果在方法中声明，则为局部变量；如果在全局中声明，则为全局变量。
var num=10let:ES6新增了let命令，用来声明变量。
它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
{let a = 10;var b = 1;}上面代码在代码块之中，分别用let和var声明了两个变量。
然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。
这表明，let声明的变量只在它所在的代码块有效。
for循环的计数器，就很合适使用let命令。
for (let i = 0; i < 10; i++) {}计数器i只在for循环体内有效，在循环体外引用就会报错。
const:const声明一个只读的常量。
一旦声明，常量的值就不能改变。
const PI = 3.1415;Javascript对象的写法ES5的写法var people= {name:'xiaoming',age:15,say:function(){alert('hello')}}people.say()也可以写var people = {}; = 'xiaoming';people.age = 15people.say = function (){alert('hello')}people.say();ES6的语法//定义变量var name='xiaoming';var age=15//创建对象var people={ name,age,say:function(){alert('hello');}};//调用people.say()注意：变量名和属性名一致ES6的箭头函数作用：•新的方式定义函数•改变this的指向新的方式定义函数：//无参数,无返回值var say = ()=> {alert('我是无参数无返回值函数');}//有参数,无返回值（当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。
vue 兼容 es6 语法的方法
vue 兼容 es6 语法的方法
要使Vue兼容ES6语法，你可以采取以下方法：
1. 使用Babel，Babel是一个流行的JavaScript编译器，可以将ES6代码转换为向后兼容的JavaScript版本，以便在旧版浏览器中运行。
你可以在Vue项目中集成Babel，并使用其插件来转译ES6语法。
2. 配置Webpack，如果你使用Webpack作为Vue项目的构建工具，你可以通过配置Webpack来集成Babel，并使用相应的loader 来处理ES6语法。
3. 使用Polyfill，除了转译代码外，你还可以使用Polyfill 来提供对ES6新特性的支持。
Polyfill是一种JavaScript代码片段，可以在旧版浏览器中模拟新的JavaScript API，从而使其支持ES6语法。
4. 更新Vue版本，确保你使用的Vue版本本身就对ES6语法提供了良好的支持。
始终使用最新版本的Vue可以确保你能够充分利用其对ES6的支持。
综上所述，要使Vue兼容ES6语法，你可以通过集成Babel、配置Webpack、使用Polyfill或更新Vue版本来实现。
这些方法可以帮助你确保你的Vue项目能够在各种浏览器和环境中正常运行并充分利用ES6语法的优势。
es6中class类 中调用vue 方法
es6中class类中调用vue方法在ES6类中调用Vue方法通常需要先创建一个Vue实例，然后在类的方法中使用该实例来调用Vue的方法。
以下是一种常见的方法：首先，确保你已经引入Vue库，并创建一个Vue实例。
假设你有一个名为"myVue"的Vue实例：```javascriptconst myVue=new Vue({el:'#app',data:{message:'Hello,Vue!'},methods:{showMessage(){alert(this.message);}}});```然后，在ES6类中，你可以使用该实例来调用Vue的方法，如下所示：```javascriptclass MyClass{constructor(){//在构造函数中访问Vue实例this.vueInstance=myVue;}callVueMethod(){//在类方法中调用Vue方法this.vueInstance.showMessage();}}const myClass=new MyClass();myClass.callVueMethod();//这会弹出一个包含"Hello,Vue!"的警告框```在这个示例中，我们创建了一个名为"myVue"的Vue实例，该实例具有一个名为"showMessage"的方法，用于显示一个警告框。
然后，我们创建了一个ES6类"MyClass"，并在其中使用"myVue"实例来调用"showMessage"方法。
这种方式允许你在ES6类中与Vue实例进行交互，并调用其方法。
确保在合适的地方创建和引用Vue实例，以便在类中使用。
vue插件vue-seamless-scroll无缝滚动插件ES6使用总结
vue插件vue-seamless-scroll⽆缝滚动插件ES6使⽤总结最近因为需求需要写⼀个项⽬信息⽆缝向上滚动组件，在⽹上搜了⼀下，看到⼤家的⼀致好评就果断的使⽤了vue-seamless-scroll组件。
下⾯就简单的介绍它的使⽤，具体详细的使⽤推荐⼤家去看下。
步骤如下：1. 安装：npm install vue-seamless-scroll –save2. global install 全局挂载// **main.js**import Vue from 'vue'import scroll from 'vue-seamless-scroll'e(scroll)//or you can set componentName default componentName is vue-seamless-scrolle(scroll,{componentName: 'scroll-seamless'})3. 单⽂件 .vue import使⽤ＨＴＭＬ模板信息：<vue-seamless-scroll:data="projectDesList":class-option="optionSetting" //参数配置，计算属性class="seamless-warp"><ul class="item"><li v-for="(item,key) in projectDesList" :key><span class="title" v-text="item.title"></span></li></ul></vue-seamless-scroll>脚本信息配置：<script>import vueSeamless from 'vue-seamless-scroll'export default {components: {vueSeamless}data() {return {projectDesList: []// 滚动项⽬信息为数组}}}备注：若滚动信息为API后台请求数据，需要在vue ⽣命周期create 以及mounted中同时通过this.$nextTick请求，⽬的是保证在dom加载前获取数据再渲染。
vue 组件的暴露和引入方式
vue 组件的暴露和引入方式在中，组件的暴露和引入主要有以下几种方式：1. 全局暴露和引入在 Vue 的全局范围内注册组件，所有 Vue 实例和组件都可以使用这个组件。
```javascript// 暴露全局组件('my-component', {// 选项...})```2. 局部暴露和引入在 Vue 实例或组件的范围内注册组件，只有这个 Vue 实例或组件及其子组件可以使用这个组件。
```javascript// 创建 Vue 实例new Vue({el: 'app',components: {'my-component': {// 选项...}}})```3. 使用 ES6 模块导出和导入这是使用 ES6 模块语法来导出和导入组件的方式。
这种方式更符合现代JavaScript 的模块化标准，也有利于工具的自动打包和优化。
导出：```javascript//export default {name: 'MyComponent',// ...其他选项...}```导入：```javascriptimport MyComponent from './'```4. 使用 Vue Loader 进行导入如果你在使用 Webpack 和 Vue Loader，你可以直接在 `.vue` 文件中导入其他 `.vue` 文件作为组件。
这种方式非常适合于大型项目中的组件复用和模块化。
在父组件中：```vue<template><div><my-component></my-component> </div></template><script>import MyComponent from './'export default {components: { MyComponent }}</script>```。
vue的newset方法
vue的newset方法Vue的new Set方法是ES6 JavaScript的一种数据结构，它允许我们创建一个无重复值的集合。
Set对象中的值是唯一的，可以用来存储任何类型的数据，包括原始类型和对象引用。
使用new Set(构造函数可以创建一个空的Set对象，也可以传入一个可迭代对象（比如数组）作为参数来初始化Set对象。
例如：```const set = new Set(; // 创建一个空的Set对象const set2 = new Set([1, 2, 3]); // 使用数组初始化Set对象console.log(set2); // Set(3) {1, 2, 3}```Set对象的常用方法包括add、has、delete和clear。
- add(value)：向Set对象中添加一个新的元素。
如果Set对象已经包含该元素，则不会重复添加。
例如：```const set = new Set(;set.add(1);set.add(2);set.add(3);console.log(set); // Set(3) {1, 2, 3}```- has(value)：检查Set对象是否包含指定的元素。
如果包含，则返回true；否则返回false。
例如：```const set = new Set([1, 2, 3]);console.log(set.has(2)); // trueconsole.log(set.has(4)); // false```- delete(value)：从Set对象中删除指定的元素。
如果删除成功，则返回true；否则返回false。
例如：```const set = new Set([1, 2, 3]);console.log(set.delete(2)); // trueconsole.log(set); // Set(2) {1, 3}```- clear(：清除Set对象中的所有元素。
vue运行过程和原理
vue运行过程和原理Vue.js 是一款流行的JavaScript 前端框架，它以简洁的API 和响应式的数据绑定机制，提供了一种优雅而高效的方法来构建交互式的Web 界面。
在本文中，我们将探讨Vue 的运行过程和原理，并逐步解释其工作方式。
一、Vue 运行过程概述Vue 的运行过程可以分为以下几个主要步骤：1. 编译阶段：Vue 通过编译器将构建的模板转换为渲染函数。
编译的过程包括模板解析、AST（抽象语法树）生成和优化等操作。
2. 挂载阶段：Vue 将编译得到的渲染函数挂载到DOM 元素上，并创建一个Vue 实例（Vue component）。
3. 数据绑定：Vue 建立起视图与数据的响应式关系，当数据发生变化时，视图会自动更新。
4. 渲染：Vue 根据数据的改变，重新生成虚拟DOM，并通过Diff 算法找出需要更新的部分，最后将更新后的虚拟DOM 渲染到实际的DOM 中。
5. 响应式：Vue 使用了Object.defineProperty 或ES6 的Proxy 功能来追踪数据的变化，以实现数据的响应式更新。
6. 事件监听：Vue 提供了丰富的事件绑定机制，使开发者能够方便地处理用户交互，并更新相关数据。
上述步骤概括了Vue 的运行过程，接下来我们将详细介绍每个步骤的工作原理。
二、编译阶段Vue 在编译阶段将模板解析为AST，也就是抽象语法树。
它通过递归地遍历模板中的每个节点，并根据节点类型生成相应的代码，最终将所有生成的代码组装成渲染函数。
渲染函数是一个返回虚拟DOM 的函数，它描述了组件的结构和状态。
编译阶段包括以下几个主要步骤：1. 模板解析：Vue 使用正则表达式解析模板中的标记语法，如指令、事件绑定和插值表达式等。
2. AST 生成：解析后的模板被转换为AST，AST 是一个树状结构，每个节点都代表一个模板节点，包含节点类型、属性、指令等信息。
3. 优化处理：Vue 对生成的AST 进行优化处理，包括静态节点提升、静态节点标记和冗余节点删除等操作，以提升渲染性能。
vue 获取前六个的函数方法
Vue获取前六个的函数方法中的特定函数详解在Vue中，我们经常需要处理数组数据，并且有时候需要获取数组中的前几个元素。
Vue提供了一些函数方法来帮助我们实现这样的需求。
下面将详细解释Vue获取前六个的函数方法中的特定函数，包括函数的定义、用途和工作方式等。
1. slice定义slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin ，但不包括 end ）。
原始数组不会被改变。
用途slice() 方法可以从已有的数组中返回选定的元素，并将其组成一个新数组。
在Vue中，我们可以使用slice()方法来获取前几个元素。
工作方式•如果参数是正数，则从该索引开始提取数组元素，索引为0表示第一个元素。
•如果参数是负数，则从数组末尾开始提取，例如-1表示最后一个元素。
•如果省略第二个参数，则提取从start到结束位置之间所有的元素。
// 示例代码var array = [1, 2, 3, 4, 5, 6, 7, 8];var result = array.slice(0, 6);console.log(result); // 输出[1, 2, 3, 4, 5, 6]2. splice定义splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。
用途splice() 方法可以用于删除、插入和替换数组中的元素。
在Vue中，我们可以使用splice()方法来获取前几个元素。
工作方式•第一个参数是开始位置的索引。
•第二个参数是要删除的元素数量。
•如果指定了第三个参数以后，则表示要插入到数组中的新元素。
// 示例代码var array = [1, 2, 3, 4, 5, 6, 7, 8];var result = array.splice(0, 6);console.log(result); // 输出[1, 2, 3, 4, 5, 6]3. filter定义filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
vue 新数组与原数组
vue 新数组与原数组当在Vue中操作数组时，有时我们需要创建一个新数组并对其进行修改，同时保持原始数组不变。
这可以通过多种方式来实现，让我们从多个角度来看待这个问题。
首先，可以使用ES6的展开运算符来创建一个新数组，然后对新数组进行操作，而不影响原始数组。
例如：javascript.let originalArray = [1, 2, 3, 4, 5];let newArray = [...originalArray];// 对新数组进行操作。
newArray.push(6);另一种方法是使用数组的map方法来创建一个新数组，然后对新数组进行修改。
这样做可以保持原始数组的不变性。
示例如下：javascript.let originalArray = [1, 2, 3, 4, 5];let newArray = originalArray.map(item => item 2);在Vue中，还可以使用Vue.set方法来添加新的属性到响应式对象上，这也适用于数组。
示例如下：javascript.this.$set(this.array, indexOfItem, newValue);此外，可以使用slice方法来创建一个新数组，然后对新数组进行修改。
示例如下：javascript.let originalArray = [1, 2, 3, 4, 5];let newArray = originalArray.slice();// 对新数组进行操作。
newArray.push(6);最后，还可以使用concat方法来合并原始数组和新数组，从而创建一个新数组。
示例如下：javascript.let originalArray = [1, 2, 3, 4, 5];let newArray = originalArray.concat([6, 7, 8]);总之，在Vue中，我们可以通过展开运算符、map方法、Vue.set方法、slice方法或concat方法来创建新数组并对其进行修改，同时保持原始数组不变。
三天精通Vue--ES6的常用语法
三天精通Vue--ES6的常⽤语法详细学习请参考let和const的使⽤es5中使⽤var来声明全局变量 es5中我们学习了使⽤var来声明变量，但是使⽤var声明变量，会存在变量提升的问题。
即变量可以在声明之前使⽤，值为undefined。
栗⼦1:console.log(a); // var 的结果:undefined-->变量提升{var a = 2;console.log(a); // 2}console.log(a); // var 的结果:2-->变量提升//在js中⼀个{},称为作⽤域,使⽤var声明变量，会存在变量提升的问题。
//什么是变量提升呢?当解析脚本的时候，当在脚本中遇到var声明的变量，会将 var a;提到最上⾯去声明。
从⽽导致此问题。
由此也会使，a是⼀个全局的变量//上⾯的在局部作⽤域声明并赋值给a=2,相当于这样将a声明为⼀个全局作⽤域的变量,然后在局部作⽤域对a赋值为2.var a; //声明全局变量console.log(a); // var 的结果:undefined{a = 2; // 在局部作⽤域对全局变量的a赋值console.log(a);}console.log(a); // var 的结果:2 栗⼦2:var a = [];for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);};}a[6](); // 10//上⾯代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有⼀个变量i。
//每⼀次循环，变量i的值都会发⽣改变，⽽循环内被赋给数组a的函数内部的console.log(i)，//⾥⾯的i指向的就是全局的i。
也就是说，所有数组a的成员⾥⾯的i，指向的都是同⼀个i，//导致运⾏时输出的是最后⼀轮的i的值，也就是 10。
ES6 新增了let命令来声明变量 ES6 新增了let命令，⽤来声明变量。
详解vue-cli+es6引入es5写的js（两种方法）
详解vue-cli+es6引⼊es5写的js（两种⽅法）
学习了vue有⼀段⽇⼦了，vue+es6开发⾮常好⽤，vue的插件⾮常多，很充⾜，但是还是会⽤到引⼊第三⽅外部js的时候，但是很多⼈在vue-cli中的.vue⽂件引⼊es6会出很多错误，因为我们的代码是es6写的，你引⼊es5的js当然会出问题，那么⽽接下来我讲⼤家讲解⼀波，怎么引⼊第三⽅es5写的 js
⽅法1：
import XX from “路径”
e(XX);
这⾥的js⽂件要导出
⽤export default {
Vue.proprtypes.aa=function(){}
}
⽅法2：
js⽂件没有⽤export default{}
直接就是纯⽅法
解决：可以在main.js中加⼊以下代码，其中的⽅法可以全局使⽤。
require （'路径'）
⽅法3：
同样是纯⽅法
在最后将你想⽤的⽅法⽤export default {}导出
此⽅法⽤在单个Vue⽂件中，通过import {xxx} from ‘路径'引⼊你的⽅法
总结
以上所述是⼩编给⼤家介绍的vue-cli+es6引⼊es5写的js(两种⽅法),希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！。
ES6+VUE初探
ES6+VUE初探解决es6兼容（编译/转换）1.在线转换：引入js库，并声明类型text/babel2.提前编译es6新特性1.变量2.函数3.数组4.字符串5.面向对象6.Promise7.Generater（异步）8.模块化变量1.var：可重复声明/无限制修改/没有块级作用域2.let：不能重复声明/变量/可修改/有块级作用域3.const：不能重复声明/常量/不可修改/有块级作用域函数=>箭头函数()=>{}1.如果有一个参数()可以省略2.如果只有一个return{}可以省略函数-参数1.参数扩展/数组展开a.收集剩余的参数Function show(a,b,...args) *args自定义,并且必须是最后一个b.展开数组Let arr = [1,2,3];alert(...arr);效果1，2，3依次弹出*展开后效果和直接把数组内容写在这一样2.默认参数a.默认参数Function show(a,b=5,c=9){...}Show(99);Show(99,9); *传参直接覆盖，不传参直接显示默认参数数值结构赋值1.左右两边结构必须一样a.Let [a,b,c] = [1,2,3]; //数组Console.log(a,b,c); 1 2 3b.Let {a,b,c}= [a:1,b:2,c:3]; //jsonConsole.log(a,b,c); 1 2 3c.(1)(2)2.右边必须是个东西(必须是个正规的数组，json，变量。
)3.声明和赋值不能分开（必须在一句话里完成）数组1.Map 映射：一个对一个a.[12,100,60][不及格,及格,及格]b.=>箭头函数结果：24，10，162.Redurt 汇总：一堆出来一个a.算总和Tmp：临时结果，item下一个数字，index当前位数b.3.Filter 过滤器例：可以整除3的选出来4.Foreach 循环/迭代字符串1.多了两个新方法a.startsWith 例：str字符串是否以a开始let str = ‘abcdefg’;str.startsWith(‘a’);b.endsWith 例：str字符串是否以.txt结尾let str = ‘a.txt’;Str.endsWith(‘.txt’)2.字符串模板a.let str = `abc`; 反双引号``b.拼接字符换用i.${拼接的东西} //可以直接把变量拼接进字符串ii.可以折行/可以换行es6的面向对象封装1.Class关键字，构造器和类分开了2.Class里直接加方法继承1.super--超类/父类面向对象的应用--ReactReact1.组件化--class2.JSX：js扩展版JSX==Babel==browser.js //如果不写””长得像html的东西就默认为要创建一个htmlJsonJson标准格式：只能用双引号/所有名字必须用引号包起来1.json对象a.JSON.stringify() //json对象转json字符串b.JSON.parse() //json字符串转json对象2.Json简写：名字一样/方法a.名字和值（key和value）一样的时候可以简写一个b.Json里如果有方法，可以把：function省略掉Promise--承诺//消除异步操作：用同步的代码来书写异步代码//当状态改变的时候--调用之前挂起的then队列//then的时候直接执行对应的函数，并且参数给人家Promise.all:一个一个都要成功Promise.race：读到那个算哪个，可以不全部成功1.异步请求：操作之间没什么关系/同时进行多个操作缺点：代码更复杂2.同步请求：同时只能做一件事优点：代码更简单如果两个Ajax请求则then是图二写法3.简写4.高版本jQu ery已经封装了Promise，可以直接用Promise.allgenerator-生成器函数普通函数--开始运行函数中间不会停，知道运行结束为止generator函数--中间可以停//比如打出租车，中途有事可以让司机停车，事办完了回来让司机继续走1.*....yieid; //...t停止运行next(); //...开始运行generator-yield 传参/返回1.传参第一个next传参是没法传给yieid，此参数无用，第一部分过程正常传参就行2.返回软件webSocket：数据交互1.性能高2.Websocket基于http的-----微博socket建立连接的部分，连接建立之后，就会变成二进制的连接3.双向-数据实时性高4.Html --ie9+5.Socket.ioa.兼容b.二进制计算机网络的组成socket == T cp == node里的netWebsocketWeb socket ws:// 普通连接Web scoket security wss:// 加密连接1.Qw2.后台node：1.原生nodejs:javascript后台(小型项目，工具型项目/中间层语言)a.性能高b.和前台配合方便/适合前端人员入门c.协议I.listen---等待客户连接II.端口--数字：区分不同服务（没被占用的，linux1024+以上的端口）d.每种服务都有默认的端口I.web--80II.Ssh--22III.ftp--21IV.Mysql--3306V.e.f.g.1h.2.Nodejs框架Html5新特性1.geolocation--定位a.PC---ip地址（精度比较低、ip库）b.手机---GPS（）I.单次：window.navigator.geolocation(成功，失败，参数) enableHighAccuracy 高精度模式---更慢、更费电Timeout 超时MaximumAge 缓存时间II.结果：latiude/longitude 维度/精度Altitude 海拔高度Accuracy 精确度AltitudeAccuracy 高度精确度Heading 朝向Speed 速度III.监听：watchPoition（成功，失败，参数）2.Video、audioa.video---视频I.src 地址II.autoplay 自动播放III.loop 循环播放IV.poster 封面地址V.controls 显示播放器的控件VI.Video支持什么格式---通用格式MP4IE wmv、MP4Chrome webq、MP4FireFox ogv、MP4VII.b.Audio---音频MP3c.Js接口I..play() 播放II..pause() 暂停III..stop() XIV..currenttimr() 当前播放的位置（s）V..duration() 长度（s）VI..volume() 音量0-100VII..muted() 静音：boold.3.LocalStorage4.Websql/indexedDB5.Webworker--多线程（提高用户体验，提高性能）主机> 程序> 进程> 线程> 纤程创建子进程-> 发送数据-> 接收数据-> 处理数据-> 返回结果-> 接受结果a.优点：I.充分利用资源（多个进程同时工作）II.防止主进程卡住b.缺点：I.不能执行任何ui操作，子进程只能执行计算型任务c.6.文件操作/拖拽7.Manifest8.Canvas--画布（什么都能画，性能高，只能用宽高属性修改大小,，只要画完了就不能修改）a.路径操作moveTo/lineT o 开始/结束.beginPath() ---清除.closePath() ---闭合.react() -----画矩形.arc(cx,cy,r startAng,endAng,逆时针) ------画园b.非路径.strokeRect().fillRect()c.画线，填充，颜色//属性.stroke().strokeStyle().file().fileStyle()d.画线条9.拖拽reader.readAsText(ofile) 文本reader.readAsDataURL(ofile) 读取图片--base64reader.readAsArrayBuffer(ofile) 二进制数据，他是一个数组reader.readAsBinaryString(ofile) 二进制数据，会把内容转成字符串JS高级语言，不擅长处理二进制reader.readAsText(ofile)I.ondragenter 进去II.ondragleave 出来III.ondragover 悬停--一直发生IV.ondrop 松手10.1. 1.移动端a.布局I.Viewport （视口）调整浏览器分辨率Content=‘手机推荐尺寸，是否可缩放，初始默认的缩放比例1.0，最大可缩放2倍’II.弹性盒模型宽/高/padding/maigin父级----display:flex; //让父级元素成为一个盒模型子级----flex：1 //让子元素自动按比例分大小可用总宽-固定总宽=剩余宽度剩余空间*flex/flex_sum=widthIII.新的盒模型box-sizing：Content-box 宽高指的是内容宽高Border-box 宽高指的是border外面百分比漂浮的话，家border防止换行IV.响应式布局（响应式设计）一套页面可以应用所有平台（pc端，pad端，手机端）///适用小网站I.媒体查询@media//类似if 小于400像素执行红色，超过400执行绿色有优先级V.Rem 单位I.Rem 相对于根元素（html）的字体大小给一个rem基准（就是给html一个font-size值）Rem换算：真实屏幕/rem基准II.Em 相对字体的大小font-size：12px;width:2em => width：24px VI.b.Touch---多点触摸、手势、方向锁定、页面滚动---iscroll、hammerI.ontouchstart onmousedownII.ontouchmove onmousemoveIII.ontouchend onmouseup多点/单点IV.c.2.图形a.canvas 位图，方法大会失真，不存储图形信息；-------没法修改/没有的事件；性能高b.Svg/vml 矢量图，放大不会失真，存储图形信息；-------便于修改，事件，性能一般3.。
javascript、es6、vue面试题
javascript、es6、vue⾯试题
1、原型链是什么？
原型：
①所有引⽤类型都有⼀个__proto__(隐式原型)属性，属性值是⼀个普通的对象
②所有函数都有⼀个prototype(原型)属性，属性值是⼀个普通的对象
③所有引⽤类型的__proto__属性指向它构造函数的prototype
原型链：
每个对象都有⾃⼰的原型，原型也有⾃⼰的原型，向上查找原型的过程就是原型链。
原型链的顶部是null
当访问⼀个对象的某个属性时，会先在这个对象本⾝属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样⼀层⼀层向上查找就会形成⼀个链式结构，我们称为原型链。
2、闭包
vuex异步修改state
es6数组遍历
es6字符串操作⽅法
⼦组件⽗组件的⽣命周期
⼦组件data为什么⽤函数
对this的理解
call，apply，bind的作⽤是什么，有什么不同？
vue中v-for会跟：key结合使⽤,key的作⽤是什么？。
Vue的三个点es6知识，扩展运算符
Vue的三个点es6知识，扩展运算符Vue中的三个点在不同情境下的意思操作数组//⾥⾯放⾃⼰定义的⽅法methods: {/*** 把数组中的元素孤⽴起来*/iClick() {let iArray = ['1', '2', '3'];console.log(...iArray);// 打印结果 1 2 3},/*** 在数组中添加元素*/iClick3() {let iArray = ['1', '2', '3'];console.log(['0', ...iArray, '4']);// 打印结果 ["0", "1", "2", "3", "4"]},/*** 在数组中删除元素（取出⼀个元素）* 与结构赋值的结合* 如果将扩展运算符⽤于数组赋值，只能放在参数的最后⼀位，否则会报错。
*/iClick8() {const [first, ...rest] = [1, 2, 3, 4, 5];console.log(first);// 打印结果 1console.log([...rest]);// 打印结果 [2, 3, 4, 5]const [one, st] = ["foo"];console.log(one);//打印结果 fooconsole.log([st]);//打印结果 []},/*** 数组的合并*/iClick6() {// ES6 的写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];arr1.push(...arr2);console.log(arr1);// 打印结果 [0, 1, 2, 3, 4, 5]},/*** 数组的合并（推荐使⽤）*/iClick7() {var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];console.log([...arr1, ...arr2]);// 打印结果 [0, 1, 2, 3, 4, 5]},/*** 将字符串转成数组*/iClick9() {let iString = 'woshizhongguoren';console.log([...iString]);// 打印结果 ["w", "o", "s", "h", "i", "z", "h", "o", "n", "g", "g", "u", "o", "r", "e", "n"]},/*** Map 和 Set 结构， Generator 函数*/iClick10() {let map = new Map([[1, 'one'],[2, 'two'],[3, 'three'],]);let arr = [...map.keys()];console.log(arr);// 打印结果 [1, 2, 3]},/*** 当做参数传递* 和直接传数组的区别*/iClick4() {let iArray = ['1', '2', '3'];//注意传的时候，就要三个点this.hanshu(...iArray);},hanshu(...iArray) {let ooo = 1;console.log(...iArray);// 打印结果 1 2 3},/*** 求出最⼤值*/iClick5() {let iArray = [1, 2, 3, 99, 44, 66, 21, 85, 77];let ooo = Math.max(...iArray);console.log(ooo);// 打印结果 99},/*** 如果对没有iterator接⼝的对象，使⽤扩展运算符，将会报错。
vue-demo（初级）
vue-demo（初级）在使⽤WebStorm前把字符编码等等设置好!使⽤WebStorm打开vue项⽬等待ide索引加载完成注意要让WebStorm可以创建vue⽂件需要以下步骤:<template></template><style></style><script>export default {data: {},methods: {}}</script>demo1 构建⼀个简单的Vue导航栏菜单实例1.新建组件⽂件夹（pages）及⽂件（index、userCenter、userInfo）：index.vue代码：<template><div><p>这是⾸页</p></div></template><style>p{display: block;background: #ffe87c;}</style><script>export default {}</script>userCenter.vue代码：<template><div><p>这是个⼈中⼼</p><router-link to="/userCenter/userInfo">⽤户信息</router-link><router-view></router-view></div></template><style>p{display: block;background: #d6e9c6;<script>export default {}</script></style>userInfo.vue代码：<template><div><p>我的名字是：Heaton</p></div></template><style>p{display: block;background: #77FFFF;}</style><script>export default {}</script>2.在路由配置⽂件中，导⼊新建的组件。
vue es6 插值表达式
vue es6 插值表达式Vue是一种用于构建用户界面的渐进式框架，而ES6是JavaScript 的最新标准。
在Vue中，我们可以使用插值表达式来动态地将数据渲染到模板中。
插值表达式使用双大括号{{}}来包裹需要渲染的数据，可以在其中使用JavaScript表达式。
让我们来看一个简单的例子，假设我们有一个名为message的变量，它的值是"Hello, Vue!"。
我们可以使用插值表达式将这个值渲染到模板中：```<div>{{ message }}</div>```这样，当Vue实例中的message发生变化时，模板中的内容也会相应地更新。
这种数据绑定的方式使得我们能够轻松地实现动态的用户界面。
除了简单的变量，我们还可以在插值表达式中使用JavaScript表达式。
比如，我们可以对变量进行计算：```<div>{{ num1 + num2 }}</div>```在这个例子中，num1和num2是两个变量，我们可以对它们进行加法运算，并将结果渲染到模板中。
除了基本的运算，我们还可以使用条件语句和循环语句。
例如，我们可以使用三元表达式来根据条件选择要渲染的内容：```<div>{{ isShow ? '显示' : '隐藏' }}</div>```在这个例子中，isShow是一个布尔型变量，根据它的值来决定渲染的内容。
我们还可以使用v-for指令来进行循环渲染。
比如，我们可以遍历一个数组，并将数组中的每个元素渲染到模板中：```<ul><li v-for="item in items">{{ item }}</li></ul>```在这个例子中，items是一个数组，v-for指令会遍历数组中的每个元素，并将每个元素渲染为一个li标签。
vue项目处理node_module下es6语法
vue项目处理node_module下es6语法Vue项目中的node_modules目录下的ES6语法可以通过Babel进行转译，将ES6语法转换为ES5语法，以支持更多的浏览器。
下面是一些步骤来处理node_modules目录下的ES6语法：1. 安装Babel相关插件和预设首先需要在项目中安装Babel相关的插件和预设，如babel/preset-env、babel/preset-stage-3等。
可以使用npm或yarn进行安装。
```shellnpm install --save-dev babel/preset-env babel/preset-stage-3```2. 配置Babel在项目的根目录下创建一个名为.babelrc的文件，并添加以下内容：```json{"presets": ["babel/preset-env", "babel/preset-stage-3"]}```3. 配置Webpack如果项目中使用了Webpack，需要配置Webpack以支持ES6语法。
在Webpack的配置文件中（通常是），添加以下内容：```javascript= {// ...其他配置项...module: {rules: [{test: /\.m?js$/,exclude: /(node_modulesbower_components)/,use: {loader: 'babel-loader',options: {presets: ['babel/preset-env', 'babel/preset-stage-3']}}}]}};```这样配置后，Webpack会自动处理node_modules目录下的ES6语法。
4. 构建项目现在可以构建项目了。
构建过程中，Babel会自动处理node_modules目录下的ES6语法，将其转换为ES5语法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
解决es6兼容（编译/转换）1.在线转换：引入js库，并声明类型text/babel2.提前编译es6新特性1.变量2.函数3.数组4.字符串5.面向对象6.Promise7.Generater（异步）8.模块化变量1.var：可重复声明/无限制修改/没有块级作用域2.let：不能重复声明/变量/可修改/有块级作用域3.const：不能重复声明/常量/不可修改/有块级作用域函数=>箭头函数()=>{}1.如果有一个参数()可以省略2.如果只有一个return{}可以省略函数-参数1.参数扩展/数组展开a.收集剩余的参数Function show(a,b,...args) *args自定义,并且必须是最后一个b.展开数组Let arr = [1,2,3];alert(...arr);效果1，2，3依次弹出*展开后效果和直接把数组内容写在这一样2.默认参数a.默认参数Function show(a,b=5,c=9){...}Show(99);Show(99,9); *传参直接覆盖，不传参直接显示默认参数数值结构赋值1.左右两边结构必须一样a.Let [a,b,c] = [1,2,3]; //数组Console.log(a,b,c); 1 2 3b.Let {a,b,c}= [a:1,b:2,c:3]; //jsonConsole.log(a,b,c); 1 2 3c.(1)(2)2.右边必须是个东西(必须是个正规的数组，json，变量。
)3.声明和赋值不能分开（必须在一句话里完成）数组1.Map 映射：一个对一个a.[12,100,60][不及格,及格,及格]b.=>箭头函数结果：24，10，162.Redurt 汇总：一堆出来一个a.算总和Tmp：临时结果，item下一个数字，index当前位数b.3.Filter 过滤器例：可以整除3的选出来4.Foreach 循环/迭代字符串1.多了两个新方法a.startsWith 例：str字符串是否以a开始let str = ‘abcdefg’;str.startsWith(‘a’);b.endsWith 例：str字符串是否以.txt结尾let str = ‘a.txt’;Str.endsWith(‘.txt’)2.字符串模板a.let str = `abc`; 反双引号``b.拼接字符换用i.${拼接的东西} //可以直接把变量拼接进字符串ii.可以折行/可以换行es6的面向对象封装1.Class关键字，构造器和类分开了2.Class里直接加方法继承1.super--超类/父类面向对象的应用--ReactReact1.组件化--class2.JSX：js扩展版JSX==Babel==browser.js //如果不写””长得像html的东西就默认为要创建一个htmlJsonJson标准格式：只能用双引号/所有名字必须用引号包起来1.json对象a.JSON.stringify() //json对象转json字符串b.JSON.parse() //json字符串转json对象2.Json简写：名字一样/方法a.名字和值（key和value）一样的时候可以简写一个b.Json里如果有方法，可以把：function省略掉Promise--承诺//消除异步操作：用同步的代码来书写异步代码//当状态改变的时候--调用之前挂起的then队列//then的时候直接执行对应的函数，并且参数给人家Promise.all:一个一个都要成功Promise.race：读到那个算哪个，可以不全部成功1.异步请求：操作之间没什么关系/同时进行多个操作缺点：代码更复杂2.同步请求：同时只能做一件事优点：代码更简单如果两个Ajax请求则then是图二写法3.简写4.高版本jQu ery已经封装了Promise，可以直接用Promise.allgenerator-生成器函数普通函数--开始运行函数中间不会停，知道运行结束为止generator函数--中间可以停//比如打出租车，中途有事可以让司机停车，事办完了回来让司机继续走1.*....yieid; //...t停止运行next(); //...开始运行generator-yield 传参/返回1.传参第一个next传参是没法传给yieid，此参数无用，第一部分过程正常传参就行2.返回软件webSocket：数据交互1.性能高2.Websocket基于http的-----微博socket建立连接的部分，连接建立之后，就会变成二进制的连接3.双向-数据实时性高4.Html --ie9+5.Socket.ioa.兼容b.二进制计算机网络的组成socket == Tcp == node里的netWebsocketWeb socket ws:// 普通连接Web scoket security wss:// 加密连接1.Qw2.后台node：1.原生nodejs:javascript后台(小型项目，工具型项目/中间层语言)a.性能高b.和前台配合方便/适合前端人员入门c.协议I.listen---等待客户连接II.端口--数字：区分不同服务（没被占用的，linux1024+以上的端口）d.每种服务都有默认的端口I.web--80II.Ssh--22III.ftp--21IV.Mysql--3306V.e.f.g.1h.2.Nodejs框架Html5新特性1.geolocation--定位a.PC---ip地址（精度比较低、ip库）b.手机---GPS（）I.单次：window.navigator.geolocation(成功，失败，参数)enableHighAccuracy 高精度模式---更慢、更费电Timeout 超时MaximumAge 缓存时间II.结果：latiude/longitude 维度/精度Altitude 海拔高度Accuracy 精确度AltitudeAccuracy 高度精确度Heading 朝向Speed 速度III.监听：watchPoition（成功，失败，参数）2.Video、audioa.video---视频I.src 地址II.autoplay 自动播放III.loop 循环播放IV.poster 封面地址V.controls 显示播放器的控件VI.Video支持什么格式---通用格式MP4IE wmv、MP4Chrome webq、MP4FireFox ogv、MP4VII.b.Audio---音频MP3c.Js接口I..play() 播放II..pause() 暂停III..stop() XIV..currenttimr() 当前播放的位置（s）V..duration() 长度（s）VI..volume() 音量0-100VII..muted() 静音：boold.3.LocalStorage4.Websql/indexedDB5.Webworker--多线程（提高用户体验，提高性能）主机> 程序> 进程> 线程> 纤程创建子进程-> 发送数据-> 接收数据-> 处理数据-> 返回结果-> 接受结果a.优点：I.充分利用资源（多个进程同时工作）II.防止主进程卡住b.缺点：I.不能执行任何ui操作，子进程只能执行计算型任务c.6.文件操作/拖拽7.Manifest8.Canvas--画布（什么都能画，性能高，只能用宽高属性修改大小,，只要画完了就不能修改）a.路径操作moveTo/lineTo 开始/结束.beginPath() ---清除.closePath() ---闭合.react() -----画矩形.arc(cx,cy,r startAng,endAng,逆时针) ------画园b.非路径.strokeRect().fillRect()c.画线，填充，颜色//属性.stroke().strokeStyle().file().fileStyle()d.画线条9.拖拽reader.readAsText(ofile) 文本reader.readAsDataURL(ofile) 读取图片--base64reader.readAsArrayBuffer(ofile) 二进制数据，他是一个数组reader.readAsBinaryString(ofile) 二进制数据，会把内容转成字符串JS高级语言，不擅长处理二进制reader.readAsText(ofile)I.ondragenter 进去II.ondragleave 出来III.ondragover 悬停--一直发生IV.ondrop 松手10.1. 1.移动端a.布局I.Viewport （视口）调整浏览器分辨率Content=‘手机推荐尺寸，是否可缩放，初始默认的缩放比例1.0，最大可缩放2倍’II.弹性盒模型宽/高/padding/maigin父级----display:flex; //让父级元素成为一个盒模型子级----flex：1 //让子元素自动按比例分大小可用总宽-固定总宽=剩余宽度剩余空间*flex/flex_sum=widthIII.新的盒模型box-sizing：Content-box 宽高指的是内容宽高Border-box 宽高指的是border外面百分比漂浮的话，家border防止换行IV.响应式布局（响应式设计）一套页面可以应用所有平台（pc端，pad端，手机端）///适用小网站I.媒体查询@media//类似if 小于400像素执行红色，超过400执行绿色有优先级V.Rem 单位I.Rem 相对于根元素（html）的字体大小给一个rem基准（就是给html一个font-size值）Rem换算：真实屏幕/rem基准II.Em 相对字体的大小font-size：12px;width:2em => width：24px VI.b.Touch---多点触摸、手势、方向锁定、页面滚动---iscroll、hammerI.ontouchstart onmousedownII.ontouchmove onmousemoveIII.ontouchend onmouseup多点/单点IV.c.2.图形a.canvas 位图，方法大会失真，不存储图形信息；-------没法修改/没有的事件；性能高b.Svg/vml 矢量图，放大不会失真，存储图形信息；-------便于修改，事件，性能一般3.。