- A+
所属分类：Web前端
遍历对象的属性
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) 是一种轻量级的数据交换格式。 易于人阅读和编写。
- JSON 数据的书写格式是：名称/值对。
- 里面的属性和值都要用 双引号 括起来
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] 
