JS 数组、对象、函数

数组

var arr = [1,true,false,undefined,null,"nihao",[7,8]];

通过 index 获取数组中的某一项数据,若 index 超出数组长度,得到的结果为 undefined(因为这个值不存在)

arr[3]	// 获取的是第 4 个数据,即 undefined

使用 length 属性,获取对应数组的数据的长度

console.log(arr.length);	// 得到的结果是 7

改变数组长度

arr.length = 10;	// arr 原本的长度为7,更改后长度变成10
或
arr[11] = 23;	// arr 原本长度为7,本身不存在第 12 个数据,强行给第 12 个数据赋值,则强行拉长了数组。
				// 现在数组长度为 12
arr.length = 5;	// arr 长度变短,多出来的数据会直接删除,删除时不可逆的

函数

  • 函数声明语法
function 函数名 (参数) {
	封装的结构体;
}
  • 函数表达式
var foo1 = function() {
	console.log(2);
};
  • 函数是一种单独的数据类型 Function
  • arguments 对象
    • 是函数的一个内置属性。
    • 存储了传递的所有的实参
    • 是一个伪数组,可以进行遍历
var foo1 = function(a,b,c,d) {
            if (arguments.length == 1) {
                console.log(a);
            } else if (arguments.length == 2) {
                console.log(a + b);
            } else if (arguments.length == 3) {
                if (a > b) {
                    console.log(a + c);
                } else {
                    console.log(b + c);
                }
            } else if (arguments.length > 3) {
                console.log("error");
            }
        };
        foo1(1);
        foo1(2,5);
        foo1(3,90,45);
        foo1(1,2,3,4,5);
  • 函数递归,函数自己调用自己
  • 变量在退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁。
		function fun1() {
            var num1 = 1;
            function fun2() {
                var num1 =2;
                console.log(num1);
            }
            fun2();	// fun2() 只能在 fun1() 内部调用
        }
        fun1();
        fun2();	// 会报错
  • 作用域链,函数内部还有函数,函数内指向函数外的链式结构。只有函数可以制造作用域结构。

JS 数组、对象、函数

JS 数组、对象、函数

  • 遮蔽效应

    • 程序在遇到一个变量时,使用时作用域查找顺序,不同层次的函数内部可能含有相同名字的变量,一个变量在使用时,优先从自己所在层作用域查找变量,如果当前层没有则会从本层往外依次查找,直到找到第一个变量定义。整个过程中内层变量遮蔽外层变量的效果,称“遮蔽效果”
  • 函数的参数是属于函数自己内部的局部变量,只能在函数内部被使用,在函数外面没有定义

  • 若在函数内部定义一个变量,但没有加关键字 var ,相当于定义的全局变量。若全局也有相同名字的变量,局部变量会污染全局变量

  • 预解析和声明提升

    • JavaScript 解析器执行 JavaScript 代码的时候,分为两个过程:预解析过程和代码执行过程
    • 预解析过程
      1. 把变量声明提升到当前作用域的最前面,只提升声明(相当于undefined),不会提升赋值。**注:在变量声明之前调用了变量,不会报错,会使用 undefined 值。**函数表达式(var temp = function(){})进行的是变量声明提升。
      2. 把函数声明提升到当前作用域的最前面,之提升声明,不会提升调用。注:在函数声明之前调用函数,不会报错,能正常执行
      3. 先提升 var,在提升 function
    • 在预解析后,根据最新的代码顺序,从上往下按照既定规律执行 js 代码
    • 如果出现变量名和函数名相同的情况(假如都为 temp),先提升 var temp; (temp = undefined) 然后再提升 function temp() {代码块};则 function 会覆盖 var。如果然后执行到 temp 赋值的时候,又覆盖了 function
  • IIFE 自调用函数

    • 即时调用的函数表达式,表示函数在定义时就立即调用
    • JS 数组、对象、函数
// 以下方法都能够在函数定义时就立即调用
var foo = function () {
	console.log(1);
}();
+ function fun () {
	console.log(1);
}();
- function fun () {
	console.log(1);
}();
! function fun () {
	console.log(1);
}();
(function fun () {
	console.log(1);
})();
(function (a) {
	console.log(a);
})(1);

对象

将相关的无序数据存储在一个对象内部封装起来,利于后期使用。

  • **重:**对象字面量创建对象
var obj = {
	age: 18,
	weight: 140,
	sex: 'male',
	sayHi: function () {
		console.log("你好");
	}
};
  • 更改对象内部属性和方法的语法
// 更改已存在属性的属性值
o.age = 19;

// 添加新的属性和属性值
o.height = 190;
或
o[height] = 190;

// 删除一条属性
delete o.sex;
  • new Object() 创建对象
    • Object() 构造函数,是一种特殊的函数。主要用来在创建对象时初始化对象,即为对象成员变量赋初值,总与 new 运算符一起使用在创建对象的语句中
    • new 在执行时会做四件事情
      1. 在内存中创建一个新的空对象
      2. 会让 this 指向这个新的对象
      3. 执行构造函数,给新对象加属性和方法
      4. 返回这个新对象
