js深入浅出(数组、函数、作用域、闭包)

数组

1创建数组
var arr = [“a”,”b”,”c”]

var arr = new Array();
arr[0] = a;
arr[1] = b;
arr[2] = c

2.数组的删增

这里写图片描述

3.数组的迭代
这里写图片描述

4.二维数组的遍历

var arrayStr=[[1,2,3],[4,5,6],[7,8,9]];
for(var i=0;i<arrayStr.length;i++){
    for(var j=0;j<arrayStr[i].length;j++){
       console.log("第"+i+"行 第"+j+"列 的值为:"+arrayStr[i][j]);
       }
   }

5.稀疏数组
1.稀疏数组,下标不是从0开始,length>实际数组元素个数

2.可以直接给一个空数组,通过赋值的方式,指定某个下标值为多少,如果只是指定下标没有赋值,那么数组依然是空的,用in判断指定下标值 in 数组,返回是false,一旦赋值了,哪怕是undefined,null或是”,数组就不再是空的了,用指定下标值 in 数组,返回是true

6.数组方法

这里写图片描述

join(),把数组转换为字符串,拼一些参数
reverse(),逆序,原数组是会被修改的
sort(),排序,原数组是会被修改的
concat(),合并数组,原数组不会被修改
slice(),返回数组的一个偏度
splice(),数组的拼接
Array.prototype.every & some 数组判断
every 验证某个数组是否每一个元素都符合某个条件
some 验证某个数组是否存在一个元素符合某个条件

Array.prototype.join
将数组转为字符串

例如:

var arr = [1, 2, 3];
arr.join(); // "1,2,3"
arr.join("_"); // "1_2_3"

function repeatString(str, n) {
     return new Array(n + 1).join(str);
}
repeatString("a", 3); // "aaa"
repeatString("Hi", 5); // "HiHiHiHiHi"

Array.prototype.reverse
将数组逆序

例如:

var arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]
arr; // [3, 2, 1]注:原数组被修改

Array.prototype.sort
数组排序

var arr = ["a", "d", "c", "b"];
arr.sort(); // ["a", "b", "c", "d"]
arr = [13, 24, 51, 3];
arr.sort(); // [13, 24, 3, 51]
arr; // [13, 24, 3, 51]原数组被修改

arr.sort(function(a, b) {
     return a - b;
}); // [3, 13, 24, 51]
arr = [{age : 25}, {age : 39}, {age : 99}];
arr.sort(function(a, b) {
     return a.age - b.age;
});
arr.forEach(function(item) {
     console.log('age', item.age);
});
// result:
// age 25
// age 39
// age 99

Array.prototype.concat
数组合并

例如:

var arr = [1, 2, 3];
arr.concat(4, 5); // [1, 2, 3, 4, 5]
arr; // [1, 2, 3]
arr.concat([10, 11], 13); // [1, 2, 3, 10, 11, 13] 
arr.concat([1, [2, 3]]); // [1, 2, 3, 1, [2, 3]]

Array.prototype.forEach
数组遍历,ES5特性,兼容IE9及以上的浏览器。

例如:

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

Array.prototype.map
数组映射

var arr = [1, 2, 3];
arr.map(function(x) {
     return x + 10;
}); // [11, 12, 13]
arr; // [1, 2, 3] 数组未被修改

Array.prototype.filter

数组过滤

例如:查找索引值能被3整除,或数组元素大于8的元素

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.filter(function(x, index) {
     return index % 3 === 0 || x >= 8;
}); // returns [1, 4, 7, 8, 9, 10]
arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 原数组未被修改

Array.prototype.every & some
数组判断

every 验证某个数组是否每一个元素都符合某个条件

例如:判断数组元素小于10/小于3

var arr = [1, 2, 3, 4, 5];
arr.every(function(x) {
     return x < 10;
}); // true

arr.every(function(x) {
     return x < 3;
}); // false

some 验证某个数组是否存在一个元素符合某个条件

例如:判断是否存在一个等于3的数组元素/等于100的数组元素

var arr = [1, 2, 3, 4, 5];
arr.some(function(x) {
     return x === 3;
}); // true

arr.some(function(x) {
     return x === 100;
}); // false

Array.prototype.reduce&reduceRight
两两逻辑操作 - 原數組未被修改

