Author @LAMZZ
Comment@ 起的标题名一如既往的烂
一、函数的定义和调用
1.1 函数的定义方式
- 自定义函数
function func(){}; - 匿名函数
var func = function() {}; - 利用new Function（arg1,arg2,‘函数体’）；
例： var f = new Function(‘a’, ‘b’,‘console.log(66)’);
f(1, 2);
4.所有函数都是Function的实例对象 --万物都是对象。
1.2函数的调用方式
1.普通函数
function fn() {
console.log('2019');
}
//fn(); fn.call();
2.对象的方法
var o = {
fn : function() {
console.log('2019');
}
}
o.fn();
3.构造函数
function Star() {};
new Star();
4.绑定事件函数
btn.onclick = function() {};
5.定时器函数
setInterval(function() {}, 1000);
6.立即执行函数
(function() {
console.log('立马自动调用');
})();
二、浅论this
2.1函数this的指向
普通函数： this指window对象
对象函数： this指该对象
构造函数： this指该对象
绑定事件函数：this指调用者
定时器函数： this指window
立即执行函数：this指window
1.call方法
//例子：
var o = {name:'andy'};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
fn.call(o, 1, 2);//传入o对象 打印出来的是o对象
//call方法用来继承：
//Father
function Father(uname, age, sex) {
this.uname = uname;
this.age =age;
this.sex = sex;
}
//son
function Son(uname, age, sex) {
Father.call(this, uname, age, sex);
}
var son = new Son('sss', 19, '男');
console.log(son);
//son继承father的属性和方法；
2.apply方法
//求最大值
var arr = [1, 66, 23, 64, 35];
var max = Math.max.apply(Math, arr);
console.log(max);
//合并数组
var arr = [1, 66, 23, 64, 35];
var arr2 = [12, 16, 13, 14, 15]
Array.prototype.push.apply(arr, arr2);
console.log(arr);
3.bind方法：不会调用函数，但是能改变函数内的this指向
//fun.bind(this, arg1, arg2);
//this: fn
//arg1,arg2:普通参数
//return 由指定的this值和初始化参数改造的原函数拷贝
//bind方法
var o = {color:'pink'};
function fn() {
console.log(this);
}
var f = fn.bind(o);
f();
//点击事件例子：
var btn = document.querySelector('button');
btn.onclick = function() {
this.disabked = true;
setTimeout(function() {
this.disabked = false;
}.bind(this), 3000)
}
三、严格模式
3.1 ES5后 IE10以上
- 消除了javascript语法的一些不合理，不严谨之处，减少了一些怪异行为。
- 消除代码的一些不安全之处，保证代码运行的安全。
- 提高编译器效率，增加运行速度
- 禁止使用关键字。
3.2开启严格模式
1. 'use strict' js文件首行，即整个文件开启严格模式。
2.为函数开启严格模式
function fn() {
'use strict';//严格模式只在此函数内有效
}
3.3 严格模式下的变化
1.变量必须先声明再使用
2.不能删除已定义好的变量
3.全局作用域中函数中的this指 undefined//重点注意
4.构造函数不加new调用会报错
function Star() {
this.sex = '男';
}
new Star();//如果用Star();会报错
5.定时器this还是指向window.
6.函数内不能有重名的变量.//当然正常一般都不要存在同名的变量
7.不允许在非函数代码块中写函数.
例如： if(true) {
function fn(){};
};
但是可以在函数里定义新函数//形成 闭包
四、高阶函数
4.1定义
是对其他函数进行操作的函数，他接收函数作为参数或函数作为返回值输出。
例子： function fn(a, b, callback) {
console.log(a + b);
callback && callack();
}
五、闭包
5.1 变量作用域
1.全局变量。
2.局部变量。
5.2 什么是闭包
一个作用域可以访问另外一个函数内部的局部变量叫闭包。
例子：
1.function fn() {
var num = 10;
function func() {
console.log(num);
}
return func;
}
var f = fn();
f();
主要作用：延伸了变量的作用范围.
//2.利用闭包的方式得到当前小li的索引号
for (var i = 0; i < lis.length; i++) {
//立即执行函数
(function() {
//console.log(i);
lis[i].onclick = function() {
console.log(this.index);
}
})(i);
}
六、正则表达式
1.概述
1.1是用于匹配字符串中字符组合的模式。在js中他也是对象
用途：检索、替换那些某个规则的文本
1.2特点
1.灵活性、逻辑性和功能性非常的强
2.可以迅速地用极简单的方式达到字符串的复杂控制
3.不需要加引号
2.在JavaScript中的使用
2.1创建正则表达式
//1.利用RegExp对象来创建正则表达式
var regExp = new RegExp(/123/);
console.log(regExp);
//2.利用字面量创建 正则表达式
var rg = /123/;
console.log(rg.test(123));
2.2测试正则表达式 test
用于检测字符串是否符合该规则，返回boolean值
regexObj.test(str);
3.特殊字符
3.1边界符
^:开始 例：/^123/ 以123开头
$:结尾 例： /^123$/ 必须是123字符串
3.2字符类
[]: 表示有一系列字符串可供选择，只要匹配其中一个就可以了
例如：
var rg = /[abc]/;只要包含有a或者b或者c 其中一个 都返回true
rg.test('andy'); //true
rg.test('baby'); //true
var rg = /^[abc]/; 有a 或b 或c 才返回true;
rg.test(abc);//false;
rg.test(b);//true;
[-]:方括号内部范围符
例如：
var rg = /^[a-z]$/; //英文字符a-z范围内都为true;分大小写
rg.test(k);//true;
rg.test(1);//false;
3.3 字母组合
var reg = /^[a-zA-Z0-9]$/;字母或者数字
var reg = /^[^afb]$/;中括号中的^是取反的意思 不是边界符
3.4量词符
*：重复0次或多次 var reg = /^a*$/;
reg.test('');//true;
reg.test('a');//true;
+：重复一次或更多次 var reg = /^a+$/;
reg.test('');//false;
？：重复0次或一次
{n}:重复n次
{n,}重复n次或更多 ,千万别漏掉
{n,m}重复n次到m次
3.5括号总结
中括号： 字符集合 匹配中括号中的任意字符
var reg =/^[abc]$/ a || b || c //true;
大括号： 量词符，表示重复次数
var reg = /^abc{3}$/; abccc //true;
小括号： 表示优先级
var reg = /^(abc){3}$/; abcabcabc //true;
3.6预定义类
\d 匹配0-9之间的任意数字，相当于[0-9]
\D 匹配0-9以外的字符，相当于[^0-9]
\w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
\W 相当于[^A-Za-z0-9_]
\s 匹配空格包括(换行符、制表符、空格符),相当于[\t\r\n\v\f]
\S [^\t\r\n\v\f]
例： 座机号码 010-12345678 或 0756-1234567
var reg = /^\d{3}-\d{8} | \d{4}-\d{7}$/;
简化： /^\d{3,4}-\d{7-8}$/
4.替换
4.1 替换规则
var str = '我们的政府爱人民政府';
str.replace(/政府/, **);
console.log(str); // 输出 我们的**爱人民政府
以上只能替换一个
4.2 正则表达式参数
/表达式/[switch]
switch:
g:全局匹配
i:忽略大小写
gi: g+i
var str = '我们的政府爱人民政府';
str.replace(/政府/g, **);
console.log(str); // 输出 我们的**爱人民**
以上只能替换一个
七、递归
7.1什么是递归？
函数自己调用自己。
注意：必须加一个退出条件 return;
例：
//打印到6时退出、
var num = 1;
function fn() {
console.log(num);
if (num == 6) {
return ;
}
num++;
fn();
}
fn();
7.2 利用递归求数学题
//利用递归函数求1-n的阶乘
function fn(n) {
if(n == 1) {
return 1;
}
return n * fn(n - 1);
}
//利用递归函数求斐波那契数列 1 1 2 3 5 8 13 21...
function fb(n) {
if(n === 1 || n === 2) {
return 1;
}
return fb(n - 1) + fb(n - 2);
}
7.3 利用递归求：根据id返回对应的数据对象
var data = [{
id: 1,
name:'家电',
goods:[{
id:11,
gname:'冰箱'
},{
id:12,
gname:'洗衣机'
}]
},{
id:2,
name:'服饰'
}];
console.log(data);
function getItemById(data, id) {
var o = {};
data.forEach(function(val) {
if (id === val.id) {
o = val;
} else if(val.goods && val.goods.length > 0) {
o = getItemById(val.goods, id)
}
})
return o;
}
var item = getItemById(data, 12);
console.log(item);
7.4 浅拷贝和深拷贝
1.浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
引用对象修改 会影响到原来的值
浅拷贝：Object.assign(copy, source);
2.深拷贝拷贝多层，每一级别的数据都会拷贝
var obj = {
id : 1,
name : '随便',
msg : {
age : 20
}
}
var o = {};
//封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
//1.获取属性值
var item = oldobj[k];
if (item instanceof Array) {
//判断这个值是否是数组
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
//判断这个值是否是对象
newobj[k] = [];
deepCopy(newobj[k], item)
} else {
newobj[k] = item;
}
}
}
deepCopy(o, obj);
扫一扫
3961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
