js 字符串、数组、对象等梳理
字符串
1,增:
1,怎么创建字符串:
var str = '' //单引号
var str = "" //双引号
var str = '' ; //返斜冒号,全局匹配
var str= new Str( ); //自变量创建字符串,一般不建议试用
2,改:
1,trim();去空格
' abc '.trim( );//去掉首尾的空格
' abc '.trimLeft( );//去掉左侧的空格
' abc '.trimRight( ) ;//去掉右侧的空格
2,replace();替换字符串
'abc'.replace('a', 'b') // 'bbc'
'aac'.replace(/a/g, 'b') // 'bbc'
3,split(,)字符串分割成数组,获取你想要的值
注:, =>表示是以什么符号给隔开
'a,b,c'.split(',') // ['a', 'b', 'c']
'7@@星期四'.split('@@') // [7, 星期四]
4,join()数组转化成字符串:
注:参数里面标点表示以什么标点分割字符串;没有默认为 ,
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr.join();// George,John,Thomas
arr.join(".");// George,John,Thomas
5,toString() 可把一个 Number 对象转换为一个字符串,并返回结果。
var number=[ 1,12,89,76 ];
number.toString();// "1,12,89,76"
6,valueOf():返回某个字符串对象的原始值
var myDate=new Date()
myDate.valueOf();// 1583316878578
7,concat( ):连接字符串,字符串拼接。
'a'.concat('b');//‘ab’
8,toUpperCase():把字符串转换为大写
9,toLowerCase(): 返回一个字符串,该字符串中的字母被转换成小写。
3,查:
1,strObj.charCodeAt(index) :从字符串中获取单个字符
注:如果指定位置没有字符,将返回NaN。
var str = "ABC";
str.charCodeAt(0); // 65
2,String.fromCharCode([code1[,code2...]]) :根据数值从Unicode字符串中返回一个字符串。
String.fromCharCode(65,66,112); // ABp
3,strObj.charAt(index):返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。
注:有效值是0与字符串长度减一之间的值。
var str = "ABC";
str.charAt(1); // B
4,indexOf();如果要检索的字符串值没有出现,则该方法返回 -1。适合数组使用
var str="Hello world!"
console.log(str.indexOf("Hello") + "<br />");// 0
console.log(str.indexOf("World") + "<br />");// -1,这里是大小写有区别,检索不出来
5,lastIndexOf方法:返回String对象中字符串最后出现的位置。如果没有匹配到子字符串,则返回-1。
var str = "ABCDECDF";
str.lastIndexOf("CD"); // 5
6,slice()方法:返回字符串的片段
注:strObj.slice(start[,end])
1,如果只有一个参数,则复制的是参数数字所表示的长度,索引从0开始
2,start指明子字符串的起始位置,该索引从0开始起算。如果start为负,将它作为length+start处理,此处length为字符串的长度。
3,end指明子字符串的结束位置(不包括结束字段索引值),该索引从0开始起算。如果end为负,将它作为length+end处理,此处length为字符串的长度。
var str = "ABCDEF";
str.slice(2,4); // CD 根据索引值
str.slice(1);// A 返回的是位置
7,substring方法:返回位于String对象中指定位置的子字符串。
注:start指明子字符串的起始位置,该索引从0开始起算。
end指明子字符串的结束位置(不包括结束字段索引值),该索引从0开始起算。
substring方法使用start和end两者中的较小值作为子字符串的起始点。
如果start或end为NaN或者为负数,那么将其替换为0。
var str = "ABCDEF";
str.substring(2,4); // 或 str.substring(4,2); //=> CD
8,substr(start,length)方法
注:start所需的子字符串的索引值;必填。字符串中的第一个字符的索引为0。length在返回的子字符串中应包括的字符个数;可选。
var str = "ABCDEF";
str.substr(2,4); // CDEF
9,search()返回与正则表达式查找内容匹配的第一个字符串的位置。如果没有匹配到子字符串,则返回-1。
var str = "ABCDEF";
str.search('CD') // 2
10,str.length;获取字符串的长度
var str = "ABCDEF";
str.length; // 6
11,includes( ):判断是否包含,适合字符串。
var name = "王汉炎"; //目标字符串
name.includes('炎'); // true;返回的是一个布尔值
12,变量变为布尔值
var str ; // undefined
var blooeam = ! str;// true
5,判断元素是否是字符串
1,typeof 判断元素类型,一般适用与字符串校验,
但是不适用数组与对象,因为数组本质上也是对象
var str = 'adcvgf';
console.log( typeof str == string ); // true
数组
注:数组也是对象
1,命名数组:
构造函数
var ary = new Array();// 创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组
var 创建数组
var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = [“lily”,“lucy”,“Tom”]; // 创建一个包含3个字符串的数组
2,增删:
1,push()与pop()
push():可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop();用于把数组的最后一个元素从其中删除,并返回最后一个已删除元素的值
var ary = ['name','sex','age']
ary.push('hair')
ary // ["name", "sex", "age", "hair"]
var item = ary.pop();
item // 'hair'
2,shift() 和 unshift()
shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
unshift(): 可向数组的开头添加一个或更多元素,并返回新的长度。
var ary = ['name','sex','age']
ary.shift();// name
ary.unshift('hair');// 4t
3,Arrary.splice(start, deleteCount, item1 , item2);
注:start开始索引值
deleteCount要删除的个数,deleteCount=0,那么则为增加
item1为增加的新项目,
原来数组发生改变
// 新增
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");//2—起始索引值;0—增加;后面的就是新增的元素
fruits;// ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
// 删除
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2);//["Apple", "Mango"]
// 2—起始索引值;2—删除个数
补充
// 通过id值来找到他的索引值,并利用 splice 进行删除
del(id){
var index = this.list.findIndex(item=>{
if (item.id == id){
return true;
}
})
this.list.splice(index,1)
},
4,扩展方法
var arr = [1,2,3]
[...arr, 4];//在前面插入
[0, ...arr];//在后面插入
[...arr.slice(0,2), 插入内容, ...arr.slice(2)];//从中间插入
3,改
1,arr[index]=新值;
2,reverse() 方法用于颠倒数组中元素的顺序。
var arr = ["George","John","Thomas"];
arr.reverse() ;// ["Thomas", "John", "George"]
3,concat() 合并数组,不改变原数组;
注:arrayObject.concat(x,y,......,z) 这里的参数必须是一个具体的值,可以是多个
// 方法一
var a = [1,2,3];
a.concat(4,5); // [1,2,3,4,5]
// 方法二
var ary3 =[...ary1, ...ary2]; // [1,2,3,4,5,6]
// 方法三
for( var i in ary2)
{
ary1.push(ary2[i]);
}
4,sort() 按升序排列数组项——即最小的值位于最前面,最大的值排在最后面
var arr = ["George","John","Thomas","James","Adrew","Martin"];
arr.sort(); // ["Adrew","George","James","John","Martin","Thomas"]
自定义设置大小函数排序
function sortNumber(a,b){
return b-a
}
var arr = [10,5,40,25,1000,1]
arr.sort(sortNumber); // [1000, 40, 25, 10, 5, 1]
</script>
5,splice(): 可以实现删除、插入和替换
实现删除
// splice(index,要删除的几个数)
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
实现添加
注:splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。
// 实现插入 splice(index,0,要插入的项数)
// 三个参数::起始位置、 0(要删除的项数)和要插入的项。
var arr = [5,7,9,11];
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
实现替换
注:指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。
插入的项数不必与删除的项数相等;
var arr = [5,7,9,11];
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 9, 11]
6,forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。
注:三个参数:遍历的数组内容;第对应的数组索引,数组本身。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + ‘|’ + index + ‘|’ + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
7,slice()方法:返回字符串的片段
注:strObj.slice(start[,end])
1,如果只有一个参数,则复制的是参数数字所表示的长度,索引从0开始
2,start指明子字符串的起始位置,该索引从0开始起算。如果start为负,将它作为length+start处理,此处length为字符串的长度。
3,end指明子字符串的结束位置,该索引从0开始起算。如果end为负,将它作为length+end处理,此处length为字符串的长度。
var str = "ABCDEF";
str.slice(2,4); // CD 根据索引值
str.slice(1);// A 返回的是位置
数组迭代方法,详情查看[https://www.jianshu.com/p/57721617e844]
注:补充案例
arr = arr.map((item, index) => {
if(index === 目标下标) {
return {
...item,
修改内容
}
} else {
return item
}
})
8,join() ; 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
注:str.join(sequence);// sequence -- 要连接的元素符号
var a = [ 1, 2, 3, 4, 5, 6 ];
a.join("|"); // "1|2|3|4|5|6"
9,toString():把数组转换为字符串,并返回结果;
var arr = [1,2,3,4,5,6,7,8,9,11];
arr.toString(); // "1,2,3,4,5,6,7,8,9,11"
10,reduce() :方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值
function (total, value, index, arr)
函数参数:
total:必需。初始值, 或者计算结束后的返回值。
value:必需。当前元素
index:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
numbers.reduce(getSum);// 125
11,!!
:把一个数组变成布尔值
var arrary =[12,23,54,56,43]
!!arrary; //true
!arrary; // false
12,_.isUndefined(value):检查一个值是否是undefined;返回值是布尔值
_.isUndefined(value);
4,查
ES6为Array增加了find(),findIndex函数。
1,find( value,index,arr ):用来查找目标元素,找到就返回该元素,找不到返回undefined。
注:返回值 => 找到的第一目标元素
三个参数:value:每一次迭代查找的数组元素; index:每一次迭代查找的数组元素索引; arr:被查找的数组;
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr) => {
return value > 4
})
console.log( ret1); // 5
var ret2 = arr1.find((value, index, arr) => {
return value > 14
})
console.log(ret2); // undefined
2,findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。
注:返回值 => 返回值找到的 index 值,找不到返回 -1
三个参数:value:每一次迭代查找的数组元素; index:每一次迭代查找的数组元素索引; arr:被查找的数组
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret3 = arr1.findIndex((value, index, arr) => {
return value > 4
})
console.log(ret3); // index => 4
var ret4 = arr1.findIndex((value, index, arr) => {
return value > 14
})
console.log(ret4); // index => -1
注:特殊数字 NaN 除外,需要特殊的处理方法
3,Array.from(obj, mapFn, thisArg): 从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例
三个参数:
- obj:想要转换成数组的伪数组对象或可迭代对象;
- mapFn(可选):如果指定了该参数,新数组中的每个元素会执行该回调函数;
- thisArg(可选):执行回调函数 mapFn 时 this 对象。
返回值:一个新的数组实例
。
4,!selectList; // 布尔值进行判断
var obj = {
name:'xiaosan',
age:73,
selectList:[]
}
if (!obj.selectList){ // 进行判断值是否存在
console.log('XXXXX')
}
5,判断元素是否是数组
1,instanceof 判断元素是否是数组
var list = []
console.log(list instanceof Array);// true
2,constructor 判断元素是否是数组
let arr = [];
console.log(arr.constructor == Array); //true
3,isArray 判断元素是否是数组
let arr = [];
console.log(Array.isArray(arr)); //true
对象
1,新建对象
1,var 创建一个空对象
var x = { };
2,通过构造函数新建一个空对象
var x = new Object();
* 判断是否是对象的方法 *
x instanceof Object; // true
2,增
1,新增一个对象属性
var x = new Object();
x.name ="小屋先生"
x['name'] ="小屋先生"
x // {name:”小屋先生“}
2,for in
var people = {
name: '小五',
age:20,
likeColor:‘yellow’
}
for (var k in bonly) {
if(k=='age'){
delete bonly[k];
}
}
3,删
1,delete();删除
var car = {name:"车子",color:"blue",nub:"1"}
delete car.color;
car; // {name: "车子", nub: "1"}
4,改
1,assign() :合并多个对象,将源对象的所有可枚举属性,复制到目标对象(target)
// 合并多个对象
var a={name:'jack'};
var b={age:10};
Object.assign(a,b);
let a = { ...a, ...b }
console.log(a) // {name: "jack", age: 10}
// 合并多个对象,但是想同的属性,那么则会替换
var a={name:'jack', age:20};
var b={age:10};
Object.assign(a,b);
console.log(a) // {name: "jack", age: 10}
2,toString()
var a={name:'jack', age: 10};
a.toString(); // "[object Object]"
5,查
1,Object.keys(obj) : 返回一个包含所有给定对象自身可枚举属性名称的数组
注:obj: 要返回其枚举自身属性的对象;返回结果是给定对象的所有可枚举属性的字符串数组。
var car = {name:"车子",color:"blue",nub:"1"};
Object.keys(car); // ["name", "color", "nub"]
2,Object.values(obj):返回给定对象自身可枚举值的数组。
注:obj:被返回可枚举属性值的对象;返回值=>给定对象的所有可枚举属性值的数组
var car = {name:"车子",color:"blue",nub:"1"};
Object.values(car); // ["车子", "blue", "1"]
3,isArray() :方法用于判断一个对象是否为数组;返回值是布尔值
Array.isArray(fruits); // 判断一个对象是否是数组
Object.entries()
1,Object.entries():方法返回一个给定对象自身可枚举属性的键值对数组
- 示例1 -- 字符串
const str = '123';
console.log(Object.entries(str)); // [['0', '1'], ['1', '2'], ['2', '3']]
- 示例2 -- 数组
const arr = [1, 2, 3];
console.log(Object.entries(arr)); // [['0', 1], ['1', '2'], ['2', '3']]
- 示例3 -- 对象
const obj = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 'abc']]
- 实例 -- 数字、浮点数
const num = 123;
console.log(Object.entries(num)); // []
const float1 = 12.3;
console.log(Object.entries(float1)); // []
5,判断元素是否是数组
1,instanceof 判断元素是否是数组
var list = []
console.log(list instanceof Array);// true
2,constructor 判断元素是否是数组
let arr = [];
console.log(arr.constructor == Array); //true
3,isArray 判断元素是否是数组
let arr = [];
console.log(Array.isArray(arr)); //true
json
1,JSON.parse():从一个字符串中解析出json对象,当获取本地存储的json字符串时,要转换为对象
var data='{"name":"goatling"}'
JSON.parse(data) // name:"goatling"
2,JSON.stringify():从一个对象中解析出字符串;一般存储都是以json字符串形式存储
var data={name:'goatling'}
JSON.stringify(data) // '{"name":"goatling"}'
对于对象,方法后期还会继续补充......