例如:比较最大值

max = arr.reduceRight(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 6|9
// 9|3
max; // 9

reduce接收一个有两个参数的函数与一个可选参数
可选参数提供时作为第一个x的值被函数使用
reduceRight功能与reduce相同,区别是从右往左遍历

Array.prototype.indexOf&lastIndexOf
数组检索,indexOf从左向右,lastIndexOf相反

实例:arr.indexOf(val[, fromIndex])

参数说明:从索引开始,查找值;缺省为0,负数表示倒数。

例如:

var arr = [1, 2, 3, 2, 1];
arr.indexOf(2); // 1
arr.indexOf(99); // -1
arr.indexOf(1, 1); // 4
arr.indexOf(1, -3); // 4
arr.indexOf(2, -1); // -1
arr.lastIndexOf(2); // 3
arr.lastIndexOf(2, -2); // 3
arr.lastIndexOf(2, -3); // 1

Array.isArray
判断是否为数组

Array.isArray([]); // true

其他判断方法

[] instanceof Array; // true
({}).toString.apply([]) === '[object Array]'; // true
[].constructor === Array; // true

----------

函数和作用域
===========
**1.函数申明与表达式**
1、函数声明:function name(param*){statement*}
2、函数表达式:var name = function(param){statement};
3、函数实例化(不推荐):var name = new Function("param","statement"};

**2.this指向:**
1、直接调用函数(function()):this指向全局对象。
![这里写图片描述](https://img-blog.csdn.net/20180407193519109?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MDM2MjU1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

2、方法调用模式(object.function()):this指向调用者object。
![这里写图片描述](https://img-blog.csdn.net/20180407193536765?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MDM2MjU1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

3、构造函数调用模式(obj = new function()):this指向被构造者obj。
![这里写图片描述](https://img-blog.csdn.net/20180407193546899?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MDM2MjU1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

4、apply/call/bind方法:this指向方法的第一个参数。
call与apply的区别:call传参是扁平的,apply传参是把参数作为一个数组,

**obj.call(thisObj, arg1, arg2, ...);**

**obj.apply(thisObj, [arg1, arg2, ...]);**

两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。

例如:

function add(j, k){
return j+k;
}

function sub(j, k){
return j-k;
}

我们在控制台运行:

add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8

sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

“`
bind的使用

obj.bind(thisObj, arg1, arg2, …);

把obj绑定到thisObj,这时候thisObj具备了obj的属性和方法。与call和apply不同的是,bind绑定后不会立即执行。

同样是add()和sub():

add.bind(sub, 5, 3); //不再返回8
add.bind(sub, 5, 3)(); //8

如果bind的第一个参数是null或者undefined,等于将this绑定到全局对象。
bind连续使用,可以依次绑定不同的函数。

这里写图片描述

5、严格模式下,this不允许指向全局对象,此时this值为undefined。


闭包和作用域

1.什么是闭包
在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”

这里写图片描述

注意:
!function(){}()
+function(){}()
;function(){}(),”;”可以避免其之前的脚本最后缺少分号造成的某些浏览器不兼容问题等
都是跟(function(){})();是一个意思,都是告诉浏览器自动运行这个匿名函数的,因为!+()这些符号的运算符是最高的,所以会先运行它们后面的函数。

这里写图片描述

这里写图片描述

2.作用域

作用域有三种:全局、函数、eval(eval函数是强大的数码转换引擎,字符串经eval转换后得到一个javascript对象,)

作用域链,可以访问到外部的局部变量

这里写图片描述

JS中没有块级作用域的概念
Function的方法来创建函数,函数里面访问不到当前作用域的变量,可以访问到全局作用域的变量
例如:
for(var i =1;i<3;i++){var b = 5;}
这样的写法
i 和 b 都是全局的变量

Function的方法来创建函数,函数里面访问不到当前作用域的变量,可以访问到全局作用域的变量

例如:
这里写图片描述

OOP

1.概念与继承
这里写图片描述

这里写图片描述

这里写图片描述

Object.create(parent):
三件事: 1. 创建一个对象
2. 继承指定父对象
3. 为新对象扩展新属性
何时使用create: 希望在创建对象时就提前指定继承的父对象,并同时扩展新属性时。
:

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_35036255/article/details/79837670