JavaScript基础二

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: ƒ}

总结:

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

JS中的内置对象

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

string

创建字符串的方式:

  1. var str1 = “hello world” //typeof: string
  2. var str1 = new String(“hello world”) //typeof: object

字符串的属性

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

字符串的方方法:

  1. x.toLowerCase() //转小写
  2. x.toUpperCase() //转大写
  3. x.trim() //去字符串两边的空格

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

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

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

  10. x.substring(start, end) //截取,根据起始结束索引,顾头不顾尾。
  11. x.slice(start, end) //切片,顾头不顾尾
  12. x.replace(old, new) //替换
  13. x.split(分隔符) //分割出来放到数组中
  14. x.concat(str) //拼接字符串,相当于+

  15. 和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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值