var person1 = new Object();	// 创建了一个新的空的对象
// 后续添加属性和方法
person1.age = 19;
person1.name = '张三';
person1.sayHi = function() {
	console.log("Hi");
};
  • 工厂函数创建对象
    • 若要创建多个类似的对象,可将 new Object() 过程封装到一个函数中,将来调用函数就能创建一个对象,相当于一个生产对象的函数工厂,用来简化代码
function createPerson(name, age, job) {
	var person = new Object();
	person.name = name;
	person.age = age;
	person.job = job;
	person.sayHi = function() {
		console.log('Hello,everybody');
	};
	return person;	// 必须要返回 person
}
var p1 = createPerson('zhangsan', 22, 'actor');
var p2 = createPerson('lisi', 23, 'doctor');
  • **重:**自定义构造函数
    • 自定义一个创建具体对象的构造函数,函数内部不需要 new 一个构造函数的过程,直接使用 this 代替对象进行属性和方法的书写,也不需要 return 一个返回值
    • 注:构造函数的函数名首字母需要大写,区别于其他普通函数名
function Person(name, age, job) {
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayHi = function() {
		console.log('Hi');
	};
	// 不需要 return 一个返回值
}
var p1 = new Person('zhangsan', 23, 'actor');	//使用 new 关键字调用构造函数
  • 对象遍历
    • for in 循环是专门用来遍历对象的,内部会定义一个 k 变量,k 在每次循环时会从第一个开始接受属性名,一直接受到最有一条属性名,执行完跳出循环
