数组的用法

数组

一、数组的创建

1.1、数组的概念

数组是一个有序的数据集合，是一组数据的集合，数组里面可以放任意的数据类型

1.2、数组字面量

变量arr就是一个数组变量，里面存储的不是一个数字，而是一组数，可以使用下标，或者索引值index来访问数组中的某一个项，下标从0开始

 var arr=[1,2,3,4];
       console.log(arr[0]); //1
       console.log(arr[1]); //2

var arr=[1,'哈哈',true,undefined] 
    console.log(arr);   //[1, "哈哈", true, undefined]

注意事项：最后一个分号不要加，不然IE8及以下会多一个undefined的值

1.3、构造函数的创建数组

//创建一个空数组
var arr=new Array(); //创建一个空数组
console.log(arr);  

//创建指定项的数组
var arr=new Array(6); //创建一个空数组
console.log(arr);  //(6) [empty × 6]

//创建有具体内容的数组
var arr=new Array('world','banner','apple');
    console.log(arr); //(3) ["world", "banner", "apple"]

//()里传入数字就是数组的项数，传入其他类型，就是数组的具体内容
var arr=new Array(2);  //(2) [empty × 2]
var arr=new Array('2'); //['2']

//new也可以不写
var arr=Array(2);

1.4、数组的数据类型(引用数据类型)

数组是引用数据类型，操作数组时实际是在操作数组的内存地址

数组是由字符串属性名和属性值组成的特殊对象，我们把数组的属性名叫做数组的索引

var arr=[1,2,3,4];
console.log(arr); //object

数组是对象，保存数组的变量，实际上是保存数组的内存地址：

var a=[1,2,3,4];
var b=a;  //b=[1,2,3,4]
b[0]=88;   //b=[88,2,3,4]  修改的是数组b下标为0的项
console.log(a);  //数组a的下标为0的项也改为88
//[88,2,3,4]

引用类型比较的是地址，变量a和变量b指向的位置不一样，不能判相等

如果a里面存储的是基本类型，那么语句b=a就是把a的值赋值给b一份，如果a里存储的是引用类型，那么b将指向a现在指向的位置，a的值就不会赋值一份，a,b指向同一个地方

var a=[1,2,3];
var b=[1,2,3];
console.log(a==b);  //flase

二、数组的属性

数组有一个属性，就是length，表示这个数组的项的个数

arr.length：用点来表示一个对象的属性

var arr=[1,2,3,4,5];
console.log(arr); //5 数组的长度为5

数组最后一项的下标是length-1。数组的下标是从0开始的，所有数组的最大下标为arr.length-1

比length-1还大的下标，是undefined

改变数组length长度，就会改变数组

写一个小于数组元素数量的值会缩短数组，写0会彻底清空数组

三、数组的遍历

for(var i=0;i<arr.length;i++){}

for(var i in 数组名称){}

四、数组常用的方法

数组是对象，对象都有属性和方法

属性是描述对象的特点，例如：length属性,比如’性别‘，’姓名‘

方法是对象能够执行的事情，比如’吃饭’,‘睡觉’

4.1、数组的头尾操作push(),pop(),shift(),unshift()

unshift()头插

shift()头删

push()尾插

pop()尾删

(1)、push()方法

在数组的后面添加一个或者多个数据，在数组的末尾添加项，可以添加一个，也可以多个

整体返回：返回push结束后字符串的长度，length值

是否改变原数组：改变原数组

 		var arr=[1,5,6];
    arr.push(2);
    console.log(arr); //(4) [1, 5, 6, 2]


		var arr=[1,5,6];
    var res=arr.push(2);
    console.log(arr); //(4) [1, 5, 6, 2]
    console.log(res); //4

(2)、pop()方法

删除数组最后一个数据，删除数组的最后一项，只能删除最后一项，无法删除多项，能够返回被删除的元素

整体返回：返回pop()删除的最后一项数据

是否改变原数组：改变原数组

var arr=[1,2,5,6];
        arr.pop();
        console.log(arr); //(3) [1, 2, 5]


 var arr=[1,2,5,6];
        var res=arr.pop();
        console.log(arr); //(3) [1, 2, 5]
        console.log(res); //6

(3)、unshift()方法

在数组的前面添加一个或者多个数据

整体返回：返回unshift()结束后字符串的长度，length值

