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: string
- var 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