JavaScript之字符串、数组、对象

·  阅读 63

这是我参与8月更文挑战的第15天,活动详情查看:8月更文挑战

字符串

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"}'
复制代码

如有错误请指正

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改