前端基础之JS(3)(数组、对象、函数、this指向、作用域)

98 阅读3分钟

1.数组

1.1数组概念

单一变量存储多个值,每个值称为元素

1.2创建数组

1.var 数组名 = new Array();
2.var 数组名 = [];
  var 数组名 = [12,34,'丽丽''琪琪'];

1.3获取数组中的元素

var age = [18,16,30,28];
age[0](age中第一个元素,18)
下标是从0开始,到age.length-1(.length是数组的长度)

1.4新增元素

age[age.length]=19

1.5遍历数组

通过for循环进行数组的遍历
var arr = ['red','green', 'blue'];
for(var i = 0; i < 3; i++){
    console.log(arr[i]);
}

2.对象

2.1对象概念

对象是一组无序的集合,键值对形式,每个属性存放一个原始值,对象或者函数

2.2创建对象

2.2.1.字面量

var fruit={
  name:'apple',
  shape:'circular',
  a:{age:18},
  b:function(){alert('我是谁?')}
}
// 两种调用属性名和换行
document.write(fruit.name)
document.write('<br>')
document.write(fruit['shape'])
document.write('<br>')
// 调用对象中的对象属性
document.write(fruit.a.age)
// 调用对象的方法/函数(对象中的函数称之为方法)
fruit.b()

2.2.2 new Object()

//创建,赋值,打印
var andy = new Object();
andy.name='lili'
document.write(andy.name)

2.2.3 构造函数

1.为什么需要构造函数?
    为了把相同的属性方法封装起来,然后通过new进行多次创建对象
2.构造函数注意事项
    1.构造函数首字母大写
    2.函数内的属性和方法前面加this,表示当前对象的属性和方法
    3.不需要return返回
    4.创建对象的时候,必须使用new调用构造函数,也叫对象的实例化
3.例子
    //1.自定义构造函数
        function Person(name, age, height) {
          this.name = name
          this.age = age
          this.height = height
        }
    //2.创建对象
        var zs = new Person("张三", 23, 181);

2.3 遍历对象

var A={name:'li',age:18}
for(var a in A){
  // 属性
      console.log(a)
  // 值
      console.log(A[a])
}

2.4 删除对象

delect 对象.属性

3. 函数

3.1 函数的概念

封装了一段可重复调用的执行代码块

3.2 函数的使用

先封装,后调用(类似css的动画)
//封装函数
function 函数名(){
    //函数体
}
//调用函数
函数名();

3.3 函数的参数

形参:定义函数时,用于接收调用函数时传递的值
实参:调用函数时,传进去的真实数据
实参多于形参,多的值舍去,
形参多,多的显示默认值undefined

3.4 函数返回值 return

在使用 return 语句时,函数会停止执行,并返回指定的值
return返回值只能有一个

3.5 Arguments 当不能确定有多少参数时,是一个伪数组

伪数组,具有数组length,和索引,但是没有数组的方法
function arr(){
  // 遍历数组
  for(var a in arguments){
    // 索引
    document.write(a)
    // 值
    document.write(arguments[a])
  }
}
arr(10,20,30)

4 工厂模式创建对象

4.1简单工厂

//封装函数
function createObject(method, time) {		
var obj = {};
obj.methods = method;
obj.time = time;
return obj;
}
//调入并传入参数
var dest1 = createObject('电动车', 10);
console.log(dest1);
var dest2 = createObject('汽车', 5);
console.log(dest1);

4.2对比构造函数

 function Student(method, time, weather) {
  // 暂时简单理解成当前对象
      this.method = method;
      this.time = time;
      this.weather = weather;
  // 匿名函数
      this.person = function () {
        return "正在用" + this.method + "在" + this.weather.change +
        "的天气里,花费了" + this.time + "分钟到达目的地。";
      }
}

function Weather(change) {
  this.change = change;
}
// 对象的实例
    var dest4 = new Student('地铁', 6, new Weather("晴朗"));
    console.log(dest4);
    console.log(dest4.person());

5 this指向

1、这个函数被调用时,如果是当做一个普通函数,函数中的this指向window
2、这个函数被调用时,如果是当做一个构造函数,函数中的this指向当前构造函数
3、这个函数被调用时,如果是当做一个对象的方法,函数中的this指向这个对象

6 作用域

变量提升
使用var声明的变量,会存在变量提升
未使用var声明的变量,不会存在变量提升
    
全局作用域下,函数声明:
    命名函数存在声明提升
    匿名函数不存在声明提升
    
获取一个变量,先在自身作用域寻找,找到了直接使用,否则去全局寻找
    
函数中未使用var声明的变量,是全局变量
函数的形参是局部变量