看似基础的js基础你却不知道的事（一）

今天主要是来讲讲关于js最底层的基础知识，把握每个细节，做一个真正了解前端的前端。
主要涵盖js数据类型，js对象，数组，字符串，函数，请君侧耳听

一. Js数据类型：

Js数据类型分类	明细
基本数据类型	String ，Number，Boolean，Undefined，Null
复杂数据类型	Object，Array，Function

二.Js对象

使用直接量创建对象

// bad 
var item =  new  Object（）;

// good
var item = {};

2.不要使用保留字作为键名，它们在IE8下不工作

// bad
var superman = {
  default: { clark: 'kent' },
  private: true
};

// good
var superman = {
  defaults: { clark: 'kent' },
  hidden: true
};

3.使用同义词替换需要使用的保留字

// bad
var superman = {
  class: 'alien'
};

// bad
var superman = {
  klass: 'alien'
};

// good
var superman = {
  type: 'alien'
};

3.数组

1.向数组增加元素时使用 Array#push 来替代直接赋值

var someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

2.当你需要拷贝数组时，使用 Array#slice

var len = items.length;
var itemsCopy = [];
var i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

4.字符串

1.使用单引号 ’ ’ 包裹字符串

// bad
var name = "Bob Parr";

// good
var name = 'Bob Parr';

// bad
var fullName = "Bob " + this.lastName;

// good
var fullName = 'Bob ' + this.lastName;

2.超过 100 个字符的字符串应该使用连接符写成多行
3.注：若过度使用，通过连接符连接的长字符串可能会影响性能

// bad
var errorMessage = 'This is a super long error that was thrown because of Batman. 
When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// good
var errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

4.程序化生成的字符串使用 Array#join 连接而不是使用连接符。尤其是 IE 下:

var items;
var messages;
var length;
var i;

messages = [{
  state: 'success',
  message: 'This one worked.'
}, 
{
  state: 'success',
  message: 'This one worked as well.'
}, 
{
  state: 'error',
  message: 'This one did not work.'
}];

length = messages.length;

// bad
function inbox(messages) {
  items = '<ul>';

  for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
  }

  return items + '</ul>';
}

// good
function inbox(messages) {
  items = [];

  for (i = 0; i < length; i++) {
    // use direct assignment in this case because we're micro-optimizing.
    items[i] = '<li>' + messages[i].message + '</li>';
  }

  return '<ul>' + items.join('') + '</ul>';
}

5.函数（函数声明，函数表达式）

1.函数表达式

// 匿名函数表达式
var anonymous = function() {
  return true;
};

// 命名函数表达式
var named = function named() {
  return true;
};

// 立即调用的函数表达式（IIFE）
(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());

永远不要在一个非函数代码块（if、while 等）中声明一个函数，浏览器允许你这么做，但它们的解析表现不一致，正确的做法是：在块外定义一个变量，然后将函数赋值给它

2.ECMA-262 把块定义为一组语句。函数声明不是语句

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
var test;
if (currentUser) {
  test = function test() {
    console.log('Yup.');
  };
}

3.永远不要把参数命名为 arguments。这将取代函数作用域内的 arguments 对象

// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}

看似基础的js基础你却不知道的事（一）

猜你喜欢