JS函数的定义

1.基本函数定义

function functionname()
 {
执行代码
 }
//比如
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

function指出这是一个函数定义,关键字；
abs是函数的名称；
(x)括号内列出函数的参数，多个参数以,分隔；
{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

2.匿名函数

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。
注意:需要在函数体末尾加一个;，表示赋值语句结束。

3.回调函数

回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。

函数的调用

1.直接调用

调用方法：函数名+参数列表

function myFunction(name,job){
函数体}

myFunction(name,job);

2.在链接中调用

描述文字

3.在事件中调用

调用方法：事件类型="函数名()"

4.递归调用

调用方法：函数自己在自己内部调用自己本身

//格式
function 函数名(){
代码
函数名();
}

函数若调用别的函数就称之为闭包

5.调用注意事项

1.传参

调用函数时，按顺序传入参数即可，由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

传入的参数比定义的少也没有问题：

abs(); // 返回NaN

函数将收到undefined，计算结果为NaN

2.return 语句

JavaScript引擎在行末自动添加分号的机制,会自动换行

function foo() {
    return
        { name: 'foo' };
}
foo(); // undefined
//函数真正的表示结果如下
function foo() {
    return; // 自动添加了分号，相当于return undefined;
        { name: 'foo' }; // 这行语句已经没法执行到了
}

变量的作用域

1.如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

function foo() {
    var x = 1;
    x = x + 1;
}

2.如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用，两个变量不相互影响:

function foo() {
    var x = 1;
    x = x + 1;
}

function bar() {
    var x = 'A';
    x = x + 'B';
}

3.由于函数可以嵌套，内部函数可以访问外部函数定义的变量，反过来则不行:

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar可以访问foo的变量x!
    }
    var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

4.块级作用域

函数体内的某一些块在内部声明就不能有很好的封装性，for循环等语句块中是无法定义具有局部作用域的变量的：

'use strict';
function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然可以引用变量i
}

这个时候用let替代var可以申明一个块级作用域的变量：

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    // SyntaxError:
    i += 1;
}

const与let都具有块级作用域,const是用来定义常量的。

JS的相关扩展

1.解构赋值

可以同时对一组变量进行赋值

var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素,直接对第三个元素赋值

如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};
var {name, age, passport} = person;
//name:小明
//age :20
//passport:G-12345678

申请了一个块，块里面有3个变量。

解构赋值使用场景

1.交换连个数的值[x, y] = [y, x]

var x=1, y=2;
[x, y] = [y, x]

2.快速获取当前页面的域名和路径

var {hostname:domain, pathname:path} = location;

2.函数在对象中被称作方法

对象内指针的说明

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
//这里的this指针指向的'xiaoming'对象

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};
//这里的this指针指向的是全局的window的对象

this 指针如果在对象内就指向当前对象，如果在全局范围内就指向window

3.arguments

它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array
利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

function abs() {
    if (arguments.length === 0) { //三连等
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

arguments最常用于判断传入参数的个数

4.rest参数

可以让传参更自由

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

rest参数只能写在最后，前面用...标识，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest。

5.apply()方法，控制指针的指向

apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

apply()与call()的区别：
apply()把参数打包成Array再传入；
call()把参数按顺序传入。

6.绑定在数组中的一些函数

1.map

数组名.map（函数）;它会逐个元素地去，调用函数

var f = function (x) {
    return x * x;
};
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

2.reduce

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

3.sort

Array的sort()方法默认把所有元素先转换为String再排序

//直接排序结果
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

对数值排序的正确方法

arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});

7.时间标准对象

Date对象用来表示日期和时间。

var now = new Date();
now; // Tue May 29 2018 17:10:25 GMT+0800 (中国标准时间)
now.getFullYear(); // 年份
now.getMonth(); // 月份
now.getDate(); // 29, 表示29号
now.getDay(); // 星期几
now.getHours(); // 小时
now.getMinutes(); // 分钟
now.getSeconds(); // 秒
now.getMilliseconds(); //  毫秒数
now.getTime(); // 返回距 1970 年 1 月 1 日之间的毫秒数。

CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

在index文件中链入CSS文件

选择器

id选择器

#para1{...}

class选择器

.center {...}

JAVAScript函数+CSS简介