是否改变原数组：改变原数组

       var arr=[1,2,3];
        arr.unshift(2);
        console.log(arr); //(4) [2, 1, 2, 3]
        
           var arr=[1,2,3];
        var res=arr.unshift(2);
        console.log(arr); //(4) [2, 1, 2, 3]
        console.log(res); //4

(4)、shift()方法

删除数组的第一个数据

整体返回：返回shift()删除的第一项数据

是否改变原数组：改变原数组

 var arr=[1,2,3];
        arr.shift();
        console.log(arr); //(2) [2, 3]

var arr=[1,2,3];
        var res=arr.shift();
        console.log(arr); //(2) [2, 3]
        console.log(res); //1

4.2、concat()

数字的合并，合并两个数组，在原有数组的最后面添加任意数据类型的值

整体返回：返回拼接后的新数组

是否改变原数组：不改变原数组

			 var arr1=[1,2,3];
        var arr2=[4,5,6];
        var res=arr1.concat(arr2);
        console.log(res); //(6) [1, 2, 3, 4, 5, 6] concat是把arr1和arr2合并为一个新数组返回，所以要有一个变量接收
        console.log(arr1,arr2);  //(3) [1, 2, 3] (3) [4, 5, 6]  不改变原数组

  var arr1=[1,2,3];
  var arr2=[4,5,6];
  var res=arr1.concat(arr2,[7,8],9);  //concat可接收多个参数
  console.log(res); //(9) [1, 2, 3, 4, 5, 6, 7, 8, 9] concat是把arr1和arr2合并为一个新数组返回，所以要有一个变量接收

4.3、数组截取的方法

(1)、slice()截取方法

从已有的数组中返回选定的元素

arr.slice(start[,end]);

第一个参数：截取数组开始的下标

第二个参数：截取数组结束时的下标，截取的数组不包含这个下标对应的内容

如果end参数省略，将截取从start开始的剩余所有内容

整体返回：返回截取后的新数组

是否改变原数组：不改变原数组

arr.slice(start,end)返回一个新的数组，包含从start到end（不包含该元素）的元素

利用slice可以克隆一份数组

arr.slice(0);

slice()是基于当前数组创建新的数组，只有一个参数的时候，表示返回从该参数位置开始到数组末尾所有的项组成的新数组，两个参数的时候，返回第一个参数开始到第二个参数结束位置的项组成的新数组，不包含结束项，如果参数为空，返回数组所有的项组成的新数组

参数可以为负数，负数表示数组长度加上负数，比如数组长度为5，那么arr.slice(-3,-1)等同与arr.slice(2,4)，如果第二个参数比第一个参数小，返回空数组

        //有一个参数
        var arr=[1,2,3,4,5];
        var res=arr.slice(1) //从下标为1开始截取，截取到最后
        console.log(res); //(4) [2, 3, 4, 5]

        //有两个参数
        var arr=[1,2,3,4,5];
        var res=arr.slice(0,3) //从下标为0开始截取，截取下标为3的数组，包含0当不包含3
        console.log(res); //(3) [1, 2, 3]

        //参数为负数
        var arr=[1,2,3,4,5];
        var res=arr.slice(-3,-1) //从下标为2开始截取，截取下标为4的数组，包含2当不包含4
        console.log(res); //(2) [3, 4]

        //参数为空
        var arr=[1,2,3,4,5];
        var res=arr.slice() //从下标为2开始截取，截取下标为4的数组，包含2当不包含4
        console.log(res); //(5) [1, 2, 3, 4, 5]

(2)、splice()

splice()可以截取，插入，替换

arr.splice(index,count[,item[,item2…]])

index为arr下标

count是截取的数量（如果这项省略，代表从下标一直截取到最后

item，item2是截取完成后，向数组中插入的内容

整体返回：返回截取数组，如果截取为空，则返回数组

是否改变原数组：改变原数组

//截取(不插入替换内容就是截取)
        var arr=[1,2,3,4,5];
        var res=arr.splice(2,2); //从下标为2开始截取，截取2项
        console.log(res); //(2) [3, 4]

        //插入(截取的项为0，代表不截取内容，只插入内容)
        var arr=[1,2,3,4,5];
        arr.splice(2,0,"你好"); //从下标为2开始截取，在第2项之前插入'你好'
        console.log(arr); //(2) [3, 4]

         //替换
        var arr=[1,2,3,4,5];
        arr.splice(2,3,"你好","world"); //从下标为2开始截取，截取3项，并插入你好，world内容
        console.log(arr); //(4) [1, 2, "你好", "world"]

