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.在链接中调用
<a href ="javascript:函数名()">描述文字</a>
3.在事件中调用
调用方法：事件类型="函数名()"
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
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文件
<link href="css/css.css" rel="stylesheet" type="text/css"/>
选择器
id选择器
#para1{...}
class选择器
.center {...}
相关功能
背景
background-color:#b0c4de; //背景颜色
background-image:url('paper.gif');//背景图片
background-repeat:repeat-x; //背景图片水平平铺
盒子模型
Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像
padding-top:25px;
浮动
可以消除div 布局的紧密结构
伪类
伪类是用来添加一些选择器的特殊效果
a:hover{color：grey};//鼠标放上去一瞬间链接变颜色
a:active{color：grey}//鼠标店家一瞬间链接变化
a:visited{color：grey}//访问过后的变化
网友评论