首页 > 其他分享> > JS基础二：数据类型

JS基础二：数据类型

2021-02-19 16:03:30 作者：互联网

JS基础二：数据类型

JS数据类型

JS数据类型

Object 类型

创建方法：
1.使用 new 操作符后跟 Object 构造函数

var person = new Object(); 
person.name = "Nicholas"; 
person.age = 29;

2.使用对象字面量表示法

var person = { 
 name : "Nicholas", 
 age : 29 
};

构造函数

function Person(name, age, job){ 
 	this.name = name; 
 	this.age = age; 
	this.job = job; 
 	this.sayName = function(){ 
 	alert(this.name); 
 	}; 
} 
var person1 = new Person("Nicholas", 29, "Software Engineer"); 
var person2 = new Person("Greg", 27, "Doctor");

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer"); 
person.sayName(); //"Nicholas" 

// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到 window 
window.sayName(); //"Greg" 

// 在另一个对象的作用域中调用
var o = new Object(); 
Person.call(o, "Kristen", 25, "Nurse"); 
o.sayName(); //"Kristen"

原型模式

我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象， prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。

function Person(){ 
} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function(){ 
 	alert(this.name); 
}; 
var person1 = new Person(); 
person1.sayName(); //"Nicholas" 
var person2 = new Person();
person2.sayName(); //"Nicholas" 
alert(person1.sayName == person2.sayName); //true

Array 类型

创建数组的基本方式有两种。第一种是使用 Array 构造函数，如下面的代码所示。

var colors = new Array();

如果预先知道数组要保存的项目数量，也可以给构造函数传递该数量，而该数量会自动变成 length属性的值。例如，下面的代码将创建 length 值为 20 的数组。

var colors = new Array(20);

也可以向 Array 构造函数传递数组中应该包含的项。以下代码创建了一个包含 3 个字符串值的数组：

var colors = new Array("red", "blue", "green");

栈方法 push( ) , pop( )

栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。ECMAScript 为数组专门提供了 push()和 pop()方法

队列方法 shift( )，unshift( )

队列数据结构的访问规则是 FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。实现这一操作的数组方法就是 shift()，unshift()

重排序方法 reverse( )，sort( )

reverse()方法会反转数组项的顺序。

var values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); //5,4,3,2,1

sort()方法可以接收一个比较函数作为参数，以下就是一个简单的比较函数：

function compare(value1, value2) { 
 	if (value1 < value2) { 
 		return -1; 
 	} else if (value1 > value2) { 
 		return 1; 
 	} else { 
 		return 0; 
 	} 
} 
var values = [0, 1, 5, 10, 15]; 
values.sort(compare); 
alert(values); // 15,10,5,1,0

操作方法 concat( ) ，slice( ), splice( )

concat() ：将接收到的参数添加到原数组末尾，最后返回新构建的数组

var colors = ["red", "green", "blue"]; 
var colors2 = colors.concat("yellow", ["black", "brown"]); 
alert(colors); //red,green,blue 
alert(colors2); //red,green,blue,yellow,black,brown

slice()： 1个参数时，返回从该参数指定位置开始到当前数组末尾的所项。2个参数时，返回起始和结束位置之间的项——但不包括结束位置的项。

var colors = ["red", "green", "blue", "yellow", "purple"]; 
var colors2 = colors.slice(1); 
var colors3 = colors.slice(1,4); 
alert(colors2); //green,blue,yellow,purple 
alert(colors3); //green,blue,yellow

splice()

删除： 2 个参数：要删除的第一项的位置和要删除的项数。
插入：3 个参数：起始位置、0（要删除的项数）和要插入的项。
替换： 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。

var colors = ["red", "green", "blue"]; 
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue 
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue 
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue 
alert(removed); // yellow，返回的数组中只包含一项

位置方法 indexOf( )， lastIndexOf( )

接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。
indexOf() 方法从数组的开头（位置 0）开始向后查找，
lastIndexOf() 方法从数组的末尾开始向前查找。
都返回要查找的项在数组中的位置，或者在没找到的情况下返回 -1

迭代方法

传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身（item, index, array）

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。

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

filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。

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()：对数组中的每一项运行给定函数。这个方法没有返回值。

var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){ 
 //执行某些操作
});

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]

some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

var numbers = [1,2,3,4,5,4,3,2,1]; 
var someResult = numbers.some(function(item, index, array){ 
 	return (item > 2); 
}); 
alert(someResult); //true

归并方法 reduce( )，reduceRight( )

reduce()方法从数组的第一项开始，逐个遍历到最后。
reduceRight()则从数组的最后一项开始，向前遍历到第一项。
传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。(prev, cur, index, array)

var values = [1,2,3,4,5]; 
var sum = values.reduce(function(prev, cur, index, array){ 
 	return prev + cur; // 1+2+3+4+5
}); 
alert(sum); //15

Date类型

Date类型使用自 UTC（Coordinated Universal Time，国际协调时间）1970 年 1 月 1 日午夜（零时）开始经过的毫秒数来保存日期。
创建日期对象:

var now = new Date();

RegExp类型

创建一个正则表达式。

var expression = / pattern / flags ;

模式（pattern）部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找以及反向引用。
每标志（flags），用以标明正则表达式的行为。正则表达式的匹配模式支持下列 3 个标志。

g：表示全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止；
i：表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写；
m：表示多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

Function类型

声明一个函数：

function sum (num1, num2) { 
 return num1 + num2; 
} 

var sum = function(num1, num2){ 
 return num1 + num2; 
};

基本包装类型（Boolean、Number 、String）

Boolean类型

创建 Boolean 对象

var booleanObject = new Boolean(true);

Number类型

