Array对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 如何创建数组对象
// 1 数组字面量 []
// var array = []; // 空数组
// var numbers = [1, 5, 1];
//
// 2 数组的构造函数Array
// var array = new Array(); // 空数组
// var numbers = new Array(4, 1, 6);
// console.log(numbers);
//
// 获取数组长度
// console.log(numbers.length);
//
//
//
// 如何判断一个变量是否是数组对象
function fn(arr) {
// 判断参数arr 是否是数组对象
// instanceof
// console.log(arr instanceof Array);
//
// !arr instanceof Array
// false instanceof Array
// 方式1
// if (!(arr instanceof Array)) {
// console.error('参数err 不是数组对象');
// return;
// }
//
//
// 方式2 Array.isArray() 浏览器兼容性问题 HTML5
// console.log(Array.isArray(arr));
// if (!Array.isArray(arr)) {
// console.error('参数err 不是数组对象');
// return;
// }
console.log('正常执行');
}
var d = 1;
fn(d);
</script>
</head>
<body>
</body>
</html>Array对象的常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// toString()/valueOf() 每一个对象都具有这两个方法
// var arr = [5, 1, 8, 0];
// console.log(arr);
// // toString() 把数组转换成字符串，并且使用, 分割每一项
// console.log(arr.toString());
// // valueOf() 返回数组对象本身
// console.log(arr.valueOf());
// 1 栈操作(先进后出)
// push()
// pop() //取出数组中的最后一项，修改length属性
// // 2 队列操作(先进先出)
// push()
// shift() //取出数组中的第一个元素，修改length属性
// unshift() //在数组最前面插入项，返回数组的长度
// // 3 排序方法
// reverse() //翻转数组
// sort(); //即使是数组sort也是根据字符，从小到大排序
//
//
//
// 1 栈操作 先进后出
// var array = [1, 2, 3];
// // array[array.length] = ...
// array.push(4);
// // 参数， 可以有多个，将来都会添加到数组最后
// // 返回值，就是改变后的数组的长度
// var r = array.push(5, 6, 7);
// // console.log(r);
// // console.log(array);
// // pop 返回数组中的最后一个元素，并且会修改数组的长度
// var last = array.pop();
// console.log(last);
// console.log(array.length);
// console.log(array);
//
//
// 2 队列操作(先进先出)
// var array = [1, 2, 3];
// array.push(4);
// var first = array.shift();
// console.log(first);
// console.log(array);
// array.unshift(0);
// console.log(array);
//
// 3 排序方法
// var array = ['e', 'a', 'f', 'b'];
// // var newArray = array.reverse();
// // console.log(newArray);
// //
// // sort() 直接在原数组上进行排序
// array.sort();
// console.log(array);
// 如何学习一个方法
// 1 了解方法的作用
// 2 方法的参数
// 3 方法的返回值
// 4 测试，编写一个demo
</script>
</head>
<body>
</body>
</html>sort
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// sort
// var arr = [25, 10, 108, 18];
// 默认情况下的sort是对字符编码 从小到大排序
// arr.sort();
// console.log(arr);
// ASCII
// 字符编码 a > 97
//
// function compare(a, b) {
// return a - b;
// }
// arr.sort(compare);
// console.log(arr);
// arr.sort(function (a, b) {
// return b - a;
// })
// console.log(arr);
//
//
var arr = ['abc', 'ab', 'a', 'abcdef', 'xy'];
arr.sort(function (a, b) {
return a.length - b.length;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>清空数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var arr = [1, 2, 3];
// 清空数组
// arr = [];
// console.log(arr);
//
// arr.length = 0;
// console.log(arr);
//
// 第一个参数，是从什么位置开始删除 索引
// 第二个参数，删除多少个元素
arr.splice(0, arr.length);
console.log(arr);
</script>
</head>
<body>
</body>
</html>数组案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现
// var arr = ['刘备', '张飞', '关羽'];
// // arr.toString(); -> 刘备,张飞,关羽
// console.log(arr.join('|'));
// 将一个字符串数组的元素的顺序进行反转。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用两种种方式实现。提示：第i个和第length-i-1个进行交换
//
// var arr = ["a", "b", "c", "d"];
// arr.reverse();
// console.log(arr);
// 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除
// var arr = [1500, 1200, 2000, 2100, 1800];
// var newArray = arr.filter(function (item) {
// // item就是数组中的每一个元素
// return item < 2000;
// })
// console.log(newArray);
// ['c', 'a', 'z', 'a', 'x', 'a']找到数组中每一个a出现的位置
// var arr = ['c', 'a', 'z', 'a', 'x', 'a'];
// 从前往后找元素
// console.log(arr.indexOf('a'));
// // 从后往前找
// console.log(arr.lastIndexOf('a'));
// indexOf的第二个参数 设置indexOf查找的开始位置
// console.log(arr.indexOf('a', 2));
// 如果没有找到元素 indexOf 会返回-1
//
// while do...while
// var index = -1;
// do {
// index = arr.indexOf('a', index + 1);
// if (index !== -1) {
// console.log(index);
// }
// } while (index !== -1);
// 编写一个方法去掉一个数组的重复元素['c', 'a', 'z', 'a', 'x', 'a']
// ['c', 'a', 'z', 'a', 'x', 'a'] -> ['c', 'a', 'z', 'x']
//
// 1 如何获取数组中每一个元素出现的次数
// 1.1 遍历数组中的每一个元素
// { c: 1
// a: 1 + 1 + 1
// z: 1
// x: 1 }
// 1.2 创建一个对象，把数组的元素作为对象的属性，并记录次数
//
// var o = {};
// console.log(o['c']); // 我们访问对象中没有的属性，返回值是undefined
function clear(arr) {
// 1 如何获取数组中每一个元素出现的次数
var o = {}; // 记录数组中元素出现的次数
for (var i = 0; i < arr.length; i++) {
var item = arr[i]; // 数组中的每一个元素
// o[item] = 1;
// 判断o对象是否有当前遍历到的属性
if (o[item]) {
// 如果o[item] 存在，说明次数不为1
o[item]++;
} else {
// 如果o[item] 不存在，说明是第一次出现
o[item] = 1;
}
}
// console.log(o);
// 2 生成一个新的数组，存储不重复的元素
var newArray = [];
// 遍历对象o中的所有属性
for (var key in o) {
// 判断o对象中当前属性的值是否为 1 如果为1 说明不重复直接放到新数组中
if (o[key] === 1) {
newArray.push(key);
} else {
// o对象中当前属性 次数不为1 ，说明有重复的，如果有重复的话，只存储一次
// 判断当前的newArray数组中是否已经有该元素
if (newArray.indexOf(key) === -1) {
newArray.push(key);
}
}
}
return newArray;
}
var array = ['c', 'a', 'z', 'a', 'x', 'a'];
var newArray = clear(array);
console.log(newArray);
</script>
</head>
<body>
</body>
</html>基本包装类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 简单类型 没有属性和方法
// 对象 才有属性和方法
// var s1 = 'abc';
// var len = s1.length;
// console.log(len);
// // s1.length 执行过程
// // 把基本类型变成基本包装类型 会创建一个对应的临时对象
// var _s1 = new String('abc');
// var len = _s1.length;
// _s1 = null; // 销毁对象
// 基本包装类型：基本类型包装成复杂类型
// String Number Boolean
//
// PrimitiveValue 原始值
// var s = new String('123abc');
// console.log(s);
// console.log(s1);
//
// 将来我们一般情况下不会使用Number Boolean 基本包装类型
// PrimitiveValue 16
// 创建Number的对象
// var n1 = new Number('16');
// // 类型转换
// var n2 = Number('16');
// console.log(n1);
// console.log(n2);
// PrimitiveValue false
// var b1 = new Boolean(false);
// var b2 = Boolean('abc');
// console.log(b1);
// console.log(b2);
var b1 = new Boolean(false);
var b2 = b1 && true; // 转换成false的5种情况 0 '' null NaN undefined
console.log(b2);
</script>
</head>
<body>
</body>
</html>字符串的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 字符串的不可变
// var s = 'abc';
// s = 'xxxxxxyyy';
// 当拼接大量字符串的时候，会有性能问题
var s = '';
for (var i = 0; i < 100000; i++) {
// s += i;
s = s + i;
}
console.log(s);
</script>
</head>
<body>
</body>
</html>字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 1 字符方法
// charAt() //获取指定位置处字符
// charCodeAt() //获取指定位置处字符的ASCII码
// str[0] //HTML5，IE8+支持 和charAt()等效
//
// var s = 'abcdef';
// console.log(s.charAt(0));
// for (var i = 0; i < s.length; i++) {
// console.log(s.charAt(i));
// }
//
// console.log(s.charCodeAt(0));
//
// for (var i = 0; i < s.length; i++) {
// console.log(s[i]);
// }
// // 2 字符串操作方法
// concat() //拼接字符串，等效于+，+更常用
// slice() //从start位置开始，截取到end位置，end取不到
// substring() //从start位置开始，截取到end位置， end取不到
// substr() //从start位置开始，截取length个字符
// // 3 位置方法
// indexOf() //返回指定内容在元字符串中的位置
// lastIndexOf() //从后往前找，只找第一个匹配的
// // 4 去除空白
// trim() //只能去除字符串前后的空白
// // 5 大小写转换方法
// to(Locale)UpperCase() //转换大写
// to(Locale)LowerCase() //转换小写
// // 6 其它
// search()
// replace()
// split()
</script>
</head>
<body>
</body>
</html>
获取url中参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 获取url中?后面的内容
// 例如：http://www.itheima.com/login?name=zs&age=18&a=1&b=2
var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
// console.log(url.substr(2));
// var index = url.indexOf('?') + 1;
// console.log(url.substr(index));
// {
// name: 'zs',
// age: 18
// }
// 获取url后面的参数
function getParams(url) {
// 获取? 后面第一个字符的索引
var index = url.indexOf('?') + 1;
// url中?后面的字符串 name=zs&age=18&a=1&b=2
var params = url.substr(index);
// 使用& 切割字符串 ，返回一个数组
var arr = params.split('&');
var o = {};
// 数组中每一项的样子 key = value
for (var i = 0; i < arr.length; i++) {
var tmpArr = arr[i].split('=');
var key = tmpArr[0];
var value = tmpArr[1];
o[key] = value;
}
return o;
}
var obj = getParams(url);
console.log(obj);
console.log(obj.name);
console.log(obj.age);
</script>
</head>
<body>
</body>
</html>