Continued article [of the road] front-end learning JavaScript syntax (two) , mainly on the concept in JavaScript objects.
table of Contents
Objects
JavaScript is the most important type of data objects, in addition to the basic data types, undefined and null, the other everything is an object.
Object Properties (Property)
JavaScript objects are unordered collection of properties, each property can be a primitive data types, object or function
JavaScript objects can dynamically add or remove an attribute
object prototype (prototype) : All JavaScript objects inherit properties from the prototype and method.
Date object inherits from Date.prototype. Array object inherits from Array.prototype. Person object inherits from Person.prototype.
Object.prototype located in the top prototype inheritance chain: the date objects, arrays and objects Person object are inherited from Object.prototype.
Here I used the object constructor is called "class", because this and Java or C ++ classes and objects are very similar, for example, Object is an object constructor, I also used to be called the Object class, on the basis of class examples of the (new out) called an object, for example in the var obj=new Object();middle, for the object obj.
We can dynamically add or delete properties for an object, such as var obj=new Object();then obj.userName="Carson", but you can not directly 类名.userName="Carson"add a new property to the class. If you really need to add a new attribute to the class, you need its object prototype add new attributes can, for example, so 类名.prototype.userName="Carson";, so that all objects of this class have userName this property, we can use the following example to example:
<!DOCTYPE html>
<html>
<head>
<title>Object对象</title>
</head>
<body>
<script type="text/javascript">
var obj=new Object();
obj.userName="Carson";
obj.getUserName=function(){
return this.userName;
};
document.write("<h1>姓名："+obj.getUserName()+"</h1>"); //输出"姓名：Carson"
//使用对象原型prototype为对象构造器添加新的属性
Object.university="Hohai";
document.write("<h1>"+obj.university+"</h1>"); //输出undefined
Object.prototype.university="Hohai";
document.write("<h1>"+obj.university+"</h1>"); //输出Hohai
</script>
</body>
</html>
The browser supports JavaScript object classification
- ECMAScript built-in objects (String, Number, Boolean, Math, Date, Array, RegExp, Global)
- Document Object Model (DOM)
- Browser Object Model (BOM)
- New user-defined objects
talk about in this article ECMAScript built-in objects.
Object object (root object)
JavaScript objects to the Object prototype object directly or indirectly inherits all the properties and methods of the Object object will appear in other objects.
Important properties:
constructor: constructor function
prototype: Prototype
important ways:
toString (): Formatting Output
toSouce (): the source object
valueOf (): value of the object corresponding to the basic types of
examples of Object: using object properties enumerated statement for in
<!DOCTYPE html>
<html>
<head>
<title>for in 枚举对象属性</title>
</head>
<body>
<script type="text/javascript">
var obj=new Object();
obj.userName="lhy";
obj.getUserName=function(){
return this.userName;
};
obj.userSex="male";
for(var prop in obj){
document.write("<h1>"+prop+"="+obj[prop]+"</h1>");
}
</script>
</body>
</html>
result:
Date Object Data: Used to dates and times
JavaScript has built-in objects: Array, Boolean, Date, Math , Number, String, RegExp, Global eight, Date object belongs to the built-in object.
Date object is defined using the new keyword, in this time is obtained by a subject method.
For example: var myDate = new Date () ;
commonly used methods:
GET Series :
getYear (): Returns the number of years
getMonth (): Returns the month number number
getDate (): Returns the number of the day
getDay (): Returns the day of the week
getHours (): returns the number of hours
getMintes (: returns the number of minutes
getSeconds (): returns the number of seconds
getTime (): returns the number of milliseconds
set series :
setYear (value); set in
setDate (value): set number month number
setMonth (value): set when the month number
setHours (value): set hours
setMintes (value): set the number of minutes
setSeconds (value): setting the number of seconds
setTime (value): set the number of milliseconds
Regular expression object RegExp
Regex (regular expression) is a description of the object character mode, there are regular expressions in many languages (such as Java, Python, etc.).
Regular expression is mainly used to verify the client's input data. If you are using client authentication, you can save a lot of system resources on the server side and provide a better user experience.
How to create a regular expression in js
There are ways to create regular expressions two ways: one is to use the new operator, the other is a literal manner employed.
Examples:
var = new new REG the RegExp ( 'Box'); // first argument string
var reg = new RegExp ( 'box ', 'ig'); // string first parameter, the second parameter mode modifier (optional)
two examples above is equivalent to:
var = REG / Box /; // directly with two slashes
var reg = / box / ig; // add mode modified after the second slash character
mode modifiers as follows:
| Modifiers | effect |
|---|---|
| i | Perform case-insensitive match |
| g | Perform a global match (find all matches in this process, rather than the first match), returns an array of matching results |
| m | Performing multi-row match (if the string with a line break, is performed in accordance with the progressive string matching branch, not in accordance with the entire string) |
Regular expression format
Square brackets: used to find a single character in a range
| expression | description |
|---|---|
| [abc] | Find any character between the brackets |
| [^abc] | Find any character not between the brackets |
| [0-9] | Find anything from between 0-9 numbers |
| [a-z] | Find any character from lowercase a to z |
| [A-Z] | Find any character from uppercase A to Z of capital |
| [A-z] | Find any character from uppercase A to lowercase z, |
| [adpk] | To find any character within a given set of (identical to the first) |
| [^adpk] | Find character given to anyone outside the set (same as the second) |
| (red|blue|green) | Find any options specified |
Yuan characters: the characters have special meaning
| Metacharacters | description |
|---|---|
| . | Find a single character, except for line breaks and line endings |
| \w | Find a word character |
| \W | Find a non-word character |
| \d | Find Digital |
| \D | Finding non-numeric characters |
| \s | 查找空白字符 |
| \S | 查找非空白字符 |
| \b | 匹配单词边界 |
| \B | 匹配非单词边界 |
| \0 | 查找NULL字符 |
| \n | 查找换行符 |
| \f | 查找换页符 |
| \r | 查找回车符 |
| \t | 查找制表符 |
| \v | 查找垂直制表符 |
| \xxx | 查找以八进制xxx规定的字符 |
| \xdd | 查找以十六进制数dd规定的字符 |
| \uxxxx | 查找以十六进制数xxxx规定的Unicode字符 |
量词：类似通配符的作用，用来描述数量
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个n的字符串 |
| n* | 匹配任何包含0个或者多个n的字符串 |
| n? | 匹配任何包含另个或者一个n的字符串 |
| n{X} | 匹配包含X个n的序列的字符串 |
| n{X,Y} | 匹配包含X至Y个n的序列字符串 |
| n{X,} | 匹配包含至少X个n的序列的字符串 |
| n$ | 匹配任何结尾为n的字符串 |
| ^n | 匹配任何开头为n的字符串 |
| ?=n | 匹配任何其后紧接指定字符串n的字符串 |
| ?!n | 匹配任何其后没有紧接指定字符串n的字符串 |
RegExp对象函数
test(str)：在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回true，不存在则返回false
exec(str)：在字符串中查找指定正则表达式，如果方法执行成功，则返回包含该查找字符串的相关数组；如果执行失败，则返回null。而且在使用exec的时候，正则表达式中不能使用模式修饰符（igm三个），否则会返回null，所以不建议使用。
字符串使用正则表达式的方法
除了RegExp 对象，String 对象也提供了4 个使用正则表达式的方法。
| 方法 | 含义 |
|---|---|
| match(pattern) | 返回pattern中的子串或null |
| replace(pattern,replacement) | 用replacement替换和pattern匹配的部分 |
| search(pattern) | 返回字符串中pattern开始位置 |
| split(pattern) | 返回字符串按指定pattern拆分的数组 |
例子(查找字符串中所有有效数字)：
<script type="text/javascript">
var str="3124hb 534 42h 0041131ll";
var reg=/[1-9][0-9]*/g;
var numbers=str.match(reg);
//逐个输出数组元素
for(var index in numbers){
document.writeln("<h1>"+numbers[index]+"</h1>");
}
//格式化输出数组
document.writeln("<h1>"+numbers.join(" ")+"</h1>");
</script>
输出结果：
