JavaScript入门学习笔记(2)—— 引用类型
2016-08-02 09:49
405 查看
引用类型是一种数据结构,用于将数据和功能组织在一起。
ECMAScript从技术上讲是一门面向对象语言,但它不具备传统面向对象语言所支持的类和接口等基本结构。
ECMAScript提供了很多原生引用类型,以便开发人员用以实现常见的计算任务:
2) 对象字面量,如下:(向函数传递大量可选参数的首选方式)
2) 使用数组字面量表示法,如下:
join( )方法可以使用不同的分隔符来构建字符串:
2) sort( )按升序排列数组项,调用每个数组项的toString( )转型方法,比较得到的字符串,确定如何排序。即使数组中的每一项都是数值,sort( )方法比较的也是字符串。
2) slice( ): 截取数组
3) splice( ):
删除: 传入2个参数:要删除的第一项的位置和要删除的项数。
插入/替换: 传入3个参数:起始位置,要删除的项数, 要插入的项(可多项)
2) 返回要查找的项在数组中的位置,或在没找到的情况下返回-1
3) 比较数组中每一项会使用全等操作符(===)
4) 传入2个参数:要查找的项和查找起点位置的索引(可选)
every( ): 如果该函数对每一项都返回true,则返回true
filter( ): 返回该函数会返回true的项组成的数组
forEach( ): 这个方法没有返回值
map( ): 返回每次函数调用的结果组成的数组
some( ): 如果该函数对任一项返回true,则返回true
2) 两个方法都接收两个参数:每一项上调用的函数(传入4个参数:前一个值,当前值,项的索引和数组对象)和作为归并基础的初始值(可选)
函数是对象,函数名是指针。 没有函数重载的概念,相同函数,后者覆盖前者。
length属性表示函数接受的命名参数的个数:
prototype保存所有实例方法,如:toString( ),valueOf( )…等方法实际上都保存在prototype名下,只不过通过各自对象实例访问。
每个函数包含两个非继承而来的方法:apply( )和call( ),用途是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。
apply( )传入2个参数:在其中运行函数的作用域和参数数组(可以是Array实例,也可以是arguments对象)
apply( )和call( )能够扩充函数运行的作用域:
每当读取一个基本类型值的时候,后台就会建立一个对应的基本包装类型的对象,让我们能够调用一些方法来操作这些数据。
引用类型与基本包装类型的主要区别就是对象的生存期:使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一致保存在内存中。二而自动创建的基本包装类型对象,则只存在一行代码的执行瞬间,然后立即被销毁。
Object构造函数和工厂方法一样,根据传入值的类型返回相应基本包装类型的实例,使用new调用基本包装类型(Boolean, Number, String)的构造函数,与直接调用同名转型函数是不一样的:
Boolean类型的实例重写了valueof( )方法,返回基本类型true或false;重写了toString( )方法,返回字符串“true”和“false”。
基本类型与引用类型的布尔值区别:
1. typeof操作符对基本类型返回“boolean”,对引用类型返回“object”。
2. 因Boolean对象是boolean类型的实例(基本类型的数值则不是),使用instanceof操作符测试Boolean对象会返回true,而测试基本类型的布尔值则返回false。
Number类型也重写了valueOf( ), toLocaleString( ), toString( )方法。重写后valueOf( )方法返回对象表示的基本类型的数值,另外两个方法返回字符串形式的数值。
toString( ):传递参数,返回字符串形式的结果
toExponential( ):返回指数表示法表示数值的字符串
toPrecision( ):接收一个参数,表示数值所有数字的位数(不包括指数部分)。
与Boolean类似:不建议直接实例化Number类型
charCodeAt( ):以单字符字符串的形式返回给定位置的字符编码
slice( ),substr( ), substring( ):slice( )和substring( )的第二个参数指定的是子字符串最后一个字符后面的位置,substr( )的第二个参数指的是返回字符个数。它们只是返回一个基本类型的字符串值,对原始字符串没有任何影响
如果传入参数为负数,slice( )会 将传入负值与字符串的长度相加;substr( )方法将负的第一个参数加上字符串长度;将负的第二个参数转换为0;substring( )会把所有负值参数都转换为0。
encodeURI( )主要用于整个URI,不会对本身属于URI的特殊字符进行编码,例如冒号,正斜杠,问号,井字号
encodeURIComponent( )主要用于对URI中某一段进行编码,会对它发现的任何非标准字符进行编码
与encodeURI( )和 encodeURIComponent( )对应的方法为decodeURI( )和decodeURIComponent( )。 作用恰好相反,对替换字符进行解码。
ECMAScript从技术上讲是一门面向对象语言,但它不具备传统面向对象语言所支持的类和接口等基本结构。
ECMAScript提供了很多原生引用类型,以便开发人员用以实现常见的计算任务:
Object
创建Object实例方式(两种):
1) 使用new操作符后跟object构造函数,如下:var person = new Object(); person.name = "Nicholas"; person.age = 29;
2) 对象字面量,如下:(向函数传递大量可选参数的首选方式)
var person = { name : "Nicholas", age : 29 };
Array
ECMAScript数组中的每一项可以保存任何类型的数据。创建数组方式两种:
1) 使用Array构造函数,如下(可以省略new操作符):var colors = new Array(); var colors = new Array(20); var colors = new Array("red", "blue", "green");
2) 使用数组字面量表示法,如下:
var colors = ["red", "blue", "green"];
检测数组
Array.isArray( )方法:最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。if(Array.isArray(value)) { //对数组执行某些操作 }
转换方法
所有对象都具有toLacaleString( ),toString( )和valueOf( )方法。var colors = ["red", "blue", "green"]; alert(colors.toString()); alert(colors.valueOf()); alert(colors); //三者输出都为:red,blue,green
join( )方法可以使用不同的分隔符来构建字符串:
var colors = ["red", "green", "blue"]; alert(colors.join(",")); //red,green,blue alert(colors.join("||")); //red||green||blue
栈方法
var colors = new Array(); var count = colors.push("red", "green"); count = colors.push("black"); //创建数组,推入三项 alert(count); //3 var item = colors.pop(); alert(item); //"black" alert(colors.length); //2
队列方法
var colors = new Array(); var count = colors.unshift("red", "green"); count = colors.unshift("black"); alert(count); //3 var item = colors.shift(); alert(item); //red alret(colors.length); //2
重排序方法
1) revrese( )反转数组项顺序。如下:var value = [1,2,3,4,5]; values.reverse(); alert(value); //5,4,3,2,1
2) sort( )按升序排列数组项,调用每个数组项的toString( )转型方法,比较得到的字符串,确定如何排序。即使数组中的每一项都是数值,sort( )方法比较的也是字符串。
var value = [0, 1, 5, 10, 15]; value.sort( ); alert(value); // 0, 1, 10, 15, 5
操作方法
1) 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
2) slice( ): 截取数组
var colors = ["red", "green", "blues", "yellow", "purple"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,4); alert(colors2); //green,blue,yellow,purple alert(colors3); //green,blue,yellow
3) splice( ):
删除: 传入2个参数:要删除的第一项的位置和要删除的项数。
插入/替换: 传入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 removed = colors.splice(1,1,"red","purple"); //插入两项,删除第二项 alert(colors); //green,red,purple,orange,blue alert(removed); //yellow,返回数组中只包含一项
位置方法
1) indexOf( ):从数组开始(位置0)向后查找;lastIndexOf( )从数组末尾开始向前查找2) 返回要查找的项在数组中的位置,或在没找到的情况下返回-1
3) 比较数组中每一项会使用全等操作符(===)
4) 传入2个参数:要查找的项和查找起点位置的索引(可选)
var numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.indexOf(4)); //3 (从位置0开始,第一个值为4的位置为3) alert(numbers.lastIndexOf(4)); //5(从末尾开始,第一个值为4的位置为5) alert(numbers.indexOf(4,4)); //5(从位置4开始,第一个值为4的位置为5) alert(numbers.lastIndexOf(4,4); //3(从倒数位置4开始,第一个值为4的位置为3)
迭代方法
每个方法接收2个参数:要在每一项运行的函数(接收3个参数:数组项的值,该项在数组中的位置和数组对象本身)和运行该函数的作用域对象(可选)every( ): 如果该函数对每一项都返回true,则返回true
filter( ): 返回该函数会返回true的项组成的数组
forEach( ): 这个方法没有返回值
map( ): 返回每次函数调用的结果组成的数组
some( ): 如果该函数对任一项返回true,则返回true
var numbers = [1,2,3,4,5,4,3,2,1]; vae everyResult = numbers.every(function(item, index, array) { return (item > 2); }) ;//item:数组项的值;index:该项在数组中的位置; array:数组对象本身 alert(everyResult); //false var someResult = numbers.some(function(item, index, array){ return (item > 2); }); alert(comeResult); //true var filterResult = numbers.filter(function(item, index, array){ return (item > 2); }); alert(filterResult); //[3,4,5,4,3] var mapResult = numbers.map(function(item,index,array){ return item * 2; }); alert(mapResult); //[2,4,6,8,10,8,6,4,2]
归并方法
1) reduce( ):从数组第一项开始,遍历到最后; reduceRight( )从数组最后一项开始,向前遍历到第一项;2) 两个方法都接收两个参数:每一项上调用的函数(传入4个参数:前一个值,当前值,项的索引和数组对象)和作为归并基础的初始值(可选)
var values - [1,2,3,4,5]; var sum = values.reduce(function(prev,cur,index,array){ return prev + cur; }); //prev: 前一个值; cur:当前值; index:项的索引 array: 数组对象 alert(sum); //15 reduceRight相加顺序恰好相反
Function
函数实际上是对象,每个函数都是function类型的实例,与其他引用类型一样具有属性和方法。格式:var sum = function(num1,num2);
函数是对象,函数名是指针。 没有函数重载的概念,相同函数,后者覆盖前者。
函数属性和方法
每个函数包含两个属性:length和prototype;length属性表示函数接受的命名参数的个数:
function sayName(name) { alert(name); } function sum(num1,num2) { return num1 + num2; } function sayHi() { alert("hi"); } alert(sayName.length); //1 alert(sum.length); //2 alert(sayHi.length); //0
prototype保存所有实例方法,如:toString( ),valueOf( )…等方法实际上都保存在prototype名下,只不过通过各自对象实例访问。
每个函数包含两个非继承而来的方法:apply( )和call( ),用途是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。
apply( )传入2个参数:在其中运行函数的作用域和参数数组(可以是Array实例,也可以是arguments对象)
function sum(num1, num2) { return num1 + num2; } function callSum1(num1, num2) { return sum.apply(this, arguments); //传入arguments对象(argument包含着传入函数的所有参数) } function callSum2(num1, num2) { return sum.apply(this, [num1, num2]); //传入数组 } function callSum3(num1,num2) { return sum.call(this, num1, num2); } alert(callSum1(10,10)); //20 alert(callSum2(10,10)); //20 alert(callSum3(10,10)); //20
apply( )和call( )能够扩充函数运行的作用域:
window.color = "red"; var o = {color: "blue"}; function sayColor(){ alert(this.color); } sayColor( ); //red sayColor.call(this); //red sayColor.call(window); //red sayColor.call(o); //blue
基本包装类型
引用类型:Boolean, Number, String.每当读取一个基本类型值的时候,后台就会建立一个对应的基本包装类型的对象,让我们能够调用一些方法来操作这些数据。
var si = new String("some txt"); var s2 = s1.substring(2); si = null;
引用类型与基本包装类型的主要区别就是对象的生存期:使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一致保存在内存中。二而自动创建的基本包装类型对象,则只存在一行代码的执行瞬间,然后立即被销毁。
var s1 = "some txt"; s1.color = "red"; alert(s1.color); //undefined
Object构造函数和工厂方法一样,根据传入值的类型返回相应基本包装类型的实例,使用new调用基本包装类型(Boolean, Number, String)的构造函数,与直接调用同名转型函数是不一样的:
var value = "25"; var number = Number(value); //转型函数 alert(typeof number); //"number" var obj = new Number(value); //构造函数 alert(typeof obj); //"object" //number中保存的是基本类型值;变量obj保存的是Number的实例
Boolean类型
var booleanObject = new Boolean(true);
Boolean类型的实例重写了valueof( )方法,返回基本类型true或false;重写了toString( )方法,返回字符串“true”和“false”。
基本类型与引用类型的布尔值区别:
1. typeof操作符对基本类型返回“boolean”,对引用类型返回“object”。
2. 因Boolean对象是boolean类型的实例(基本类型的数值则不是),使用instanceof操作符测试Boolean对象会返回true,而测试基本类型的布尔值则返回false。
var falseObject = new Boolean(false); var result = falseObject && true; //是对falseObject而不是对它的值(false)进行求值,布尔表达式中所有对象都会被转换为true,所以falseObject对象在布尔表达式中代表的是true alert(result); //true var falseValue = false; alert(result); //false alert(typeof falseObject); //object alert(typeof falseValue); //boolean alert(falseObject instanceof Boolean); //true alert(falseValue instanceof Boolean); //false
Number类型
var bumberObject = new Number(10);
Number类型也重写了valueOf( ), toLocaleString( ), toString( )方法。重写后valueOf( )方法返回对象表示的基本类型的数值,另外两个方法返回字符串形式的数值。
toString( ):传递参数,返回字符串形式的结果
var num = 10; alert(num.toString( )); //"10" alert(num.toString(2)); //"1010" 二进制 alert(num.toString(8 )); //"12“ 八进制 alert(num.toString(10)); //"10” 十进制 alert(num.toString(16)); //"a" 十六进制
数值格式化字符串方法:
toFixed( ):按照指定的小数位返回数值的字符串:var num = 10; alert(num.toFixed(2)); //"10.00" var num = 10.005 alert(num.toFixed(2)); //"10.01"
toExponential( ):返回指数表示法表示数值的字符串
var num = 10; alert(num.toExponential(1)); //"1.0e+1"
toPrecision( ):接收一个参数,表示数值所有数字的位数(不包括指数部分)。
var num = 99; alert(num.toPrecision(1)); //"1e+2" alert(num.toPrecision(2)); //"99" alert(num.toPrecision(3)); //"99.0"
与Boolean类似:不建议直接实例化Number类型
var numberObject = new Number(10); var numberValue = 10; alert(typeof numberObject); //"object" alert(typeof numberValue); //"number" alert(numberObject instanceof Number); //true alert(numberValue instanceof Number); //false
String类型
var stringObject = new String("hello world"):
String类型中字符串解析和操作方法:
字符方法
charAt( ):以单字符字符串的形式返回给定位置的字符:charCodeAt( ):以单字符字符串的形式返回给定位置的字符编码
var stringValue = "hello world"; alert(stringValue.charAt(1)); //"e" 字符 alert(stringValue.charCodeAt(1)); //"101" "e"的字符编码
字符串操作方法
cancat( ):将一个或多个字符串拼接起来,返回拼接得到的新的字符串(实际操作中大多数情况下用“+”操作符)var stringValue = "hello"; var result = stringValue.concat("world","!"); alert(result); //"hello world!" alert(stringValue); //"hello"
slice( ),substr( ), substring( ):slice( )和substring( )的第二个参数指定的是子字符串最后一个字符后面的位置,substr( )的第二个参数指的是返回字符个数。它们只是返回一个基本类型的字符串值,对原始字符串没有任何影响
var stringValus = "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"
如果传入参数为负数,slice( )会 将传入负值与字符串的长度相加;substr( )方法将负的第一个参数加上字符串长度;将负的第二个参数转换为0;substring( )会把所有负值参数都转换为0。
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" 函数变成了substring(3,0),将较小数作为开始位置,较大数作为结束位置,最终调用了substring(0,3) 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.toLocaleUpperCase()); //"HELLO WORLD" alert(stringValue.toUpperCase()); //"HELLO WORLD" alert(stringValue.toLocaleLowerCase()); //"hello world" alert(stringValue.toLowerCase()); //"hello world" //toUpperCase() & toLowerCase() 是经典方法。toLocaleUpperCase() & toLocaleLowerCase()针对特定地区实现,在不知道自己代码将在何种语言下运行,推荐使用地区方法
单体内置对象
由ECMAScript实现提供,不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前就已经存在。(开发人员不必显示地实例化内置对象,因为它们已经实例化了,例如: Object,array,string),ECMA-262还定义了两个单体内置对象:Global和MathGlobal
不属于任何其他对象的属性和方法,最终都是它的属性和方法URI(通用资源标识符)编码方法
有效的URI中不能包含某些字符(例如空格),利用Global对象中的encodeURI( )和encodeURIComponent( )方法对URI进行编码(利用UTF-8编码替换所有无效字符),以便发送给浏览器。encodeURI( )主要用于整个URI,不会对本身属于URI的特殊字符进行编码,例如冒号,正斜杠,问号,井字号
encodeURIComponent( )主要用于对URI中某一段进行编码,会对它发现的任何非标准字符进行编码
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)); /* 1. encodeURI( )除了空格之外其他字符都原封不动,只有空格被替换成了%20。 2. encodeURIComponent() 会使用对应的编码替换所有非字母数字字符。 3. 这也正是前者可以对整个uri使用,后者只能对附加现有URI后面的字符串使用。*/
与encodeURI( )和 encodeURIComponent( )对应的方法为decodeURI( )和decodeURIComponent( )。 作用恰好相反,对替换字符进行解码。
eval( )方法
像是完整的ECMAScript解析器,只接受一个参数,即要执行的ECMAScript字符串,将传入的参数当作实际ECMAScript语句解析,把执行的结果插入原位置。eval("alert('hi'))"; 等价于 alert("hi");
相关文章推荐
- JavaScript高级程序设计学习笔记第五章--引用类型(函数部分)
- javascript学习笔记 - 引用类型 Array
- javascript学习笔记 - 引用类型 单体内置对象
- JavaScript高程学习笔记之引用类型(5)
- JavaScript学习笔记——基本类型和引用类型
- JavaScript学习笔记整理之引用类型
- 零基础入门-javaScript学习笔记之从基本数据类型学起
- JavaScript高级程序设计学习笔记--引用类型
- JavaScript学习笔记第一天——基本数据类型(值类型)和引用类型
- javascript学习笔记 - 引用类型 Function
- JavaScript基础学习笔记(一)——入门、语法、变量、数据类型
- JavaScript学习笔记整理之引用类型
- javascript学习笔记 - 引用类型 Object
- javascript学习笔记 - 引用类型 RegExp
- JavaScript学习笔记——引用类型:Array类型
- unity3D-游戏/AR/VR在线就业班 C#入门值类型和引用类型学习笔记
- javascript学习笔记(一):基础、输出、注释、引用、变量、数据类型
- javascript学习笔记 - 引用类型 基本包装类型
- JavaScript学习笔记——引用类型:Object类型、function类型
- JavaScript高级程序设计学习笔记第五章--引用类型