4.4、reverse();

反方向方法

把原来数组中的每一个数据颠倒顺序排列，让数组倒置

无序传参数

整体返回：返回翻转后的数组

是否改变原数组：改变原数组

 var arr=[1,2,3,4,5];
        arr.reverse();
        console.log(arr); //(5) [5, 4, 3, 2, 1]

4.5、sort()排序方法

把数组的每一个数据按照一定顺序排列

不传参数就默认排序，可以传一个函数作为一个参数。自定义排序规则

整体返回：返回排序的数组

是否改变原数组：改变原数组

				var arr=[1,6,4,7,4,8,0,2];
        arr.sort();
        console.log(arr); //(8) [0, 1, 2, 4, 4, 6, 7, 8]


				//sort函数默认是按照字符顺序排的，隐式将数字转为string
        //比字符编码顺序
        var arr = [23,435,456,23,2,345,2,32,11,324,32,43,65,667,78,43];
        arr.sort();
        console.log(arr); //(16) [11, 2, 2, 23, 23, 32, 32, 324, 345, 43, 43, 435, 456, 65, 667, 78]



	     //sort()里面有一个参数，这个参数是一个函数。必须由两个参数a，b;
			//当return的值是正数时，a和b颠倒位置，为负数时，a和b不颠倒位置
        var arr=[2,3,57,10,12,34];
        arr.sort(function(a,b){
            return a-b;  //[2, 3, 10, 12, 34, 57]  让数组按照数字从小到大排列
             return b-a; //[57, 34, 12, 10, 3, 2]  让数组按照数字从大到小排列
        })
        console.log(arr); 

4.6、join()方法

数组拼接字符串

把数组中的逗号用指定的字符串代替

按照join()传入的字符将数组的每一项进行字符串拼接

整体返回：返回拼接后的新字符串

是否改变原数组：改变原数组

 //如果括号里不写分隔符，等价于用逗号
        var arr=[1,2,3,4,5];
        var res=arr.join();
        console.log(res); //1,2,3,4,5


var arr=[1,2,3,4,5];
        var res=arr.join('/');
        console.log(res); //1/2/3/4/5

4.7、数组查询位置方法

(1)、indexOf()方法

从前向后检测数组中的某个数据第一次出现的下标

如果数组里面有这个数据，arr.indexOf()的结果是对应数据的索引值

如果没有这个数据，arr.indexOf()的结果为-1

接受两个参数:

1.第一个参数为要查询的项

2.第二个参数是可选的，表示从哪里开始查找，如果省略，则表示从头开始查找

var arr=[1,2,3,4];
        console.log(arr.indexOf(1)); //0 返回下标

(2)、lastIndexOf()

从后先前检测数组中某个数据第一次出现的索引值

如果数组里面有这个数据，arr.lastIndexOf()的结果是对应数据的索引值

如果没有这个数据，arr.lastIndexOf()的结果为-1

接受两个参数

第一个参数为要查询的项

第二个参数为可选的，表示从哪里开始向前查找，如果省略，则表示最后开始查找

4.8、isArray(arr)

判断arr是不是数组

如果arr是数组，那么Array.isArray(arr)的结果为true

如果arr不是数组，那么Array.isArray(arr)的结果为false

---

ES6语法

4.9、Number.parseInt()、Number.parseFloat()

ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变

         // ES5的写法
        console.log( parseInt('12.34') );// 12
         console.log(parseFloat('123.45#')); // 123.45

         // ES6的写法
         console.log(Number.parseInt('12.34') )// 12
         console.log(Number.parseFloat('123.45#')); // 123.45

5.0、Number.isFinite()、Number.isNaN()

Number.isFinite()：用来检查一个数值是否为有限的（finite）

是数字就返回true，不是就返回false，不会进行转换，NaN，‘3’都是false

let a = 33;
let b = true;
let c = '3';
let d = 12.3;
console.log(Number.isFinite(a));   // true
console.log(Number.isFinite(b));   // false
console.log(Number.isFinite(c));   // false
console.log(Number.isFinite(d));   // true

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false

Number.isNaN()：用来检查一个值是否为NaN，和全局函数isNaN()相比，该方法不会强制将参数转换为数字，只有在参数是真正的数字类型，且值为NaN的时候才会返回true

Number.isNaN(NaN);        // true
Number.isNaN(Number.NaN); // true
Number.isNaN(0 / 0)       // true

