前端学习 之 JavaScript基础(三)

七.常用内置对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内置对象，比如 Number、String、Date、Array 等等，通过new实例化的对象都是object类型(var s = new String('hello')，var n = new Number(12)等)，数组不需要new生命，类型就是object类型。

对象只是带有属性和方法的特殊数据类型。

1. 数组Array

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

(1)数组的创建方式

a.字面量方式创建（推荐大家使用这种方式，简单粗暴）

var arr = ["alex", "egon", "yuan"];

b.使用new关键词

使用构造函数(需要自己了解)的方式创建 使用new关键词对构造函数进行创建对象

var arr = new Array();

(2)数组的赋值

通过下标进行一一赋值

例：

var arr = [];

//通过下标进行一一赋值

arr[0] = 123;

arr[1] = '哈哈哈';

arr[2] = '嘿嘿嘿'

(3)数组的常用方法

 

a.数组的合并 concat()

例：

var north = ['北京','山东','天津'];

var south = ['东莞','深圳','上海'];

 

var newCity = north.concat(south);

console.log(newCity)  //输出结果： ["北京", "山东", "天津", "东莞", "深圳", "上海"]

 

b. join()

将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串

例：

var score = [98,78,76,100,0];

var str = score.join('|');

console.log(str);// 输出结果：98|78|76|100|0

c.将数组转换成字符串 toString()

例：

var score = [98,78,76,100,0];

//toString() 直接转换为字符串  每个元素之间使用逗号隔开

           

var str = score.toString();

console.log(str);//98,78,76,100,0

d.slice切割

slice(start,end); 返回数组的一段，左闭右开

例：

var arr = ['张三','李四','王五','赵六'];

var newArr  = arr.slice(1,3);

console.log(newArr);//结果为：["李四", "王五"]

e. pop 元素

pop数组的最后一个元素并返回删除的元素

例：

var arr = ['张三', '李四', '王五', '赵六'];

var item = arr.pop();

console.log(arr);//["张三", "李四"，"王五"]

console.log(item);//赵六

f.push添加元素

 push() 向数组末尾添加一个元素或多个元素，并返回新的长度

例1：添加一个元素

var arr = ['张三', '李四', '王五', '赵六'];

var newLength = arr.push('铁蛋');//可以添加多个，以逗号隔开

console.log(newLength);//5

console.log(arr);  //结果为：["张三", "李四", "王五", "赵六", "铁蛋"]

 

例2:添加两个元素

var arr = ['张三', '李四', '王五', '赵六'];

var newLength = arr.push('铁蛋','铁锤');//可以添加多个，以逗号隔开

console.log(newLength);//6

console.log(arr);  //结果为：["张三", "李四", "王五", "赵六", "铁蛋", "铁锤"]

g.reverse() 翻转数组

reverse() 使得数组的元素顺序倒过来排序。

例：

var arr = ['张三', '李四', '王五', '赵六'];

//反转数组

arr.reverse();

console.log(arr); //结果为： ["赵六", "王五", "李四", "张三"]

h.sort对数组排序

sort对数组中的元素进行排序，排序的规则是首字符按照ASSCII码来排序优先，如果第一个字符相同将比较第二个字符，依次类推。

例：

var names = ["one", "two", "three", "five"];

names.sort();

console.log(names);  //结果为：["five", "one", "three", "two"]

i.判断是否为数组isArray()

布尔类型值 = Array.isArray(被检测的值);

j.shift()

shift()删除数组第一个元素并返回该元素

例：

var names = ["zero", "one", "two", "three"];

var a = names.shift();

console.log(a);  // zero

console.log(names);  // 数组剩余： ["one", "two", "three"]

k.unshift()

unshift() 向数组的开头添加一个或更多元素，并返回新的长度

例：

var names = ["zero", "one", "two", "three"];

var newLength = names.unshift('four');//可以添加多个，以逗号隔开

console.log(newLength);//5

console.log(names); // ["four", "zero", "one", "two", "three"]

2.字段串String

字符串方法有：

 

(1)chartAt() 返回指定索引的位置的字符

例：

var str = 'zero';

var charset = str.charAt(2); //索引的位置是从0开始  

console.log(charset);//输出结果为：r

(2)concat 返回字符串值，表示两个或多个字符串的拼接

例:

var str1 = 'ze';

var str2  = 'ro';

console.log(str1.concat(str2));//输出结果为：zero

st1的值和str2的值进行拼接

(3)replace(a,b) 

将字符串a替换成字符串b

例：

var a = '1234567755';

var newStr = a.replace("23456","****");

console.log(newStr);//1****7755

例题将23456的值替换成****，也可以替换成其他的字符串

(4)indexof()

indexof()查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样。

例：

var str = 'zero';

console.log(str.indexOf('e'));// 找到了e返回：1

console.log(str.indexOf('p'));//没有找到p返回：-1

(5)slice(start，end)

slice(start，end) 提取一个字符串的一部分，并返回一新的字符串。左闭右开 分割字符串

例：

var str = 'study javascript';

console.log(str.slice(3,10)); //结果输出： dy java

(6)split()

split('a',1)以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，返回新数组（数组里的元素个数就是定义的个数）。

例：

var  str =  '今天适合学习JavaScript';

console.log(str.split('a'));  // ["今天适合学习J", "v", "Script"]

console.log(str.split('a', 1));  // ["今天适合学习J"]

(7)substr(start,length)

substr(start,length) 返回一个字符串中从指定位置开始到指定字符数的字符。

例：

var  str =  '今天适合学习JavaScript';

console.log(str.substr(0,4));// 结果为：今天适合

(8) toLowerCase()转小写

例：

var str = 'JavaScript';

console.log(str.toLowerCase()); //输出结果：javascript

