JavaScript入门笔记-1.快速入门

1.基本语法

console.log('Hello');

Hello

①注释

// 这是一行注释
console.log('hello world'); // 这也是注释

hello world

/* 从这里开始是块注释
 仍然是注释
 仍然是注释
 注释结束
*/

2.数据类型和变量

①Number

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

123; // 整数123
0.456; //浮点数0.456
1.2345e3; //科学计算法表示1.2345*1000
-99; //负数
NaN; //Not a Number,当无法计算结果时用NaN表示
Infinity; //Infinity表示无限大

Infinity

②字符串

字符串是以单引号'或双引号"括起来的任意文本，如'abc', "xyz"等等
''或""本身只是一种表示方式，不是字符串的一部分

③布尔值

true;
false;
2 > 1;
2 >= 3;
true && true;  //与运算
false || false; //或 运算
!true;  //非运算

false

④比较运算符

2 > 5; //false
5 >= 2; //true
7 === 7; //true
false == 0; //true
false === 0; //flase
// 在JavaScript中，有两种比较运算符：
// == 会自动转换数据类型再比较
// === 不会自动转换数据类型，数据类型不一致，返回false
NaN === NaN; //false
isNaN(NaN); //true

true

// 浮点数的相等比较
1 / 3 === (1 - 2 / 3); //false
/*这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数
要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值*/
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; //true

true

⑤null和undefined

null表示一个"空"的值
undefined表示值未定义

⑥数组

JavaScript的数组可以包括任意数据类型

[1, 2, 3.14, 'Hello', null, true];

[ 1, 2, 3.14, 'Hello', null, true ]

new Array(1, 2, 3); //通过Array()函数创建数组[1,2,3]

[ 1, 2, 3 ]

var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0];
arr[5];

true

⑦对象

JavaScript的对象是一组有键-值组成的无序集合

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

// 键都是字符串类型，值可以是任意数据类型，每个键又称为对象的属性
person.name;
person.zipcode;

null

⑧变量

var a; //申明了变量a,此时a的值为undefined
var t = null; //t的值是null

// 同一个变量可以反复赋值，可以是不同类型的变量，且只能用var声明一次
var a = 123;
a = 'abc';

'abc'

// 显示变量的内容
var x = 100;
console.log(x);

100

⑨strict模式

如果一个变量没有通过var声明就被使用，会被定义为全局变量
使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内
启用strict模式的方法是在JavaScript代码的第一行写上：'use strict';
不用var申明的变量会被视为全局变量，为了避免这一缺陷，所有的JavaScript代码都应该使用strict模式

3.字符串

①多行字符串

console.log(`多行
字符串
测试`);

多行
字符串
测试

②模板字符串

var name = '小明';
var age = 20;
var message = '你好,' + name + ', 你今年' + age + '岁了!';
console.log(message);

你好,小明, 你今年20岁了!

// 使用模板字符串
var message = '你好，${name}, 你今年${age}岁了！';
console.log(message);

你好，${name}, 你今年${age}岁了！

③操作字符串

var s = 'Hello, world!';
s.length;

13

// 索引
s[0];
s[6];

' '

// 字符串是不可变的，对字符串的某个索引赋值，不会报错，也没有任何效果
var s = 'Test';
s[0] = 'X';
console.log(s);

Test

调用JavaScript的字符串方法，不会改变原有字符串的内容，而是返回一个新字符串

④toUpperCase

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

var s = 'Hello';
s.toUpperCase(); //返回'HELLO'

'HELLO'

⑤toLowerCase

toLowerCase()把一个字符串全部变为小写

var s = 'HEllo';
var lower = s.toLowerCase();
lower;

'hello'

⑥indexOf

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

var s = 'hello, world';
s.indexOf('world');

7

⑦substring

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

var s = 'hello, world';
s.substring(0, 5); //从索引0开始到5,不包括5

'hello'

s.substring(7); //从索引7开始到结束，返回'world'

'world'

4.数组

// 获取Array长度
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; //6

6

// 修改Array的length会改变Array大小
var arr = [1, 2, 3];
arr.length;

3

arr.length = 6;
arr;

[ 1, 2, 3, <3 empty items> ]

