JavaScript之字符串、数组、对象

前段切图仔
145 阅读12分钟

“这是我参与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"}'

如有错误请指正

avatar
文章
阅读
粉丝
相关推荐
探索优雅的处理 JavaScript 类数组对象的技巧
3.8k阅读
 · 
8点赞
掌握JavaScript中数组遍历的7种方法，成为数组操作达人！
11k阅读
 · 
98点赞
面试官：如何判断两个数组的内容是否相等
60k阅读
 · 
723点赞
JavaScript 终于原生支持数组分组了！
9.9k阅读
 · 
57点赞
JavaScript常用数组对象方法总结
1.5k阅读
 · 
15点赞
JavaScript 将对象数组按字母顺序排序
1.4k阅读
 · 
13点赞
[干货分享] JavaScript 好用的数组对象排序方法
4.2k阅读
 · 
10点赞
JavaScript数组对象和字符串对象
231阅读
 · 
2点赞
🌄 JavaScript 的三座大山
89k阅读
 · 
1.5k点赞
JavaScript数组切片方法
2.8k阅读
 · 
17点赞

友情链接：