JavaScript 基础四

Posted 2020-12-19 小茴香

遍历对象的属性

for...in 语句用于对数组或者对象的属性进行循环操作。

    for (变量 in 对象名字) {
        在此执行代码
    }

• 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 key
• 后面的是对象 可以 数组 因为 数组也属于对象

1） for in 遍历 对象

    var obj = {
         name: ‘andy‘,
         age: 18,
         sex: ‘男‘
    }
    console.log(obj.length); // undefined
    for (var k in obj) {
        console.log(k); // 这里的k 是属性名
        console.log(obj[k]); // 这里的 obj[k] 是属性值
    }

• 再对象里面， 这里的k 是 属性名

遍历 JSON格式

JSON(javascript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。

1. JSON 数据的书写格式是：名称/值对。
2. 里面的属性和值都要用 双引号 括起来

     var json = {
         "id": "1",
         "name": "andy",
          "age": "18",
          "tel": "110120"
     }
     for (var k in json) {
        console.log(k); // 这里的k 是属性名
        console.log(obj[k]); // 这里的 obj[k] 是属性值
    }

简单类型和复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：简单数据类型/基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。

引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

堆 和 栈

堆栈空间分配区别：
　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
　　2、堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放， 若程序员不释放，由垃圾回收机制回收。

值类型内存分配

• 值类型（简单数据类型）： string ，number，boolean，undefined，null

• 值类型变量 的 数据 直接存放在变量（栈空间）中

var  n1 = 10; 
var n2 = n1;
n1 = 20; 
n1  结果为  20     n2  的值 还是  10  

引用类型内存分配

• 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象）Object Array Date等

• 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。

  执行代码时，new 的对象实例 被创建在堆空间中，堆地址通过 = 号 赋值到变量 usrObj 的栈空间中。

• 我们通过变量 usrObj 访问 Object对象实例 里的内容时，实际是通过 栈空间里存放的堆地址来找到对象实例，再调用对象实例里的成员。

function Person(name, age) {
   this.name = name;
   this.age = age;
 }
var p1 = new Person(‘andy‘, 55);
var p2 = p1;
p1.name = ‘red‘;
console.log(p2.name);  

值类型传参

思考以下代码结果：

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

• 结论：函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值 复制 了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

引用类型传参

// 复杂数据类型（引用类型）传参
// 下面代码输出的结果?
function Person(name) {
    this.name = name;
}

function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    刘德华
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    张学友
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ?   刘德华
f1(p);
console.log(p.name); // 4.这个输出什么 ?  张学友

结论：函数的形参也可以看做是一个变量，当我们把 引用类型变量 传给 形参时，其实是把 变量在栈空间里保存的 堆地址 复制给了 形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法。

跟数学相关的运算来找Math中的成员（求绝对值，取整）

Math

注意以下都是方法 所以 必须带括号

演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

    Math.PI						// 圆周率
    Math.floor() 	              // 向下取整
    Math.ceil()                   // 向上取整
    Math.round()				// 四舍五入版 就近取整   注意 -3.5   结果是  -3 
    Math.abs()					// 绝对值
    Math.max()/Math.min()		 // 求最大和最小值
    Math.sin()/Math.cos()		 // 正弦/余弦
    Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

Math.random 生成随机数

随机返回一个小数 ， 取值范围 是 范围[0，1) 左闭右开 0 <= x < 1

console.log(Math.random()); // 0.40645855054029756

Date对象

Date对象 和 Math 对象不一样，他是一个构造函数。 所以我们需要 实例化使用。

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

为什么计算机起始时间从1970年开始

1）Date() 的使用

    // 获取当前时间，
    var now = new Date();
    console.log(now);	
    
    Date构造函数的参数
    // 括号里面时间 ，就返回 参数里面的时间
    日期格式字符串  ‘2015-5-1‘	 new Date(‘2015-5-1‘)  或者  new Date(‘2015/5/1‘) 

总结：

• 如果Date()不写参数，就返回当前时间
• 如果Date()里面写参数，就返回 括号里面输入的时间

2）获取日期的毫秒形式

Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

日期格式化方法

我们想要 2018-8-8 8:8:8 格式怎么办？

• 获取日期指定部分
  所以我们手动的得到这种格式。

  方法名	说明	代码___d = new Date()
  getFullYear()	获取当年	d.getFullYear()
  getMonth()	获取当月（0-11）	d.getMonth()
  getDate()	获取当天日期	d.getDate()
  getDay()	获取星期几 （周日0 到周六6）	d.getDay()
  getHours()	获取当前小时	d.getHours()
  getMinutes()	获取当前分钟	d.getMinutes()

| getSeconds() | 获取当前秒钟 | d.getSeconds() |

• 注意 月份 和星期 取值范围是从 0开始的。

案例

• 2018年5月29日 星期二 请写出这个格式

function getMyDate() {
    var arr = [‘星期天‘, ‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘, ‘星期五‘, ‘星期六‘];
    var date = new Date();
    // 2018年5月29日 星期二 
    var str = date.getFullYear() + ‘年‘ + (date.getMonth() + 1) + ‘月‘ + date.getDate() + ‘日 ‘ + arr[date.getDay()];
    return str;
}
console.log(getMyDate());

写一个函数，格式化日期对象，HH:mm:ss 的形式 比如 00:10:45

function getTimer() {
    var date = new Date();
    // var str = date.getHours() + ‘:‘ + date.getMinutes() + ‘:‘ + date.getSeconds();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getMinutes();
    // if(h < 0) {
    //     h = ‘0‘ + h;
    // }
    h = h < 10 ? ‘0‘ + h : h
    m = m < 10 ? ‘0‘ + m : m
    s = s < 10 ? ‘0‘ + s : s
    return h + ‘:‘ + m + ‘:‘ + s;
}
console.log(getTimer());

• 做一个倒计时效果
  计算公式：

        d = parseInt(总秒数/ 60/60 /24); // 计算天数
        h = parseInt(总秒数/ 60/60 %24) // 计算小时
        m = parseInt(总秒数 /60 %60 ); // 计算分数
        s = parseInt(总秒数%60);  // 计算当前秒数 

function getCountTime(endTime) {
    var d, h, m, s;
    //1. 用用户输入的时间 减去 开始的时间就是 倒计时 
    //2. 但是要注意，我们得到是 毫秒数  然后 把这个毫秒数转换为 相应的 天数 时分秒 就好了
    var countTime = parseInt((new Date(endTime) - new Date()) / 1000);
    // console.log(countTime);
    // 3. 把得到的毫秒数 转换 当前的天数 时分秒
    console.log(countTime);

    d = parseInt(countTime / 60 / 60 / 24); // 计算天数

    h = parseInt(countTime / 60 / 60 % 24); // 计算小时

    m = parseInt(countTime / 60 % 60); // 计算分数

    s = parseInt(countTime % 60); // 计算当前秒数 
    return ‘还剩下‘ + d + ‘天‘ + h + ‘时‘ + m + ‘分‘ + s + ‘秒 ‘;
}
console.log(getCountTime(‘2020-5-30 17:30‘));

Array对象

• 创建数组对象的两种方式
  • 字面量方式
  • new Array()

//    空数组 
var arr = new Array(); 
// 数组长度为3 但是内容为空
var arr = new Array(3); 
// 创建数组  [3,4,6]
var arr = new Array(3, 4, 6); 

// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];

// 获取数组中元素的个数
console.log(arr.length);

• 检测一个对象是否是数组

  • instanceof instanceof 运算符 就是判断一个对象是否属于某种类型
  • Array.isArray() html5中提供的方法，有兼容性问题

  函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断

  var arr = [1, 23];
  var obj = {};
  console.log(arr instanceof Array); // true
  console.log(obj instanceof Array); // false
  console.log(Array.isArray(arr)); // true
  console.log(Array.isArray(obj)); // false
  

• 数组常用方法

  演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf() 等

1）添加删除数组元素方法

方法名	说明	返回值
push(参数1....)	末尾添加一个或多个元素 ，注意修改原数组，	并返回新的长度
pop()	删除 数组最后一个元素，把数组长度减 1 无参数、注意修改原数组，	返回它删除的元素的值
unshift(参数1...)	向数组的开头添加一个或更多元素，注意修改原数组，	并返回新的长度
shift()	把数组的第一个元素从其中删除，把数组长度减 1 无参数、注意修改原数组，	并返回第一个元素的值

// push
var arr = [‘pink‘, ‘deeppink‘, ‘hotpink‘];
console.log(arr.push(‘lightpink‘)); //  返回数组长度  4
console.log(arr); //  [‘pink‘, ‘deeppink‘, ‘hotpink‘, ‘linghtpink‘]

// pop
var arr = [‘pink‘, ‘deeppink‘, ‘hotpink‘];
console.log(arr.pop()); // 返回删除的那1个元素  ‘hotpink‘
console.log(arr); // 返回删除的那1个元素  ["pink", "deeppink"]

// unshift
var arr = [‘pink‘, ‘deeppink‘, ‘hotpink‘];
console.log(arr.unshift(‘lightpink‘)); //  返回数组长度  4
console.log(arr); //  [‘linghtpink‘,‘pink‘, ‘deeppink‘, ‘hotpink‘]

// shift 
var arr = [‘pink‘, ‘deeppink‘, ‘hotpink‘];
console.log(arr.shift()); // 返回删除的那1个元素  ‘pink‘
console.log(arr); // 返回删除的那1个元素  ["deeppink", "hotpink"]

• 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

filter 方法

  //数组的迭代方法
    var arr1 = [2,2,4,3,5,6,75,32,35] //将大于10的数去除掉
    var newArr1 =  arr1.filter(function (ele,index,array){
      console.log(ele);
      if(ele > 10){
        return false 
      }
      return true;
    })
    console.log(newArr1);

2）数组排序方法

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序,无参数	该方法会改变原来的数组 返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组 返回新数组

// reverse 
var arr = [‘red‘, ‘andy‘];
console.log(arr.reverse()); // 返回翻转之后的数组
console.log(arr); // 原先数组也被修改

sort 如果调用该方法时没有使用参数，按照字符编码的顺序进行排序。

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    return b - a; // 降a序
    // return a - b;   升序
});
console.log(arr);

