我是靠谱客的博主 安静音响，最近开发中收集的这篇文章主要介绍JS基础语法（二）——数组文章目录前言一、数组是什么？二、数组常用方法三、数组 函数 与 对象四、常用字符串方法String;总结，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
文章目录
目录
文章目录
前言
一、数组是什么？
1.1数组字面量创建数组方式：
二、数组常用方法
2.1、四个操作移动数组元素方法——pop push shift unshift
2.2 遍历数组
2.3、数组的切分——slice()与splice()
练习slice——数组去重练习
2.4 数组其他常用方法——concat join reverse sort
三、数组 函数 与 对象
3.1 函数bind call apply 的 区分
3.2 类数组对象 arguments
3.3 date对象
3.4 math对象
3.5 包装类：
四、常用字符串方法String;
总结
前言
JS的数据结构虽然和其他编程语言一样 都有链表 栈 二叉树 等结构，但是底层只存在数组一个存储结构，而其他的数据结构都是由数组搭配自己写或者底层已经实现的API去组合构成其他数据结构。
所以学好JS的数组结构，对于掌握JS的所有其他数据结构也至关重要。
一、数组是什么？
<title>数组</title>
<script type="text/javascript">
//数组array -数组显然是一个对象，也是用来存储一些值的
//不同的是普通对象是使用字符串来作为属性名的，而数组是使用数字作为索引(index)操作元素。
//数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储数据
var arr = new Array();
console.log(arr);
console.log(typeof arr);
//接下来向数组中添加元素
arr[0] = 10;
console.log(arr);
arr[1] = 20 ;
console.log(arr[1]);
console.log(arr[3]);//读取不存在的不报错 返回undefined、
//如何获取数组的长度？
console.log(arr.length);//对于连续的数组 使用length可以获取长度。
//对于非连续的数组 会返回最大的数值+1的数量。
arr[9] = 90 ;
console.log(arr);//虽然其他的没用上 但仍然为长度开辟了空间，占用内存 故尽量不使用非连续的数组。
arr.length = 3;
console.log(arr);//修改的长度小于原长，多出的元素会被删除。 大于原长 会开辟空的空间。
//使用下面这个式子可以始终向数组的最后一位添加一个数值
arr[arr.length] = 70 ;
console.log(arr);
arr[arr.length] = 80 ;
console.log(arr);
arr[arr.length] = 90 ;
console.log(arr);
</script>1.1数组字面量创建数组方式：
<title></title>
<script type="text/javascript">
//创建一个数组
var arr = new Array ();
arr[0] = 123;
arr.hello = "abc";
//和创建对象一样 可以使用创建字面量的方式来创建数组 可以在创建时就指定数组中的元素
var arr = [1,23,44,5,66,777];
//等价于下面的式子
var arr2 = new Array (1,23,44,5,66,777);
console.log(arr);
console.log(arr2);
console.log(arr == arr2 );
//下面只传一个整数值的时候二者有区别
arr = [10];//向数组arr里面传入一个数值 令arr[0]=10
arr2 = new Array(10);//申请一个10个位置的空数组 没有赋值
console.log(arr);
console.log(arr2);
console.log(arr2.length);
//注意数组中的元素可以是任意的数据类型
arr3 = ["hello",1,true,null,undefined];
console.log(arr3);
//当然也可以是一个对象、函数等
var obj1 = {name:"mqy"};
arr3[arr3.length] = obj1 ;
console.log(arr3);
console.log(arr3[5]);
console.log(arr3[5].name);
//也可以让每个元素是一个数组
arr4 = [[1,2,3],[2,3,4],[3,4,5],[4,5,6]];
console.log(arr4[1]);
console.log(arr4[2][2]);//第三个元素指向的数组里的第三个元素。
</script>二、数组常用方法
2.1、四个操作移动数组元素方法——pop push shift unshift
<title>数组常用的四个方法</title>
<script type="text/javascript">
//先创建一个数组
var arr = ["mqy","pzk","wxy"];
//push方法：向数组的末尾添加一个或多个元素，并返回数组的新的长度。
//可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾。
arr.push("hc","yyy");
console.log(arr);
var result = arr.push("xx","hzl");
console.log("result = "+result);//可见该方法将数组添加后的新的数组长度作为返回值传递。
//pop方法 删除数组的最后一个元素
console.log(arr);
var result2 = arr.pop();//再来看看返回值是
console.log(arr);
console.log(result2);//可以看到将删除掉的值作为返回值传递。
//unshift 向数组的开头添加一个或多个元素 并返回新的数组长度
arr.unshift("zxr");
console.log(arr);
arr.unshift("fy","wsl");
console.log(arr);
var result3 = arr.unshift("ddw");
console.log(result3);
//shift 可以删除数组的第一个元素 并将删除的元素作为返回值返回 此处不做演示。
</script>2.2 遍历数组
<title></title>
<script type="text/javascript">
var arr5 = ["mqy","pzk","wxy","kyx","rlk","sxl"];//遍历数组就是将数组中的元素都取出来
//一般是 console。log name[0][1][2]等
for (var i = 0;i<arr5.length;i++){
console.log(arr5[i]);
}//下面是个可以遍历数组的foreach方法
arr5.forEach(function(value,index,obj){
console.log("value ="+value);
console.log("index="+index);
console.log("obj="+obj);
});//支持ie9以上和其他浏览器。需要一个函数作为参数传递
//里面的由我们创建但是不由我们调用的函数称为回调函数
//数组里包含几个元素 就会执行函数几次.每次执行便将其中一个元素作为实参传入并执行。
//传入的第二个参数指向索引
//第三个参数指向整个数组对象 可以当作数组调用。
//第四个参数undefined 故浏览器向整个函数传入3个参数
//但是一般需要兼容ie8 不用这个方法
</script>2.3、数组的切分——slice()与splice()
<title>slice 和 splice</title>
<script type="text/javascript">
var arr = ["mqy","pzk","wxy","wsl"];
//slice从某个已有的数组提取指定的元素
//参数一 截取开始位置索引（包含开始 参数二 截取结束位置索引（不包含结尾
//该方法不会改变原数组 而是将截取到的元素作为返回值返回到新数组中
var result = arr.slice(0,2);//若不写第二个元素 则从开始索引一直截取到最后 （第一个元素是必需的
console.log(typeof result);
console.log(result);
console.log(arr);//也可以赋第二个元素为负 -1则删去倒数第一个 -2删去倒数第二个
var result2 = arr.slice(0,-1);
var result3 = arr.slice(0,-2);
console.log(result2);
console.log(result3);
//splice 删除元素并向数组添加新元素 _!会影响到原数组 并将指定元素从原数组中删除
//并将删除掉的元素返回 第一个参数表示开始位置的索引 第二个参数表示删除的数量。
//第三个及以后可以往里面添加元素替换开始索引的元素
arr.splice(1,2,"毛皮","马皮");
console.log(arr);
</script>练习slice——数组去重练习
<title>数组去重练习</title>
<script type="text/javascript">
var arr = [1,2,3,3,5,2,2,3,4,5,6,1,3,4,2,5,5,5];
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所在位置
j--;
}
}
}
console.log(arr);
</script>2.4 数组其他常用方法——concat join reverse sort
<title></title>
<script type="text/javascript">
var arr = ["珈乐","嘉然","贝拉"];
var arr2 = ["文静","七海","阿梓"];
var arr3 = ["兰音","花灯","向晚","乃琳"];
//concat()连接两个或者更多的数组并将新数组返回
var arr10 = arr.concat(arr2);//该方法不对原数组产生影响.
console.log(arr10);
var arr9 = arr.concat(arr2,arr3,"毛庆逸","潘政科");
console.log(arr9);
//join()该方法可以将数组转换成字符串
//不对原数组产生影响 将字符串返回值返回
resu = arr.join("♥");//可以在其中传入一个字符串作为参数 成为各个元素的连接符
console.log(resu);
console.log(typeof resu);
//reverse 方法：用来反转数组
//该方法会直接修改原数组。
console.log(arr3);
arr3.reverse();
console.log(arr3);
//sort 方法 对数组中的元素进行排序
arr4 = ["b","d","e","a","c","f","g"];
arr4.sort();//会影响原数组，默认会按照Unicode编码进行排序
console.log(arr4);
arr5 = [5,1,3,16,4,8,29,5];
arr5.sort();//会影响原数组，默认会按照Unicode编码进行排序
console.log(arr5);//即使对于纯数字的数组，只按照Unicode编码 按位数逐位比较
//若想准确的对数字排序 可以按照下列方式添加回调函数来指定排序规则
//回调函数中需要定义两个形参 分别使用数组中的元素作为实参来调用回调函数
arr6 = [4,5];
arr6.sort(function(a,b){
// if(a > b){
// return 1 ;
// }
// else if (a < b){
// return -1 ;
// }else{
// return 0;}
return b-a ;//降序排列 反之 return a-b 升序
//返回负值则保持不变 返回正值则交换次序
});
console.log(arr6)
</script>三、数组 函数 与 对象
3.1 函数bind call apply 的 区分：
<title>call and apply</title>
<script type="text/javascript">//这些都是函数对象的方法，需要通过函数对象来调用。
function fun (){
console.log(this.name);
}
var obj1 = {name : "mmqqyy",
sayName:function(){
console.log(this.name);
}};
var obj2 = {name : "ppzzkk",
sayName:function(){
console.log(this.name);
}};
fun.call(obj1);//三个都是调用一次函数并执行
fun.apply(obj2);//在调用call和apply时可以将一个对象指定为第一个参数，此时这个参数成为函数执行时的this
fun(obj1);//这个就不能指定对象传入 而只是作为一个普通的实参（在这里完全没用 this仍然是window
obj1.sayName.apply(obj2);//此时this指的是obj2
obj1.sayName();//此时this就是外面的obj1了
//特别地，call方法可以将实参在对象之后逗号隔开现在方法里传入实参以执行函数
//而对于apply 需要将实参封装到一个数组中统一传递。
//fun.call(obj,2,3) 等价于 fun.apply(obj,[2,3]);
//总结一下this 的情况：1、以函数的形式调用时，this永远都是window
//2、以方法的形式调用时，this是调用方法的对象
//3、以构造函数的形式调用时，this是新创建的对象
//4、使用call和apply 调用时，this是指定的那个对象。
</script>关于call、apply、bind函数，它们主要用来改变this指向的，在很多框架中常有用到，而且也是面试官喜欢问到的问题：多数会问道三者的区别， 以及手动实现它们。
call:
调用fn.call时会将fn中的this指向修改为传入的第一个参数thisArg；将后面的参数传入给fn,并立即执行函数fn。
apply:
fn.apply的作用和call相同：修改this指向，并立即执行fn。区别在于传参形式不同，apply接受两个参数，第一个参数是要指向的this对象，第二个参数是一个数组，数组里面的元素会被展开传入fn,作为fn的参数。
bind:
fn.bind的作用是只修改this指向，但不会立即执行fn；会返回一个修改了this指向后的fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()。bind的传参和call相同。
相同点：
- 三个函数的作用都是改变this指向；
- 接收第一个参数都是this指向的对象；
- 都可以用后续参数传参。
不同点：
- call和bind传参相同，多个参数依次传入的；
- apply只有两个参数，第二个参数为数组；
- call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。
3.2 类数组对象 arguments
<title>arguments</title>
<script type="text/javascript">
//调用函数时，浏览器不仅传递了this隐含参数（上下文对象
//还传入了——封装实参的对象 arguments。--这是一个类数组对象 可以通过索引操作数据 获取长度
//在调用函数时 我们传递进的实参 都会作为arguments 的元素保存
function fun(){
console.log(arguments);
console.log(arguments instanceof Array);//检查是不是数组
console.log(Array.isArray(arguments));//检查是不是数组
console.log(arguments.length);
}
fun();
function fun1(){
console.log(arguments);
console.log(arguments instanceof Array);//检查是不是数组
console.log(Array.isArray(arguments));//检查是不是数组
console.log(arguments.length);
console.log(arguments[1]);
console.log(arguments[2]);//即使没有定义形参 也可以通过arguments来使用实参
console.log(arguments.callee);//callee属性对应一个当前正在执行的函数对象。
}
fun1("name","age","false");
</script>3.3 date对象
<title>date</title>
<script type="text/javascript">
//js中使用date对象来表示一个时间
var d = new Date();
console.log(d);//直接创建则会封上当前对象当前这一行代码的执行时间
//下面要创建一个指定的时间对象 需要在构造函数中传递一个表示时间的字符串作为参数
var d2 = new Date ("12/03/2022 11:10:30");
console.log(d2); //这就是指定时间的方式 月 日 年 时分秒
//getDate 获取当前日期对象是几日
var date = d2.getDate();
console.log(date);
var day = d2.getDay();//周几 注意周日是返回0 周一返回1
console.log(day);
var month = d2.getMonth();
console.log(month);//获取当前时间对象的月份-1 即0--1月 1 --2月 11--12月
//后面还有getFullyear 等各种获取的方法 此处省略
//gettime 获取当前时间的时间戳
var time = d.getTime();//
console.log(time);//时间戳：从格林威治时间1970年一月一日0：00：00到此时此刻所花的毫秒数。
//时间戳也是计算机底层保存时间的方式 同时在底层也有除法进行进制转换的过程。
//注意我们写的是中国时间 与格林威治时间有八小时时差。
//获取当前代码执行的时间戳
var start = Date.now();
for(var i=0;i<100;i++){
console.log(i);
}
var end = Date.now();
console.log(end-start);
</script>3.4 math对象
<title>math</title>
<script type="text/javascript">
//math属于一个工具类对象 里面封装了数学运算相关的属性方法 不用创建对象来接收 直接使用即可
console.log(Math.PI);//Π
console.log(Math.E);//e
console.log(Math.LN2);//ln2
console.log(Math.abs(-12));//绝对值
//还有sin cos tan pow min max floor exp 等 此处举例几个常用到的
//ceil 上舍入/向上取整 floor 向下取整 round 四舍五入
console.log(Math.ceil(1.1));
console.log(Math.floor(1.9));
console.log(Math.round(1.49));
console.log(Math.round(1.50));
for(var i = 1 ; i<10 ; i++){
console.log(Math.random());//生成一个0——1之间的随机数
}
//那么如何生成一个0——10呢
console.log(Math.random()*10);
console.log(Math.round(Math.random()*8) + 2);//如果要一个2—10的随机数呢
//a-b 即上式 b-a + a
var max = Math.max(10,123,1512,1351,524,4124);
console.log(max);//同样地，有math.min 省略
//sqrt开方 pow（x,y）x的y次方。
</script>3.5 包装类：
在js中提供了三个包装类 可以将基本数据类型转换为对象
<title>包装类</title>
<script type="text/javascript">
//在js中提供了三个包装类 可以将基本数据类型转换为对象
var a = 123 ;
console.log(typeof a);
/*string ()可以将基本数据类型字符串转换为string对象
number（）可以将基本数据类型数字转换为number对象
Boolean（）可以将基本数据类型布尔值转换为Boolean对象*/
var num1 = new Number(3);
console.log(num1);
console.log(typeof num1);
var str = new String("hello!");
console.log(str);
console.log(typeof str);
var bool = new Boolean(true);
console.log(bool);
//优点在于改为对象之后功能更加强大 可以向其中添加属性 以做更多的事情
//缺点在于改为对象之后 两个对象比较地址 number和string 即使一样也很难比较相同
//由于上面你的缺点 我们在开发中完全不会使用基本数据类型的对象 问题很多。
//我们可以用string字符串来调用string对象的方法 因为在计算机底层会临时将其通过上面的方法
</script>四、常用字符串方法String;
<title>String 方法</title>
<script type="text/javascript">
var str = "hello world";
//底层的字符串是以字符数组的形式保存的 ["h""e"----]
//故可以用类似操作数组的方法来操作字符串
console.log(str.length);//属性 获取字符串长度
console.log(str[4]);console.log(str[5]);
//charAt()返回指定位置的字符 ——不会对原字符串产生影响
var result = str.charAt(8);//右边式子等价于str[8]；
console.log(result);
//charCodeAt （）返回指定字符的Unicode编码
var uni = str.charCodeAt(3);
console.log(uni);
//fromCharCode()可以根据字符编码去获取字符
result2 = String.fromCharCode(72);
result3 = String.fromCharCode(0x2692);
console.log(result2);
console.log(result3);
//concat-可以用来连接两个或多个字符串
re = str.concat("你好！");
console.log(re);//不对原字符串产生影响 返回新的
//indexof() 检索一个字符串中是否含有指定内容 如果含有改内容 则返回第一次出现的索引位置
var strr = "interesting";
reee = strr.indexOf("i");//可以第二个参数传入数字指定开始查找的位置（若返回-1则没找到
console.log(reee);
reee2 = strr.indexOf("i",5);
console.log(reee2);
//lastIndexOf()；该方法与上面的基本相同 从后往前找所需要的字符然后返回索引的位置 同样地，它也可以指定一个索引的位置然后从后往前找
//示例省略
//slice()；从字符串中截取指定的内容
srrr = "abcdefghijkl";
reer = srrr.slice(1,5);//开始位置索引包括 结束位置索引不包括 ，可以省略结束位置索引 则截取所有后面的
console.log(reer);
reer2 = srrr.slice(2,-3);//当然也可以从后往前截 第二个参数传入一个负数
console.log(reer2);
//substring 可以用来截取一个字符串 与slice 类似 第一个参数开始位置 包括 第二个参数结束位置 不包括
//substring和slice 的小区别：substring第二个参数传入负数默认改为0 而且如果数字不能截到有效字符串 则会交换两数的位置后 再返回。
//substr() 截取字符串 第一个参数开始索引 第二个参数指定索引数量！！！ 注意！ECMAscript中没有对该方法标准化，因此虽然浏览器支持，但是反对使用它！！！
//split()；将一个字符串拆分成一个数组 需要传入一个字符串参数作为分隔符
str = "abc+bcd+cde+def";
result = str.split("+");//如果传递一个空字符 则会将整个字符串全部分割为单个字符。
console.log(result);
console.log(Array.isArray(result));
console.log(result.length);
console.log(result[1]);
//toLowercase 将字符串转换为小写 toUppercase 将字符串转换为大写并返回
result = str.toUpperCase();
console.log(result);
</script>总结
以上就是这次记录的内容，本文仅简单介绍了数组的使用，奠定扎实基础； 后面会JS进阶和算法使用将会学习对数组更加灵活的操作。
最后
以上就是安静音响为你收集整理的JS基础语法（二）——数组文章目录前言一、数组是什么？二、数组常用方法三、数组 函数 与 对象四、常用字符串方法String;总结的全部内容，希望文章能够帮你解决JS基础语法（二）——数组文章目录前言一、数组是什么？二、数组常用方法三、数组 函数 与 对象四、常用字符串方法String;总结所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复