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"}'

对于对象,方法后期还会继续补充......

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容