js之数组和字符串方法篇

数组

数组也是一种复杂的数据类型，里面存储的是一串数据（一系列有序的数据）
至于所谓有序：就是每一个数组元素都是对应每一个下标（下标从0开始）
常见的复杂数据类型

• 函数
• 数组
• 对象
• 字符串对象
• Math对象
• Date对象
• 等等。。。。

数组的定义

• 通过字面量的形式创建
• 通过内置的构造函数定义

    let arr = [];//字面量
    let arr1 = new Array();//内置构造函数
    //注意点：当Array()里面只有一个数据的时候，表示定义了数组的长度
    //注意点2:当Array()里面有两个数据的时候，才表示数组的元素

数组的length长度属性

lenght：长度的意思（当数组使用该属性的时候，表示获取数组的长度）
var arr = [1, 2, 3]
console.log(arr.length) // 3

数组的索引

数组的索引是从0开始的，一个下标皆对应这一个数组元素，一一匹配的原则！

数据的存储

• 栈：存储简单数据类型 和 变量名
• 堆： 存储复杂数据类型（以地址的形式）
  注意点：就是复杂数据类型的变量名存储在栈之中，而里面的值存储在堆之中，栈里面的变量名指向堆中的地址
  若是浅拷贝的时候，就是只是赋值了地址给拷贝对象，修改拷贝对象或被拷贝对象，都是修改里面的内容！

数组的方法

push() —往数组最后一个元素后面推入元素! ***

• 作用：往数组最后一个元素后面推入元素!
• 原始数组:推入元素后，会修改原始数组，里面添加了推入的元素
• 返回值为：修改后的数组的长度
• 常见作用：给数组元素推入元素

    let arr = [1, 2, 3];
    //arr.push() ---里面书写需要推入的元素
    let res = arr.push(4, "lala"); //可以推入一个或者多个元素！
    console.log(arr); //[1, 2, 3, 4, "lala"]
    console.log(res); //5

unshift() —往数组最开始的一个元素推入一个元素

• 作用：往数组最开始的一个元素推入一个元素
• 原始数组:推入元素后，会修改原始数组，里面添加了推入的元素
• 返回值为：修改后的数组的长度
• 常见作用：给数组元素推入元素，还有数据渲染的时候，常常借用此方法来存储最新的数据，然后显示在最前面（比如微博发布消息，还有显示最新的5条新闻等等！）

    let arr = [1, 2, 3];
    //arr.unshif() ---里面书写需要推入的元素
    let res = arr.unshift(0, "xixi"); 
    console.log(arr); //[0, "xixi", 1, 2, 3]
    console.log(res); //5

pop() — 删除数组中最后的元素

• 作用：删除数组中最后的元素
• 原始数组:删除元素最后的元素，会修改原始数组（把删除的数组元素剔除）
• 返回值为：返回被删除的数组元素
• 另类的作用：就是当数组长度大于某个长度（比如为5的时候），后面的数据之间删除掉！

    let arr = [1, 2, 3];
    //arr.pop() ---里面不需要参数
    let res = arr.pop(); 
    console.log(arr); //[1, 2]
    console.log(res); //3

shif() — 删除数组中最开始的元素

• 作用：删除数组中最开始的元素
• 原始数组:删除元素最后的元素，会修改原始数组（把删除的数组元素剔除）
• 返回值为：返回被删除的数组元素

    let arr = [1, 2, 3];
    //arr.pop() ---里面不需要参数
    let res = arr.pop(); //可以推入一个或者多个元素！
    console.log(arr); //[2,3]
    console.log(res); //1

splice(index,length) —截取数组中的元素

• 作用：arr.splice(index,length) — index length 第一对应的是截取开始的索引值，第二为截取的长度
• 原始数组:剔除被截取元素后，把原始数组进行了修改
• 返回值为：返回被截取的元素所组成的数组

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

splice(index,length,value) —截取数组中的元素

