引用类型
引用类型的值(对象)是引用类型的一个实例。
创建新对象:new 操作符后跟一个 构造函数
var person = new Object();
上面:
引用类型:Object
构造函数:Object()
实例保存在变量 person 中。
Object 类型
创建 Object 实例的方式一:构造函数创建
var person = new Object();
创建 Object 实例的方式二:对象字面量
对象字面量这种方式不会调用 Object 构造函数
var person = {
name: “Nicholas”, // 属性之间用逗号隔开
age: 29 // 在最后一个属性后面不加都好
}
属性名也可以用字符串:
var person = {
“name”: “Nicholas”, // 属性之间用逗号隔开
“age”: 29 // 在最后一个属性后面不加都好
5: true // 数值属性会自动转换为字符串
}
访问属性
alert(person[“name”]); // 要将属性以字符串形式放在方括号中
alert(person.name);
方括号的优点:可以通过变量来访问属性
var propertyName = “name”;
alert(person[propertyName]);
Array 类型
ECMAScript 数组的每一项可以保存任何类型的数据。比如:第一个位置保存字符串,第二个位置保存数值,第三个位置保存对象,等。数组大小是可以动态调整的。
创建数组方式一:Array 构造函数
var colors = new Array();
var colors = new Array(20); // 长度为 20
var colors = new Array(“red”, “blue”, “green”); // 创建了一个包含 3 个字符串的数组
在使用 Array 构造函数时可以省略 new 操作符
var colors = Array(3);
var colors = Array(“greg”);
创建数组方式二:数组字面量
数组字面量这种方式不会调用 Array 构造函数
var colors = [“red”, “blue”, “green”];// 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组
var values = [1, 2,]; // 不要这样!这样会创建一个包含 2 或 3 项的数组
var options = [, , , , ,] // 不要这样!这样会创建一个包含 5 或 6 项的数组
检测数组
ES5 新增 Array.isArray()方法,确定某个值是不是数组。有些浏览器不支持。
if (Array.isArray(value)){
// 执行某些操作
}
转换方法
toString(),valueOf()
var colors = [“red”, “blue”, “green”];
alert(colors.toString()); // “red,blue,green” 返回数组中每个值的字符串以逗号分隔的拼接字符串
alert(colors.valueOf()); // [“red”, “blue”, “green”] 返回的还是数组
alert(colors); // 与 toString() 相同
join()
var colors = [“red”, “blue”, “green”];
console.log(colors.join(“,”)); // red,blue,green
console.log(colors.join(“||”)); // red||blue||green
栈方法(LIFO 后进先出)
push() 接收任意数量的参数,把他们逐个添加到数组末尾
pop() 从数组末尾移除最后一项,减少数组的 length 值,返回 移除的项。
var colors = new Array(); // 创建一个数组
var count = colors.push(“red”, “blue”); // 推入两项
console.log(count); // 2
count = colors.push(“black”); // 推入另一项
console.log(count); // 3
var item = colors.pop(); // 取得最后一项
console.log(item); // black
console.log(colors.length); // 2
队列方法(FIFO 先进先出)
shift() 移除第一项
unshift() 在数组前端添加项
重排序方法
reverse() 反转数组项的顺序
sort() 按升序排列数组项,sort()会调用 toString()转型方法,
== 特别注意 ==:所以 sort()比较的是字符串。
var values = [0, 1, 10, 15, 5];
console.log(values.reverse()); // [5, 15, 10, 1, 0]
console.log(values.sort()); // [0, 1, 10, 15, 5]
将比较函数传递到 sort()可以保持正确的升序:
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var values = [0, 1, 10, 15, 5];
values.sort(compare);
console.log(values); // [0, 1, 5, 10, 15]
用 ES6 中的箭头函数来写数组升序:
var values = [0, 1, 10, 15, 5];
values.sort((value1, value2) => value1 – value2);
console.log(values); // [0, 1, 5, 10, 15]
用 ES6 中的箭头函数来写数组降序:
var values = [0, 1, 10, 15, 5];
values.sort((value1, value2) => value2 – value1);
console.log(values); // [15, 10, 5, 1, 0]
操作方法
concat() 创建副本,将参数添加到副本的末尾,返回新构建的数组
var colors = [“red”, “blue”, “green”];
colors2 = colors.concat(“yellow”, [“black”, “brown”]);
console.log(colors); // [“red”, “blue”, “green”]
console.log(colors2); // [“red”, “blue”, “green”, “yellow”, “black”, “brown”]
slice() 数组截取
var colors = [“red”, “blue”, “green”, “yellow”, “purple”];
var colors2 = colors.slice(1); // 第一项 到 末尾
var colors3 = colors.slice(1, 4); // 第一项 到 第四项
console.log(colors2); // [“blue”, “green”, “yellow”, “purple”]
console.log(colors3); // [“blue”, “green”, “yellow”]
splice()
var colors = [“red”, “green”, “blue”];
var removed = colors.splice(0,1); //remove the first item
alert(colors); //green,blue
alert(removed); //red – one item array
removed = colors.splice(1, 0, “yellow”, “orange”); //insert two items at position 1
alert(colors); //green,yellow,orange,blue
alert(removed); //empty array
removed = colors.splice(1, 1, “red”, “purple”); //insert two values, remove one
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow – one item array
位置方法
indexOf() 要查找的值 从前往后 首次出现的索引
lastIndexOf() 要查找的值 从后往前 首次出现的索引
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4)); //5
alert(numbers.lastIndexOf(4, 4)); //3
var person = {name: “Nicholas”};
var people = [{name: “Nicholas”}];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
迭代方法
every() 对数组中每一项运行给定函数,每一项都 true, 则返回 true
some()
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true
filter()
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]
forEach() 对每一项运行指定函数,无返回值
map()
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]
归并方法
reduce() 从前往后执行 函数
reduceRight() 从后往前执行 函数
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
});
alert(sum); //15
Date 类型
ECMAScript 中的 Date 类型是在早期 Java 中的 java.util.Date 类基础上构建的,使用自 UTC(国际协调时间)1970 年 1 月 1 日午夜(零时)开始经过的毫秒数来保存日期。Date 类型保存的日期能够精确到 1970 年 1 月 1 日之前或之后的 100 000 000 年。
创建 Date 实例
构造函数创建:
var now = new Date();
var now = new Date();
alert(now); //Wed Mar 20 2019 21:32:55 GMT+0800 (中国标准时间) 当前时间
var someDate = new Date(Date.parse(“May 25, 2004″));
alert(someDate); //Tue May 25 2004 00:00:00 GMT+0800 (中国标准时间)
ES5 中添加了 Date.now()方法
// 取得开始时间
var start = Date.now();
// 调用函数
doSomething();
// 取得停止时间
var stop = Date.now();
var result = stop – start;
对于不支持 Date.now()的浏览器,使用 + 操作符也可以获取 Date 对象的时间戳:
// 取得开始时间
var start = +new Date();
// 调用函数
doSomething();
// 取得停止时间
var stop = +new Date();
var result = stop – start;
RegExp 类型
创建正则表达式:字面量
var expression = / pattern / flags;
/ 模式(pattern) / 标志(flags) 的组合
3 种标志:
g:表示全局 (global) 模式,模式被应用于所有字符串,而非在发现第一个匹配时立即停止。
i:表示不区分大小写(case-insensitive),忽略模式与字符串的大小写。
m:表示多行 (multiline) 模式,在到达一行文本末尾时继续查找下一行。
模式中使用的所有元字符都必须转义。正则表达式中的元字符包括:([ \ ^ $ |) ? * + . ] }
// 匹配字符串中所有 ”at” 的实例
var pattern1 = /at/g;
// 匹配第一个 ”bat” 或 “cat”,不区分大小写
var pattern2 = /[bc]at/i;
// 匹配第一个 ”[bc]at”, 不区分大小写
var pattern3 = /\[bc\]at/i;
// 匹配所有以 “at” 结尾的 3 个字符的组合,不区分大小写
var pattern4 = /.at/gi;
// 匹配所有 “.at”,不区分大小写
var pattern5 = /\.at/gi;
创建正则表达式:RegExp 构造函数
/*
* 匹配第一个 ”bat” 或 “cat”,不区分大小写
*/
var pattern = new RegExp(“[bc]at”, “i”);
RegExp 实例方法
exec() 捕获组
test() 验证。常用于 验证用户输入的情况。
Function 类型
ECMAScript 中,函数实际上是对象。每个函数都是 Function 类型的实例,与其他引用类型一样具有属性和方法。函数是对象,函数名是一个指向对象的指针,不会与某个函数绑定。
函数没有重载
函数声明与函数表达式
函数声明:解析器在向执行环境加载数据时,在代码开始执行之前,就通过 函数声明提升 读取并将函数声明添加到执行环境中。对代码求值时,JavaScript 引擎在第一遍会声明函数并将它们放到源代码树的顶部。、
函数表达式:解析器执行到它所在的代码行,才会真正被解释执行。
下面的代码可以正常运行:
alert(sum(10,10)); //20
function sum(num1, num2){
return num1 + num2;
}
将函数声明改为函数表达式会错误:
alert(sum(10, 20));
var sum = function(num1, num2){
retuen num1 + num2;
};
函数内部属性
arguments
this
this 引用的是函数执行的环境对象——或者也可以说是 this 值(当在网页的全局作用域中调用函数时,this 对象引动的就是 window)。
函数属性和方法
每个函数都包含两个属性
length
prototype
每个函数都包含两个非继承而来的方法
apply()
call()
ES5 还定义了一个方法
bind()
基本包装类型
ECMAScript 还提供了 3 个特殊的引用类型:Boolean、Number,String
每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够用一些方法来操作这些数据。
引用类型与基本包装类型的区别:
使用 new 操作符创建的引用类型的实例,在执行流离开当前作用于之前都一直保存在内存中
自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。
Boolean 类型
布尔对象:
布尔表达式中的所有对象都会被转换为 true
var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result); //true
基本类型的布尔值:
var falseValue = false;
result = falseValue && true;
alert(result); //false
Number 类型
var numberObject = new Number(10);
toString() 参数表示返回几进制数值的字符串形式
alert(numberObject.toString()); //”10″
alert(numberObject.toString(2)); //”1010″
alert(numberObject.toString(8)); //”12″
alert(numberObject.toString(10)); //”10″
alert(numberObject.toString(16)); //”a”
toFixed() 参数表示显示几位小数
alert(numberObject.toFixed(2)); //outputs “10.00”
toExponential() 返回以指数表示法(也称 e 表示法)表示的数值的字符串形式
var num = 10;
alert(num.toExponential(1)); // “1.0e+1″
toPrecision() 参数表示数值的所有数字的位数
var numberObject = new Number(99);
alert(numberObject.toPrecision(1)); //”1e+2″
alert(numberObject.toPrecision(2)); //”99″
alert(numberObject.toPrecision(3)); //”99.0”
String 类型
var stringObject = new String(“hello world”);
字符方法
charAt() 参数:字符位置 返回:给定位置的字符(单字符字符串形式)
var stringValue = “hello world”;
alert(stringValue.charAt(1)); // “e”
charCodeAt() 参数:字符位置 返回:给定位置字符的编码
var stringValue = “hello world”;
alert(stringValue.charCodeAt(1)); // 输出“101”,也就是小写字母 “e” 的字符编码
[] ES5 中的访问个别自负的方法
var stringValue = “hello world”;
alert(stringValue[1]); // “e”
字符串操作方法
concat() 字符串拼接
var stringValue = “hello”;
var result = stringValue.concat(“world”);
alert(stringValue); // “hello”
alert(result); // “hello world”
slice()
substr()
substring()
var stringValue = “hello world”;
alert(stringValue.slice(3)); //”lo world”
alert(stringValue.substring(3)); //”lo world”
alert(stringValue.substr(3)); //”lo world”
alert(stringValue.slice(3, 7)); //”lo w”
alert(stringValue.substring(3,7)); //”lo w”
alert(stringValue.substr(3, 7)); //”lo worl” 第二个参数指定的是要返回的字符个数
字符串位置方法
indexOf() 从指定位置向后搜索
lastIndexOf() 从指定位置向前搜索
var stringValue = “hello world”;
alert(stringValue.indexOf(“o”)); //4
alert(stringValue.lastIndexOf(“o”)); //7
alert(stringValue.indexOf(“o”, 6)); //7 从第 6 个开始向后搜索
alert(stringValue.lastIndexOf(“o”, 6)); //4 从第 6 个开始向前搜索
trim()方法
ECMAScript 中定义的 trim()方法。
创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果。
字符串大小写转换方法
toLowerCase()
toLocaleLowerCase()
toUpperCase()
toLocaleUpperCase()
var stringValue = “hello world”;
alert(stringValue.toLocaleUpperCase()); //”HELLO WORLD”
alert(stringValue.toUpperCase()); //”HELLO WORLD”
alert(stringValue.toLocaleLowerCase()); //”hello world”
alert(stringValue.toLowerCase()); //”hello world”
字符串的模式匹配方法
mach() 只接受一个参数
var text = “cat, bat, sat, fat”;
var pattern = /.at/;
var matches = text.match(pattern);
alert(matches.index); //0
alert(matches[0]); //”cat”
alert(pattern.lastIndex); //0
search() 接受唯一参数,返回字符串中第一个匹配项的索引
var text = “cat, bat, sat, fat”;
var pos = text.search(/at/);
alert(pos); //1
replace() l 两个参数:参数一:RegExp 对象或者一个字符串,参数二:字符串或函数。
var text = “cat, bat, sat, fat”;
var result = text.replace(“at”, “ond”);
alert(result); //”cond, bat, sat, fat”
result = text.replace(/at/g, “ond”);
alert(result); //”cond, bond, sond, fond”
result = text.replace(/(.at)/g, “word ($1)”);
alert(result); //word (cat), word (bat), word (sat), word (fat)
split() 分割 结果是数组
var colorText = “red,blue,green,yellow”;
var colors1 = colorText.split(“,”); //[“red”, “blue”, “green”, “yellow”]
var colors2 = colorText.split(“,”, 2); //[“red”, “blue”]
var colors3 = colorText.split(/[^\,]+/); //[“”, “,”, “,”, “,”, “”]
localCompare() 方法
localCompare() 比较两个字符串在字母表中的顺序
var stringValue = “yellow”;
alert(stringValue.localeCompare(“brick”)); //1
alert(stringValue.localeCompare(“yellow”)); //0
alert(stringValue.localeCompare(“zoo”)); //-1
fromCharCode() 方法
fromCharCode() 接收一或多个字符串编码,把他们转换成一个字符串
alert(String.fromCharCode(104, 101, 108, 108, 111)); //”hello”
单体内置对象
内置对象的定义:由 ECMAScript 实现提供的、不依赖于宿主环境的对象,这些对象在 ECMAScript 程序执行之前就已经存在了。
z 在所有代码执行之前,作用域中就已经存在两个内置对象:Global 和 Math。
Global 对象
事实上,没有全局变量或全局函数
所有在全局作用域中定义的属性和函数,都是 Global 对象的属性。
URI 编码方法
encodeURI()
encodeURIComponent()
var uri = “http://www.wrox.com/illegal value.htm#start”;
//”http://www.wrox.com/illegal%20value.htm#start”
alert(encodeURI(uri));
//”http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start”
alert(encodeURIComponent(uri));
decodeURI()
decodeURIComponent()
var uri = “http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start”;
//http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
alert(decodeURI(uri));
//http://www.wrox.com/illegal value.htm#start
alert(decodeURIComponent(uri));
eval() 方法
eval()方法就像是一个完整的 ECMAScript 解析器,它只接受一个参数,即要执行的 ECMAScript 字符串。
eval(“alert(‘hi’)”);
// 等价于下面
alert(“hi”);
Math 对象
Math.max()
Math.min()
Math.ceil() 向上舍入
Math.floor() 向下舍入
Math.round() 四舍五入
Math.random() 返回大于等于 0 小于 1 的随机数