目录
内置对象概述
JavaScript将一些常用功能预先定义成对象,用户可以直接使用,这种对象就是内置对象 。
对象具有属性和方法,使用对象的属性或方法的格式:
对象名.属性[=值]或 对象名.方法名([参数])
javascript 中的数组
数组是可以在内存中连续存储多个元素的结构
数组的下标索引从0开始.通过length可获取数组的总长度。
数组的上下界 [0 , myarr.length-1]
数组对象——新建数组
<script>
//构造函数
var arr = new Array(); //空数组
// arr[0] = 100;
// arr[1] = "hello";
// arr[3] = false;
arr[arr.length] = 100; //arr[0] = 100;
arr[arr.length] = "hello" //arr[1] = "hello";
var arr = new Array(100,"hello",true); //空数组
var arr = new Array(10); //创建一个长度为10的数组
var arr = new Array("hello"); //创建含有一个元素的数组
字面量
var arr = []; //空数组
</script>
访问数组
<script>
var arr = [10,"hello",false];
console.log(arr.length); //数组访问
console.log(arr);
console.log(arr[1]);
for(var i = 0;i<arr.length;i++){
console.log(arr[i]); //数组访问
}
</script>
for...in;for....of;遍历数组
<script>
var arr = [10, "hello", false];
for (var i in arr){ //遍历数组
console.log(arr[i]);
}
for (var val of arr) { //遍历数组
console.log(val);
}
</script>
遍历数组新方法 map() 映射
使用map遍历数组,返回新处理的数组
var arr = [1, 2, 3, 4];
var test2 = arr.map(function(value, index, item) {console.log(value, index, item);
return value * value;
});
console.log(test2);// [1, 4, 6, 19]
//映射
<script>
var arr = [1, 2, 3, 4, 5, 6];
var res = arr.map(function (v, i, arr) {
// console.log(v);
// console.log(i);
// console.log(arr);
return v + "world"
})
console.log(res);
var arr = [59, 60, 68, 69, 87, 98];
var res = arr.map(function (v, i, list) {
if (v >= 60) {
return v + "及格"
} else {
return v + "不及格"
}
})
console.log(res);
</script>
forEach() 遍历
使用forEach遍历数组,无返回值
var arr = ["a", "b", "c", "d"]; // value 数组中每个值
// index value在数组中对应的下标
// item 数组本身 arr.forEach(function (value, index, item) {console.log(value, index, item);
});
<script>
var arr = [90, 70, 100, "hello"];
arr.forEach(function (v, i, list) {
// console.log(v);
// console.log(i);
// console.log(list);
if (v % 2 == 1) {
return; //利用return 模拟continue的效果
}
console.log(v);
}); //回调函数
//无返回值
arrObj.forEach(function(v,i,arr){
v //当前遍历的每个元素
i //当前元素对应的下标(下标就是索引,从0开始)
arr //数组本身
})
</script>
filter 过滤
<script>
var arr = [59, 60, 68, 69, 87, 98];
var res = arr.filter(function (v, i, list) {
// console.log(list);
return v % 2 === 0; //找出偶数 返回值,满足条件的所有的值
});
console.log(res);
var arr = [59, 60, 68, 69, 48, 98]; //求和
var sum = 0;
var res = arr.filter(function (v, i, ist) {
sum += v;
});
console.log(sum);
</script>
迭代求和 reduce
<script>
var arr = [100, 58, 95, 98, 45, 85, 68];
var res = arr.reduce(function (total, v, i, arr) {
console.log(total);
return total + v; //total = total + v 迭代求和
}, 0);
console.log(res);
//把函数里的返回值,作为回调函数的第一个参数的值
//返回值:常用来迭代求和
arrObj.reduce(function(total,v,i,arr){
//total 初始值,或函数的返回值
// v 当前遍历的元素
// i 当前元素的下标
}, 参数2);
// 参数2: 可选 total的初始值 若省略,total的初始值是数组的第一个
//举例
var arr = [10, 20, 58, 30, 60, 90];
var res = arr.reduce(function (total, v, i, arr) {
return total + v;
}, 0)
console.log(res);
var arr = [50, 45, 68, 80, 85, 90]; //及格分求和
var res = arr.reduce(function (total, v, i, arr) {
if (v >= 60) {
total = total + v
}
return total;
}, 0)
console.log(res);
</script>
数组对象 ——方法
includes() 判断字符串是否包含指定的子字符串
如果找到匹配的字符串则返回 true,否则返回 false。
注意: includes() 方法区分大小写。
<script>
查找字符串是否包含 "Runoob":
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("Runoob");
n 输出结果:
true
</script>
pop() 方法删除数组的最后一个元素
pop() 方法用于删除并返回数组的最后一个元素。
shift()删除数组第一个元素语法
arrayObject.pop()
pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
<script>
var arr = [45, 58, 98, 97];
console.log(arr.pop());
console.log(arr.shift());
console.log(arr);
arrOjb.pop() 删除数组里最后一个元素
arrOjb.shift() 删除数组里第一个元素
返回值:删除的元素
</script>
push() 数组的末尾添加元素
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
<script>
arr.push("world",1)
console.log(arr);
console.log(arr.unshift("world",1));
// arr.Ojb.push(元素1,元素2,....) 在元素的尾部添加一个或多个元素 多个元素之间用逗号隔开
// arr.Ojb.unshift(元素1,元素2,....) 在元素的头部添加一个或多个元素 多个元素之间用逗号隔开
// 返回值:新数组的长度
// 1.创建一个空数组 arr2 = [];
// 2.遍历数组arr在arr2里 查找是否有arr[i]的值,如果没有把arr[i]放到arr2里,若有,不用放
// 3.输出 arr2
//去除重复项, 去重
var arr = [45, 58, 98, 97, 50, 85];
var arr2 = [58, 97, 85];
//第一种
arr.forEach(function (v) {
if (arr2.indexOf(v) === -1) {
arr2.push(v)
}
});
console.log(arr2);
//或者
var res = arr.filter(function (v, i) {
return arr.indexOf(v) == i;
})
console.log(res);
//或者
for (var i = 0; i < arr.length; i++) {
arr.forEach(function (v) {
if (arr2.indexOf(v) === -1) {
arr2.push(v)
}
})
}
console.log(arr2);
</script>
concat() 连接两个或多个数组
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
返回值:
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中
生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,
而不是数组。
<script>
var a = "hello";
var b = "world";
console.log(a.concat(b));// a + b
var a = [10, 7];
var b = ["world", true, 100];
var c = ["xyz", 88, 0]
console.log(a.concat(b, "abc", 11, c));
arrObj.concat(参数)
参数:必需 待连接的数组或元素 多个数组直接用逗号隔开
返回值:连接后的数组
</script>
sort()排序数组
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
注意:当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序,你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
<script>
var arr = [10, 2, 5, 45, 0, "abc"];
var res = arr.sort(function (x, y) {
return x - y //升序 return y- x 降序
});
// var res = arr.sort((x, y) => x - y); 利用箭头函数
console.log(res);
// arrObj.sort(参数)
// 参数: 可选函数若省略,按unicode编码进行排序
// 函数里的形参的相对顺序绝对升序还是降序排列
// arrObj.sort(function (a, b) { return a - b; }) 升序排列
// arrObj.sort(function (a, b) { return b - a; }) 降序排列
</script>
reverse() 颠倒数组中元素的顺序
<script>
var arr = ['true', 10, 6, 9, "hello"];
console.log(arr.join("-")); 拼接
console.log(arr.reverse()); 颠倒顺序
var str = "Hello world!" //!dIrow ol1eH"
console.log(str.split("").reverse().join(""));
.arrobj.reverse() 反转数组
.arrobj.join(参数), 把数组分割为字符串
.参数: 可选.分割符若省略,默认用逗号分割
.若写为空串可以把数组里的每个元素拼接为字符串
.返回值:字符串
</script>
splice() 数组中添加/删除项目
语法:
arrayObject.splice(index,howmany,item1,.....,itemX)
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的
一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
<script>
var arr = ['true', 10, 6, 9, "hello"];
console.log(arr.splice(1, 2)); //删除 10,6
console.log(arr.splice(-2, 2)); //删除 9,hellp
console.log(arr);
// arr0bj.splice(参数1,参数2,参数3)在参数1的位置删除参数2个元素并把参数3里的元素添加到参数1位置
// 参数1:必需 删除/添加元素位置
// 参数2:必需 删除元素的个数
// 参数3:可选 添加的元素 多个元素之间用逗号隔开
// 返回值:删除的元素组成的数组
//去重
var arr = [true, 10, 6, 6, 9, 9, 9, "he1lo", 6, true, 9];
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
console.log(arr);
</script>
数组对象---其他
<body>
<div class="box">11</div>
<div class="box">11</div>
<div class="box">11</div>
</body>
<script>
//通过标签名称获取元素对象
var oDiv = document.getElementsByTagName("div") //通过标签名称获取元素对象
var divarr = Array.from(oDiv); //转换为数组
divarr.forEach(function (item) {
console.log(item);
})
// get 获取 // Element 元素 // By 通过 // Tag 标记 // Name 名称
// Array. from(参数1,参数2)
// 参数1:必需 要转换为数组的对象
// 参数2:可选 回调函数|
//返回值:数组
// (截取)
var arr = [10, 1, "he1lo", 7, 8, "abc"];
console.log(arr.slice(2));
console.log(arr.slice(-2));
console.log(arr.slice(2, 4));
arrObj . slice(参数1,参数2)
参数1:必需 ,开始截取的位置可以为负
参数2:可选, 结束截取的位置可以为负 不包含结束
返回值:截取到的数组
//(复制)
var arr = [10, 1, "he1lo", 7, 8, "abc"];
console.log(arr.copyWithin(0, 3));
arr0bj. copyWithin(参数1,参数2,参数3)
参数1:必需复制到指定目标索引位置。
参数2:可选 元素复制的起始位置。
参数3:可选 元素复制的结束位置。 若省略,从开始赋值到结尾
返回值:复制替换后的数组
//(检测)
var arr = [10, 1, 7, 8, 100, 80];
var res = arr.every(function(item,i,arr){
return item %2 === 0; //都满足条件时才会返回true
});
console.log(res);
arrobj.every(function (item, i, arr) {
return 条件;
})
检测数组所有元素是否都符合指定条件,如果都符合指定条件才会返回true
有一个不满足条件,返回false,并且剩余元素不在再进行检测
//(检测)
var arr = [10, 1, 7, 8, 100, 80];
var res = arr.some(function (item) {
return item === 100; //有一个满足条件就会返回true
})
console.log(res);
arrobj.some(function (item, i, arr) {
return 条件;
})
检测数组所有元素是否都符合指定条件,如果所有元素都不符合指定条件才会返回false
有一个满足条件,返回true,并且剩余元素不在再进行检测
//(填充)
var arr = [10, 1, 7, 8, 100, 80];
console.log(arr.fill("hello", 1, 3)); //包含开始,不包含结束
arrObj.fill(参数1,参数2,参数3)
参数1:必需 , 用来进行填充的值
参数2:可选 ,开始填充的位置
参数3:可选,结束填充的位置 不包含 若省略,从开始位置填充到数组的末尾
返回值:填充后的新数组
//查找
var arr = [10, 1, 7, 8, 100, 80];
var res = arr.find(function(item){
return item%2===1;
})
console.log(res);
arrOBJ.find(function(item,i,arr){
return 条件;
})
用于查找满足条件的数组里的第一个元素
返回值:查找到的元素, 或undifined(找不到时的返回值)
//查找符合条件的第一个位置的索引
var arr = [10, 1, 7, 8, 100, 80];
var res = arr.findIndex(function (item) {
return item % 2 === 1;
})
console.log(res);
用于查找满足条件的数组里的第一个元素的位置
返回值:查找到的元素对应的索引, 或-1(找不到时的返回值)
</script>
回顾数组方法
<script>
// ECMAScript
数组方法:
删除: 返回值:删除的元素
srrObj.shift() 头部删除
srrObj.pop() 尾部删除
srrObj.splice(开始删除的位置, 删除的个数,添加的元素(多的话用逗号隔开元素1, 元素2,)) 删除元素的数组
添加: 返回值:新数组的长度
arrObj.unshift(元素1, 元素2, .....) 头部添加
arrObj.push(元素1, 元素2, .....) 尾部添加
排序:
arrObj.sort() 按字符编码进行排序
arrObj.sort(function (a, b) {
return a - b; 升序
return b - a; 降序
}) 按字符编码进行排序
分隔:
arrObj.join() 把数组分隔为字符串 默认用逗号连起来
arrObj.join(分隔符)
arrObj.join('') 添加符号为空串 紧挨
链接:
arrObj.concat(arr2, arr3, 元素1, ...)
查找:
arrObj.every(function (item) {
return item % 2 === 0;
return 条件;
})
返回值: 布尔值
当数组里的每个元素都符合条件时,才会返回true,有一个不满足条件,则返回false,并且剩下的元素不再进行检测
arrObj.some(function (item) {
return item % 2 === 0;
return 条件;
})
返回值: 布尔值
当数组里的有一个元素不符合条件时,返回true,有满足条件时,则返回false,并且剩下的元素不再进行检测
arrObj.find(function (item) {
return 条件;
})
返回值: 满足条件的元素 找不到 返回undefined
当数组里的元素满足条件时,则返回该元素 (第 一 个) , 若都不满足条件,则返回undefined
arrObj.findIndex(function (item) {
return 条件;
})
返回值: 满足条件的元素 找不到 返回undefined
当数组里的元素满足条件时,则返回该元素 (第 一 个) , 若都不满足条件,则返回 - 1
Array.from(obj) 把对象转换为数组
Array.isArray(参数) 判断参数是否为数组
遍历数组:
for (var i = 0; i < arrObj.length; i++) {
arrObj[i];
}
for (var i in arrObj) {
arrObj[i];
}
for (var val of arrObj) {
val;
}
方法:
arrObj.forEach(function (item, i) {
item 遍历的元素;
i 下标;
})
映射:
arrObj.map(function (item, i) {
return item * 2; 元素二倍
})
过滤 / 筛选: 返回的 return 条件为ture所有的 item 构成的数组
arrObj.filter(function (item, i) {
return item % 2 === 0;
return true;
})
迭代求和:
arrObj.reduce(function (total, item) {
return total + item;
}, 0)
</script>
javascript封装函数,调用javascript函数