字符串和数组的API演示

字符串演示

<script>
let str = "新手@php.cn";
//1.字符串长度：length
console.log(str.length);  //打印输出字符串长度
//结果为：9
//2.字符串索引输出元素：[]
console.log(str[3]);  //打印输出索引为3的元素
//结果为：p
//3.字符串元素输出索引值(两种方法):indexOf 和 seatch
console.log(str.indexOf("手")); //打印输出元素为"手"的索引值
//结果为：1
console.log(str.search("手"));  //打印输出元素为"手"的索引值
//结果为：1
//4.字符串拼装
console.log(str.concat("<b>",":邮箱","</b>"));
//结果为：新手@php.cn<a>:邮箱</a>
console.log(str+":邮箱");
//结果为：新手@php.cn:邮箱
console.log(`${str}:邮箱`);
//结果为：新手@php.cn:邮箱
//5.字符串替换：replace
console.log(str.replace("新手","新手1314"));
//结果为：新手1314@php.cn
//6.取字符串里的子串: slice 和 substr
console.log(str.slice(0,2));
//结果为：新手
console.log(str.substr(0,2));
//结果为：新手
//(substr可从后往前取子串)
console.log(-6,6);
//结果为：php.cn
//7.拆分字符串，通过指定分隔符对字符串进行切片：split
console.log(str);
//结果为：新手@php.cn
console.log(str.split(""));
//结果为：(9) ['新', '手', '@', 'p', 'h', 'p', '.', 'c', 'n']
//8.将字符串里的英文转为大写：toUpperCase（toLowerCase是将字母转为小写）
console.log(str.toUpperCase());
//结果为：新手@PHP.CN
//9.使用js添加body元素
document.body.insertAdjacenHTML("afterbegin",str.link("https://php.cn"));
//输出结果为：<a href="https://php.cn">新手@php.cn</a>
</script>

数组演示

<script>
//1.将类数组转为数组：Array.from
let arr = {
  0:"red",
  1:"blue",
  2:"green",
  length:3
};
console.log(Array.from(arr));
//结果为：[[Prototype]]: Array(0)
//2，js添加数组：(push: 尾部添加,pop:尾部删除,unshift:头部添加，shift:头部删除)
//尾部添加与删除：
let arr2 = [];
console.log(arr2.push(20));  //添加数组元素，打印数组元素个数
console.log(arr2.push(40,60));
console.log(arr2);
//结果分别为：1，3，(3) [20, 40, 60]
console.log(arr2.pop());    //删除数组最后一个元素，打印删除元素的值
console.log(arr2);
//结果分别为：60，(2) [20, 40]
//头部添加与删除：
let arr3 = [];
console.log(arr3.unshift(20)); //添加数组元素，打印数组元素的个数
console.log(arr3.unshift(60,40));
console.log(arr3);
//结果分别为：1，3，(3) [60, 40, 20]
console.log(arr3.shift());  //删除数组第一个元素，打印删除元素的值
console.log(arr3);
//结果分别为：60，(2) [40, 20]
//3.遍历数组：forEach,map，every,some,filter,find,reduce
let arr = [1,2,3,4,5];
let res = arr.forEach((num,index,arr)=>console.log(num,index,arr));//index与arr可省略。
console.log(res); //forEach没有返回值
//结果分别是：1 0 Array(5) 2 1 Array(5) 3 2 Array(5) 4 3 Array(5) 5 4 Array(5)， undefined
res = arr.map(num =>num);
console.log(res);
//结果为：(5) [1, 2, 3, 4, 5]
//every:数组全部成员满足条件返回true 否则返回false
console.log(arr.every(num = num>=0));
//结果为：true
//some:数组里元素只要有一个满足条件返回true，否则返回false
console.log(arr.some(num => num >=6));
//结果为：false
//filter:只返回满足条件的元素
console.log(arr.filter(num => num >=3));
结果为：(3) [3, 4, 5]
//find:只返回满足条件的第一个元素
console.log(arr.find(num => num >=3));
结果为：3
//reduce:归并/累加
res = arr.reduce((acc,num)=>acc+num);
console.log(res);
//结果为：15
//4.数组排序：sort（若 a 小于 b，即 a - b 小于零，则返回一个小于零的值，数组将按照升序排列。若 a 大于 b, 即 a - b 大于零，则返回一个大于零的值，数组将按照降序排列。）
let arrs = [1,10,6,9]
console.log(arrs.sort());
console.log(arrs.sort((a,b)=>a-b));
console.log(arrs.sort((a,b)=>b-a));
//结果分别为：(4) [1, 10, 6, 9]，(4) [1, 6, 9, 10]，(4) [10, 9, 6, 1]
//5.将数组转为字符串：join（）（里面可加分隔符）
arr=['red','blue','green'];
console.log(arr.join());
console.log(arr.join("--"));
//结果分别为：red,green,blue 。 red--green--blue
//6.取数组里的子元素:slice
arr=[1,2,3,4,5,6,7];
console.log(arr.slice(2,4)); //(2：为开始的地方，与数组里的元素相对应，并不会被打印，4为结束的地方，与数组里的元素相对应，会被打印)
//结果为：(2) [3, 4]
//7.数组元素删除，新增，替换：splice
//删除：
console.log(arr.splice(1,2)); //(1:数组索引值对应的元素,2：删除的元素个数)打印删除的元素
console.log(arr);
//结果分别为：(2) [2, 3] , (5) [1, 4, 5, 6, 7]
//替换：
console.log(arr.aplice(1,2,"red","blue"));//(1:索引值对应的元素,2：替换个数,"red","blue"：替换的值)
console.log(arr);
//结果分别为：(2) [4, 5] ， (5) [1, 'red', 'blue', 6, 7]
//新增：
console.log(arr.aplice(1,0,2,3)); //(1:索引值对应的元素,0:替换个数，0不替换即为添加。 2,3：为添加的元素)
console.log(arr);
//结果为：[] ， (7) [1, 2, 3, 'red', 'blue', 6, 7]
</script>