JavaScript入门

基本语法

• 大小写敏感
• 标识符
  标识符指的就是变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符:
  第一个字符只能是字母、下划线（ _ ）或美元符号（ $ ）之一；
  其他字符可以是字母、下划线、美元符号或数字。
  一般我们采用的驼峰命名法，讲究见名知其意。
• 注释
  可以分为当行注释和多行注释。
  单行注释：

// let str = 'hello,world';
// console.log(str);

多行注释：

/*
let str = 'hello,world';
console.log(str);
*/

• 语句
  在js中一条语句结束后可以不用写 ；号，但为了规范，我们一般还是在一条语句结束后加上 ；号。
• 关键字
• js是弱类型语言，所谓弱类型语言就是它的变量可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
  定义变量时要使用 var 操作符，后跟变量名（即一个标识符）。

var info = '我喜欢JS语言';
console.log(info);

有一点必须注意，即用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁。例如：

function like(str){
    var message = '6666';
    console.log(str+message);
}
like('web技术');
console.log(message);//这里发生了错误，因为message是局部变量，但是js语言不会直接为我们检查出错误

虽然省略 var 操作符可以定义全局变量，但这也不是我们推荐的做法。因为在局部作用域中定义的全局变量很难维护

操作符

• 一元运算符++，–

var num = 0;
num++;
console.log(num);
num--;
console.log(num);

• 布尔运算&& || ！
  除下列值为假外其余皆为真： false、null、undefined、‘’、0、NaN（not only a number）。&&和||都属于 短路操作！

var flag = true;
var num1 = 1;
var num2 = 2;
console.log(num1>0&&num2>0);
console.log(num1<0||flag);
console.log(flag);
console.log(!flag)

-算术操作符 + - * / %

//12+3*2-6/5+10%3=17.8
var res = 12+3*2-6/5+10%3;  //特别注意，在js中  / 不是整除
console.log(res);

• 关系操作符 <> <=>= == === != !==
  == 是比较两种内容是不是一样，会自动帮助我们转换。而===则是比较两则的类型一不一样，进而再比较内容。

var x = 123;
console.log(x == 123);//true
console.log(x == '123');//true
console.log(x === 123);//true
console.log(x === '123');//false

• 三元表达式 ? :

var num1 = 10;
var num2 = 20;
//使用if  else
if(num1>num2){
    console.log(num1+' is bigger than '+num2);
}else{
    console.log(num2+' is bigger than '+num1);
}
//使用 三元运算符
var str = num1 > num2 ? num1+' is bigger than '+num2:num2+' is bigger than '+num1;
console.log(str);

• 赋值操作符 = += -+ *= /= %=

语句

if do-while while for for-in for-of break continue switch

var num = 10;
if (num > 0) {
    console.log(num + ' 是一个非负数');
}
var res = 0;
var i = 0;
do {
    res = res + i;
    i++;
} while (i <= 10);
console.log(res);

res = 0;
i = 1;
while (i <= 10) {
    res = res + i;
    i++;
}
console.log(res);
res = 0;
for (i = 1; i <= 10; i++) {
    res = res + i;
}

var array = [1,2,3,4,5,6,7,8,9,10];
for(var j = 0;j<array.length;j++){
    console.log(array[j]);
}
console.log(res);
for(var j in array){
    console.log(array[j]);
}
for(var j of array){
    console.log(j);
}

函数

函数（ function）对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

//定义一个求和函数,并返回结果
function sum(num1 ,num2){
    var res = num1+num2;
    return res;
}

console.log(sum(1,99));

ECMAScript 中的函数在定义时不必指定是否返回值。实际上，任何函数在任何时候都可以通过 return 语句后跟要返回的值来实现返回值。console.log(result);
ECMAScript 函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型。

也就是说，即便你定义的函数只接收两个参数，在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数，而解析器永远不会有什么怨言。

之所以会这样，原因是 ECMAScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没有问题。

如果在 ECMAScript中定义了两个名字相同的函数，则该名字只属于后定义的函数。例如:

