JavaScript基础二

xiaoxiao2021-02-28  110

object对象

看个栗子

对象是带有属性和方法的特殊数据类型。 object结构类似于python中的字典:

var cat = { "name": "Whiskers", "little name": "idiot", "legs": 4, "tails": 1, "enemies": ["Water", "Dogs"] };

object通过这种结构的化的方式储存数据,通过property访问数据。并且,能代表真实世界的对象,比如猫。

属性访问

通过点方法:

var nameValue = cat.name; – 不需要引号 var legsValue = cat.legs;

说明:JS中一切皆对象,只要是对象,都有点方法可以访问属性, 比如str.length 通过字符串的length属性获取长度。

通过[]中括号

尤其是property有空格时: var nameValue = cat[“little name”] – 引号

通过变量访问属性:

var myDog = “Hunter”; var dogs = { Fido: “Mutt”, Hunter: “Doberman”; Snoopie: “Beagle’ } var breed = dog[myDong]; console.log(breed); // “Doberman”

嵌套对象

var ourStorage = { "desk": { "drawer": "stapler" }, "cabinet": { "top drawer": { "folder1": "a file", "folder2": "secrets" }, "bottom drawer": "soda" } };

通过连用点方法(或中括号)访问嵌套对象: ourStorage.cabinet[“top drawer”].folder2; // “secrets” ourStorage.desk.drawer; // “stapler”

修改/新增对象的属性

var ourDog = { "name": "Camper", "legs": 4, "tails": 1, "friends": ["everything!"] };

通过点方法或中括号修改/新增: ourDog.name = “Happy Camper”; –修改 ourDog[“name”] = “Happy Camper”; ourDog.bark = “wang wang” –新增

删除属性

delete ourDog.bark; 或者 delete ourDog[“bark”];

构造器函数和实例化

构造函数

构造器函数首字母大写,例如:

var Car = function() { this.wheels=4; this.engines=2; this.seats=1; }

this代表对象本身。

实例化对象

实例化一个对象 new 关键字: var myCar = new Car() myCar是Car构造器的实例,并且拥有Car的属性。记住,实例化对象时要使用 new 关键字。

为构造器函数传入参数

var Car = function(wheels, seats, engines) { this.wheels = wheels; this.seats = seats; this.engines = engines; }; var myCar = new Car(4, 7,1);

为实例对象增加自己的属性

myCar.speed = 60;

设置私有属性

在构造器内用 var 声明的变量是私有属性 私有属性不能通过 obj.prop 访问 可以提供接口,来访问和修改私有属性。

