JavaScript（一）快速入门

文章目录

• 一、基本语法
• • 1.注释
  • • 1.1 单行注释
    • 1.2 多行注释
  • 2.赋值与输出
  • • 2.1 变量与赋值
    • 2.2 输出
• 二、数据类型
• • 1.字符串
  • 2.数值
  • 3.布尔值
• 三、对象
• • 1.取值
  • 2.相关方法
• 四、字符串
• • 1.多行字符串
  • 2.模板字符串
  • 3.操作字符串
• 五、数组
• • 1.创建
  • 2.一些属性
  • 3.相关方法
• 六、条件判断和循环
• • 1.条件判断
  • 2.循环
• 七、Map和Set
• • 1.Map
  • 2.Set
• 八、iterable

参考了廖雪峰老师的文档以及javascript DOM编程艺术

一、基本语法 1.注释 1.1 单行注释

// 这是单行注释

1.2 多行注释

2.赋值与输出 2.1 变量与赋值

**不用var申明的变量会被视为全局变量，为了避免这一缺陷，所有的Javascript代码都应该使用strict模式。在第一行加入 ‘use strict’ **

mood="happy";
age=33;

2.2 输出

alert(mood);//会弹出对话框
alert(age);
console.log(mood);
console.log(age);//不会弹出对话框

二、数据类型 1.字符串

var mood='happy';
var mood="happy";

2.数值

Javascript不区分整数和浮点数，统一用Number表示。

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了Javascript的Number所能表示的最大值时，就表示为Infinity

3.布尔值

true / false

var sleeping=true;
var sleeping=false;

三、对象

键——值的无序组合，相当于python中的字典

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

如果属性名包含特殊字符，就必须用’ '括起来

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

1.取值

普通取值用 . ,如果属性名包含特殊字符，必须用[‘xxx’]来访问：

person.name; // 'Bob'
person.zipcode; // null
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'（不推荐)
xiaohong.name; // '小红'(推荐）

2.相关方法

1. 删除属性

delete xiaoming.age;
delete xiaoming['age'];

2. 添加属性

xiaoming.school=xdu;

3. 判断属性是否存在

• in
  如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的

'toString' in xiaoming; // true

• hasOwnProperty()
  判断一个属性是否是xiaoming自身拥有的，而不是继承得到的

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

四、字符串 1.多行字符串

用反引号 ...表示：

`这是一个
多行
字符串`;

2.模板字符串

将字符串连接可以用‘+’ ，但有些繁琐。使用模板字符串会自动替换字符串中的变量。

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

3.操作字符串

常见操作有：

var s = 'Hello, world!';
1.求长度
  s.length; // 13
2.把一个字符串全部变为大写
  s.toUpperCase();//HELLO,WORLD!
3.把一个字符串全部变为小写
  s.toLowerCase();//hello,world!
4.搜索指定字符串出现的位置
  s.indexOf('world'); // 返回7
  s.indexOf('World'); // 没有找到指定的子串，返回-1
5.返回指定索引区间的子串
  s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
  s.substring(7); // 从索引7开始到结束，返回'world'

五、数组 1.创建

Javascript的Array可以包含任意数据类型，并通过索引来访问每个元素。

var shuzu=Array(4)
var shuzu=Array() //不知道数组中有多少元素
var shuzu=['John',1940,false，name] //支持不同类型的元素，可以是变量

2.一些属性

1. 要取得Array的长度，直接访问length属性：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

2. 直接给Array的length赋一个新的值会导致Array大小的变化：

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]

3. 如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化，不会报错：

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

3.相关方法

1. indexOf

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1

2. slice
   slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array.
   如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array
3. push和pop
   空数组继续pop不会报错，而是返回undefine

arr; // []
arr.pop(); 
arr; // []

4. unshift和shift
   如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉
5. sort
   sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序
6. reverse
   reverse()把整个Array的元素给调个个，也就是反转
7. splice
   splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素，会以数组的形式返回删除的元素。

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

8. concat
   concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array（并没有修改当前Array）
   concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里。

var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

9. join
   把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串。

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
//如果Array的元素不是字符串，将自动转换为字符串后再连接。

六、条件判断和循环 1.条件判断

if (... )
	{
		...
	}
else if (...)
	{
		...
	} 
else{
		...
	}

2.循环

1. for

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i 
for…in
 
var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}
 
注意，for … in对Array的循环得到的是String而不是Number。
 3. while
 
var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500
 
七、Map和Set 
1.Map 
Map是一组键值对的结构，具有极快的查找速度。
 
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
 
初始化Map需要一个二维数组，或者直接初始化一个空Map
 
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
 
2.Set 
Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。
 
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
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}
 
八、iterable 
遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。
 
for…of
 具有iterable类型的集合可以通过新的for … of循环来遍历。
 
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}
 
for … of循环和for … in循环区别:
 for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。
 
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}
 
for … of循环则完全修复了这些问题，它只循环集合本身的元素
 
forEach
 它接收一个函数，每次迭代就自动回调该函数
 
'use strict';
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);
});