• 作用：arr.splice(index,length,value) — index length 第一对应的是截取开始的索引值，第二为截取的长度 第三为插入数组元素（就是在所截取的元素范围内插入元素，叶可以看出把截取的元素替换掉我们插入的元素！
• 原始数组:剔除被截取元素后，把原始数组进行了修改
• 返回值为：返回被截取的元素所组成的数组

    let arr = [1, 2, 3, 4];
    let res = arr.splice(1, 2, "lala", "pink");
    console.log(arr); // [1, "lala", "pink", 4]
    console.log(res); //[2, 3]

reverse() —翻转数组

• 作用：arr.reverse() —里面不需要参数 翻转数组
• 原始数组:数组翻转后，修改原始数组
• 返回值为：返回的是数组翻转后

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

sort() —为数组排序

• arr.sort() —里面为一个回调函数，若是不添加回调函数的话，只是针对第一个元素值的排序（也就是个位数的排序），回调函数里面，a-b（小到大）
• 原始数组: 修改原始数组，排序后的的数组
• 返回值为：排序后的的数组

    let arr = [1, 33, 8, 5];
    let res = arr.sort(function (a, b) {
      return a - b;
    });
    console.log(arr); //[1, 5, 8, 33]
    console.log(res); //[1, 5, 8, 33]

concat()— 就是把两个数组进行拼接

• arr.concat(arr1) 把arr 和 arr1 合并
• 原始数组不会被改变
• 返回值:合并后的数组
• 另类的作用：就是可以把一个普通元素（比如num = 10）,直接合并到数组之中。很奈斯的功能，当我们遍历数组的时候，查询数组中是否含有某个元素，若是若是没有就合并进去数组里面，若是没有就返回原始数组（这和reducce方法搭配使用更妙哦，处理数组去重的效果）

    let arr = [1, 3, 5]
    var arr1 = ['7', 'lala'];
    // 合并arr 和 arr1
    var res = arr.concat(arr1, ['a']) // 参数为数组
    console.log(res);//[1, 3, 5, "7", "lala", "a"]
    console.log(arr);//[1, 3, 5]

//需求：可以把一个元素，直接合并到数组arr之中！
    let arr = [1, 3, 5]
    let num = 9;
    console.log(arr.concat(num)); //[1, 3, 5, 9]

arr.join(‘用什么符号来拼接属数组的数据’) ，参数不写默认为逗号

• 不改变原始数组
• 返回值：转换好的字符串

    let arr = [1, 4, 6, 7]
    var res = arr.join('-')
    console.log(arr); //[1, 4, 6, 7]
    console.log(res); //1-4-6-7

arr.indexOf(数据) 判断数组中是否存在这个数据

• arr.indexOf(数据) 判断数组中是否存在这个数据
• 返回值：数组存在就返回数据在数组中的索引，数据不存在就返回 -1
• 作用：常常用于查询数组里面是否含有该数据（若是含有的话 就是！== -1）（若是没有的haul就是 === -1），在字符串之中也是可以使用的方法！

    let arr = [1, 3, 5]
    var res = arr.indexOf(5)
    console.log(arr); // [1, 3, 5]
    console.log(res); //2 返回的是索引号

arr.slice() 截取数组中的元素

• arr.slice(start,end) — start为截取的索引号起始值，end为截取的的位置，但是不包含end这个位置（可以为负数）
• 会修改原始数组，原始数组会去除掉被截取的元素
• 返回值：以一个数组的形式存储被截取的元素

    let arr = [1, 3, 5, 7, 9, 11];
    let res = arr.slice(2, 4);
    console.log(res); //[5, 7]
    console.log(arr); // [1, 3, 5, 7, 9, 11]

arr.includes(msg1,msg2) 判断数组之中是否包含某个元素

• 参数1：msg1就是需要判断的数组种的某个元素
• 参数2：msg2就是需要判断的数组种的某个元素的开始索引值
• 返回值：布尔值

    let arr = ["app", "vue", "react", "jq"];
    let res = arr.includes("vue");
    let res1 = arr.includes("vue1");
    console.log('res', res); // res true
    console.log('res1', res1); // res1 false
    console.log('res2', arr.includes("vue",1)); // res2 true
    console.log('res3', arr.includes("vue",2)); // res3 false

arr.find(msg1) 寻找数组之中，第一个符合条件的值