// 下面这几个如果使用全局的 isNaN() 时，会返回 true。
Number.isNaN("NaN");      // false，字符串 "NaN" 不会被隐式转换成数字 NaN。
Number.isNaN(undefined);  // false
Number.isNaN({});         // false
Number.isNaN("blabla");   // false

// 下面的都返回 false
Number.isNaN(true);
Number.isNaN(null);
Number.isNaN(37);
Number.isNaN("37");
Number.isNaN("37.37");
Number.isNaN("");
Number.isNaN(" ");

5.1、Number.isInteger()

Number.isInteger()用来判断一个值是否为整数。需要注意的是，在 JavaScript 内部，整数和浮点数是同样的储存方法，所以 3 和 3.0 被视为同一个值。就是你肉眼看,是整数就是true,不是就是false,不会进行类型转换

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

5.2、for…of循环

一个数据结构只要部署了Symbol.iterator属性，就视为具有iteratior接口，就可以使用for...of循环遍历它的成员，也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法

arr.keys()数组下标集合

arr.values()数组值集合

arr.entries()数组的每一项的集合

entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

      let arr=['apple','banner','pear'];
      for(let val of arr){
         console.log(val);
      }

      //arr.keys()就是arr数组索引的集合
      for(let index of arr.keys()){
         console.log(index);
      }

      for(let item of arr.entries()){
         console.log(item);
      }
      //item是由数组的下标和值组成的数组
      for(let [key2,val2] of arr.entries()){
         console.log(key2,val2);
      }

      for(let key of arr.values()){
         console.log(key);
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hlLTAZVn-1635345387414)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930095847170.png)]

5.3、Array.form()

把类数组（获取一组元素，arguments）对象转为数组

参数：

1、第一个参数：一个类数组对象，用于转为真正的数组

2、第二个参数：类似于数组的map方法，用于对每个元素进行处理，将处理后的值放入返回的数组

3、第三个参数：如果map函数里面用到了this关键字，还可以传入Array.from的第三个属性，用来绑定this

只要类数组有length属性，就可以转为数组

     //arguments是类数组，将arguments转为数组
     function fn(){
        console.log(arguments);
        console.log(Array.from(arguments));
     }
     fn(1,2,3,4)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yz3aoCwd-1635345387418)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930102559904.png)]

         let str='hello';
         let arr=Array.from(str);
         console.log(arr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yMBWcZ5a-1635345387419)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930102800498.png)]

         let obj={
            0: 'a',
            1: 'b',
            2: 'c',
            length:3
         }
         console.log(obj);
         let arr=Array.from(obj);
         console.log(arr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSKgpTNr-1635345387421)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930103042280.png)]

5.4、Array.of()

把一组值转为数组。弥补了数组构造函数new Array()的不足，因为参数的个数不同，会导致Array()的行为有差异

         //ES5
         let arr2=new Array();
         console.log(arr2);

         let arr3=new Array(3);
         console.log(arr3);

         let arr4=new Array(1,2,3);
         console.log(arr4);
         
         //ES6
         let arr=Array.of('a','b','c');
         console.log(arr);

         let arr5=Array.of(3);
         console.log(arr5);

         let arr6=Array.of(3).length;
         console.log(arr6);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aDGiaFEm-1635345387422)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930104158177.png)]

5.5、arr.fill()

参数（需要填充的位置，填充开始的位置，填充结束的位置），填充内容不包括结束的位置

         let arr=new Array(10);
         arr.fill('默认值',1,3);
         console.log(arr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2osMAJiZ-1635345387422)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930110652199.png)]

5.6、 arr.includes()

查看数组中是否包含参数的值,返回布尔值

         var arr = ["apple" , "origan","banana"];
          var a = arr.includes("apple");
          console.log(a);   // true

          var b = arr.includes("apple2");
          console.log(b);   // false

5.7、数组的空位

数组的空位指，数组的某一个位置没有任何值。

注意，空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值，in运算符可以说明这一点。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。

• forEach(), filter(), reduce(), every() 和some()都会跳过空位。
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

ES6 则是明确将空位转为undefined。

Array.from方法会将数组的空位，转为undefined，也就是说，这个方法不会忽略空位。

         var arr=Array.from(['a',,'b']);
         console.log(arr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifzq6STM-1635345387423)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930115221618.png)]

扩展运算符（...）也会将空位转为undefined。

[...['a',,'b']]
// [ "a", undefined, "b" ]

