JS快速入门 - 爱码网

字符串

模板字符串

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

var s = \'Test\';
s[0] = \'X\';
alert(s); // s仍然为\'Test\'

数组

pop()则把Array的最后一个元素删除掉：

shift()方法则把Array的第一个元素删掉：

push()向Array的末尾添加若干元素

unshift()往Array的头部添加若干元素

js中那些方法不改变原来的数组对象

js数组方法改变原数组和不改变原数组的方法整理

js二维数组

对象

访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用\'\'括起来：

var xiaohong = {
    name: \'小红\',
    \'middle-school\': \'No.1 Middle School\'
};

xiaohong[\'middle-school\']; // \'No.1 Middle School\'
xiaohong[\'name\']; // \'小红\'
xiaohong.name; // \'小红\'

实际上JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。

delete xiaoming.age; // 删除age属性
delete xiaoming[\'name\']; // 删除name属性

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: \'小明\'
};
\'name\' in xiaoming; // true
\'grade\' in xiaoming; // false
xiaoming.hasOwnProperty(\'name\'); // true 
xiaoming.hasOwnProperty(\'toString\'); // false

条件判断

JavaScript把null、undefined、0、NaN和 \'\' 视为false，其他值一概视为true

循环

for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：

要过滤掉对象继承的属性，用hasOwnProperty()来实现：

var o = {
    name: \'Jack\',
    age: 20,
    city: \'Beijing\'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // \'name\', \'age\', \'city\'
    }
}

用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

Map和Set

JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题，最新的ES6规范引入了新的数据类型Map。

增删改查：set / delete / set / has

var m = new Map(); // 空Map
m.set(\'Adam\', 67); // 添加新的key-value
m.set(123, 59);
m.has(\'Adam\'); // 是否存在key \'Adam\': true
m.get(\'Adam\'); // 67
m.delete(\'Adam\'); // 删除key \'Adam\'
m.get(\'Adam\'); // undefined

增删改查：add / delete / forEach / has

Set是一组不重复key的集合，不存储value。

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

Array

增删改查：push / splice / forEach / find

Object

增删改查：obj[\'t\']=1 / delete obj[\'t\'] / obj[\'t\']=2 / \'t\' in obj

iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。

为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

for ... of循环和for ... in循环有何区别？

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

for ... in循环将把name包括在内，但Array的length属性却不包括在内。

var a = [\'A\', \'B\', \'C\'];
a.name = \'Hello\';
for (var x in a) {
    console.log(x); // \'0\', \'1\', \'2\', \'name\'
}

for ... of循环则完全修复了这些问题，这就是为什么要引入新的for ... of循环。它只循环集合本身的元素：

var a = [\'A\', \'B\', \'C\'];
a.name = \'Hello\';
for (var x of a) {
    console.log(x); // \'A\', \'B\', \'C\'
}

更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数

数组：
var a = [\'A\', \'B\', \'C\'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + \', index = \' + index);
});
输出：
A, index = 0
B, index = 1
C, index = 2

如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们，例如
var a = [\'A\', \'B\', \'C\'];
a.forEach(function (element) {
    console.log(element);
});

Set：
var s = new Set([\'A\', \'B\', \'C\']);
s.forEach(function (element) {
    console.log(element);
});

Map：
var m = new Map([[1, \'x\'], [2, \'y\'], [3, \'z\']]);
m.forEach(function (value, key, map) {
    console.log(value);
});
输出：
1x
2y
3z

字符串

数组