(9)toUpperCase()转大写

例：

var str = 'JavaScript';

console.log(str.toUpperCase());  //输出结果为：JAVASCRIPT

(10)trim() 去除字符串两边的空白

例：

var str = '    JavaScript    ';

console.log(str);  //去除之前打印

console.log(str.trim()); //去除之后打印

运行的的结果如图：

 

特别：

// 四舍五入

var num = 132.62522;

var newNum1 = num.toFixed();

console.log(newNum1); //133

var newNum2 = num.toFixed(2);

console.log(newNum2); //132.63

 

3.Date日期对象

创建日期对象只有构造函数一种方式,使用new关键字

//创建了一个date对象

var myDate = new Date();

关于时间对象的语法请见下图：

 

//创建日期对象

var myDate=new Date();

 

console.log(myDate.getDate());  //输出月份的第几天

console.log(myDate.toLocaleString()); //输出包括年月日的时间

 

4.Math内置对象

常用内置对象有如下表：

方法	含义
Math.floor()	向下取整，称为“地板函数”
Math.ceil()	向上取整，称为“天花板函数”
Math.max(a,b)	求a和b的最大值
Math.min(a,b)	求a和b的最小值
Math.random()	随机数，默认产生0-1之间的随机数

 

(1)Math.ceil() 向上取整，'天花板函数'

例：

var x = 1.234;

//天花板函数  表示大于等于 x，并且与它最接近的整数是2

var a = Math.ceil(x);

console.log(a);//2

(2)Math.floor 向下取整，'地板函数'

例：

var x = 1.234;

// 小于等于 x，并且与它最接近的整数 1，也称为去尾

var b = Math.floor(x);

console.log(b);//1

(3)求两个数的最大值和最小值

例：

//求 两个数的最大值 最小值

console.log(Math.max(2,5));//5

console.log(Math.min(2,5));//2

(4)随机数 Math.random()

请记住公式：min - max之间的随机数： min+Math.random()*(max-min)

例1：

var ran = Math.random();

console.log(ran);[0,1]之间的随机小数

例2：　　

如果让你取100-200之间的随机数，怎么做？

var res = 100+Math.random()*(200-100)

console.log(res);

5.JSON对象

(1)JSON的作用

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

 JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。

文本可以被任何编程语言读取及作为数据格式传递。

(2)什么是JSON

JSON 英文全称 JavaScript Object Notation

JSON 是一种轻量级的数据交换格式。

JSON是独立的语言 *

JSON 易于理解。

 

(3)JSON 实例及JSON 字符串与 JavaScript 对象相互转换

例：

var str1 = '{"name": "hsz", "age": 24}';

var obj1 = {"name": "hsz", "age": 24};

// JSON字符串转换成对象

var obj = JSON.parse(str1);

console.log(obj);  //{name: "hsz", age: 24}

// 对象转换成JSON字符串

var str = JSON.stringify(obj1);

console.log(str); //{"name":"hsz","age":24}

 

(4)JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

 

(5)JSON 语法规则

数据为 键/值 对。

数据由逗号分隔。

大括号保存对象。

方括号保存数组。

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"hsz"

(6)JSON 对象与数组

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{"name":"hsz", "age":24}

 

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

"sites":[

    {"name":"hsz", "age":24},

    {"name":"zero", "age":20},

    {"name":"one", "age":30}

]

在以上实例中，对象 "sites" 是一个数组，包含了三个对象。

 

如果还需要学习更多关于js的常用对象，请参考链接：http://www.runoob.com/jsref/jsref-tutorial.html

八．函数

函数：就是将一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：

将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。

简化编程，让编程模块化。

例：

console.log("hello world");

sayHello();     //调用函数

//定义函数：

function sayHello(){

    console.log("hello");

    console.log("hello world");

}

运行结果为：

 

1. 第一步定义函数

函数定义的语法：

function 函数名字(){

    //函数体内容  

}

解释如下：

function：是一个关键字。中文是“函数”、“功能”。

函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。

参数：后面有一对小括号，里面是放参数用的。

大括号里面，是这个函数的语句。

2. 函数的调用

函数调用的语法：

函数名字();

3. 函数的参数

函数的参数包括形参和实参

注意：实际参数和形式参数的个数，要相同。

例子：

//函数：求和

function sum(a, b) {

    console.log(a, b); //打印a和b的值

    // console.log(arguments); //

    console.log(a + b); //

}

sum(3, 4);  //3 4 7

sum("3", 4);//3 4 34

sum("Hello", "World"); //打印结果：Hello World HelloWorld

4. 函数的返回值

例子：

console.log(sum(3, 4));  //打印结果为：7

//函数：求和

function sum(a, b) {

    return a + b;

}

 

九. 伪数组 arguments

arguments代表的是实参。有个讲究的地方是：arguments只在函数中使用。

1.返回函数实参的个数：arguments.length

例子：

function fn(a,b,c) {

    console.log(arguments);

    console.log(fn.length);         //获取形参的个数

    console.log(arguments.length);  //获取实参的个数

 

    console.log("----------------");

}

fn(2,4);

fn(2,4,6);

fn(2,4,6,8);

 

2.伪数组的注意点

之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。

举例：

function fn(a,b) {

    arguments[0] = 99;  //将实参的第一个数改为99

    arguments.push(8);  //此方法不通过，因为无法增加元素,会报错

}

fn(2,4);

fn(2,4,6);

fn(2,4,6,8);

 

 

清空数组的几种方式：

var array = [1,2,3,4,5,6];

 

array.splice(0);      //方式1：删除数组中所有项目

array.length = 0;     //方式2：length属性可以赋值，在其它语言中length是只读

array = [];           //方式3：推荐