fill()会将空位视为正常的数组位置。

new Array(3).fill('a') // ["a","a","a"]

for...of循环也会遍历空位。

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

上面代码中，数组arr有两个空位，for...of并没有忽略它们。如果改成map方法遍历，空位是会跳过的。

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0

由于空位的处理规则非常不统一，所以建议避免出现空位。

五、数组迭代方法

以下的方法接受的参数都是一样，接受两个参数

第一个：循环的回调函数

第二个：希望this指向谁，这个参数就用的谁

例如：

arr.forEach(function(){})//此时this指向的是window
arr.forEach(function(){},document) //此时this指向的是第二个参数document

5.1、forEach()方法

对数组中每一项都运行给定的函数，该方法没有返回值

不改变原数组

没有返回值

   //第一个参数为项，第二个为下标，第三个为arr整体
        var arr=[1,2,3];
        arr.forEach(function(item,index,arr){
            console.log(item); //1 2 3
            console.log(index); //0 1 2
            console.log(arr); //[1,2,3]
            console.log(item*2); //2 4 6
        })

（1）forEach的this指向

         let arr=['a','b','c'];
         arr.forEach(function(item,index,arr){
            console.log(item,index,arr);
            console.log(this); //此时的this是指向window
         })

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-877xu0Y1-1635345387424)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929202521774.png)]

         //传入了第二个参数，this就指向了第二个参数
         let arr=['a','b','c'];
         arr.forEach(function(item,index,arr){
            console.log(item,index,arr);
            console.log(this); //此时的this是指向document
         },document)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y6IcgyyE-1635345387425)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929202543383.png)]

         //如果使用箭头函数，this也会发生变化
         let arr=['a','b','c'];
         arr.forEach((item,index,arr)=>{
            console.log(item,index,arr);
            console.log(this); //此时的this是指向window
         },document)
         //箭头函数里面的this指向函数定义时的this

       var obj={
          name:function(){
            let arr=['a','b','c'];
            arr.forEach((item,index,arr)=>{
               console.log(item,index,arr);
               console.log(this); //此时的this是指向name方法前面的对象obj
            },document)
          }
       }
       obj.name();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFvaypZK-1635345387425)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929203439356.png)]

5.2、filter()方法

晒选，每一个项都运行给定的函数，返回函数，返回true的项组成的新数组

过滤一些不合格的元素，如果回调函数返回true，就留下来，添加到返回新的数组中，为false就过滤

不改变原数组

返回符合条件的新数组

  var arr=[1,2,3,4,5,6,7,8];
        var newArr=arr.filter(function(item,index,arr){
            return item>=4;
        })
        console.log(newArr); //(5) [4, 5, 6, 7, 8]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXLPN6Oh-1635345387426)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929205620457.png)]

filte方法去重

      var arr=[1,2,7,5,1,7,2,4];
      var newArr=arr.filter(function(item,index,arr){
         return arr.indexOf(item)==index;
      })
      console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ct23pwse-1635345387426)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930091546169.png)]

5.3、map()方法

数组的每一项都运行给定的函数，返回函数结果组成的新数组

map翻译过来就是地图（映射），正常情况下，需要配合return使用，如果没有return，这个就想当于forEach，所以使用map方法，一定要有return

不改变原数组

返回每一项处理后组成的新数组

      var arr=['a','b','c'];
      var newArr=arr.map(function(item,index,arr){
         return item
      })
      console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9KACRA6G-1635345387427)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929204622136.png)]

map可以重新整理我们的数据结构

      var arr=[
         {title:'童话',read:100},
         {title:'水浒',read:200},
         {title:'西游',read:300}
      ];
      var newArr=arr.map(function(item,index,arr){
         console.log(item);
         let json={}
         json.shop=`${item.title}`;
         json.price=`${item.read}元`;
         return json;
      })
      console.log(arr);
      console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pI3DL0fU-1635345387427)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929205304539.png)]

5.4、every()方法

判断数组的所有项是否符合要求，都符合要求才能返回true，一个为false，整体为false

数组中每一项都为true,才返回true ,只要有一项不符合条件都是false

不改变原数组

返回布尔值

      let arr=[1,3,5,7];
      let newArr=arr.every((item,index,arr)=>{
         return item%2==1;
      })
      console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OkEH63p9-1635345387428)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930091929329.png)]

5.5、some()方法

判断数组的任意一项是否符合要求，符合返回true，所有的都不符合，为false，整体为false

