热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

《JavaScript高等程序设计(第3版)》——援用范例(五)

援用范例援用范例的值(对象)是援用范例的一个实例。建立新对象:new操纵符后跟一个组织函数varpersonnewObject();上面:援用范例:Object组织函数:Objec
援用范例

援用范例的值(对象)是援用范例的一个实例。

建立新对象: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 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个特别的援用范例:BooleanNumberString
  • 每当读取一个基础范例值的时刻,背景就会建立一个对应的基础包装范例的对象,从而让我们可以用一些要领来操纵这些数据。
  • 援用范例基础包装范例区分

    • 运用 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 的随机数

推荐阅读
author-avatar
一个怪瓜的自白
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有