设置cookie是否能通过 js 去访问。默认情况下，cookie不会带httpOnly选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则无法通过js代码去访问（包括读取、修改、删除等）这个cookie。
Js数据类型有哪些
值类型(基本类型)：
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：
对象(Object)、数组(Array)、函数(Function)。
基本类型引用类型区别
基本类型
基本类型的访问是按值访问的，就是说我们可以操作保存在变量中的实际的值。基本类型有以下几个特点：
基本类型的值是不可变得：
2.基本类型的比较是值的比较：
3.基本类型的变量是存放在栈区的（栈区指内存里的栈内存）
引用类型
引用类型可以拥有属性和方法，属性又可以包含基本类型和引用类型。引用类型的有以下一些特性：
1.引用类型的值是可变的
2.引用类型的值是同时保存在栈内存和堆内存中的对象
3.引用类型的比较是引用的比较
判断一个对象是不是数组
方法1：
根据对象的class属性来判断
let obj = []
console.log(Object.prototype.toString.call(obj) === '[object Array]')
方法2：
Array.isArray直接判断
let obj = []
console.log(Array.isArray(obj))js数组遍历都有哪些方法
这里列举12种，具体如下所示：
1.for循环
for(i = 0,len=arr.length; i < len; i++) {
}
2.foreach循环
// 没有返回值,对原数组无影响
arr.forEach((item,index,array)=>{
//执行代码
})
// 参数：value数组中的当前项, index当前项的索引, array原始数组；
3.map循环
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,ary ) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10]; 原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]； 原数组并未发生变化
4.forof遍历
for (var value of myArray) {
console.log(value);
}
5.filter遍历
不会改变原始数组,返回新数组
var arr = [73,84,56, 22,100]
var newArr = arr.filter(item => item>80) //得到新数组 [84, 100]
console.log(newArr,arr)6.every遍历
every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
// false7.some遍历
some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){
return item > 3;
}));
// true8.reduce
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10
reduce接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});9.reduceRight
reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
reduceRight()首次调用回调函数callbackfn时，prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数，则 prevValue 等于 initialValue，curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数，则 prevValue 等于数组最后一个值，curValue 等于数组中倒数第二个值。
var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 1010.find
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined。
var stu = [
{
name: '张三',
gender: '男',
age: 20
},
{
name: '王小毛',
gender: '男',
age: 20
},
{
name: '李四',
gender: '男',
age: 20
}
]
stu.find((element) => (element.name == '李四'))
//返回结果为
//{name: "李四", gender: "男", age: 20}11.findIndex
对于数组中的每个元素js查找数组所有符合条件数据，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。
findIndex 不会改变数组对象。
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.12.keysjs查找数组所有符合条件数据，values，entries
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
Js事件循环机制
Event Loop 包含两类：
1. 一类是基于 Browsing Context ，
2. 一种是基于 Worker
二者是独立运行的。
JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。
任务队列
任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；
而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列( Event Queue )的机制来进行协调。
在事件循环中，每进行一次循环操作称为tick，通过阅读规范可知，每一次 tick 的任务处理模型是比较复杂的，其关键的步骤可以总结如下：
在此次 tick 中选择最先进入队列的任务( oldest task )，如果有则执行(一次)
检查是否存在 Microtasks ，如果存在则不停地执行，直至清空Microtask Queue
更新 render
主线程重复执行上述步骤
深浅拷⻉贝区别
浅拷贝(Shallow Copy)：
仅拷贝对象的非对象属性(基本类型属性)、不可变对象属性，但是不拷贝对象的对象属性(不含不可变对象) ，即为浅拷贝。
以下这些函数得到的都是浅拷贝：
Object.assign、Array.prototype.slice()、Array.prototype.concat()
深拷贝(Deep Copy)：
对基本数据类型进行值传递，对引用数据类型，创建一个新的对象，并复制其内容，此为深拷贝。
简单理解：深拷贝会拷贝所有的属性。深拷贝前后两个对象互不影响。
JSON.parse(JSON.stringify())、手写递归函数、函数库lodash
箭头函数特点
1. 省略function换成=> 一个参数的时候()可以省略 一个return的时候{}可以省略
2. 不绑定this，其中的this指向函数定义位置的上下文this
3. 内部不存在arguments和new.target，使用的都是外部的
4. 没有原型，占用内存空间小
Js垃圾回收方法
Javascript具有自动垃圾回收机制(GC:Garbage Collecation)。
原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
（1）标记清除法
在函数声明一个变量的时候，就将这个变量标记为“进入环境”。
（2）引用计数法
引用计数的含义是跟踪记录每个值被引用的次数。当这个值的引用次数变成0时，就可以将其占用的内存空间回收回来。
Vuex更新流程
vuex的工作流程就是：
（1）通过dispatch去提交一个actions，
（2）actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations，
（3）actions通过commit去触发mutations，
（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染
拓展：
不能在mutations执行异步操作
Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
vue keep-alive组件有什么用
用于保留组件状态或避免重新渲染（缓存的作用）
两个属性include与exclude
二者都可以用逗号分割字符串、正则表达式或者一个数组。
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>如何监听一个变量的变化 长度 index
defineProperty
var a = { watchValue:0 };
var lastTimeValue=a.watchValue;
Object.defineProperty(a, 'watchValue', {
get: function() {
console.log('get：' + watchValue);
return watchValue;
},
set: function(value) {
watchValue = value;
if(lastTimeValue!=watchValue){
lastTimeValue=watchValue;
console.log('value changed!! set: ' + watchValue);
}
}
});
proxy
var observe1 = (object, onChange) => {
const handler = {
get(target, property, receiver) {
try {
return new Proxy(target[property], handler);
} catch (err) {
return Reflect.get(target, property, receiver);
}
},
set(target, key, value, receiver) {
onChange(value);
return Reflect.set(target, key, value, receiver);
}
};
return new Proxy(object, handler);
};
var obj = {
foo: false,
a: {
x:{y: 4},
b:[{c: false}]
}
};
var watchedObj = observe1(obj,(val)=>{
console.log(`哈哈哈，监听到值变化为${val}了`);
});
watchedObj.foo = true;
watchedObj.a.x.y = 5; // 监听到值变化为5了
watchedObj.a.b[0].c = true;webpack lorder / plugin
webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。
loader的使用方式
1：在配置文件webpack.config.js中配置
module.exports = {
module: {
rules: [
{
test: /.txt$/,
use: 'raw-loader'
}
]
}
}
2：通过命令行参数方式
webpack --module-bind 'txt=raw-loader'
3：通过内联使用
import txt from 'raw-loader!./file.txt';
webpack常用的loader
样式：style-loader、css-loader、less-loader、sass-loader等
文件：raw-loader、file-loader 、url-loader等
编译：babel-loader、coffee-loader 、ts-loader等
校验测试：mocha-loader、jshint-loader 、eslint-loader等
比如下面配置，可以匹配.scss的文件，分别经过sass-loader、css-loader、style-loader的处理。
sass-loader转化sass为css文件，并且包一层module.exports成为一个js module。
style-loader将创建一个style标签将css文件嵌入到html中。
css-loader则处理其中的@import和url()。
module.exports = {
module: {
rules: [
{
test: /.scss$/,
use:[
{loader:'style-loader'},
{loader:'css-loader',options:{sourceMap:true,modules:true}},
{loader:'sass-loader',options:{sourceMap:true}}
],
exclude:/node_modules/
}
]
}
}
webpack常用的plugin
首先webpack内置UglifyJsPlugin，压缩和混淆代码。
webpack内置CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。
ProvidePlugin：自动加载模块，代替require和import
写一个webpack插件步骤如下：
1. 编写一个JavaScript命名函数。
2. 在它的原型上定义一个apply方法。
3. 指定挂载的webpack事件钩子。
4. 处理webpack内部实例的特定数据。
5. 功能完成后调用webpack提供的回调。
编写插件之前要理解compiler和compilation两个对象，以及webpack生命周期的各个阶段和钩子，plugin比loader强大，通过plugin你可以访问compliler和compilation过程，通过钩子拦截webpack的执行。
package.json package.lock.json 区别
package.json
Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。
属性说明：
devDependencies、dependencies、peerDependencies的区别
package.lock.json
当我们安装依赖时，package-lock.json 文件会自动生成。
package-lock.json 文件中记录了下载源地址，可以加快我们的 npm install 速度。
怎么转化less为css
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
webpack的配置如下：
module: {
rules: [{
test: /.less$/,
use: ["style-loader", "css-loader", "less-loader"]
//编译方向从右到左less-loader=>css-loader=>style-loader
}, {
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}
把样式文件less转为css并且单独提取出来（不放置在bundle.js中）
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
plugins: [
new ExtractTextPlugin('style.css')
//if you want to pass in options, you can do so:
//new ExtractTextPlugin({
// filename: 'style.css'
//})
]
}地址栏输入一个url到页面渲染过程
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