数组中只要有一项符合条件,那么就返回true,如果都是false 那结果就是false

不改变原数组

返回布尔值

   let arr=['a','b','c'];
   let newArr=arr.some((item,index,arr)=>{
      return item=='c';
   })
   console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qoKj7b5E-1635345387428)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930092115000.png)]

5.6、reduce()方法，reduceRight()方法

reduce()方法：从左往右计算

reduceRight()方法：从右往左计算

      let arr=[1,2,2,4,4,2,7,9,9];
      let res=arr.reduce((prev,cur,index,arr)=>{
         //prev是上一次运算结果，cur是当前的值，index是当前的下标，arr是当前的数组
         return prev+cur;
      })
      console.log(res);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beD7X189-1635345387429)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930093839570.png)]

数组去重

      let arr=[1,2,2,4,4,2,7,9,9];
      let res=arr.reduce((prev,cur,index,arr)=>{
         //prev是上一次运算结果，cur是当前的值，index是当前的下标，arr是当前的数组
         if(!prev.includes(cur)){
            prev.push(cur);
         }
         return prev;
      },[])
      console.log(res);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uzBW2XfR-1635345387429)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930093857065.png)]

5.7、arr.find()

查找第一个符合要求的数组成员，返回值，如果没有找到，则返回undefind

         var arr=[1,2,3,4,5,6];
         var newArr=arr.find((item,index,arr)=>{
            return item>1;
            // console.log(arguments);
         })
         console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-73DT7ZYv-1635345387430)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930104612936.png)]

5.8、arr.findIndex()

和find()很像，但是这里找的是位置，返回条件为真时的索引，没找到返回为-1

         let arr=[1,2,3,4,5];
         let newArr=arr.findIndex((item,index,arr)=>{
            return item>1;
         })
         console.log(newArr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZ7IOC4T-1635345387430)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210930105230308.png)]

六、ES6扩展运算符

6.1、扩展运算符

扩展运算符是三个点（…），将一个数组转为用逗号分隔的参数系列

         console.log(...[1,2,3]);
         console.log(1,...[2,3,4]);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GgzHLyzq-1635345387431)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929175819470.png)]

6.2、扩展运算符后可以为表达式

         let x=1;
         let arr=[
            ...(x>0?['a']:[]),'b'
         ]
         console.log(arr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aAiv9BYR-1635345387431)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929192552755.png)]

6.3、替代了apply方法

6.4、可以快速取出数组中的最大值

         //ES5写法
         console.log(Math.max.apply(null,[1,5,2,8]));

         //ES6写法
         console.log(Math.max(...[1,5,2,9]));

6.5、复制数组

        //ES5
        let a1 = [1, 2];
         let a2 = a1.concat();
         console.log(a2);
         
         //ES6
         let a1 = [1, 2];
         //写法一
         // let a2 = [...a1];
         //写法二
         let [...a2]=a1;
         console.log(a2);

6.7、合并数组

         let a=[1,2,3];
         let b=[4,5,6];
         let c=[7,8,9];

         //ES5
         console.log(a.concat(b,c));

         //ES6
         console.log([...a,...b,...c]);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI1d7k0x-1635345387432)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929194902273.png)]

6.8、与解构组合使用

         let [first,...last]=[1,2,3,4];
         console.log(first,last);

         let [first2,...last2]=[];
         console.log(first2,last2);

         let [first3,...last3]=[1];
         console.log(first3,last3);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Beu1SlpD-1635345387432)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929200311665.png)]

6.8、类数组转数组

扩展运算还可以将字符串转为真正的数组

         console.log([...'hello']);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YrhfVI08-1635345387433)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929200605455.png)]

字符串

一、字符串创建

1.1、字面量创建

字符串就是特殊的数组，因为都具有length属性，就可以像数组那样使用下标来换取字符

 var str='你好，吃饭了么';
 console.log(str);
console.log(str[0]);

二、字符串属性

字符串自带的length属性，属性length就是字符串的长度

中文，数字，英语字母，空格，都是1个长度，字符串的长度从0开始

var str='你好, 吃饭了么';
        console.log(str.length); //8

三、常见的方法

3.1、charAt()

返回在指定位置的字符

使用方法：str.charAt(index)

整体返回：返回查找到的字符

var str='你好, 吃饭了么';
        console.log(str.charAt(1));  //好  括号中传入字符的下标（索引），从0开始