var intNum = 55;
var floatNum1 = 1.1; 
var floatNum2 = 0.1; 
var floatNum3 = .1; // 有效，但不推荐

NaN
即非数值（Not a Number）, 是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。

NaN 与任何值都不相等，包括 NaN 本身。例如，下面的代码会返回 false：
```
 alert(NaN == NaN);  // false 
```
针对 NaN 的特点，ECMAScript 定义了 isNaN() 函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。
```
alert(isNaN(NaN)); //true 
alert(isNaN(10)); //false（10 是一个数值）
alert(isNaN("10")); //false（可以被转换成数值 10）
alert(isNaN("blue")); //true（不能转换成数值）
alert(isNaN(true)); //false（可以被转换成数值 1）
```

数值转换
有 3 个函数可以把非数值转换为数值：Number()、parseInt()和 parseFloat()。

 var num1 = Number("Hello world!"); //NaN 
 var num2 = Number(""); //0 
 var num3 = Number("000011"); //11 
 var num4 = Number(true); //1

String类型

var stringValue = "hello world"; 
alert(stringValue.length); //"11"

字符方法
两个用于访问字符串中特定字符的方法是：charAt()和 charCodeAt()。这两个方法都接收一个参数，即基于 0 的字符位置。其中，charAt()方法以单字符字符串的形式返回给定位置的那个字符

var stringValue = "hello world"; 
alert(stringValue.charAt(1)); //"e" 

var stringValue = "hello world"; 
alert(stringValue.charCodeAt(1)); //输出"101" 字符编码

// 方括号加数字索引来访问字符串中的特定字符
var stringValue = "hello world"; 
alert(stringValue[1]); //"e"

字符串操作方法
concat() , 将一或多个字符串拼接起来，

var stringValue = "hello "; 
var result = stringValue.concat("world"); 
alert(result); //"hello world" 
alert(stringValue); //"hello" 

var stringValue = "hello "; 
var result = stringValue.concat("world", "!"); 
alert(result); //"hello world!" 
alert(stringValue); //"hello"

slice()、substr()和 substring()
基于子字符串创建新字符串的方法，接受一或两个参数。第一个参数指定子字符串的开始位置，第二个参数（在指定的情况下）表示子字符串到哪里结束。具体来说，slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置。
substr()的第二个参数指定的则是返回的字符个数。

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" 

// 在传递给这些方法的参数是负值的情况下
var stringValue = "hello world"; 
alert(stringValue.slice(-3)); //"rld" 
alert(stringValue.substring(-3)); //"hello world" 
alert(stringValue.substr(-3)); //"rld" 
alert(stringValue.slice(3, -4)); //"lo w" 
alert(stringValue.substring(3, -4)); //"hel" 
alert(stringValue.substr(3, -4)); //""（空字符串）

字符串位置方法：indexOf()和 lastIndexOf()
indexOf()方法从字符串的开头向后搜索子字符串，而 lastIndexOf()方法是从字符串的末尾向前搜索子字符串

var stringValue = "hello world"; 
alert(stringValue.indexOf("o")); //4 
alert(stringValue.lastIndexOf("o")); //7 

// 这两个方法都可以接收可选的第二个参数，表示从字符串中的哪个位置开始搜索
var stringValue = "hello world"; 
alert(stringValue.indexOf("o", 6)); //7 
alert(stringValue.lastIndexOf("o", 6)); //4

trim()方法
ECMAScript 5 为所有字符串定义了 trim()方法。这个方法会创建一个字符串的副本，删除前置及后缀的所有空格

var stringValue = " hello world "; 
var trimmedStringValue = stringValue.trim(); 
alert(stringValue); //" hello world " 
alert(trimmedStringValue); //"hello world"

字符串大小写转换方法 toLowerCase()、toUpperCase()

var stringValue = "hello world"; 
alert(stringValue.toUpperCase()); //"HELLO WORLD" 
alert(stringValue.toLowerCase()); //"hello world"

字符串的模式匹配方法 match() 、search()、replace()

match()方法只接受一个参数，要么是一个正则表达式，要么是一个 RegExp 对象。

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(), 返回字符串中第一个匹配项的索引，没有找到匹配项，则返回-1。search()方法始终是从字符串开头向后查找模式。

var text = "cat, bat, sat, fat"; 
var pos = text.search(/at/); 
alert(pos); //1

replace()方法, 接受两个参数：第一个参数可以是一个 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"

localeCompare()方法
比较两个字符串，并返回下列值中的一个：
 如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多数情况下是-1，具体的值要视实现而定）；
 如果字符串等于字符串参数，则返回 0；
 如果字符串在字母表中应该排在字符串参数之后，则返回一个正数（大多数情况下是 1，具体的值同样要视实现而定）。

var stringValue = "yellow"; 
alert(stringValue.localeCompare("brick")); //1 
alert(stringValue.localeCompare("yellow")); //0 
alert(stringValue.localeCompare("zoo")); //-1 

function determineOrder(value) { 
 	var result = stringValue.localeCompare(value); 
 	if (result < 0){ 
 		alert("The string 'yellow' comes before the string '" + value + "'."); 
 	} else if (result > 0) { 
 		alert("The string 'yellow' comes after the string '" + value + "'."); 
 	} else { 
 		alert("The string 'yellow' is equal to the string '" + value + "'."); 
 	} 
} 
determineOrder("brick"); 
determineOrder("yellow"); 
determineOrder("zoo");

fromCharCode()方法
接收一或多个字符编码，然后将它们转换成一个字符串

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

标签：数据类型,基础,alert,字符串,world,var,stringValue,JS,hello
来源： https://blog.csdn.net/v_lixin/article/details/113865953

JS基础二：数据类型