3) 数组操作方法

方法名	说明	返回值
concat()	连接两个或多个数组 不影响原数组	返回一个新的数组
slice()	数组截取slice(begin, end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始,要删除个数)	返回被删除项目的新数组 注意，这个会影响原数组

var arr1 = [1, 2];
var arr2 = [‘pink‘, ‘red‘];
var arr3 = [‘andy‘, 18];
//返回连接之后的新数组
console.log(arr1.concat(arr2, arr3));

// arr.slice(begin, end)   begin (包含自己） 和  end (不包含)  都是 索引号   
var arr = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘];
console.log(arr.slice()); // 默认截取整个数组
console.log(arr.slice(0)); // 从第0个截取到最后
console.log(arr.slice(0, 3)); // 从第0个截取  截取 索引号是3的但是不包含3

// splice 删除
// 2. splice() 插入、删除或替换数组的元素
        // (1) 删除某几个元素   数组.splice(起始位置, [删除的个数])
        var arr = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘];
        // 起始位置 从 0 开始计算    删除的个数 是删除几个的意思 
        arr.splice(2, 2); // 从索引号2的位置开始  删除 2个元素 
        console.log(arr);
        var arr1 = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘]; // 我们要把green 和blue 删掉
        arr1.splice(1, 2); // 从索引号1的位置开始  删除 2个元素 
        console.log(arr1);
        var arr2 = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘]; // 我们要把green 和blue  pink 删掉
        arr2.splice(1); // 只写了一个起始位置不写删除的个数，默认从起始位置删除到数组的最后面
        console.log(arr2);
        // (2) 删除某几个元素 后的返回值 （跟我们前面学的 pop  shift 返回的是被删除的元素）
        var arr3 = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘];
        console.log(arr3.splice(0, 2)); // 删除了 red  green  返回值就是  red green
        console.log(arr3); // 原数组剩下 blue  pink
        // (3) 插入或者 替换数组中的元素   数组.splice(起始位置, [删除的个数], [元素1, 元素2...])
        var arr4 = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘];
        // arr4.splice(0, 0, ‘hotpink‘);
        // arr4.splice(0, 0, ‘hotpink‘, ‘lightpink‘);
        // 在 索引号2 的位置 前面 插入 某几个元素 
        arr4.splice(2, 0, ‘hotpink‘, ‘lightpink‘);
        console.log(arr4);
        // (4) 替换数组中的元素
        var arr5 = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘];
        // 我们把 pink 颜色替换为 skyblue  （删掉 pink 替换为 skyblue）
        arr5.splice(3, 1, ‘skyblue‘);
        console.log(arr5);

