JS笔记
数组声明
- 通过new创建数组
var arr = new Array(100,true,"hello"); alert(arr);
- 省略new运算符创建数组
var arr = Array(100,true,"hello"); alert(arr);
- 数组常量进行赋值
var arr = [100,true,"hello"]; alert(arr);
- 【注】传入参数只有一个,并且是数字的时候,直接声明这么长一个数组
var arr = Array(10);/var arr = new Array(10); alert(arr);
数组属性
数组.length:返回数组【元素】的个数。(将数据中存储的每一个数据,叫做数组的元素)
访问数组的元素:数组[下标],下标是从0开始的
var arr = [100,true,"hello"];
alert(arr.length);
alert(arr[1]);
for(var i = 0;i < arr.length;i++){
document.write(arr[i] + "<br/>");
}
遍历总结
Math.random() 随机[0,1);Math.random() * 10 随机[0,9)
数组遍历
for循环
for…in遍历 快速遍历/快速枚举法
forEach(ECMA5新增)
for…of遍历
//for循环
var arr = [10,20,30,40,50];//在页面上将数组的每一个元素输出
for(var i = 0;i < arr.length;i++){
document.write(arr[i] + "," + i + <br/>");
}
//for...in循环
for (var i in arr){
document.write(arr[i] + "," + i + <br/>");
}
//forEach遍历
var arr = [10,20,30,40,50];
arr.forEach(function(item,index,arr){//item当前遍历到的元素,index当前遍历到元素的下标,arr数组本身
document.write(item + "," + index + "," + arr + "<br/>");
});
//for...of遍历数组。【item是当前遍历到的元素】
for(var item of arr){
document.write(item + "<br/>");
}
对象遍历
for…in 遍历
var info = {
username:"falcon",
age:18,
sex:"女"
};
for(var i in info){
document.write("对象遍历:" + i + "," + info[i] + "<br/>");
}
Set
for…of 遍历
for(let item of res.keys()){
console.log(item);
}
for(let item of res.values()){
console.log(item);
}
for(let item of res.entries()){
console.log(item);
}
Map
for…of 遍历
for (let [key, value] of res) {
console.log(key, value);
}
数组方法
- 栈结构
特点:先进后出
push
格式:数组.push(参数1,参数2,…);
功能:给数组的末尾添加元素
返回值:插完元素以后数组的长度
pop
格式:数组.pop();//没有参数
返回值:取下一个元素
功能:从数组末尾取下一个元素
var arr = ["Beijing","Shanghai","Guangzhou"];
var res = arr.push("Shenzhen","Hangzhou","Tianjin");
alert(res);//6
var arr = ["Beijing","Shanghai","Guangzhou"];
var res = arr.pop();
alert(arr);//Guangzhou
- 队列结构
特点:先进先出
push
shift()
格式:数组.shift()
参数:没有参数
功能:从数组的头部取下一个元素
返回值:取下的元素
unshift()
格式:数组.unshift(参数1,参数2,…)
功能:从数组的头部插入元素
返回值:插完元素以后数组的长度
var arr = ["Alice","Falcon","Lily"];
var res = arr.shift();
alert(res);//Alice
var arr = ["Alice","Falcon","Lily"];
var res = arr.unshift("Rose","Jack","Tom");
alert(res);//6
var num1 = 10;
var num2 = num1;
num2 = 20;
alert("num1="+num1+",num2="+num2);//num1=10,num2=20
//【引用】数据类型:数组的变量存储的是数组的地址
var arr1 = [10,20,30,40];
var arr2 = arr1;
arr2.push(50,60);
alert(arr1);//10,20,30,40,50,60
alert(arr2);//10,20,30,40,50,60
- concat() 1拷贝原数组,生成新的数组;2合并数组
2格式:数组.concat(数组,数据,…)
2返回值:合并成的新数组
var arr1 = [10,20,30,40];
var arr2 = arr1.concat();
arr2.push(50,60);
alert(arr1);//10,20,30,40
alert(arr2);//10,20,30,40,50,60
var arr1 = [10,20,30];
var arr2 = [50,60,70];
var newArr = arr1.concat(arr2,"hello",true);
alert(newArr);//10,20,30,50,60,70,hello,true
alert(newArr.length);//8
alert(arr1);//10,20,30
//预编译:在所有代码运行之前,计算机将代码从头到尾看一遍,将这个程序需要运行的空间一次性分配好
//声明提升:在当前作用域,声明变量和函数,会直接提升在整个代码的最前面运行。函数也可以声明提升
alert(num);//undefined
var num = 10;
alert(num);//10
- slice()方法
格式:数组.slice(start,end);
功能:可以基于当前数组获取指定区域元素[start,end],提取出元素生成新数组
返回值:生成新数组,原数组不会发生任何改变
var arr = [10,20,30,40,50,60];
var newArr = arr.slice(1,4);
alert(newArr);//20,30,40
alert(arr);/10,20,30,40,50,60
- splice()
格式:数组.splice(start,length,数据1,数据2,…);
参数:start,开始截取的位置;length,截取的元素的长度;第三个参数开始,在start位置,插入元素
返回值:截取下来的元素组成的数组
//增加
var arr = [10,20,30,40,50];
var res = arr.splice(2,0,"hello","world");
alert(arr);//10,20,hello,world,30,40,50
alert(res);//空数组
//删除
var arr = [10,20,30,40,50];
var res = arr.splice(1,2);
alert(arr);//10,40,50
alert(res);//20,30
//修改(先删除在增加)
var arr = [10,20,30,40,50];
arr.splice(2,1,"hello");
alert(arr);//10,20,hello,40,50
- join()
格式:数组.join(字符串)
功能:将数组中的元素,用传入的拼接符,拼接成一个字符串
返回值:拼接好的字符串
var arr = [10,20,30];
var str = arr.join("==");
alert(str);//10==20==30
alert(arr);//10,20,30
- reverse()逆序
var arr = [true,"hello",100];
arr.reverse();
alert(arr);//100,hello,true
- sort()数组排序
格式:数组.sort();默认从小到大排序
参数:表示要怎么排序
var arr = [30,20,50,10,40,60];
arr.sort();
alert(arr);//10,20,30,40,50,60
var arr = [1,10,20,15,25,5];
arr.sort();
alert(arr);//1,10,15,20,25,5
var arr = [1,10,20,15,25,5];
arr.sort(function(value1,value2){
return value1 - value2;
})
alert(arr);//1,5,10,15,20,25
var arr = [1,10,20,15,25,5];
arr.sort(function(value1,value2){
return value2 - value1;
})
alert(arr);//25,20,15,10,5,1
ECMA5新增数据方法
- indexOf()
格式:数组.indexOf(item,start);
参数:item可以是任意的数据;start为下标,可以不传,默认为0
功能:在数组中查找第一次出现的item元素的下标,从start开始查找
返回值:-1,没有查找到;>=0,查找到的元素的下标
var arr = [10,20,30,40,50,20,30];
var index = arr.indexOf(20);
alert(index);//1
- forEach()数组遍历
- map()映射
var arr = [10,20,30,40,50];
var newArr = arr.map(function(item,index,arr){
return item*1.3;
});
alert(newArr);//arr*1.3
alert(arr);//10,20,30,40,50
- filter()过滤
var arr = [10,20,30,40,50];
var newArr = arr.filter(function(item,index,arr){
return item > 20;
});
alert(newArr);//30,40,50
alert(arr);//10,20,30,40,50
- some()某些,在数组中查找是否有符合条件的元素,有返回true,没有返回false;只要找到符合条件的元素,后面的循环就终止了
var arr = [10,20,30,40,50];
var res = arr.some(function(item,index,arr){
return item > 20;
});
alert(res);//true
alert(arr);//10,20,30,40,50
- every()每一个,在数组中查找每一个元素是否符合条件,都符合返回true,否则返回false;只要找到不符合条件的元素,后面的循环就停止了
var arr = [10,20,30,40,50];
var res = arr.every(function(item,index,arr){
return item < 30;
});
alert(res);//false
alert(arr);//10,20,30,40,50
- reduce()归并
var arr = [10,20,30,40,50];
var res = arr.reduce(function(prev,next,index,arr){
/*
prev:第一次是下标为0的元素,第二次开始上一次遍历return的值
next:从下标1开始,上一次遍历return的值
arr:数组本身
*/
alert(prev + "," + next);
return prev + next;
});
alert(res);
二维数组
var arr1 = [10,20,30];
var arr = [true,100,"hello",arr1];
alert(arr.length);//4,把arr1的地址传入arr中
alert(arr[3]);//10,20,30
alert(arr1[1]);//20
alert(arr[3][1]);//20
冒泡排序
规则:前后两个数两两进行比较,如果符合交换条件就交换两个数的位置
规律:每一轮排序,都能找出一个数放在最终位置;比较的轮数,等于数组的长度-1,每一轮比较的次数=数组长度-当前的轮数
var arr = [9,8,7,6,5,4];//从小到大
for(var i = 0;i < arr.length - 1;i++){
for(var j = 0;j < arr.length - (i + 1);j++){//每一轮比较次数
if(arr[j] > arr[j+1]){
//交换两个数的位置
var tmp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = tmp;
}
}
}
alert(arr);//4,5,6,7,8,9
//函数封装
var arr = [9,8,7,6,5,4];//从小到大
function bubbleSort(arr){
for(var i = 0;i < arr.length - 1;i++){
for(var j = 0;j < arr.length - (i + 1);j++){//每一轮比较次数
if(arr[j] > arr[j+1]){//这是升序,降序的时候大于号变小于号即可
//交换两个数的位置
var tmp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = tmp;
}
}
}
}
bubbleSort(arr);//4,5,6,7,8,9
选择排序
规则:选出一个位置,这个位置上的数,和后面所有的数进行比较,比较出大小就交换两个数的位置
规律:每一轮排序,都能找出一个数放在最终位置;比较的轮数=数组的长度-1,每一轮比较的次数=数组的长度-当前的轮数
var arr = [9,8,7,6,5,4];
for(var i = 0;i < arr.length - 1;i++){
for(var j = i + 1;j < arr.length;j++){//被比较数组的下标
if(arr[i] > arr[j]){
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
}
}
alert(arr);//4,5,6,7,8,9
//函数封装
var arr = [9,8,7,6,5,4];
function changeSort(arr){
for(var i = 0;i < arr.length - 1;i++){
for(var j = i + 1;j < arr.length;j++){//被比较数组的下标
if(arr[i] > arr[j]){//这是升序,降序的时候大于号变小于号即可
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
}
}
}
changeSort(arr);//4,5,6,7,8,9
数组练习
//定义一个含有30个整型元素的数据,按顺序分别赋予从2开始的偶数;然后按顺序每5个数求出一个平均值,放在另一数组中并输出
//1.声明数组
var arr = new Array(30);
for (var i = 0; i < arr.length; i++) {
arr[i] = i * 2 + 2;
}
//2.求平均数
var averageArr = [];
for (var i = 0; i < 6; i++) {
//3.取出求平均数的这个数组
var newArr = arr.splice(0, 5); //var newArr=arr.slice(i*5,(i+1)*5);
//4.求平均值
var sum = 0; //求和数
for (var j = 0; j < newArr.length; j++) {
sum += newArr[j];
}
averageArr.push(sum / 5);
alert(averageArr); //6,16,26,36,46,56
}
//写一个5*5的数组,并赋值1-25,然后输出左下三角(二维数组)
var arr = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20],
[21, 22, 23, 24, 25],
];
/*
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
document.write(arr[i][j] + " ");
}
document.write("<br/>");
}
*/
for (var i = 0; i < arr.length; i++) {
var newArr = arr[i];
for (var j = 0; j < newArr.length; j++) {
if (i >= j) {
document.write(newArr[j] + " ");
}
}
document.write("<br/>");
}
//随机给出一个五位以内的数,然后输出该数共有多少位,每位分别是什么
function countOfNum(num) {
//1.声明一个数组,存放取下的数
var arr = [];
while (num) {
arr.push(num % 10);
num = parseInt(num / 10);
}
alert(arr.length); //5
alert(arr);//5,4,3,2,1
arr.reverse();
alert(arr); //1,2,3,4,5
}
countOfNum(12345);
//编写函数has(arr,60)判断数组中是否存在60这个元素,返回布尔类型
function has(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return true;
}
}
return false;
}
alert(has([10, 20, 30], 40)); //20-->true 40-->false
/*
生成13位条形码(对之前的知识综合练习)
Ean-13码规则:第十三位数字是前十二位数字经过计算得到的校验码。
例如:690123456789
第三位计算其校验码的过程为:
@前十二位的奇数位和6+0+2+4+6+8=26
@前十二位的偶数位和9+1+3+5+7+9=34
@将奇数和与偶数和的三倍相加26+34*3=128
@取结果的个位数:128的个位数为8
@用10减去这个个位数10-8=2
所以校验码为2(注:如果取结果的个位数为0,那么校验码不是(10-0=10),而是0)实现方法ean13()计算验证码,输入12位条码,返回带验证码的条码。
例如:输入:692223361219输出:6922233612192
*/
function ean13(num) {
//将其中每一位数都取下来
var arr = [];
while (num) {
arr.unshift(num % 10);
num = parseInt(num / 10);
}
var odd = 0;
var even = 0;
for (var i = 0; i < arr.length; i++) {
if (i % 2 == 0) {
//奇数位
odd += arr[i];
} else {
//偶数位
even += arr[i];
}
}
var sum = (odd + even * 3) % 10;
if (sum) {
sum = 10 - sum;
}
//生成第13位数
arr.push(sum);
return Number(arr.join(""));
}
alert(ean13(692223361219));