这个获取字符和下标获取的区别在哪里？

1.charAt()当参数索引不在字符串中，是返回空字符串

2.中括号[]，当中括号内的索引不在字符串中，返回undefined，因为获取一个对象身上不具有属性时返回undefined，中括号就是对象表示法

var str='hello,world!';
        console.log(str.charAt(15)); //''
        console.log(str[15]);  //undefind

3.2、charCodeAt()

获取字符串中对应索引的字符编码

使用方法：str.charCodeAt(index)

整体返回：返回查询到字符的编码

0-9 ===> 48-57

A-Z ===> 65-90

a-z ===> 97-122

var str='hello,world!';
        console.log(str.charCodeAt(0)); // h ===> 104

3.3、formCharCode()

获取对应字符编码的字符

使用方法：String.formCharCode(字符编码)

整体返回：字符编码对应的字符

  var str=String.fromCharCode(97);
        console.log(str); //a

3.4、通过字符串查询索引

indexOf()和lastIndexOf():

第一个参数是需要查询的字符串

第二个参数是开始查询的索引

(1)、indexOf()

检查参数字符在字符串中的索引（下标）

字符串按从左到右找参数字符串，查到返回索引，查询不到返回-1

var str='hello,world!'; 
        console.log(str.indexOf('e'));  //1
        //第二个参数是开始查询的索引，从索引2的位置开始向后找o
        console.log(str.indexOf('o',2)); //4

(2)、lastIndexOf()

逆向获取字符在字符串中的位置

字符串按从右到左查找参数字符串，查询到返回索引，查询不到返回-1

var str='hello,world!'; 
        console.log(str.lastIndexOf('e'));  //1
        //第二个参数是开始查询的索引，从索引9的位置开始向前找o
        console.log(str.lastIndexOf('o',9)); //7

(3)、search()

获取字符在字符串中的位置

和indexOf结果一样

var str='hello,world!'; 
        console.log(str.search('e'));  //1
        //没有第二个参数

3.5、substr()

截取字符串

使用方法：str.substr(start[,num]);

第一个参数：从第几个字符开始截取，为字符索引（可以为负数）

第二个参数：是截取的个数，可以省略，如果省略，表示从第一个参数截取到最后

整体返回：返回截取的字符，不改变原字符串

  var str='hello,world!'; 
        console.log(str.substr(1,5));  //ello, 
        console.log(str.substr(2));  //llo,world!

3.6、substring()

截取字符串

使用方法：substring(start[,end]);

第一个参数：从第几字符开始截取，为字符索引，（如果为负数，截取全部字符）

第二个参数：是截取结束字符的索引，截取的字符串不包含end索引对应的字符，包含开始字符，不包含结束字符

整体返回：返回截取的字符，不改变原字符串

        var str='hello,world!'; 
        console.log(str.substring(1,5));  //ello
        console.log(str.substring(2));  //llo,world!

3.7、slice()

使用方法：str.slice(star[,end]);

第一个参数：从第几字符开始截取，为字符索引（如果为负数，截取全部字符）

第二个参数：是截取结束字符的索引，截取的字符串不包含end索引对应的字符，包含开始字符，不包含结束字符

整体返回：返回截取的字符，不改变原字符串

substring和slice的区别：

slice支持负数索引

str.slice(-3,-1)====>从索引-3开始，截取到下标为-1的位置，包含-3的位置的字符，但不包含-1位置的字符

        var str='hello,world!'; 
        console.log(str.slice(-3,-1));  //ld
        console.log(str.slice(2));  //llo,world!

3.8、concat()

拼接字符串，实现字符串的拼接

使用方法：str1.concat(str2)；将str2,str1进行拼接

整体返回：返回拼接后的新字符串，不改变原字符串

        var str1='hello,';
        var str2='world!';
        console.log(str1.concat(str2));  //hello,world!

3.9、replace()

替换字符串

**使用方法：str.replace(str1,str2); **

首先会在string中查找到str1子串，然后用str2替换str1子串。如果在string中查找不到子串str1，那就直接返回String，只会替换从左向右第一次查询成功的字符

整体返回：返回替换后的新字符串。不改变原字符串

        var str="你吃饭了么";
        console.log(str.replace('你','我')); //我吃饭了么

4.0、split()

切割，把字符串切割为数组，用指定字符串把str分割成数组，和数组join方法对应

使用方法：str.split(str2);

将str按照str2字符切割成数组