• 清空数组

// 方式1 推荐 

arr = [];

// 方式2 

arr.length = 0;

// 方式3

arr.splice(0, arr.length);

4) 数组位置方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号 如果不存在，则返回-1。
lastIndexOf()	在数组中的最后一个的索引，	如果存在返回索引号 如果不存在，则返回-1。

5) 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符‘)	方法用于把数组中的所有元素转换为一个字符串。	返回一个字符串

var arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // 字符型 的 1,2,3,4,5

var arr = [‘red‘, ‘green‘, ‘blue‘, ‘pink‘];
console.log(arr.join()); // 跟toString() 一样， 转换为字符串
console.log(arr.join(‘-‘)); //red-green-blue-pink

• 编写一个方法去掉一个数组的重复元素（重点案例必须掌握的）

// [‘c‘, ‘a‘, ‘z‘, ‘a‘, ‘x‘, ‘a‘, ‘x‘, ‘c‘, ‘b‘]; 取消重复的元素 数组去重 （for循环）
// 把旧数组里面 不重复的元素选取出来放到新数组中   重复的元素之保留一个 放到新数组中 数组去重
var arr = [‘c‘, ‘a‘, ‘z‘, ‘a‘, ‘x‘, ‘a‘, ‘x‘, ‘c‘, ‘b‘];
var newArr = []; // 新数组
for (var i = 0; i < arr.length; i++) { // 遍历的是旧数组
    // 判断条件 我们去查询 --新数组-- 如果旧数组里面的一个元素在新数组里面没有出现过，我们就添加 否则不添加 
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

String对象

1） 基本包装类型（理解）

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean

基本包装类型就是 把简单数据类型包装成为复杂数据类型。 这样 基本数据类型就有了属性和方法

// 下面代码的问题？
var str = ‘andy‘;
console.log(str.length);
// 按道理 基本数据类型 是 没有属性和方法的
// 对象才有属性和方法的
// 这个原因是因为， js 会把 基本数据类型包装为复杂数据类型
//  执行过程如下  生成临时变量 把简单类型包装为复杂数据类型
var temp = new String(‘andy‘);
// 赋值给 我们声明的 字符变量
str = temp;
// 销毁给临时变量
temp = null;

字符串的不可变

指的是里面的值不可变， 看上去可以改变内容，其实是地址变了，新开辟了一个内存空间。

var str = ‘abc‘;
str = ‘hello‘;
// 当重新给str赋值的时候，常量‘abc‘不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = ‘‘;
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 这个结果需要花费大量时间 来 显示 因为需要不断的开辟新的空间

• 创建字符串对象

var str = ‘andy‘;
console.log(str); // 看不到常见的属性和方法
var str1 = new String(‘andy‘);
console.log(str1); // 可以看到常见的属性和方法
// 但是字符串经过基本包装类， 是可以使用 常见的属性和方法

字符串对象的常用方法

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

获取字符串位置方法(根据字符返回位置)

方法名	说明
indexOf(‘要查找的字符‘, 开始的位置)	返回指定内容在元字符串中的位置， 如果找不到就返回 -1，开始的位置是index 索引号
lastIndexOf()	从后往前找，只找第一个匹配的

var str = ‘my name is andy‘;
console.log(str.indexOf(‘n‘)); // 3
console.log(str.indexOf(‘l‘)); // -1

• "abcoefoxyozzopp"查找字符串中所有o出现的位置

// indexOf(要查找的元素, 查找的起始位置);
var str = ‘abcoefoxyozzopp‘;
// 1. 先查找第一个o所在的位置
var index = str.indexOf(‘o‘);
// console.log(index);

// 2. 如果indexof 返回的结果 不是 -1 说明后面还有o  我们就继续查找 循环
while (index !== -1) {
    console.log(index);
    index = str.indexOf(‘o‘, index + 1);
}

根据位置获取字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index 字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码 (index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5，IE8+支持 和charAt()等效

var str = ‘andy‘;
console.log(str.charAt(0)); // a
// 可以遍历的方法 得到所有的字符串
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

字符串操作方法

方法名	说明
concat(str1,str2,str3...)	concat() 方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length)	从start位置开始（索引号） ， length 取的个数 重点记住这个
slice(start, end)	从start位置开始，截取到end位置，end取不到 (他们俩都是索引号)
substring(start, end)	从start位置开始，截取到end位置，end取不到 基本和slice 相同 但是不接受负值

var str1 = ‘andy‘;
var str2 = ‘red‘;
console.log(str1.concat(str2, ‘肖申克救赎‘));  // andyred肖申克救赎

var str = ‘my name is andy‘;
console.log(str.substr(1)); // y name is andy  默认从第1个到最后
console.log(str.substr(0, 2)); // my 从第0个开始，取2个
console.log(str.substr(3, 7)); //name  is 从第 3个索引号开始，取 7个


var str = ‘my name is andy‘;
console.log(str.slice(1)); // y name is andy  默认从第1个到最后
console.log(str.slice(0, 2)); // my 从第0个开始，取到 第 1个（不包含2）
console.log(str.slice(3, 7)); // name

var str = ‘my name is andy‘;
console.log(str.substring(1)); // y name is andy  默认从第1个到最后
console.log(str.substring(0, 2)); // my 从第0个开始，取到 第 1个（不包含2）
console.log(str.substring(3, 7)); // name

• 截取字符串"我爱中华人民共和国"，中的"中华"

var s = "我爱中华人民共和国";
s = s.substr(2,2);
console.log(s);

replace() 替换

replace() 方法用于在字符串中用一些字符替换另一些字符

格式如下：

replace(被替换的字符串， 要替换为的字符串)；

• 把字符串中所有的o替换成!

var s = ‘abcoefoxyozzopp‘;
while (s.indexOf(‘o‘) !== -1) {
    s = s.replace(‘o‘, ‘!‘);
}
console.log(s);

• 判断一个字符串中出现次数最多的字符，统计这个次数

var s = ‘abcoefoxyozzopp‘;
var o = {};

for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) {
    o[item] ++;
  }else{
    o[item] = 1;
  }
}

var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
  }
}

console.log(max);
console.log(char);

转换大小写

toUpperCase() //转换大写
toLowerCase() //转换小写

var str = ‘ANDY‘;
console.log(str.toLowerCase()); // andy
var str = ‘andy‘;
console.log(str.toUpperCase()); // ANDY

split 切割字符串为数组

注意，切割完毕之后，返回的是一个新数组

var str = ‘a,b,c,d‘;
console.log(str.split(‘,‘)); //返回的是一个数组 [a, b, c, d]