• 参数1：msg1为处理函数
• 返回值：符合条件的 第一个值

    let arr = [10,20,4,60,99];
    let res = arr.find( item => {
      return item >= 60;
    })
    console.log("res", res); // 60

arr.findIndex(msg1) 寻找数组之中，第一个符合条件的索引

• 参数1：msg1为处理函数
• 返回值：符合条件的 第一个值的索引

    let arr = [10,20,4,60,99,100];
    let res = arr.findIndex( item => {
      return item >= 60;
    })
    console.log("res", res); // 3

字符串

字符串的定义

    var str = ''
    // 字面量定义字符串
    var str = new String('') //通过内置构造函数定义字符串

    // 字符串也有索引 也有length属性
    // 字符串只可读（ 只能查看数据）， 不可写（ 不能更改数据）

字符串的方法

【1】 str.charAt(索引值) 根据索引找到对应的字符， 不存在此索引， 那么返回空

• 返回值： 返回对应的字符

    let str = "affgscxfdg"
    console.log(str.charAt(0)); //a

【 2】 str.charCodeAt(索引值) 返回索引值对应中字符的ASCII码值

• 当没有参数的时候， 返回的时候 索引为0 的字符的ASCII码值

    let str = "affgscxfdg"
    console.log(str.charCodeAt(3)); //0--a--97 根据索引号得到该字符的ASII码  3--g--103

【 3】 str.indexOf(‘字符’) 判断字符串中是否存在某个字符

• 返回值：存在就返回字符的索引,不再存在就返回 - 1 —根据字符返回索引号

    let str = "affgscxfdg"
    console.log(str.indexOf("g")); //a--0 根据字符返回索引号 g--3

【 4】 str.substring(start, end) 截取字符串

• 参数1 — start: 开始位置的索引
• 参数2 — end： 结束位置的索引， 可以为负数， 但是不包含end索引的值
• 当end 为负数的时候， 默认这个负数为0 并且跟第一个数进行交换（ 1, -3） === > (0, 1)
• 返回值：被截取的字符串

    let str = "affgscxfdg"
    console.log(str.substring(1, 3)); //ff
    console.log(str.substring(1, -4)); //a 就是-4变为0并且和1交互位置

【 5】 substr(start, length) 截取字符串

• start: 开始的索引值
• length： 截取的长度
• 返回值：被截取的字符

    let str = "affgscxfdg"
    console.log(str.substr(1, 3)); //ffg

【 6】 slice(start, end)

• start： 截取字符串开始的索引
• end： 结束的索引， 不包含end这个索引的字符， 可以为负数
• 当值为负数的时候， 从后面往前数， 实际上为 字符串的长度 + 负数
• 11 + （ -3） = 8（ 1， - 3） === （1， 8）

    let str = "affgscxfdg"
    console.log(str.slice(1, 3)); //ff
    console.log(str.slice(1, -4)) //ffgsc -4+10=6 也就是1-6但是不包括6，于是截取了5个字符！

【 7】 toLowerCase() 把字符串中的字符转小写

【 8】 toUpperCase() 把字符串的字符转大写

【 9】 str.split(’’) 把字符串分割为一个数组

• 参数： 没有参数 把整个字符串当成数组的一个数据
• 参数为：’’ 每一个字符当成数组里面的每一个数据
• 参数为：’-’ 表示以 - 分割【 10】 replace(‘你要替换的字符’， ‘用什么字符来替换’) 只会替换一次
• 返回值：一个数组

    let str = "affgscxfdg"
    console.log(str.split("")); //["a", "f", "f", "g", "s", "c", "x", "f", "d", "g"]

【 10】 str.lastIndexOf(‘符合’) 拿到字符串最后的一个元素的索引

• 参数：需要拿到改字符串的最后的某个字符的索引
• 返回值：就是最后一位元素的索引值

    let str = "22aaccd-o-f.s1.txt";
    let res = str.lastIndexOf(".");
    console.log("res", res); // res 14
    let res1 = str.substr(0, res);
    console.log('res1', res1); // res1 22aaccd-o-f.s1