function fun(){
    console.log("123456");
}
function fun(){
    console.log(7789);
}
fun();

对象

对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。

创建对象有如下两种方式，我们常用第二种。

//第一种方式
var people = new Object();
people.name='xiaoyi';
people.age=30;
people.walk=function (){
    console.log('我每天都要走路锻炼。');
};
//第二种
var person = {
    name:'zhouyinjie',
    age:20,
    run:function (){
        console.log('我每天都要跑步锻炼身体。');
    }
};
console.log(people.name);
console.log(person.run());

虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，人们开始使用工厂模式的一种变体。代码如下：

function personFactory(name,age,sex){
    var person = new Object();
    person.name=name;
    person.age=age;
    person.sex=sex;
    person.say=function (){
        console.log('我是利用工厂对象创造对象!姓名：'+this.name);
    };
    return person;
}
var p1 = new personFactory('第一人',20,'男');
p1.say();
var p2 = new personFactory('第er人',22,'女');
p2.say();

数组

除了 Object 之外， Array 类型恐怕是 ECMAScript 中最常用的类型了。
ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别。虽然 ECMAScript 数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，ECMAScript 数组的每一项 可以保存任何类型的数据。
也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推。而且，ECMAScript 数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。
创建数组有以下两种方法，我们常用第二种。

//方式一new
var size = new Array('small', 'middle', 'big');
//方式二字面量
var size = ['small', 'middle', 'big'];
console.log(size[1]);
size[3] = 'brown';
console.log(size.length);
var array = [1,2,'abc',[1,2],{name: 'baby',age: 3}];
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[3]);
console.log(array[4]);
console.log(array[5]);

数组常用的方法

• 元素联合

var size = ['small','middle','big'];
console.log(size.join('-'));
console.log(size.join(':'));

• 堆栈方法
  栈是一种先进后出的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。
  ECMAScript 为数组专门提供了 push() 和 pop() 方法，以便实现类似栈的行为。

var size = [];
var num = size.push('small','middle');
console.log(num);
size.push('big');
console.log(size);
console.log(size.length);
var num_ = size.pop();
console.log(num_);
console.log(size);

• 队列方法
  栈数据结构的访问规则是先进后出，而队列数据结构的访问规则是先进先出。队列在列表的末端添加项，从列表的前端移除项。
  由于 push() 是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 shift() ，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。

var size = [];
size.push('small','middle');
console.log(size);
var num_ = size.shift();
console.log(num_);
console.log(size);
console.log(size.shift());

ECMAScript 还为数组提供了一个 unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。

var size = [];
let num = size.unshift('small','middle');
console.log(num);
console.log(size);
size.unshift('large');
console.log(size.pop());
console.log(size.pop());
console.log(size);

• 链接方法

var num1 = [1,2,3,4];
var num2 = [5,6,7,8];
console.log(num1.concat(num2));
console.log(num2.concat(num1));
console.log(num2.concat(9));
console.log(num2);

• 数组反转项

var num = [1,2,3,4,5,6,7,8,9,10];
console.log(num);
let reverse = num.reverse();
console.log(reverse);

• 分片方法
  slice() ，它能够基于当前数组中的一或多个项创建一个新数组。 slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。
  在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
  注意：slice()方法不会影响原来的数组，只是会返回一个新的数组。

var num = [1,2,3,4,5,6,7,8,9,10];
console.log(num.slice(2));
console.log(num.slice(2,5));
console.log(num.slice(5,5));
console.log(num);

splice()会改变原来的数组

• 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。

• 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、0（要删除的项数） 和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。

• 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起 始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

链式语法

链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上，你只需要让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。

var bird = {//定义对象字面量
    catapult: function() {
        console.log( 'Yippeeeeee!' );
        return this;//返回bird对象自身
    },
    destroy: function() {
        console.log( "That'll teach you... you dirty pig!" );
        return this;
    }
};
bird.catapult().destroy();

闭包

闭包是什么?闭包是Closure，这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是：

函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。

闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配

当在一个函数内定义另外一个函数就会产生闭包。