整体返回：返回切割后的数组，不改变原字符串

        var str="hello,world!";
        console.log(str.split('o'));  //(3) ["hell", ",w", "rld!"]
        console.log(str.split());  //["hello,world!"]
        console.log(str.split('')); //(12) ["h", "e", "l", "l", "o", ",", "w", "o", "r", "l", "d", "!"]

4.1、toLowerCase()与toUpperCase()

toLowerCase()：将英文转为小写

toUpperCase()：将英文转为大写

1.返回新字符串

2.不改变原字符串

        var str="hellO,woRld";
        console.log(str.toUpperCase());  //HELLO,WORLD
        console.log(str.toLowerCase());  //hello,world

4.2、去空格方法

str.trimLeft() ====>去除字符串开始的空格

str.trimRight() ====>去除字符串结束的空格

str.trim() ====>去除字符串开始和结束的空格

        var str="    hellO,   woRld   ";
        console.log(str.trim());  //'hellO,   woRld'
        console.log(str.trimRight());  //'    hellO,   woRld'
        console.log(str.trimLeft());  //'hellO,   woRld   '

---

ES6语法

4.3、includes()

返回布尔值，表示是否找到了参数字符串

1、语法

str.include(str,[,num]);

2、参数

第一个参数：为要查询的子字符串

第二个参数：开始查询的位置，可以省略，默认从头查找

3、返回值

true、false

         let str='hello world';
         console.log(str.includes('l',1));

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d0N4CIBT-1635345387434)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929151209276.png)]

4.4、startsWith()

返回布尔值，表示参数字符串是否在原字符串的头部

1、语法

str.startsWith(str,[,num]);

2、参数

第一个参数：为要查询的字符串

第二个参数：开始查询的位置，可以省略，默认从头查找

3、返回值

true、false

         let str='http://www.baidu.com';
         console.log(str.startsWith('http'));
         console.log(str.startsWith('https'));

         //从7开始查询www，看是否以www为开头
         console.log(str.startsWith('www',7));

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tuRlcOQU-1635345387434)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929151845128.png)]

4.5、endsWith()

返回布尔值，表示字符串是否在原字符串的尾部

1、语法

str.endsWith(str,[,num]);

2、参数

第一个参数：为要查询的字符串

第二个参数：开始查询的位置，可以省略，默认从头查找

3、返回值

true、false

         let str='http://www.baidu.com';
         console.log(str.endsWith('com'));
         console.log(str.endsWith('cn'));

         //str的前16字符是否以'baidu'为结尾
         console.log(str.endsWith('baidu',16));

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CE7Mh0I8-1635345387435)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929152339752.png)]

4.6、repeat()

repeat()方法返回一个新字符串，表示将原来的字符串重复n次

1、语法

str.repeat(n);

2、参数

n为重复的次数

         let str='xiaoming';
         let repeat=str.repeat(3.2);
         console.log(repeat);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ADzQXLhW-1635345387435)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929152855725.png)]

参数注意事项

1、参数如果是小数，会被向下取整

2、如果return的参数是负数或者Infinity，会报错

3、0到1之间的小数，则等同于0，这是因为会进行取整运算，0-1之间的小数，取整之后等于-0，repeat视同于0

4、参数NaN等同于0

5、如果repeat的参数是字符串，则会转换成数字

4.7、padStart()

如果某个字符串不够指定长度，会在头部补全

开始位置填充padStart

1、语法：

str.padStart(num,pstr);

2、参数

num：填充后整个字符串的长度

pstr：填充物

         let str='helloworld';
         console.log(str.padStart(15,'zhang'));

         let str2='hello';
         let padStr='world';
         console.log(str2.padStart(str2.length+padStr.length,padStr));

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ExRMfMws-1635345387436)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929161335352.png)]

4.8、padEnd()

如果某个字符串不够指定长度，会在尾部补全

结束位置填充padEnd

1、语法：

str.padEnd(num,pstr);

2、参数

num：填充后整个字符串的长度

pstr：填充物

         let str='helloworld';
         console.log(str.padEnd(15,'zhang'));

         let str2='hello';
         let padStr='world';
         console.log(str2.padEnd(str2.length+padStr.length,padStr));

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p2uWzj2c-1635345387436)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210929161302045.png)]

参数注意事项

1、如果原字符串的长度，等于或者大于指定的最小长度，则返回原字符串

2、如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串

3、如果省略了第二个参数，默认使用空格补全长度