// 循环遍历输出每一项
for(var k in p1) {
	console.log(k + '项的属性值为' + p1[k]);
}
  • 简单类型和复杂类型的区别

    • 基本类型又称值类型,复杂类型(Function、数组、对象等)又称引用类型
    • 值类型:简单数据类型,基本数据类型,在存储时,变量中存储的是值本身
    • 引用类型:复杂数据类型,在存储时,变量中存储的是地址(引用),地址中存储的才是数据
    • 栈:由操作系统自动分配释放,存放函数的参数值,局部变量的值等
    • 堆:存储复杂数据类型,一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收
  • 内置对象,ECMAScript 本身已经定义好的对象,如 Math 对象、Array 对象、String 对象等

  • Math 对象,JS 内部使用字面量创建对象,Math 即对象本身。

  • Array 对象

    • 创建数组对象

      // 方法一:字面量方式
      var arr = [1,2,'zhangsan',true,false,null,undefined,[1,4]];
      
      // 方法二:new Array() 构造函数方法
      var arr = new Array(1,2,'zhangsan',true,false,null,undefined,[1,4]);
      
    • instanceof 关键字,检测某个实例是否是某个对象类型

      arr instanceof Array;	// 返回 Boolean 值,true
      arr instanceof String;	// 返回 Boolean 值,false
      
    • toString(), 把数组转换成字符串,逗号分隔每一项

      arr.toString();	// 结果:1,2,zhangsan,true,false,,,1,4,null和undefined转换成空字符串
      
    • 数组常用方法

      var arr = [19,'zhangsan',true];
      
      // push() 在数组末尾添加一个或多个元素,返回数组操作后的长度
      arr.push(undefined,'henry',[1,5]);	// 返回 6
      
      // pop() 删除数组最后一项,返回删除项
      arr.pop();	// 返回 [1,5]
      
      // shift() 删除数组第一项,返回删除项
      arr.shift();	// 返回 19
      
      // unshift() 在数组开头添加一个或多个元素,返回数组操作后的长度
      arr.unshift(19,'zhangsan',null);	// 返回 7
      
      // 最后arr的数据为[19, "zhangsan", null, "zhangsan", true, undefined, "henry"]
      
      var arr1 = ['hello', 'world'];
      
      // concact() 将两个数组合并成一个新的数组,原数组不受影响,返回一个新的数组
      // 参数位置可以是一个数组字面量、数组变量、零散的值
      var arr2 = arr.concact(arr1);	
      // arr2 = [19, 'zhangsan', null, 'zhangsan', true, undefined, 'henry','hello', 'world']
      var arr3 = arr.concat(19);	// arr3 = [19, "zhangsan", null, "zhangsan", true, undefined, "henry", 19]
      var arr4 = arr.concat([1,2,3]);	// arr4 = [19, "zhangsan", null, "zhangsan", true, undefined, "henry", 1, 2, 3]
      
      // slice(start, end) 从当前数组中截取一个新的数组,不影响原来的数组,返回一个新的数组,[start,end),参数区分正负,正表示下标位置,负表示从后面往前数第几个位置
      var arr5 = arr.slice(3,5);	// arr5 = ['zhangsan',true];
      arr5 = arr.slice(3,-5);	// arr5 = [],-5的位置在3之前,第一个参数的位置要在第二个之前
      arr5 = arr.slice(-3,-1);	// arr5 = [true,undefined]
      
      // splice(index,howmany,element1,element2,......),返回被删除的数组
      // 用于插入、删除或替换数组的元素
      // index 删除元素的开始位置
      // howmany 删除元素的个数,可为0
      // element1,element2 要替换的新的数据
      
      // 删除
      arr = [19, "zhangsan", null, "zhangsan", true, undefined, "henry"];
      arr.splice(1); => arr = [19]
      
      arr = [19, "zhangsan", null, "zhangsan", true, undefined, "henry"];
      arr.splice(1,4); => arr= [19,undefined,"henry"]
      
      // 替换
      arr = [19, "zhangsan", null, "zhangsan", true, undefined, "henry"];
      arr.splice(1,4,0,1,2,3); => arr = [19, 0, 1, 2, 3, undefined, "henry"]
      
      // 添加
      arr = [19, "zhangsan", null, "zhangsan", true, undefined, "henry"];
      arr.splice(1,0,2,3); => arr = [19, 2, 3, "zhangsan", null, "zhangsan", true, undefined, "henry"]
      
      // 位置方法
      // 从前往后找,如果没找到返回-1
      // indexOf() 查找某个元素在数组中最先出现的下标
      // lastindexOf() 查找某个元素数组中最后出现的下标
      arr = [1,2,3,4,5,6,7,8,9,10,4,5]
      arr.indexOf(4);	// 返回 3
      arr.lastindexOf(4);	// 返回 10
      
      // 倒序 reverse() 将数组完全颠倒
      arr = [1,2,3,4,5];
      arr.reverse();	// 返回倒序之后的数组,arr = [5,4,3,2,1]
      
      // 排序 sort() 默认根据字符编码顺序,从小到大排序
      arr = [1,2,3,4,5,6,7,8,9,10,20,30]
      arr.sort();	得到的结果是 [1,10,2,20,3,30,4,5,6,7,8,9]
      
      // 若想要根据数值大小进行排序,必须添加sort的比较函数参数
      arr.sort(function(a,b) {
      	if(a > b) {
      		return -1;	// a 在 b 前面
      	} else if(a < b) {
      		return 1;	// a 在 b 后面
      	} else {
      		return 0;	// a 和 b 保持原样,不换位置
      	}
      });	// 得到的结果是 [30,20,10,9,8,7,6,5,4,3,2,1]
      
      // 转字符串方法 将数组中的所有元素连接到一个**字符串**中
      // join() 通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串
      arr.join();	// 得到的结果为 30,20,10,9,8,7,6,5,4,3,2,1
      arr.join("");	// 得到的结果为 302010987654321
      arr.join("*");	// 得到的结果为 30*20*10*9*8*7*6*5*4*3*2*1
      
      // 清空数组
      arr = [];
      或
      arr.length = 0;
      或
      arr.splice(0,arr.length);
      
  • String 对象

    • 基本包装类型:基本类型的数据在进行一些特殊操作时,会暂时包装成一个对象,结束后再被销毁
    • 基本类型是没有方法的。但 String 是特殊的简单类型对象,即基本包装类型
    • 当调用 str.substring() 等方法的时候,先把 str 包装成 String 类型的临时对象,在调用 substring 方法,最后销毁临时对象
    • 可以使用 new String() 构造函数方法创建字符串对象
    var str = "这是一个字符串";	// 通过字面量创建 字符串 类型
    var str1 = new String("1243r443e");	// 通过构造函数创建 String 对象
    
    // 字符串不可变,在大量拼接字符串的时候会出现效率问题。拼接过程当中,会在内存中产生很多中间结果,使得越来越慢。
    
    // 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
    
    // 长度属性:str.length 一个字符串中所有字符总数
    
    // charAt() 方法可返回指定位置的字符
    // 参数是 index 字符串的下标,从 0 开始
    
    // indexOf() 方法返回某个指定字符串值在字符串中首次出现的位置
    
    // concat() 方法用于连接两个或多个字符串
    
    // split() 方法用于把一个字符串分割成字符串**数组**
    var str = "hello world! My name is zhangsan.";
    console.log(str.split()); => ["hello world! My name is zhangsan."]
    console.log(str.split("")); => ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!", " ", "M", "y", " ", "n", "a", "m", "e", " ", "i", "s", " ", "z", "h", "a", "n", "g", "s", "a", "n", "."]
    console.log(str.split("!")); => ["hello world", " My name is zhangsan."]
    console.log(str.split(" ")); => ["hello", "world!", "My", "name", "is", "zhangsan."]
    
    // 字符串内容倒置
    var arr = str.split(" ");
    arr.reverse();
    str = arr.join(" ");
    console.log(str); => zhangsan. is name My world! hello
    
    // toLowerCase() 将字符串转换为小写
    // toUpperCase() 将字符串转换为大写
    
    // slice(start,end) 提取字符串的某个部分,并以新的字符串返回被提取的部分。与Array.slice(start,end)一样
    
    // substr(start,howmany) 在字符串中抽取从 start 下标开始的指定数目的字符。start可为负数,若不写howmany,则从start截取到最后
    
    // substring(start,end) 提取字符串中介于两个指定下标之间的字符[start,end),start和end只能为正数;若不写end,则从start截取到字符串结尾
    
上一篇:js实现表格鼠标经过行变色


下一篇:MySQL访问控制