# 错误

back

# getCookie出现问题

返回顶部

导致页面的菜单无法点击

idea工程设置编码utf-8
浏览器清理缓存，尤其cookie

# 鲜为人知的JavaScript陷阱

back

# 箭头函数和对象字面量

back

箭头函数提供了更简短的语法，其中一个特性是你可以将函数编写为具有隐式返回值的 lambda 表达式。编写函数样式的代码时这就很顺手，比如说有时你必须使用一个函数映射一些数组的情况。使用常规函数可能会多出很多空行。

例如

const numbers = [1, 2, 3, 4];
numbers.map(function(n) {
return n * n;
});

1
2
3
4

但如果你尝试映射到对象，那么语法可能就不是你直觉期望的那样了。例如，假设我们试图将数字映射到包含如下值的对象数组中

const numbers = [1, 2, 3, 4];
numbers.map(n => { value: n });

1
2

解决方法非常微妙。我们只需要将对象包装在括号中，就可以将它变成一个表达式而不是一个块语句，如下所示：

const numbers = [1, 2, 3, 4];
numbers.map(n => ({ value: n }));

1
2

# 箭头函数和绑定

back

箭头函数另一个需要注意的点是，它们没有自己的 this 绑定，意味着它们的 this 值和封闭词法作用域的 this 值是一样的。
箭头函数很简洁，但不能替换需要 this 绑定的常规成员函数

# 自动分号插入

back

# 浅集合

back

集合较浅，意味着重复的数组和具有相同值的对象，这将导致集合中有多个条目

let set = new Set();
set.add([1, 2, 3]);
set.add([1, 2, 3]);
console.log(set.length);//2

1
2
3
4

let set = new Set();
set.add([1, 2, 3].join(','));
set.add([1, 2, 3].join(','));
console.log(set.size);//1

1
2
3
4

# 类与暂时死区

back

在 JavaScript 中，常规函数被提升到词法作用域的顶部，这意味着下面的示例将按预期工作：

let segment = new Segment();
function Segment() {
  this.x = 0;
  this.y = 0;
}

1
2
3
4
5

但是对于类来说并非如此。类实际上没有被提升，并且在尝试使用它们之前需要在词法作用域内对其进行完全定义。例如：

let segment = new Segment();
class Segment {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
}

1
2
3
4
5
6
7

尝试构造类的新实例时会导致 ReferenceError，因为它们没有像函数那样被提升。

# Finally

back

# js报错集锦_10

back

1、Uncaught TypeError: Cannot read property
如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。您可以很容易的在 Chrome 开发者控制台中进行测试。
发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。

我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

class Quiz extends Component {
 componentWillMount() {
    axios.get('/thedata').then(res => {
    this.setState({items: res.data});
  });
 }
 render() {
 return (
  <ul>
    {this.state.items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>
  );
 }
}

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

组件的状态（例如 this.state）开始于 undefined。
当异步获取数据时，不管它是在构造函数 componentWillMount 还是 componentDidMount 中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是 undefined。

解决办法很容易,构造函数初始化

class Quiz extends Component {
 // Added this:
 constructor(props) {
 super(props);
 // Assign state itself, and a default value for items
 this.state = {
 items: []
 };
 }
 componentWillMount() {
 axios.get('/thedata').then(res => {
 this.setState({items: res.data});
 });
 }
 render() {
 return (
 <ul>
 {this.state.items.map(item =>
 <li key={item.id}>{item.name}</li>
 )}
 </ul>
 );
 }
}

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

2、 TypeError: ‘undefined’ is not an object
这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。这与第一点中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。
3、 TypeError: null is not an object
这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。

undefined 通常是一个尚未分配的变量，而 null 表示该值为空。要验证它们不相等，请尝试使用严格的相等运算符 ===

4、 (unknown): Script error
5、 TypeError: Object doesn’t support property
这相当于 Chrome 中的 “TypeError：”undefined“ is not a function” 错误。
7、 Uncaught RangeError
当你调用一个不终止的递归函数就会发生这种错误。您可以在 Chrome 开发者控制台中进行测试。
8、 TypeError: Cannot read property ‘length’
您通常会在数组中找到定义的长度，但是如果数组未初始化或者变量在另一个上下文中，则可能会遇到此错误。让我们用下面的例子来理解这个错误
9、 Uncaught TypeError: Cannot set property
当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。
10、ReferenceError: event is not defined
当您尝试访问未定义的变量或超出当前作用域的变量时，会引发此错误。