Javascript 对象讲解

Array(数组)

• 类似于java的集合.

创建数组

let fruits = ['apple', 'banana', 'orange'];//直接创建

let numbers = new Array(1, 2, 3, 4, 5);//使用Array()

• 创建空数组：

let emptyArray = new Array(); 

数组的属性和方法

• length :数组元素的个数。数组的长度,类型可变.

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 输出: 3

//访问"越界",也不会报错
var array = ["a", "b", "c"];  
array[4] = 1;  //改变类型,也不会报错
alert(array[4]);//1

• push()：尾插一个或多个元素, 返回插入后的长度。

fruits.push('kiwi'); 

• pop()：删除并返回数组末尾的元素。

let lastFruit = fruits.pop(); 

• forEach()：遍历有值的元素,undefined不算.

fruits.forEach((fruit) => {
    console.log(fruit);
});

• splice():删除元素.

array.splice(1, 4);//从1索引位置开始,删除4个元素.

• join()：将数组元素连接成一个字符串。

console.log(fruits.join(', ')); 

函数

声明

函数表达式

• 声明函数的第二种方法.

var add = function(x, y) {
    return x + y;
};

箭头函数

• 简化函数定义.

var multiply = (a, b) => a * b;

函数的作用域

• 在函数内部定义的变量,无法在函数外部访问。

function example() {
    let l = "s";
    console.log(l); // 输出: I'm local!
}
example();
// console.log(l); // 报错: localVar is not defined

字符串

• indexOf:

var s="warren";  
console.log(s.indexOf("w"));

对象:

JSON

• 一种数据交换格式,一般作为数据载体,传输数据, Json比XML 更简单,可读性更高.
• js的对象和Json可以相互转换.
  

• 外面用单引号包裹,里面的键key用双引号.
  `

<script>  
    var json = '{"name":"warren","age":1}';  
    var w=JSON.parse(json)//json字符串转化为js对象.  
    console.log(w.name);//访问js对象的属性.  
    console.log(JSON.stringify(w));;//js对象转化为json字符串  
</script>

BOM

• 浏览器对象模型,js把浏览器的各个组成部分封装成了对象
• window:浏览器窗口对象
• Navigator: 浏览器对象
• Screen:屏幕对象
• History:历史记录对象
• Location:地址栏对象

window

//console.log(confirm("are you ok?"));//点确认返回true,点取消返回false;  
  
//定时器,每隔一定的时间执行一次 执行多次  
var a = function (name) {  
    alert(name);  // 显示传入的参数  
}  
  
setInterval(function () {  
    a("warren");  // 每2秒调用a函数，并传递参数"warren"  
}, 2000);  
  
//定时器,延迟一定的时间后 再执行 只执行一次  
setTimeout(function (){a("warren")},2000);


//地址栏对象
location.href="https://www.bilibili.com/";//为href属性赋值,浏览器会自动跳转到新页面.

DOM

基本概念:

• 文档对象模型, 将标记语言的各个组成部分封装成对象.

• JavaScript通过DOM对HTML进行操作.

• Document :整个文档对象

• Element:元素对象

• Attribute :属性对象

• Text:文本对象

• Comment:注释对象

• 浏览器解析后,形成DOM树.
  

• 一个页面就是一个DOM文档(document).

• 页面中的标签就是元素(element).

获取元素

• element.innerHTML:设置或返回元素的内容.