arr.length = 2;
arr;

[ 1, 2 ]

// 通过索引修改Array
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr;

[ 'A', 99, 'C' ]

// 索引超出范围，不会报错，会修改Array的大小
var arr = [1, 2, 3];
arr[5] = 'x';
arr;

[ 1, 2, 3, <2 empty items>, 'x' ]

①indexOf

通过indexOf()来搜索一个指定的元素的位置

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10);

0

arr.indexOf(30); //元素30没找到，返回-1

-1

②slice

Array的切片操作，对应String的substring()

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.slice(0, 3); //不包括结束索引3

[ 'a', 'b', 'c' ]

arr.slice(3); //从索引3开始到结束

[ 'd', 'e' ]

不给slice()传递任何参数，会从头到尾截取所有元素
利用该点可以方便的复制一个Array

var arr = ['a', 'b', 'c', 'd', 'e'];
var aCopy = arr.slice();
aCopy; //复制arr

[ 'a', 'b', 'c', 'd', 'e' ]

aCopy === arr; //false

false

③push和pop

push()向Array的末尾添加若干元素，
pop()删除Array的末尾元素

// push方法
var arr = [1, 2];
arr.push('A', 'B');
arr;

[ 1, 2, 'A', 'B' ]

// pop方法
arr.pop(); arr.pop();
arr;

[ 1, 2 ]

④unshift和shift

unshift()往Array的头部添加若干元素;
shift()则把Array的头部首个元素删掉;

// unshift方法
var arr = [1, 2];
arr.unshift('A', 'B');
arr; // ['A','B', 1, 2]

[ 'A', 'B', 1, 2 ]

// shift方法
arr.shift(); arr.shift();
arr;

[ 1, 2 ]

⑤sort

sort()可以对当前Array进行排序，它会直接修改Array的元素位置
直接调用会按照默认顺序排序,同时可以自定义顺序排序

var arr = ['B', 'C', 'A'];
arr.sort();
arr;

[ 'A', 'B', 'C' ]

⑥reverse

reverse()把Array元素顺序反转

var arr = ['one', 'two', 'three'];
arr.reverse();
arr;

[ 'three', 'two', 'one' ]

⑦splice

splice()方法是修改Array的"万能方法"
可以从指定的索引开始删除若干元素，再从该位置添加若干元素

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

[ 'Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle' ]

// 只删除，不添加
arr.splice(2, 2);
arr;

[ 'Microsoft', 'Apple', 'Oracle' ]

// 只添加，不删除
arr.splice(2, 0, 'Google', 'Fackbook');
arr;

[ 'Microsoft', 'Apple', 'Google', 'Fackbook', 'Oracle' ]

⑧concat

拼接两个Array，并返回一个新的Array

var arr = ['a', 'b', 'c'];
var added = arr.concat([1, 2, 3]);
added;

[ 'a', 'b', 'c', 1, 2, 3 ]

concat方法没有修改当前Array，而是返回了一个新的Array

arr; //还是原来的arr

[ 'a', 'b', 'c' ]

concat方法可以接收任意个元素和Array，并且自动把Array拆开，添加到新的Array中

var arr = ['a', 'b', 'c'];
newArray = arr.concat(1, 2, [3, 4]);
newArray;

[
  'a', 'b', 'c', 1,
  2,   3,   4
]

⑨join

将当前Array中的每个元素都用指定的字符连接起来，返回连接后的字符串
如果Array的元素不是字符串，将自动转换为字符串后再连接

var arr = ['a', 'b', 'c', 1, 2, 3];
arr.join('@');

'a@b@c@1@2@3'

⑩多维数组

如果数组的某个元素是一个Array，可以形成多维数组

var arr = [[1, 2, 3], [400, 500, 600], '-'];
arr; 

[ [ 1, 2, 3 ], [ 400, 500, 600 ], '-' ]

5.对象

JavaScript的对象是一种无序的集合数据类型，由若干键值对组成
JavaScript的对象的所有属性都是字符串，属性对应的值可以是任意数据类型

var xiaoming = {
    name: 'Danny',
    birth: 1996, 
    school: 'Tsinghua University',
    height: 173,
    weight: 66,
    score: null
};

