函数
定义函数
- 方法一—————— 后端使用
'use strict'
function abs(x) {
if(x>=0){
return x;
}else{
return -x;
}
}
若执行到return 则代表函数结束
- 方法二—————— 前端使用
var abs = function (x) {
if(x>=0){
return x;
}else{
return -x;
}
}
function (x) { … } 是一个匿名函数
调用函数
abs(15)
15
abs(-35)
35
参数问题
JavaScript可以传任意个参数 也可以不传参数
- 不传参数————返回Not a Number
因为传入的参数为空 即为undefined
abs()
NaN
- 如何避免？——————手动抛出异常
function abs(x) {
if (typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
abs(abs)
定义函数.html?_ijt=296l7kb9n7k4rimfdj6rkfo1go:10 Uncaught Not a Number
- 传入多个参数————引入关键字arguments
- arguments———— 是一个数组 里面是传递的所有参数
使用 for 循环遍历参数数组中的所有参数
var abs = function (x) {
console.log('x的值为：'+x);
for (var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
abs(20000,2003,2008,2012,2019,2020)
x的值为：20000
20000
2003
2008
2012
2019
2020
问题：arguments里面包含所有的参数 如何选出 除了已定义的参数之外的所有参数？
- 传入新函数rest：只能写在参数的最后 并且用 … 进行标识
var exp = function (x,y,z,...rest) {
console.log('x的值为：'+x);
console.log('y的值为：'+y);
console.log('z的值为：'+z);
console.log('其余的参数值为：'+rest);
}
exp(2020,2019)
x的值为：2020
y的值为：2019
z的值为：undefined
其余的参数值为：
exp(2020,2019,3084,84,153,651)
x的值为：2020
y的值为：2019
z的值为：3084
其余的参数值为：84,153,651
变量的定义域
- 在函数中声明变量后 函数外不能使用
function f() {
var a = 2020;
console.log(a);
}
console.log(a); —————— 报错：a未定义 Uncaught ReferenceError: a is not defined
- 两个函数使用了相同的变量名 ———— 在各自的函数内则不影响
function f() {
var a = 2020;
console.log(a);
}
function f1() {
var a = '你好';
console.log(a);
}
- 内部函数可以访问外部函数成员
function f() {
var a = 2020;
function f2() {
var b = a+1;
}
console.log(b); ———————— 报错：Uncaught ReferenceError: a is not defined
}
- 内部函数变量和外部函数变量重名—————就近原则
function f() {
var y = 2020;
function f2() {
var y = '你好';
console.log('inner'+y);
}
console.log('outer'+y);
f2(); ———————— 在f中调用f2函数
}
f(); ———————— 在外部调用函数f
网页中显示：
outer2020
inner你好
- 提升变量的作用域
function fun() {
var z = '2020'+y;
console.log(z)
var y = "加油";
}
网页中显示：
fun()
2020undefined
- 说明JavaScript引擎自动提升了y的声明 但不会提升它的赋值 相当于如下
var y;
var z = '2020'+y;
console.log(z)
y = "加油";
- 全局函数
var a = 2019; ———————— a 为全局变量
function fun() {
console.log(a);
}
fun();
console.log(a);
网页中显示：
2019
2019
- 全局对象Window
var x = '某某某';
alert(x);
window.alert(x); ————————结果：网页弹出两个某某某
- alert( ) 函数本身就是一个Window对象
window.alert(2020);———————— 弹窗2020
var old_alert = window.alert;
old_alert(2019);———————— 弹窗2019
window.alert =function () { } ————————覆盖原始的window.alert函数
window.alert(2018); ———————— 失效
window.alert = old_alert; ————————恢复原始的window.alert函数
window.alert(2017); ———————— 弹窗2017
- JavaScript 规范
- 因为JavaScript所有的全局变量都会绑定到window上 若存在不同的文件使用相同的全局变量 就会产生冲突
- ———————解决方法：把小的代码放进大的自己定义的唯一的变量名中
var zy = {}
zy.name = 'xiaohua';
zy.age = 20;
zy.hobby = 'sing dance'
console.log(zy);
- let——局部作用域
- 使用var时：
for (var i = 2020;i<2030;i++){
console.log(i) ———————— 打印2020-2029
}
console.log(i+1) ———————— 打印2031
- 使用let时：
for (let i = 2020;i<2030;i++){
console.log(i) ———————— 打印2020-2029
}
console.log(i+1) ————————Uncaught ReferenceError: i is not defined
- const 常量
- 以前使用var定义常量 ———— 可以随便更改常量的值
var PI = '3.1415926';
console.log(PI);
PI = 2.7;
console.log(PI);
- 现在使用const定义常量 ———— 只读
const PI = '3.1415926';
console.log(PI);
PI = 2.7;
console.log(PI); ——— Uncaught TypeError: Assignment to constant variable.
方法
- 定义方法
var person = {
name : 'xiaoming',
sex : 'man',
birth:2005,
age:function () {
var today = new Date().getFullYear();
return today - this.birth; —————— this指向调用它的那个对象
}
}
网页中调试 ———— 调用方法时一定要带 ( ) 括号
person.name
"xiaoming"
person.age()
15
拆开上面的代码
function getAge() {
var today = new Date().getFullYear();
return today - this.birth;
}
var person = {
name: 'xiaoming',
sex: 'man',
birth: 2005,
age: getAge
}
person.age()
15
getAge()
Uncaught TypeError: Cannot read property 'birth' of undefined
若直接调用getAge( ) 则取不到 birth
- apply 函数 ————— 在JavaScript中控制this指向
function getAge() {
var today = new Date().getFullYear();
return today - this.birth;
}
var Girl = {
name:'花儿',
birth:2008,
age:getAge
}
var Boy = {
name: '小明',
birth: 2005,
age: getAge
}
getAge.apply(Girl,[]); ———————— 12
内部对象
标准对象
typeof alert
"function"
typeof a
"undefined"
typeof 123
"number"
typeof '2020'
"string"
typeof undefined
"undefined"
typeof true
"boolean"
typeof []
"object"
Date
- 基本时间
var now = new Date()
now
Tue Feb 04 2020 12:26:08 GMT+0800 (中国标准时间)
now.getFullYear() —————— 年
2020
now.getMonth() —————— 月
1
now.getDate() —————— 日
4
now.getDay() —————— 星期
2
now.getHours() —————— 时
12
now.getMinutes() —————— 分
26
now.getSeconds() —————— 秒
8
now.getTime() —————— 获取从1970年1月1日 0:00分到现在的毫秒值 (全世界统一)
1580790368144
- 转换时间
now.toLocaleDateString()
"2020/2/4"
now.toGMTString()
"Tue, 04 Feb 2020 04:26:08 GMT"
JSON
- JavaScript Object Notation ———— 是 JavaScript 对象表示法
- 定义：JSON 采用完全独立于编程语言的文本格式来存储和表示数据
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
—— XML也是一种数据交换格式，为什么没有选择XML呢？
—— 因为XML虽然可以作为跨平台的数据交换格式，但是在JS中处理XML非常不方便，同时XML标记比数据多，增加了交换产生的流量
—— 而JSON没有附加的任何标记，在JS中可作为对象处理，所以我们更倾向于选择JSON来交换数据
- 使用规范
- 1. 数据由逗号分隔
- 2. 大括号保存对象
- 3. 中括号保存数组
'use strict'
var Teacher = {
name:'张老师',
age:45,
subject:'Math'
}
var Student = {
name: '李华',
age: 20
}
转义
- 对象转换为字符串： JSON.stringify( );
var t = JSON.stringify(Teacher);
console.log(t)
{"name":"张老师","age":45,"subject":"Math"} —————— 字符串
var s = JSON.stringify(Student);
console.log(s)
{"name":"李华","age":20}
- 字符串转换为对象：
var T = JSON.parse('{"name":"张老师","age":45,"subject":"Math"}')
console.log(T)
{name: "张老师", age: 45, subject: "Math"} —————— 对象
var S = JSON.parse('{"name":"李华","age":20}')
console.log(S)
{name: "李华", age: 20}
JSON对象和JavaScript对象的区别
-
- JSON对象 —————— 用单引号括起来（外单内双）
var customer2 = '{"name":"Rose","age":19,"sex":"女"}'
-
- JavaScript对象 ———————— 只用括数据（内单）
var customer1 = {name:'Jack',age:20,sex:'男'};
Ajax
- AJAX —— Asynchronous JavaScript And XML
- 作用：主要是实现页面和 web 服务器之间数据的异步传输 实现网页的==局部刷新 ==是指一种创建交互式网页应用的网页开发技术
- Ajax = 异步 JavaScript 和 XML 或者是 HTML
- 异步：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。
Ajax应用
- 登录界面时 —— 若还没有登录，页面会弹出一个窗口出来输入账号和密码
如果不是用ajax做的话，一般都会跳转到另外一个页面让你登录。- 使用邮箱时 —— 会定时自动保存，保存到服务器上的。而这种通信，显然是不能刷新页面的，这就需要用到了AJAX技术。
- 提交表单时 —— 可以用来使静态网站访问后台数据库,也可以做无刷新页面表单提交
- 浏览淘宝的首页时 —— 不往下滚动，下面的内容是永远不会加载的，往下滚动的时候，网速不是特别快的时候就能看见数据加载了。
- 计算淘宝物品的价格时 —— 用到ajax技术，不会影响其它内容
- 输入用户名和密码 —— 不会影响其它已输入内容的
如果不用ajax技术，那么就必须全页面刷新，其它数据又没有保存，就会丢失的！
面向对象
原型对象
- Jack继承了Person的特性 —————— Jack . __ proto __
'use strict'
var Person = {
name:'张三',
age:20,
sing:function () {
console.log(this.name+' is singing...')
}
};
var Jack = {
name:'Jack'
};
Jack.__proto__ = Person;
Jack.sing()
Jack is singing...
console.log(Jack)
VM80:1 {name: "Jack"}
name: "Jack"__proto__:
name: "张三"
age: 20
sing: ƒ ()
__proto__: Object
- 添加一个新方法 ———————— student . prototype . hobby =
function student(name) {
this.name = name;
}
student.prototype.hobby = function () {
console.log('学生喜欢唱歌跳舞打麻将');
};
class对象
- 定义一个类
class Student{
constructor(name,age){
this.name = name;
this.age = age;
}
study(){
console.log('学生都喜欢学习');
}
};
var zhangsan = new Student('zhangsan');
zhangsan.study()
学生都喜欢学习
- 继承 （ES6 之后）
class Student{
constructor(name,age){
this.name = name;
this.age = age;
}
study(){
console.log('学生都喜欢学习');
}
};
class Student1 extends Student{
constructor(name,play){
super(name);
this.play = play;
}
Playing(){
console.log(this.name+'喜欢玩耍');
}
}
var zhangsan = new Student('zhangsan');
var Mary = new Student1('Mary');
Mary.Playing()
Mary喜欢玩耍
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
