1.JavaScript对象
- js中，对象是一组无序的方法和属性的集合
1.1对象创建的三种方式
1.1.1 利用字面量来创建对象
-
对象字面量：就是{ }里面包含了属性与方法
-
{ }中采用键值对的形式，键相当于属性名，方法名；值相当于属性值，可以是任意类型（匿名函数，数字类型，布尔类型等）
-
注意：方法冒号后面是匿名函数
-
对象的调用：
调用属性：对象.属性名 / 对象[‘属性名’]
调用方法：对象.方法名()
var keke = {
};
keke = {
name: 'keke',
type: 'Alaska',
age: 5,
color: 'brown',
bark: function () {
console.log("汪汪汪");
}
}
console.log(keke.name); // => keke
keke.bark(); // => 汪汪汪
1.1.2 利用new Object创建对象
- 对象调用和用字面量创建一致
var keke = new Object();
keke.name = 'keke';
keke.type = 'Alaska';
keke.bark = function () {
console.log("汪汪汪");
}
console.log(keke.name); // => keke
keke.bark(); // => 汪汪汪
1.1.3 用构造函数创建对象
- 构造函数：一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值。
- 构造函数名首字母要大写
- 调用函数（new）后返回一个对象
- 创建对象与java类似
function Dog(name, type) {
this.name = name;
this.type = type;
this.bark = function (barkSound) {
console.log(barkSound);
};
}
//创建对象
var keke = new Dog('keke', 'Alaska');
console.log(keke['name']); // => keke
keke.bark('汪汪汪'); // => 汪汪汪
-
构造函数类似于Java的类，利用构造函数创建对象的过程称为对象的实例化
-
new关键字的执行过程
- new 构造函数 → 在内存中创建一个空对象，this指向这个空对象
- 执行构造函数里的代码，给此空对象添加属性方法
- 返回此对象（所以构造函数中不需要return）
1.2 遍历对象
var keke = {
name: 'keke',
type: 'Alaska',
bark: function () {
console.log("汪汪汪");
}
}
for(var k in keke){
console.log(k); // => name type bark
console.log(keke[k]); // => keke Alaska ƒ () {console.log("汪汪汪");}
}
2.内置对象
2.1Math对象
- 参考js常用api
2.2 Date对象
- 普通用法，可以使用api
var date1 = new Date();
console.log(date1); // => Thu Aug 20 2020 18:19:23 GMT+0800 (中国标准时间)
- 获取时间戳api简化写法, +new Date()等于new Date().getTime();
var date2 = +new Date(); //返回时间戳
console.log(date2); // => 1597918763674
利用Date对象写一个倒计时：
var nowTime = +new Date();
var endTime = +new Date('2020-8-20 18:20:0'); //此处输入倒计时结束时间
time = (endTime - nowTime) / 1000;
function countDown(time) {
var d = parseInt(time / 60 / 60 / 24);
var h = parseInt(time / 60 / 60 % 24);
var m = parseInt(time / 60 % 60);
var s = parseInt(time % 60);
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown(time)); // => 0天0时0分34秒
2.3 数组对象
2.3.1 创建数组对象的两种方式
var arr1 = new Array(2);
var arr2 = new Array(2, 3);
console.log(arr1); // => [empty × 2]
console.log(arr2); // => [2, 3]
2.3.2 判断是否为数组
2.3.2.1 istanceof 运算符
- java中用来判断是否为子类
var arr = [];
var obj = {
};
console.log(arr instanceof Array); // => true
console.log(obj instanceof Array); // => false
2.3.2.2 Array.isArray()
- h5新增方法，ie9以上支持
var arr = [];
var obj = {
};
console.log(Array.isArray(arr)); // => true
console.log(Array.isArray(obj)); // => false
2.3.3 增加删除数组元素的方法
- push
- 在数组后添加元素，可以添加任意个
var arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // => [1, 2, 3, 4, 5]
- unshift
- 在数组前添加元素，可以添加任意个
var arr = [3, 4, 5];
arr.unshift(1, 2);
console.log(arr); // => [1, 2, 3, 4, 5]
- pop
- 删除数组最后一个元素
var arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr); // => [1, 2, 3, 4]
- shift
- 删除数组第一个元素
var arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr); // => [2, 3, 4, 5]
2.3.4 获取元素索引
- indexOf 从头开始找
- lastIndexOf 从尾开始找
- 用此api写个数组去重
function unique(arr) {
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i])
}
}
return newArr;
}
console.log(unique([1, 2, 1, 2, 3, 4, 5, 6, 7, 1])); // => [1, 2, 3, 4, 5, 6, 7]
2.3.5 将数组转化为字符串
- toString ','分隔元素
var arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // => 1,2,3,4,5
- join 自定义字符分隔数组
var arr = [1, 2, 3, 4, 5];
console.log(arr.join('&')); // => 1&2&3&4&5
2.3.5 数组拼接
- concat
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [1, 2, 3, 4, 5];
var arr3 = [1, 2, 3, 4, 5];
console.log(arr1.concat(arr2, arr3));
// => [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
2.3.6 数组剪切
- splice （具有删除功能，插入功能，替换功能）
- 删除功能，指定从那个位置开始删除几个
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
arr.splice(1, 5); // 从下标为1开始删除5个元素
console.log(arr); // => ["a", "g"]
- 插入功能
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
arr.splice(4, 0, 'insertComment');
console.log(arr); // => ["a", "b", "c", "d", "insertComment", "e", "f", "g"]
- 替换功能
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
arr.splice(0, 2, 'c', 'd');
console.log(arr); // => ["c", "d", "c", "d", "e", "f", "g"]
- 总得来说，其实是一个东西，第一个参数是起始位置，没什么好说，但是第二个参数删除个数的不同就导致了不同的用法，删除1个就是删除某个位置的元素；删除0个就是不删除，第三个参数可以添加插入的元素，不删还添加就是插入了；删2添2，相当于替换就是一个函数，叫法不同而已
2.4 字符串对象
2.4.1字符串的不可变
- 在我们修改字符串赋值的时候，原来的字符串并没有消失，仍存在内存中，此时会另开辟一个空间给新的字符串，但变量指向了新的字符串，所以经常改变字符串的赋值十分消耗内存
- 一个典例说明问题
var str = '';
for(var i = 0; i < 1000000; i++){
str = str + i;
}
- str+i 字符串不停占用内存，内存马上就消耗完毕
2.4.2 获取元素位置
- indexOf
var str = "22183210";
console.log(str.indexOf('0')); // => 7
//如果带起始位置
console.log(str.indexOf('1', 3)); // => 6
2.4.3根据位置返回字符串
- charAt 返回对应位置的字符串
- charCodeAt 返回对应位置的字符串的 ascii码
- str[index] 像数组一样，h5新增方法，与charAt等价
var str = '278hj2k2d2f2s8'
console.log(str.charAt(0)); // => 2
console.log(str.charCodeAt(0)); // => 50
console.log(str[0]); // => 2
- 统计字符在字符串中出现的次数
var count = {
};
var str = '278hj2k2d2f2s8';
for (var i = 0; i < str.length; i++){
if(count[str.charAt(i)]){
count[str.charAt(i)]++;
} else {
count[str.charAt(i)] = 1;
}
}
console.log(count);
// => {2: 5, 7: 1, 8: 2, d: 1, f: 1, h: 1, j: 1, k: 1, s: 1}
2.4.4字符串的操作方法
- concat
var str = 'str1';
str = str.concat('str2', 'str3');
console.log(str); // => str1str2str3
- substr(starIndex, length) 截取
var str = 'str_str';
str = str.substr(1, 5);
console.log(str); // => tr_st
-
split
-
和java一样，split(’ , ‘),将字符串分割成数组，分割依据是’ , ’
3. 简单类型与复杂类型
- 内存分两部分存储数据，一部分是堆，一部分是栈
3.1 简单数据类型
-
值类型： string, number, boolean, undefined, null等
-
数据存放在内存的栈里面，直接开辟一个空间存值
3.2 复杂数据类型
- 通过new关键词创建的对象， 如Object Array, var arr=[]等
- 首先在栈里面存放地址（十六进制表示），此地址指向堆里面的数据
pink老师的图
3.3 简单数据类型传参
- 函数的形参可以看作是一个变量，我们传值给形参的时候，其实是把变量在栈里面的值复制了一分给形参，在函数内部做出对形参的任何修改都不会影响外部变量
function f(a) {
a++;
console.log(a);
}
var x = 10;
f(x); // => 11
console.log(x); // => 10
pink老师的图
3.4 复杂数据类型传参
- 函数的形参也可以看作是一个变量，当我们传值给形参的时候，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，操作同一个对象
function Person(name) {
this.name = name;
}
function f(x) {
console.log(x.name);
x.name = '张学友';
console.log(x.name);
}
var a = new Person('刘德华');
console.log(a.name);
f(a);
console.log(a.name);
pink老师的图
