Sunxin'Blog

JavaScript学习笔记01_基础语法

JavaScript学习笔记

数据类型与变量

  • Number:不区分整型和浮点型,特别的
    • Infinity: 无限大
  • NaN: not a number,无法计算结果时用
    • NaN === NaN; //false
    • isNaN(NaN); //true
  • String
  • Boolean
  • Null
  • Undefine

对象

由一组键值组成的无序组合,键都是字符串类型,值可以是任何类型

1
2
3
4
5
6
7
var person = {
name:'sunxin',
age:20,
tags:['js','java'],
hasCar:false,
zipcode:null
}

变量

JavaScript 是弱类型语言,使用var声明变量

字符串

  • \ 转义字符

    也可以把自身转义

1
2
3
1. \n : 换行
2. \t : 制表符
3. \x## : 表示十六进制 \x41 表示 'A'
  • 多行字符串

    ES6新增表多行字符串(反引号,在键盘1左边) ...

1
2
3
4
5
var s = `这是
多行
字符串
`;
console.log(s);
  • 模板字符串

    拼接字符串是可以使用 + 连接,但是有时过于麻烦,ES6新增模板字符串

    var name = ‘sunxin’;
    var age = 20;
    var message = 我是 ${name},今年${age}岁了;
    alert(message);

数组

JavaScript的数组可以包含人和数据类型

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

如果给Array的length赋一个新值会导致Array的大小变化
注意:如果索引超出了范围同样会引起Array大小的变化。

1
2
3
4
5
6
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]
  • IndexOf: 搜索数组中指定元素的位置
  • slice: 对应String中的substring(),截取数组中的部分元素,返回一个新数组

    1
    2
    3
    4
    5
    6
    7
    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()传任何参数,它就会从头到尾截取所有元素,这样就可以实现复制一个数组了。
    var aCopy = arr.slice();
    aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    aCopy === arr; // false
  • push();向数组末尾添加若干元素

  • pop();把数组最后一个元素删掉
  • unshift();向数组头部添加若干元素
  • shift();删掉数组第一个元素
  • sort();对数组进行排序
  • reverse();对数组进行翻转
  • splice();修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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。concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里

    1
    2
    var arr = ['A', 'B', 'C'];
    arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
  • join();把当前Array的每个元素用一个指定的字符串连接起来,然后返回连接后的字符串

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

条件判断

if…else… 执行特点是2选1。在多个if…else…语句中,如果某个条件成立了,则后续不再继续判断。JavaScript把null,undefine,NaN,0,和空字符串’’视为false。

Map 和 Set

ES6新增数据类型

  • 初始化Map需要有一个二维数组,或者直接初始化一个空Map。Map的一个Key只对应一个value,如果key重复,那么value将会被覆盖。
1
2
3
4
5
6
7
8
9
10
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

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
  • Set,是一组key的集合,不存储value。Set中key不能重复。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //添加元素
    >>> s.add(4)
    >>> s
    {1, 2, 3, 4}
    >>> s.add(4)
    >>> s
    {1, 2, 3, 4}
    //删除元素
    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类型。具有iterable类型的集合可以通过新的for … of循环来遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var a = ['A','B','C'];
var s = new Set(['A','B','C']);
var m = new Map([[1,'x'],[2,'y'],[3,'z']]);

//遍历Array
console.log('遍历Array');
for(var x of a){
console.log(x);//A,B,C
}

console.log('forin遍历Array');
for(var x in a){
console.log(a[x]);//A,B,C
console.log(x);//0,1,2
}

//遍历Set
console.log('遍历Set');
for(var x of s){
console.log(x);
}

//遍历Map
console.log('遍历Map');
for(var x of m){
// console.log(x);
console.log(x[0] + '=' + x[1]);
}
  • for…in 与 for…of 的区别

    • for…in 遍历的是对象的属性名称,Array数组的索引下标被视为它的一个属性.当我们为Array添加额外的属性之后,这个属性也会被打印出来。

      1
      2
      3
      4
      5
      a.name='Hello';
      for(var x in a){
      // console.log(a[x]);//A,B,C
      console.log(x);//0,1,2,hello
      }
    • 所以才引入了for…of 循环

  • 使用foreach循环,iterable内置,它接收一个函数,每次迭代就会自动回调该函数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    var a = ['A','B','C'];
    var s = new Set(['D','E','F']);
    var m = new Map([[1,'x'],[2,'y'],[3,'z']]);

    console.log('foreach遍历Array');
    a.forEach(function(element) {
    console.log(element);
    }, this);

    a.forEach(function(element,index,array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log('带参数的,'+element+","+index+","+array);
    }, this);

    console.log('foreach遍历set');
    s.forEach(function(element) {
    console.log(element);
    }, this);

    s.forEach(function(element,sameElement,set) {
    console.log('带参数的,'+element+","+sameElement+","+set);
    }, this);
    console.log('foreach遍历Map');
    m.forEach(function(element) {
    console.log(element);
    }, this);

    m.forEach(function(value,key,map) {
    console.log('带参数的,'+value+","+key+","+map);
    }, this);
-------------本文结束感谢您的阅读-------------