JavaScript——快速入门

引用：1>. <script>...</script>
   2>.<script src="/static/js/abc.js"></script>

可以在同一个页面中引入多个.js文件，还可以在页面中多次编写<script> js代码... </script>，浏览器按照顺序依次执行。

1.基本
控制台输出：console.log(‘我要学JavaScript!’);
弹幕弹出：alert(‘我要学JavaScript!’);
输入：parseFloat(prompt(‘请输入身高(m):’));

数据类型

---

(1).Number:
其不区分整数和浮点数，统一用Number表示，以下都是合法的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

---

(2).字符串
1>.字符串是不可变的,如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果
* 2>方法：
length返回长度

var s = ‘Hello, world!’;
s.length; // 13

toUpperCase()把一个字符串全部变为大写

var s = ‘Hello’;
s.toUpperCase(); // 返回’HELLO’
toLowerCase()把一个字符串全部变为小写：

indexOf()会搜索指定字符串出现的位置：

var s = ‘hello, world’;
s.indexOf(‘world’); // 返回7
s.indexOf(‘World’); // 没有找到指定的子串，返回-1

substring()返回指定索引区间的子串：

var s = ‘hello, world’
s.substring(0, 5); // 从索引0开始到5（不包括5），返回’hello’
s.substring(7); // 从索引7开始到结束，返回’world’

由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方 法，用反引号 ... 表示

console.log(`多行
字符串
测试`);
	var name = '小明';
	var age = 20;
	var message = `你好, ${name}, 你今年${age}岁了!`;

注意：反引号在键盘的ESC下方，数字键1的左边

---

(3).布尔值

---

(4).比较运算符（坚持使用===比较）
==:它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
===:它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
1> NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false

2> 唯一能判断NaN的方法是通过isNaN()函数：

isNaN(NaN); // true

---

(5).null和undefined
“空” “未定义”

---

(6).数组
JavaScript的数组可以包括任意数据类型

var arr = [1, 2, 3.14, ‘Hello’, null, true];

1>方法：
slice()就是对应String的substring()版本

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); //从索引0开始,到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
//如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉
unshift()向Array的头部添加若干元素，shift()则把Array的第一个元素删除掉
sort()可以对当前Array进行排序
reverse()把整个Array的元素反转
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']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat()方法把当前的Array和另一个Array连接起来

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

join()方法非常实用，它把当前Array的每个元素都用指定的字符串连接起来

var arr = [‘A’, ‘B’, ‘C’, 1, 2, 3];
arr.join(’-’); // ‘A-B-C-1-2-3’

//如果Array的元素不是字符串，将自动转换为字符串后再连接

(7).对象
一组由键-值组成的无序集合，例如：

var person = {
    name: ‘Bob’,
    ‘middle-school’: ‘No.1 School’//如果属性名包含特殊字符，就必须用’ '括起来
    tags: [‘js’, ‘web’, ‘mobile’],
    hasCar: true,
    zipcode: null
};
person.name; // ‘Bob’
person.zipcode; // null

	xiaoming.age; // undefined
    xiaoming.age = 18; // 新增一个age属性
    xiaoming.age; // 18
    delete xiaoming.age; // 删除age属性

检测xiaoming是否拥有某一属性，可以用in操作符（这个属性不一定是xiaoming的，它可能是xiaoming继承得到的）

‘name’ in xiaoming; // true

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

xiaoming.hasOwnProperty(‘toString’); // false

变量

var
1.可以重复声明
2.没有块级作用域
3.不能限制
let、count(推荐使用)
1.禁止重复声明
2.控制修改
3.支持块级作用域

可以自己试试通过遍历一个数组，对三个变量类型进行比较

循环

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

var o = {
    name: ‘Jack’,
    age: 20,
    city: ‘Beijing’
};
for (var key in o) {
    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。

Map

Map是一组键值对的结构，具有极快的查找速度。
举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：

var names = [‘Michael’, ‘Bob’, ‘Tracy’];
var scores = [95, 75, 85];

给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的 成绩，Array越长，耗时越长。
如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：

var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);
m.get(‘Michael’); // 95
m.set(‘Adam’, 67); // 添加新的key-value
m.set(‘Bob’, 59);
m.get(‘Bob’);//59 后面的值会把前面的值冲掉
m.has(‘Adam’); // 是否存在key ‘Adam’: true
m.get(‘Adam’); // 67
m.delete(‘Adam’); // 删除key ‘Adam’

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

var s = new Set([1, 2, 3, 3, ‘3’]);
s; // Set {1, 2, 3, “3”}

iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。Array、Map和Set都属于iterable类型,具有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]);
}

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

‘use strict’;
var a = [‘A’, ‘B’, ‘C’];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ’ + index);
});

如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。

for-in循环和for-of循环区别

错误理解法：for in语句用于遍历对象，而for-of语句用于遍历数组
但这样比较方便操作
区别：for…of不能循环出自定义的属性。