个人js错题集（4）

Object.assign()用法讲解
语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象
用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }

用法示例:
1.复制一个对象
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

2.深拷贝问题
针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

// 深拷贝
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

3.合并对象
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }
6.原始类型会包装为对象
const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar); // 2，说明第一个源对象拷贝成功了。
console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。
console.log(target.foo); // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。
console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。
console.log(target.baz); // undefined，第三个源对象更是不会被拷贝到的。

9.拷贝访问器
const obj = {
foo: 1,
get bar() {
return 2;
}
};

let copy = Object.assign({}, obj);
console.log(copy); // { foo: 1, bar: 2 } copy.bar的值来自obj.bar的getter函数的返回值

// 下面这个函数会拷贝所有自有属性的属性描述符
function completeAssign(target, ...sources) {
sources.forEach(source => {
let descriptors = Object.keys(source).reduce((descriptors, key) => {
descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
return descriptors;
}, {});

// Object.assign 默认也会拷贝可枚举的Symbols
Object.getOwnPropertySymbols(source).forEach(sym => {
let descriptor = Object.getOwnPropertyDescriptor(source, sym);
if (descriptor.enumerable) {
descriptors[sym] = descriptor;
}
});
Object.defineProperties(target, descriptors);
});
return target;
}

copy = completeAssign({}, obj);
console.log(copy);
// { foo:1, get bar() { return 2 } }

解析:

箭头函数用 => 符号来定义。

箭头函数相当于匿名函数，所以采用函数表达式的写法。

左边是传入函数的参数，右边是函数中执行的语句。

相当于

上面是完整的写法，左边小括号，右边大括号，而下面的情况可以简写：

（1）当要执行的代码块只有一条return语句时，可省略大括号和return关键字：

（2）当传入的参数只有一个时，可以省略小括号：

相当于

（3）当不需要参数时，使用空的圆括号：

相当于

箭头函数在回调函数中是很简洁的，像这样：

在排序中：

需要注意的是，箭头函数没有自己的this、arguments、super、new.target，它们分别指向外层函数的相应变量。

以前在ES5中使用this有点麻烦，这种问题很常见：

这就需要在嵌套函数外层使用that = this，然后内层使用that，就是下面这样子：

但是现在有了箭头函数，不再需要使用that = this或 _this = this 这种代码啦，因为箭头函数中的this直接就是外层函数中的this，代码更简单了：

4.项目开发过程中，如果要压缩项目中的js文件，可以使用下面的哪个完成?

A　　gulp

B　　sass

C　　requires

D　　git

正确答案: A

解析:gulp-uglify 为压缩模块

gulp:

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

将规律转换为 gulp 代码

现有目录结构如下：

└── js/
    └── a.js

规律

找到 js/目录下的所有 .js 文件
压缩这些 js 文件
将压缩后的代码另存在 dist/js/ 目录下

编写 gulp 代码

// 压缩 JavaScript 文件
gulp.task('script', function() {
    // 1. 找到
    gulp.src('js/*.js')
    // 2. 压缩
        .pipe(uglify())
    // 3. 另存
        .pipe(gulp.dest('dist/js'));
});

代码执行结果

代码执行后文件结构

└── js/
│   └── a.js
└── dist/
    └── js/
        └── a.js

a.js 压缩前

function demo (msg) {
    alert('--------
' + msg + '
--------')
}

demo('Hi')

a.js 压缩后

function demo(n){alert("--------
"+n+"
--------")}demo("Hi");

此时 dist/js 目录下的 .js 文件都是压缩后的版本。

你还可以监控 js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。

gulp 还可以做很多事，例如：

压缩CSS
压缩图片
编译Sass/LESS
编译CoffeeScript
markdown 转换为 html

关于gulp安装及如何使用请参考：https://www.w3cschool.cn/qtaitm/iasj3ozt.html

sass：

什么是SASS？

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。它是更稳定和强大的CSS扩展语言，描述文档的样式干净和结构。

历史

它最初由 Hampton Catlin 设计，并于2006年由 Natalie Weizenbaum 开发。后来 Weizenbaum 和 Chris Eppstein 初始版本用SassScript扩展Sass。

为什么要使用SASS？

它是预处理语言，它为CSS提供缩进语法（它自己的语法）。
它提供了一些用于创建样式表的功能，允许更有效地编写代码和易于维护。
它是超集的CSS，这意味着它包含CSS的所有功能，是一个开源的预处理器，以 Ruby 编码。
它提供了比平面CSS好的结构格式的文档样式。它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操作，数学和参数列表。

特征

它是更稳定，强大，与CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被称为CSS的语法糖，这意味着它使用户更容易阅读或表达的东西更清楚。
它使用自己的语法并编译为可读的CSS。
你可以在更少的时间内轻松地编写CSS代码。
它是一个开源的预处理器，被解释为CSS。

优点

它允许在编程结构中编写干净的CSS。
它有助于编写CSS更快。
它是CSS的超集，帮助设计师和开发人员更有效率和快速地工作。
由于Sass兼容所有版本的CSS，我们可以使用任何可用的CSS库。
可以使用嵌套语法和有用的函数，如颜色操作，数学和其他值。

缺点

开发人员需要时间了解此预处理器中存在的新功能。
如果更多的人在同一个网站上工作，那么将使用相同的预处理器。有些人使用Sass，有些人使用CSS直接编辑文件。因此，它将变得难以与现场工作。
有机会失去浏览器的内置元素检查器的好处。

详情参考：https://www.w3cschool.cn/sass/sass_overview.html

requires：

①：require.js是一个js脚本加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能；

②：require.js要求js脚本必须要实现模块化，即文件化；而require.js的作用之一就是加载js模块，也就是js文件。

③：require.js可以管理js模块/文件之间的依赖;即不同的框架例如Jquery，AngularJs等采用了不同的语法，而使用这些语法的js文件在导入时必须排在Jquery.js或Angular.js之后才能顺利执行，require.js则能够解决排序依赖问题。

git：

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。

详情参考：https://www.runoob.com/git/git-tutorial.html

5.jquery绑定事件的方法有

A　　one

B　　bind

C　　addEvent

D　　on

正确答案: A,B,D

解析:addEvent不是一个事件

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前

一：bind(type,[data],function(eventObject))

bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：

type:事件类型，如click、change、mouseover等;

data:传入监听函数的参数，通过event.data取到。可选;

function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意

bind的源码：

  bind: function( types, data, fn ) {
 
  return this.on( types, null, data, fn );
 
  }
 
$('#myol li').bind('click',getHtml);

bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。

jQuery还有一种事件绑定的简写方式如a.click(function(){});、a.change(function(){});等，它们的作用与bind一样，仅仅是简写而已。

二：live(type, [data], fn)

live的参数和bind一样，它又有什么蹊跷呢，我们还是先瞄一眼源码：

live: function( types, data, fn ) {
 
jQuery( this.context ).on( types, this.selector, data, fn );
 
return this;
 
}

可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。这个context是什么东西呢?其实就是元素的限定范围，看了下面的代码就清楚了：

$('#myol li').context; //document
 
$('#myol li','#myol').context; //document
 
$('#myol li',$('#myol')[0]); //ol

通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的节点。下面的例子来揭晓：

$('#myol li').live('click',getHtml);

三：live存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了。

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {
 
return this.on( types, selector, data, fn );
 
}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：

$('#myol').delegate('li','click',getHtml);

看了这么多，你是不是迫不及待想看看这个on的真实面目了呢，这就来：

on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别，首先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子：

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己，与bind的效果一样。至于传selector进去，就是跟delegate一样的意义了，除了参数顺序不同，其他完全一样。