一、数组添加
1.直接添加
arr[0] ="张三";
console.log(arr);
2,在数组的尾部添加内容push
arr.push("值"); 会在改变原本的数组
var arr= ["张三","李四"];
arr.push("王五");
arr.push("王五222");
console.log(arr);
3.在数组的头部添加内容
数组.unshift("添加的值");
var arr= [1,2,3,4,5];
arr.unshift("值");
arr.unshift("值2");
console.log(arr);
4.数组的中间添加元素
数组.splice(添加或者删除的索引,删除的个数如果是添加就是0,要添加的值如果是删除可以不写)
var arr= ["张三","李四","王五","王小二"];
arr.splice(1,0,"新值");
console.log(arr);
二、数组的删除方法
1.设置数组的长度;(了解)
var arr= [1,2,3,4,5];
arr.length=3; // 人为设置 数组长度;
console.log(arr);//[1,2,3]
2.删除数组的头部元素;shift 删除一个元素(比较多) 返还值是删除的值;
var arr= ["张三","李四","王五"];
var res= arr.shift();
console.log(res);// 张三
console.log(arr);//["李四","王五"]
3.尾部删除元素:pop删除一个元素(多) 返还值是删除的元素;
var arr= ["张三","李四","王五"];
var res= arr.pop();
// console.log(res);
arr.pop();
console.log(arr);//["张三","李四"]
4.删除指定元素 splice (多)
数组.splice(删除开始的索引,删除的个数)
返还值是删除的元素
var arr= [1,2,3,4,5,6];
var res=arr.splice(1,1);
console.log(res);//[2]
console.log(arr);//[1,3,4,5,6]
var arr= ["张三","李四","王五"];
arr.splice(1,1,"hello"); // 替换操作
console.log(arr);// ["张三","hello","王五"]
5.截取数组的元素;slice 不会改变原本数组,只能获取返还值;
var arr= ["a","b","c","d","e"];
// 第一个参数是从什么索引开始 第二个参数是个数 2,2
var res= arr.splice(1,2);
console.log(res); //['b','c']
三、数组的其他方法
1.把数组通过某个字符把数组连接字符串join("字符")
var str="a-b-c-d";
var arr=str.split("-");
console.log(arr);
var res= arr.join("*");
console.log(res);
console.log(arr);
var arr= ["张安","李四","王五"];
var res= arr.join("-");
console.log(res);
2.合并2个或者多个数组
数组1.concat(数组2,数组3...);
var arr1= [1,2,3];
var arr2= [4,5];
var arr3= [6,7];
// var res = arr1.concat(arr2,arr3);
// console.log(res);
for(vari=0;i<arr2.length;i++){
arr1.push(arr2[i]);
}
console.log(arr1);
for(vari=0;i<arr3.length;i++){
arr1.push(arr3[i]);
}
console.log(arr1);
3.反转数组:把数组倒过来
数组.reverse();
var arr= [1,2,3,4];
var res= arr.reverse();
console.log(res);
反转字符串;
var res= str.split("").reverse().join("");
function reverseStr(str){
return str.split("").reverse().join("");}
var str="12345";
console.log(reverseStr(str));
4.在数组里查找某个键值的索引值;
indexOf查找某个值的索引值,如果没有找到就返还-1;
var arr= ["张三","李四","王五"];
// var res = arr.indexOf("王五111");
// console.log(res);
// 判断数组里是否包含某个值;
var str="fdafd";
if(arr.indexOf(str) !== -1) { console.log(str+"有值");
}else{ console.log("数组里没有这个值");}
5.数组的排序 : (很多)
数组.sort()
需要一个回调函数,接收2个形参 如果是a-b那么是升序 否则是倒序
var arr= [4,1,3,2,5];
var res=arr.sort(function(a,b) {
// return a - b;
return b-a;
})
console.log(res);
var arr= [{name:"张三",age:22},{name:"李四",age:20},{name:"王五",age:28}];
var res=arr.sort(function(a,b){
return b.age-a.age
})
console.log(res);
四、字符串方法
1.根据字符串的索引获取字符串的值;
var str="abcdef";
var res=str.charAt(2);
console.log(res);
console.log(str[2]);
str[2] ="h";// 不能设置 字符串的值;
console.log(str);
2.根据字符串的索引值获取字符串对应的编码;
var str="abcdefg";
var res= str.charCodeAt(0);
console.log(res);
3.根据某个字符把字符串切割成数组split(字符); (多);
va rstr="a*b*c*d";
var arr=str.split("*");
console.log(arr);
4.截取字符串1:substr (多)
字符串.substr(开始截取的索引,截取的数量(不给就到结尾))
var str="abcdefg";
// var res = str.substr(2,2) ;
var res=str.substr(2); // 截取到字符串结尾 ;
console.log(res);
5.截取字符串2:substring(多)
字符串.substring(开始截取的索引位置,结束截取的索引位置);包前不包后
var str="abcdefg";
var res= str.substring(2,4);
console.log(res);
6.截取字符串3:slice();
var str="abcdefg";
var res=str.slice(2,4);
console.log(res);
7.把字符串里的英文变大写; (多)
var str="abcDefG";
var res= str.toUpperCase();
console.log(res);
8.把字符串里的英文转小写
var str="abcDefG";
var res= str.toLowerCase();
console.log(res);
functionfn(str){
if(str.toLowerCase()==="red"){ console.log("红色");
}elseif(str==="yellow"){ console.log("黄色")
}else{console.log("其他情况")}}
fn("reD");
9.替换字符串replace("要替换的值","替换的新值");
var str="fdafdsaXXXfdafdasXXXddfsa";
str= str.replace("XXX","***");
str= str.replace("XXX","***");
console.log(str);
10.查找某个字符的索引;indexOf();
varstr="abcdefg";
varres= str.indexOf("h");
console.log(res);
五、对象新增方法
1.判断对象是否相同
Object.is();
let obj1= { myname:"张三"}
// let obj2 = {
// myname:"张三"
// }
let obj2=obj1;
// console.log(obj1===obj2);
console.log(Object.is(obj1,obj1));//true
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
2.Object.assign();合并2个或者多个对象; (重点)
Object.assign();
相同键名会覆盖
是一个浅拷贝
let obj1= { name:"张三"}
let obj2= { age:20,
// name:"李四"
}
let obj3= { height:"178cm"}
let res= Object.assign(obj1,obj2,obj3);
// console.log(res);
obj1.name="王五";
console.log(res); //{name:"王五",age:20,height:"178cm"}
展开运算符复制的对象或者数组也是浅拷贝
let arr= [1,2,3,[6,7]];
let arr2= [...arr];
// arr[0] = 5;
arr[3][0] =8;
console.log(arr2);
3.Object.hasOwn // es6 判断某个属性是否 是对象的自身属性 (重点)
obj.hasOwnProperty("key")// ES5
let obj= { myname:"张三",age:20}
console.log( Object.hasOwn(obj,"age1"));
4.Object.keys();Object.values(); (重点)
获取对象的所有键名或者是键值放在一个数组里
let obj= {myname:"张三", age:20}
let keys=Object.keys(obj);
console.log(keys);
let values=Object.values(obj);
console.log(values);
5.Object.seal();可以把对象变成不可配置对象;
let obj= { myname:"张三", age:20}
Object.seal(obj);
// Object.freeze(obj);
obj.myname="李四";
console.log(obj);
delete obj.myname;
console.log(obj);
六、对象转字符串的方法
ES5中运用for……in 遍历对象中的属性和属性值
ES6通过Object.keys(obj)获取对象所有的key值(键名)
Object.values(obj)获取所有的键值 ;
七、数组的循环方法
分为命令式编程和声明式编程
命令式编程:强调“如何做” 注重过程抽象
for循环
var arr= ["张三","李四","王五"];
for(var i=0;i<arr.length;i++) { // 体现了过程
console.log(arr[i]);} //结果: 循环得到键值 ;
forEach 【多】
获取所有的元素且在元素基础上加10;
var arr= [1,2,3,4,5,6];
var res= [];
arr.forEach(item=>{res.push(item+10);})
console.log(res);
var arr= ["张三","李四","王五"];
arr.forEach((item,key,arr)=>{ // 只能循环;
console.log(item,key,arr);})
arr.forEach(item=>{
console.log(item); // 获取 键值;循环的结果
}) //结束循环只能在while和for循环使用break
map 【多】map:映射
var arr= [1,2,3,4,5,6];
var res= arr.map(item=>{returnitem+10; })
console.log(res);
map可以收集结果也可以收集回调函数里的返还值;
var arr= ["张三","李四","王五"];
let res= arr.map((item,key,arr)=>{
console.log(item,key,arr);
return item+"hello";})
console.log(res);
every循环
回调返还的都为true的时候循环结果才是true否则就是false;
回调函数的结果是一个 &&的关系;全选非全选;
let arr= [true,true,false,true,true];
var res= arr.every(item=>{
console.log(item);//true true false
return item; }) //false 所有返还都是true 那么 res就是true
console.log("最后的结果",res); //false
五、 some 循环
只要有一个true最终结果就是true;只有全部是false最终结果才是false;
类似把回调函数的结果使用||连接起来
var arr= [false,true,false,false];
//every或者some如果已经获取到最终结果,那么循环就停止了;
var res=arr.some((item,key,arr)=>{
console.log(item,key,arr);
return item;
})
console.log("最终的结果:",res);
六、reduce循环【多】
累加器,累加结果万物皆可reduce
reduce(function(上一次的累加值,键值,键名,原本的数组){},初始累加的值);
1.数字的累加
var arr= [1,2,3,4,5];
var res= arr.reduce(function(pre,item,key,arr){
// pre是上次累加的结果
console.log(pre,item);
return pre + item;
},0);//0 是初始累加的值;
console.log(res); // 0 + 1 + 2 .. 5;
第一次循环:初始值是0 ---》pre就是0 item就是1 返还1返还的1是下一次的pre值; 1
第二次循环:pre 1 item2 返还pre+item ---》3 --->3又会作为下一次的pre
第三次循环:pre 3
2.数组的累加
数组的去重;
方法一:
var arr= [1,1,2,3,2,3,4,4,5,5];
// var res = [...new Set(arr)];
// console.log(res);//[1,2,3,4,5]
方法二:
var res=arr.reduce((pre,item)=>{
// 判断item 在 pre里有没有 ,如果有 就不添加 ,如果没有就在pre里添加这个值;
if(pre.indexOf(item) == -1) {
// 在pre数组里没有找到 item这个值;
pre.push(item); // [1]
}
return pre;
}, []);
console.log(res);//[1,2,3,4,5]
3.对象的累加
var arr= ["a","a","b","c","c","c"];
统计数组里值重复的次数放在一个对象里;{ a:2, b:1, c:3};
var res=arr.reduce((pre,item)=>{
// 判断pre对象里是否有 循环出来的键名pre: {} ----> pre 能不能找到a下标
// pre[item] = pre[item]++ || 1
if(typeof pre[item] ==="undefined") {
// 在pre对象里没有找到键名 a
pre[item] =1;
// ---> pre = {a:1}
}else{
// 第二次循环
pre[item]++; }
return pre;
}, {});
console.log(res);//{a:2,b:1,c:3};
七、filter循环
循环的同时会判断返还值,如果返还值是true,那么就收集结果,否则就不收集结果【只会收集正确的结果】
var res=arr.filter(item=>{
// console.log(item); //1 2 3 4 5 6
// return false; 【不会搜集】
return item>3;})
// 简写:
var res=arr.filter(item=>item>3)
console.log(res);
判断某个值是否存在
更安全的判断变量存在的方式;
typeof之后的结果值一定是一个字符串;
所以判断的时候,后面的内容需要加上引号,不然判断就不对;
var a;
var a=10;
if(typeof a!=="undefined"){ // a 的值必须要声明
console.log("有值")
}else{console.log("没有值");}
判断数据类型
1.typeof:区分基本数据类型和函数;(多)
2.Object.prototype.toString.call("数据") 精确判断数据类型所有类型;(多)
3.instanceof:判断某个实例在原型链上是否有关系,不推荐使用;
4.constructor判断是否是某个类型与3相比建议使用4
5.Array.isArray(); // 只能判断是否是一个数组; ES6里的方法;(多)
var arr= [];var obj= {};
console.log(obj instanceof Object); //true
console.log(arr instanceof Object); //true
console.log(arr instanceof Array); //true
console.log(Array.isArray(obj));//false
console.log(Array.isArray(arr));//true
if(arr.constructor===Array){ // 判断 构造函数 不需要加引号
console.log("是数组");} //是数组
console.log(obj.constructor===Object); //true
console.log(arr.constructor===Object); //false