JS的中数组
Java与JS数组的区别:
java中的数组:储存很多数据的容器,
特点:1.所有的数据的类型必须要一致
2.长度无法更改
javaScript中的数组:储存很多数据的容器,
特点:1.所有的数据的类型可以不一致
2.长度可以随意更改
数组是存储一系列值的集合,它是由一个或多个元素组成的,各元素之间使用逗号“,”分隔。
数组中的每个元素由“索引”和“值”构成。
索引:也可称为“下标”,用于识别元素,以数字表示,默认情况下从0开始依次递增。
值:元素的内容,可以是任意类型的数据。
*/
Js如何创建数组
js中创建数组的两种方式:都要掌握
1.静态声明:声明数组的同时,将元素值都定下来。
var arr = [1,2,3,4,5,6,7]; //java是大括号 JS是中括号
var arr = []; //创建一个长度为0的空数组
2.动态声明:暂时只声明,赋值放到后续进行
var arr = new Array();//声明了一个空数组(长度为0)
arr[0] = 1; arr[1] = 2;
动态声明的注意事项:
写法1:var arr = new Array(); 创建了一个长度为0的空数组
写法2:var arr = new Array(10); 创建了一个长度为10的空数组
写法3:var arr = new Array(1,2,3,4,5); 创建了一个长度为0的空数组
注意事项:写法2和写法3的区分。如果括号内部只有一个数字,就表示长度,而非值
如果有若干个,才表示值
常见的数组操作
//常见的数组操作1:获取指定位置的元素 语法:arr[index] 下标从0开始
//常见的数组操作2:获取数组的长度,通过属性,xxx.length
// 注意事项:Java中获取数组长度通过方法:xxx.length()
//常见的数组操作3:遍历数组,根据for循环进行遍历
var arr = [1,2,3,"语文" , true , 22.22 , undefined , null];
// console.log(arr[5]);//获取下标为5的元素
// console.log(arr.length);
// for(var i = 0 ;i<arr.length;i++){
// console.log(arr[i]);
// }
//常见的数组操作4:随意地更改数组的长度
console.log("数组修改之前的长度为" + arr.length);
//方法1: 简单操作直接修改 ,不推荐
// arr.length = 100;
// console.log("数组修改之后的长度为" + arr.length);
//方法2:直接在数组的后面添加元素即可
arr[8] = "新元素1";
arr[9] = "新元素2";
arr[19] = "新元素3";
//修改元素
arr[0] = 111;
console.log("数组修改之后的长度为" + arr.length);
for(var i = 0 ;i<arr.length;i++){
console.log(arr[i]);
}
删除数组中的指定元素
//删除数组中指定的元素
var arr = [1,2,3,4,5];
// console.log(arr);
// delete arr[2];//准确地说法应该是: 讲指定位置的元素 修改成 empty而已 并没有实现真正的删除.
// console.log(arr);
//如何实现真正的删除: Java也好JS也好 都没有直接提供相对的方法.
//思路:创建一个新的数组,然后旧数组遍历 赋值给新数组.然后遍历的时候进行判断,如果到了那个值不想要,跳过
// var arr1 = [ ];
// var index = 0;
// for(var i = 0 ; i<arr.length;i++){
// if (arr[i]==3) {
// continue;
// }
// arr1[index] = arr[i];
// index++;
// }
// console.log(arr);
// console.log(arr1);
习题:找出最大最小值
var arr =[12,324,543,654,6,547,3,5443,534,5654,654,654,7,5,765];
//查找出最大值和最小值
var max = arr[0];
var min = arr[0];
for(var i = 0 ;i<arr.length;i++){
if( arr[i] > max ){
max = arr[i];
}
if(arr[i]<min){
min = arr[i];
}
}
console.log(max + "~~" + min);
斐不拉切数列
该数列又称为为兔子数列, 源自于澳大利亚的兔子衍生事件
若干年以前 一位农夫不小心弄丢了一对兔子,然后2年以后他的农场就没了
原因:兔子不仅可以公母繁殖,还可以公公 母母繁殖
兔子的繁殖能力特别强,强到什么地步 如下:
每对兔子 每第三个月都能够产下一对兔子。然后后续每个月都能产下一对兔子
问第10个月有多少对兔子:假设一开始就一对。
月份 对数
1 1
2 1
3 2 原有的一对 + 生下来的1对
4 3 原有的一对 + 生下来的2对
5 5 原有的一对 + 生下来的3对 + 最开始生下来的又生了
6 8
7 13
8 21
*/
//规律: 从第三个月开始 每个月的兔子数 = 前第1个月 + 前第2个月
//要求:显示前10对兔子的对数
var arr = new Array(10);
arr[0] = 1;
arr[1] = 1;
for(var i = 2;i<arr.length;i++){
arr[i] = arr[i-1] + arr[i-2];
}
console.log(arr)
数组的排序
{ 3 6 3 1 3 8 3 4 - A 4 D F - 4 F 8 3 - B 6 F B - 1 A 6 4 D A 7 1 6 D 0 0 } 一比较 问题:比较多少次 arr.length-1-i
for(var j = i+1 ; j<arr.length;j++){
if(arr[i]>arr[j]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
二维数组
javaScript中的数组:数据的类型可以不一致
也就是意味着数组里面可以再次存储数组 来实现二维甚至多维数组
一般来说掌握二维数组就够了。
二维数组:可以看成 几行几列
//声明二维数组的语法:
//语法1: var arr = new Array( new Array(10) , new Array(9) , new Array(12) );
//语法2: var arr = [ [1,3] , [11,22,33] , [33,22,55] ];
/*
var arr = [
[1,2],
[2,3,4],
[4,5,6]
]
//例题:
如何创建一个二维数组,要求长度为100 且二维数组里面的每个数组长度也为100,暂时不知道元素内容
//写法1: 不推荐 var arr = new Array( new Array(10) , new Array(10) , new Array(10) , ... ,new Array(10) );
//写法2:
// var arr = new Array(100);//仅仅是一个一维数组
// for(var i = 0 ; i<100;i++){
// arr[i] = new Array(100);
// }
// console.log(arr);
//遍历二维数组思路: 先将二维数组看成一维数组
// var arr = [ [1,2,3,4] , [5,6,7,8] , [11,22,33,44] ];
// //如何遍历
// //1.先遍历总长度
// for(var i = 0 ; i<arr.length ; i++){
// //2.在遍历数组里面的数组
// for(var j = 0 ; j<arr[i].length ; j++){
// console.log(arr[i][j]);
// }
// }
// //如何获取二维数组中指定的数
// var index = arr[1][2] ; //7
// var index = arr[2][1] ; //22
//利用二维数组实现杨辉三角 姓名为杨辉吃饱了没事做,发明的一个三角形
//将杨辉三角的前10行打印在页面上.
/*
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
1 5 10 10 5 1
1 6 15 20 15 6 1
*/
//思路:1.找规律 几行几列的三角形 10行 和 "和行数相等的" 列
//第几行就有几列
//转换成二维数组,我们应该创建一个 长度为10的二维数组 ,然后数组里面的长度随之改变
var arr = new Array(10);
for(var i = 0;i<arr.length;i++){
arr[i] = new Array(i+1);
}
//以上就声明了一个可以容纳的容器
//赋值:
for(var i = 0 ; i<arr.length;i++){//i行数
for(var j = 0 ; j<arr[i].length ; j++){//j列数
if( j==0 || j==i ){
arr[i][j] = 1;
}else{
arr[i][j] = arr[i-1][j] + arr[i-1][j-1];
}
}
}
//以上知识点 均没有实际意义,单纯就是提升自己思维能力.解决问题的能力
for(var i = 0 ; i<arr.length;i++){
for(var j = 0 ; j<arr[i].length ; j++){
document.write(arr[i][j] + " ");
}
document.write("<br>");
}
JS中的函数
JavaScript的函数理解为Java里面的方法,
把一些经常复用的代码,抽取出来封装在一个函数中。
提高程序的可读性,减少开发者的工作量,便于后期的维护。
Java中的方法的语法:
public 返回类型 方法名(数据类型 变量名 , 数据类型 变量 ...){
}
JS的函数分类
js中函数的分类:
A.内置函数(JS提供的): console.log(); alert() confirm parseInt... :
B.自定义函数(程序员自己写的)
其中自定义函数的声明语法如下:
function 方法名(变量名,变量名...){
}
调用: 方法名(参数列表);
函数定义与调用的编写顺序不分前后。
你可以先调用函数,再声明函数
//声明一个无参函数
function a1(){
console.log(123);
}
a1();
//声明一个指定个数的有参函数
function a2(a,b,c){
console.log(a+b+c);
}
a2(1,2,3);
//声明一个若干个数的有参函数
function a3(... a){
for(var i = 0 ; i<a.length ; i++){
console.log(a[i]);
}
}
a3(1,1.1,true,undefined,null,"你好");
//有返回值的函数
function a4(a,b){
return a + b;
}
var sum = a4(10,20);
alert(sum)
</script>
JS的中的函数变量
和Java一样 JS的变量也分为局部变量和全局变量(Java的叫法是成员变量,只是概念和全局类似)
function info() {
var age = 18;
}
info();
console.log(age);
//思考以上代码的执行结果是什么
//A.18 B.报错 C.null D.undefined
//答案:B 提示:age is not defined 表示未定义
//原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.
全局变量:
在所有函数之外声明(script标签内部的最开始几行),它的作用域称为全局作用域,在同一个页面文件中的所有脚本内都可以使用。
局部变量:
在函数体内利用var关键字声明的变量称为局部变量,仅在该函数体内有效。
函数进阶
//以下知识点掌握即可:用的很少,但是看到了需要知道意思.
//函数的声明 一般就是上面两个知识点即可.就是利用function声明
//不仅有函数 还有一个叫做函数表达式的东西
//函数表达式指的是将函数赋值给变量的表达式,
// 通过“变量名()”的方式即可完成函数的调用,小括号“()”内可以传入参数,示例代码如下。
//函数的写法:
function a1(a){
console.log("我被调用了。参数是" + a)
}
a1(123);
//函数表达式的写法:
var abc = function (a){
console.log("我被调用了。参数是" + a)
};
abc(567);
匿名函数
// 匿名函数自调用:HTML页面解析之后 自动执行的一段代码.只会执行一次.
//例如跳转网页之后提示:登录成功 加载成功
//语法如下:
// (function(){
// alert("登录成功!!!");
// })();
//下面是函数叫做a的函数
function a(){
alert(123);
}
/匿名函数指的就是:没有函数名的函数 但是又拥有了变量名
var a = function(){
alert(456);
}
箭头函数
//箭头函数了解即可:和函数表达式一样 比较鸡肋, 但是需要能看懂它.
//因为代码简化,别人喜欢装逼
//以下3个函数的实际意义完全一样.
function sum(a,b){
return a + b;
}
var fn = (a, b) => a + b;
var fn = (a,b) => {
return a + b;
};
递归函数
//递归函数:了解即可. 函数的内部调用自己函数本身.
//优点:代码简化. 缺点:难得想
//例如声明一个函数 求1-N的和
function sum(n){
var sum = 0;
for(var i = 1 ;i<=n;i++){
sum = sum + i;
}
return sum;
}
var i = sum(100);
alert(i);
//递归的核心1:鸿沟(临界值)
function sumDg(n){
if(n==1){
return 1
}else{
return n + sumDg(n-1);
}
}
alert(sumDg(100));
//案例:求菲不拉切序列 1 1 2 3 5 8 13 21
//求第N项值
function dg(n){
if(n==1 || n == 2){
return 1;
}else{
return dg(n-1) + dg(n-2);
}
}
JS中的对象
在JavaScript中,对象属于复杂数据类型,
它是由属性和方法组成的一个对象。
属性是指对象的特征。
方法是指对象的行为。
下面以学生的特征和行为为例进行说明。
学生的特征:姓名、年龄和性别,这些特征可以用对象的属性来表示。
学生的行为:打招呼、唱歌、写作业,这些行为可以用对象的方法来表示。
*/
//将10个学生的成绩输出在页面上。
var arr = [1,2,32,543,65,35,35,654,46,31];
for(var i = 0 ;i<arr.length;i++){
if(i==arr.length-1){
document.write(arr[i] );
}else{
document.write(arr[i] + ',');
}
}
document.write("<hr>");
//将10个学生的全部信息(id name age sex)输出在页面上。
//传统的思路:定义40个变量 或者4个数组 或者二维数组等等
//按照对象的思想:10个学生理解10个对象 将10个对象放在一个数组里面即可
var s1 = {id:1001,name:"张三1" , age:18};
var s2 = {id:1002,name:"张三2" , age:18};
var s3 = {id:1003,name:"张三3" , age:18};
var s4 = {id:1004,name:"张三4" , age:18};
var s5 = {id:1005,name:"张三5" , age:18};
var s6 = {id:1006,name:"张三76" , age:18};
var s7 = {id:1007,name:"张三7" , age:18};
var s8 = {id:1008,name:"张三8" , age:18};
var s9 = {id:1008,name:"张三9" , age:18};
var s10 = {
id :10010,
name:"张三",
age:20,
};
var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i] );
// }else{
// document.write(arr[i] + ',');
// }
// }
//注意:上述写法 打印的仅仅是外观的Object而非内部的属性。
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }else{
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }
// }
//以上写法较为麻烦
for(var i = 0 ;i<arr.length;i++){
for(var sx in arr[i]){
document.write(arr[i][sx]);
}
document.write("<br>")
}
</script>
如何创建JS对象
//判断一个变量是否为对象的小技巧:通过console.log打印.
//如果打印的是一行字符串 就说明是基本数据类型
//如果打印的是一个可以折叠的数据 就表示对象
// var a = 11;
// console.log(a);
// var arr = [1,2,3,4];
// console.log(arr);
如何创建一个JS的对象:
方法1:
使用对象的字面量创建对象(理解为直接赋值)
例如:var arr = [1,2,3];,//静态声明数组 字面量创建
就是用大括号“{}”来标注对象成员,
每个对象成员使用键值对的形式保存,即 “key: value”的形式。
多个成员通过逗号隔开
键指的就是独一无二的属性
*/
// var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;
// //其中键可以选择性的加引号
// console.log(student1);
// //如何访问对象里面的值的方法1: 通过对象名.属性名即可
// console.log(student1.id + "~" + student1.name + "~" + student1.age );
// //如果存在一些命名不规范的变量 无法通过对象名.属性名访问
// // console.log(student1.sex-sex);这行代码是报错的
// //访问对象里面的值的方法2:通过对象名[属性名]
// console.log(student1['sex-sex']);
// console.log(student1['name']);
//创建对象的补充:
如果一开始只知道有对象,但是不知道它有什么属性或属性值,
//那么可以先创建一个空对象壳子
// var s123 = {};
// //后续再声明属性的同时进行赋值
// s123.id = 123;
// s123.name = "Lisi";
// s123.age = "男";
// console.log(s123.id);//123
// console.log(s123.dasd);//undefined
//创建对象的方法2:
第一步:创建对象的函数(想象成Java的构造函数)
// function Person(id,name,age){
// this.id = id;
// this.name = name;
// this.age = age;
// }
// //第二步:new对象
// var p1 = new Person(123,"王五" , 20);
// console.log(p1);
//使用场景:如果对象很多 就用方法2 反之方法1
//补充:对象由:属性和方法
// var s1 = {
// id :11,
// name:"张三",
// age :18,
// study : function(){
// alert("成功调用了这个对象的这个方法");
// }
// };
// alert(s1.id);
// s1.study();
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
this.eat = function(){
alert("我吃拉面");
}
}
//第二步:new对象
var p1 = new Person(123,"王五" , 20);
p1.eat();
//创建对象的方法3:
/如果谁不知道给对象取什么名字,就叫做Object
var o = new Object();
o.id=1231;
o.name="李四";
console.log(o);
如何遍历一个对象
// var arr = [1,2,4,3];
// console.log(arr);
var s10 = {
id :10010,
name:"张三",
age:20,
sex:'男',
height : 188,
weight :200
};
// console.log(s10);
//由于直接输出s10将只会显示object我们需要内部的属性值/
//方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
//方法2:如果所有的属性值都需要,那么也可以通过s10.属性名 只是比较麻烦.
//学习:如何遍历对象:语法如下:
// for(var i = 0;i<a10.length;i++){
// //错误的写法:1.对象的键并不是012 其次对象并没有长度
// }
//i表示对象的下标(属性) s10表示遍历的对象
for(var i in s10){
console.log(s10[i]);
}
值对象和引用对象
//JS的参数传递 也分为值传递和引用传递
var a = 111;
var b = "你好";
var c = true;
var d = [1,2,3];
function change(a,b,c,d){
a = 222;
b = "我好";
c = false;
d[0] = 123;
}
change(a,b,c,d);
console.log(a);//111
console.log(b);//你好
console.log(c);//true
console.log(d[0]);//123