// 获取对象属性
xiaoming.name; 

'Danny'

如果属性名包含特殊字符，就必须用''括起来
访问这个属性也无法使用.操作符，必须用['xxx']来访问

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

'No.1 Middle School'

xiaohong['name']; //等价于xiaohong.name;

'小红'

在编写JavaScript代码的时候，属性名尽量使用标准的变量名，
这样就可以直接通过object.prop的形式访问一个属性了

①添加属性

var xiaoming = {
    name: '小明'
};
xiaoming.age = 18;

18

②删除属性

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

true

③判断属性是否存在

var xiaotian = {
    name: 'tian',
    birth: 2000,
};
'name' in xiaotian;

true

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

'toString' in xiaotian;

true

xiaotian.hasOwnProperty('toString');

false

6.条件判断

var age = 20;
if (age >= 18) {
    console.log('adult');
} else {
    console.log('teenager');
}

adult

// 多行条件判断
var age = 3;
if (age >= 18) {
    console.log('adult');
} else if (age >= 6) {
    console.log('teenager');
} else {
    console.log('kid');
}

kid

var s = '123'
if (s.length) { //条件计算结果为3
    //
}

JavaScript把null、undefined、0、NaN和空字符串''视为false，
其他值一概视为true，因此上述代码条件判断的结果是true

7.循环

①for循环

// 计算 1 + 2 + 3 + ... + 10
var x = 0;
var i;
for (i=1; i<=1000; i++) {
    x = x + i;
}
x;

500500

for循环最常用的地方就是利用索引来遍历数组

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

Apple
Google
Microsoft

②for...in

把一个对象的所有属性依次循环出来

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

name
age
city

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

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

name
age
city

由于Array也是对象，它的每个元素的索引被视为对象的属性
for...in循环可以直接循环出Array的索引

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

0
A
1
B
2
C

for...in对Array的循环得到的是String而不是Number

while循环

for循环在已知循环的初始和结束条件时非常有用
只有一个判断条件时用while循环更合适

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x;

2500

do...while

var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; //100

100

8.Map和Set

Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael');

95

初始化Map需要一个二维数组

var m = new Map(); //初始化一个空Map
m.set('Adam', 67); //添加新的key-value
m.set('Bob', 59);

Map { 'Adam' => 67, 'Bob' => 59 }

m.has('Adam'); //食肉存在key 'Adam': true
m.get('Adam'); //67
m.delete('Adam'); //删除key 'Adam'
m.get('Adam'); //undefined

Set

Set也是一组key的集合，和Map不同的是，Set不存储value，且在Set中，没有重复的key

var s1 = new Set(); //空Set
var s2 = new Set([1, 2, 3]); //含1，2，3

重复元素在Set中自动被过滤

var s = new Set([1, 2, 3, 3, '3']);
s; //Set[1, 2, 3, '3']

Set { 1, 2, 3, '3' }

通过add(key)方法可以添加元素到Set中
通过delete(key)方法可以删除元素

s.add(4);
s;

Set { 1, 2, 3, '3', 4 }

s.delete(3);
s;

Set { 1, 2, '3', 4 }

9.iterable

Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过for...of循环遍历
for...in循环的是对象的属性；for...of循环的是迭代器中的是一个元素

var a = ['a', 'b', 'c']; //Array
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); //Map
var s = new Set(['a', 'b', 'c']); //Set
for (var i of a) {//遍历Array
    console.log(i);
}
for (var x of m) {//遍历Map
    console.log(x[0] + '=' + x[1]);
}
for (var x of s) {//遍历Set
    console.log(x);
}

a
b
c
1=x
2=y
3=z
a
b
c

更好的方式是直接使用iterable内置的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

Set与Array类似，但是Set没有索引，因此回调函数的前两个参数都是元素本身

var s = new Set(['a', 'b', 'c']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

a
b
c

Map的回调函数参数依次是value、key和map本身

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

x
y
z

// 可以省略某些参数，比如只需要获得Array的element
var a = ['a', 'b', 'c'];
a.forEach(function (element) {
    console.log(element);
});

a
b
c

原文地址：https://www.cnblogs.com/warmscar/p/11956277.html