var Car = function() { var speed=10; // 私有属性 this.getSpeed = function() { // 访问接口 return speed; }; this.setSpeed = function(change) { //修改接口 speed +=change; }; };

this到底指代谁

例1:函数中

function test() { console.log(this); } test(); //代指 Window

例2:对象中

var userInfo = { name: 'Lena', age: 18, show: function () { console.log(this); } }; userInfo.show(); // 代指userInfo对象本身 {name: "Lena", age: 18, show: ƒ}

例3:匿名函数中

var userInfo = { name: 'Lena', age: 18, show: function () { (function () { console.log(this); })() } }; userInfo.show(); // 代指 Window

例4:赋值this

var userInfo = { name: 'Lena', age: 18, show: function () { var that = this; // 将this所指对象赋值给that (function () { console.log(that); })() } }; userInfo.show(); // 代指userInfo对象本身 {name: "Lena", age: 18, show: ƒ}

总结:

类/对象中的this代指实例化对象本身(相当于python中的self)函数/匿名函数中的this代指window对象:例1,例3类/对象内部的 func 被 obj.func 执行,那么func中的this就是obj对象本身。比如例2每个函数的作用域中都有this,因此默认都能在自己的作用域中找到,如果找不到,就从上一层找。比如日4中的that

JS中的内置对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的。

string

创建字符串的方式:

var str1 = “hello world” //typeof: stringvar str1 = new String(“hello world”) //typeof: object

字符串的属性

str.length –>获取字符串长度 var myStr = “abc”; myStrLength = myStr.length;

字符串的方方法:

x.toLowerCase() //转小写x.toUpperCase() //转大写

x.trim() //去字符串两边的空格

x.charAt(index) //获取指定索引的字符

x.indexOf(“a”) //查询内容的索引值,从左向右找x.lastIndexOf(“str”) //从右往左找x.match(regexp) //返回匹配字符串的数组,否则返回null

x.search(regexp) //返回索引

x.substr(start, length) //截取,根据起始索引和长度

x.substring(start, end) //截取,根据起始结束索引,顾头不顾尾。x.slice(start, end) //切片,顾头不顾尾x.replace(old, new) //替换x.split(分隔符) //分割出来放到数组中

x.concat(str) //拼接字符串,相当于+

和python一样,JS也支持字符串的索引取值[n] 注意,如果要取到最后一个值,不能直接[-1],应该是: str[str.length - 1],同理倒数第二个str[str.length - 2]

Array

JS中的数组array, 类似python的列表,同样支持多维嵌套和索引取值。

数组的创建:

方式一: var arr = [e0, e1, e2, …,]; 方式二: var arr = new Array(e0, e1,e3,…); 方式三: var arr = new Array(len); arr[0]=value0; arr[1]=value1; …..

创建二维数组: var arr= new Array(m); for (var i=0; i

push – pop && unshift – shift

为列表插入元素 .push() 相当于python中的.append() 如果要插到最前面,用.unshift() 从数组删除最后一个元素.pop() 同python,并且也可以用变量接收这个pop off元素 从数组删除第一个元素.shift() 注意:不能指定索引

模拟对列的先进先出: array.push(item) array.shift()

map

方法迭代数组的每一个元素,并传入回调函数作为参数 返回函数的返回值构成的新的数组。 var oldArray = [1, 2, 3]; var timesFour = oldArray.map(function(val){ return val * 4; }); console.log(timesFour); // returns [4, 8, 12] console.log(oldArray); // returns [1, 2, 3]

reduce

迭代数组,并浓缩为一个值: var singleVal = array.reduce(function(previousVal, currentVal) { return previousVal - currentVal; }, initValue);

reduce有一个可选参数,initVal, 如果不指定该参数, 默认为数组的第一个元素。

filter

filter方法迭代数组元素,传入回调函数,判断为true的元素保留到新的列表里,false的元素被过滤。同python: arrNew = arr.filter(function(val) { return val >0 ; // 判断条件 });

sort

sort按照字母或数字顺序排序数组,返回排序后的数组。默认是按元素最高位的的ansi编码大小来排,比如123,小于2. 我们可以给sort方法传入一个比较大小的回调函数,看个栗子: var array = [1, 12, 21, 2]; array.sort(function(a, b) { return a - b; }); 将数组array从小到大排序: 如果a在b的前边,回调函数返回负数; 如果a在b的后边,回调函数返回正数; 如果相等,回调函数返回0; 注,如果要从大到小排序,只需要 return b-a; 即可

reverse

反转数组,返回反转后的数组 var myArray = [1, 2, 3]; myArray.reverse(); returns [3,2,1]

concat

拼接数组。接收数组作为参数,将其拼接到原数组的后面。 newArray = oldArray.concat(otherArray);

split

分割字符串为数组 var string = “Split me into an array”; var array = []; array = string.split(” “);

join

将数组中的元素用指定的分隔符连接成字符串 var joinMe = [“Split”,”me”,”into”,”an”,”array”]; var joinedString = ”; joinedString = joinMe.join(” “);

slice

对数组进行切片,顾头不顾尾 arr.slice(start, end)

toString

将数组转为字符串 var arr = [“a”,”b”,”c”]; alert(arr.toString()); //“a,b,c” 所有对象都继承自obeject元类,元类中有toString方法,可以将任何类型转化为字符串类型。

splice

对数组指定位置进行删除和插入 arr.splice(start_index, count, value, …) 从数组指定索引处删除指定个数的元素,(可选)在删除位置插入元素。也可以通过删除0个值,添加1个或多个元素,完成在指定位置添加元素的操作。 另外,即使count大于数组长度,也不会报错。

Date

var now = new Date(); //当前时间对象 alert(now); // Mon Aug 07 2017 18:47:37 GMT+0800 (中国标准时间),类似python中time.ctime now.toString() //转为字符串 对象的方法: getDate() 获取日 getDay () 获取星期 getMonth () 获取月(0-11) getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)

获取指定时间的时间对象 var timer = new Date(“2000-12-12”), 也可以用逗号分割

Math

不同于以上对象,需要先实例化再调用对象的方法。而Math直接是一个实例化对象。因此使用时要加Math前缀 abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x)对数进行下舍入。 log(x) 返回数的自然对数(底为e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。

Math.random() 生成[0,1) decimal num Math.floor() 取整 生成一个指定范围且左右包含的随机数: Math.floor(Math.random() * (max - min + 1)) + min 具体推理参看:https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-generate-random-whole-numbers-within-a-range/18187

转载请注明原文地址: https://www.6miu.com/read-96372.html

最新回复(0)