【JS逆向】【8.JavaScript 基础语法】Object对象，序列化与反序列化（详细讲解）

对象

1. 什么是对象？

英文名object，翻译成中文就是对象。用英语的角度来说object就是物体实体，即使他看不见摸不着。中文的对象指的是女朋友。在计算机中，用英语的角度理解对象，就是说：放在内存里面的复杂数据集合，也叫做数据与方法的封装，是一种编程逻辑概念。

函数是对数据与代码的封装，假如再把函数及函数外的数据进行封装，那就是object，即对象。

2. 创建一个对象

将一些函数与对象封装起来就是对象，所谓封装在语法层面就是，把函数和变量用英文大括号{}包起来。使用：key：value的形式，value可以是对象的值，也可以是对象的地址。

key的值可以不符合标识符的命名规范，但是必须使用引号引起来，比如’12qw’=1。每个键值对之间使用英文逗号隔开。

## 语法1
// 内置
let obj = new Object() // 等于 let obj = {}
// 自定义构造函数
let obj = new Fn()
// 同一个引用地址
let obj1 = new Object(obj)
console.log(obj1 === obj) // true

## 语法2
// 创建一个obj对象
var obj1 = {
    str1: 'woaini',
    "10p": 10
};

## 示例1
function f() {
    console.log(1)
};
var obj1 = {
    str1: 'woaini',
    "10p": 10,
    fun: f,
    fun1: function() {
        console.log(2)
    }
};
obj1.fun();
obj1.fun1();

如果一个键的值是一个函数，则称这个键名为这个对象的方法。如果一个键的值是基本数据类型，则称这个键名为这个对象的属性。

3. 对象的嵌套

即对象的属性仍然可以是一个对象。运算符.表示getattr的意思，即访问对象属性。

var obj1 = {
    str1: 'woaini',
    "10p": 10,
    fun1: function() {
        console.log(2)
    },
    obj_inn: obj2 = {
        num: 1
    }
};
console.log(obj1.obj_inn.num);

4. 对象的属性与修改

使用点.运算符

var obj1 = {
    str1: 'woaini',
};
console.log(obj1.str1);

使用[]符号

var obj1 = {
    str1: 'woaini',
};
console.log(obj1['str1'])

修改属性

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
console.log(obj1['str1'])
``

## 5. 给对象添加属性

```python
var obj1 = {
 
};
obj1.name = 'xiaoming';
obj1['age'] = 10;
console.log(obj1.age, obj1.name);

6. 查看与删除对象的属性

使用Object.keys(obj)方法查看对象所有属性

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(Object.keys(obj1))
// [ 'str1', 'age' ]

使用delete()方法删除对象属性

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(delete obj1.age)
// true

删除一个对象里不存在的属性不仅不会报错而且还会返回true。当试图删除一个无法删除的属性时，则会返回false。删除对象属性：实际上是与相关的对象进行解绑。

使用增强版for循环遍历对象元素

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
 
for (var item in obj1) {
    console.log(obj1[item])
}

7. 判断对象是否有其内容

可以判断本身和原型身上，包括不可枚举的属性

console.log('name' in obj) // 有就返回true

只能判断本身，包括不可枚举的

obj.hasOwnProperty("xxx") // 有就返回true

只能判断本身，且只能可枚举的

obj.propertyIsEnumerable("xxx") // 有就返回true

8. ES6新增方法

Object.is

Object.is 行为类似 === ，是为了修复 NaN === NaN 为false的问题

console.log(Object.is(NaN, NaN));

Object.assign()

合并对象

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {};
const obj4 = Object.assign(obj1, obj2, obj3)

注意：合并的时候要看看有没有相同的属性，会被覆盖。

Object.keys()

获取所有key值，结果是属性名组成的数组(不包括原型上的方法和属性，也不包括不可枚举属性)。

let obj = {
  a: 1,
  b: 2,
  c: 3,
};
console.log(Object.keys(obj)); // ["a", "b", "c"]

Object.values()

获取所有值，组成数组返回：

let obj = {
    a: 1,
    b: 2
}
let values = Object.values(obj) // [1, 2]

9. 对象序列化和反序列化

方法	描述
JSON.stringify(obj)	把obj对象转换成json格式字符串，会移除对象方法
JSON.parse(str)	把符合json语法的字符串转换成js对象

序列化

• 序列化是把对象转换成有序字节流，以便在网络上传输或者保存在本地文件中。
• 序列化机制的核心作用就是对象状态的保存与重建。
• 本质上讲，序列化就是把实体对象状态按照一定的格式写入到有序字节流

# 方法：
# obj => 对象   str => 字符串  arr => 数组
1. JSON.stringify(obj);
2. for (key in obj) {
  arr.push(key + ':' + obj[key])
}
str = arr.join(',')

反序列化

• 客户端从文件中或网络上获得序列化后的对象字节流后，
• 根据字节流中所保存的对象状态及描述信息，通过反序列化重建对象。
• 本质上讲，反序列化就是从有序字节流重建对象，恢复对象状态。

# 方法：
# obj => 对象   str => 字符串  arr => 数组
1. eval('(' + str + ')')
2. JSON.parse(str)
3. arr = str.split(',')
for (let i = 0; i < arr.length; i++) {
	let temp = arr[i].split(':')
	obj[temp[0]] = temp[1]
}

10. 内置对象

【1】Math对象

方法	作用
PI	获取圆周率，结果：3.141592653589793
abs(x)	获取x的绝对值，可传入普通数值或 是字符串表示的数值
max(value1,value2,…)	最大值
min(value1,value2,…)	最小值
pow(base,exponent)	获取基数(base)的指数(exponent)次幂，即base[^ exponent]
sqrt(x)	获取x的平方根
ceil(x)	获取大于或等于x的最小整数，即向上取整
floor(x)	获取小于或等于x的最大整数，即向下取整
round(x)	获取x的四舍五入后的整数值
random(x)	获取大于或等于0.0且小于1.0的随机值

abs()

<script>  
    //获取绝对值
    console.log(Math.abs(121));    //获取绝对值，正数直接为正数,故输出121
    console.log(Math.abs(-121));   //获取绝对值，负数转换为正数,故输出121
    console.log(Math.abs('121'));  //获取绝对值，自动转换为数字,故输出121
    console.log(Math.abs('b'));    //获取绝对值，无法转换为数字,故输出NaN
</script>

pow()

<script>  
    //次幂
    console.log(Math.pow(2,3));    //获取2的3次幂，故输出8
    console.log(Math.pow(2,-3));   //获取2的-3次幂，故输出0.125
    console.log(Math.pow(1.1,2));  //获取1.1的2次幂，故输出1.21
    //平方根
    console.log(Math.sqrt(4));     //获取正整数4的平方根，故输出2
    console.log(Math.sqrt(1.21));  //获取浮点数1.21的平方根，故输出1.1
    console.log(Math.sqrt(-4));    //获取负数-4的平方根，负数无平方根，故输出NaN
</script>

ceil()，floor()

<script>  
    //向上取整
    console.log(Math.ceil(1.2));
    console.log(Math.ceil(-1.8));
    //向下取整
    console.log(Math.floor(1.8));
    console.log(Math.floor(-1.2));
</script>

round()

<script>  
    //四舍五入
    console.log(Math.round(1.2));  
    console.log(Math.round(1.5));
    console.log(Math.round(1.8));
    console.log(Math.round(-1.2));
    console.log(Math.round(-1.5));    //取较大值-1
    console.log(Math.round(-1.8));   
</script>

random()

Math.random()用来获取随机值，每次调用返回的结果都不相同，该方法返回的结果是一个浮点数，其范围是0~1（不包括1）。
由于Math.random()返回的这个随机数不太常用，我们可借助数学公式来转换成任意范围内的随机数。

<script>
    function  getRandom(min,max){
        return Math.random()*(max-min) + min;
    }
    console.log(getRandom(1,10));  //返回值的范围为[1,10)，浮点数
    console.log(getRandom(0,10));  //返回值的范围为[0,10)，浮点数
</script>

案例 - 猜数字游戏

<script>
//定义生成指定范围的随机整数的函数,指定范围：[min，max]
function getRandom(min,max){
   return Math.floor(Math.random()*(max-min+1)+min);
}
//生成一个指定范围的随机整数，整数范围：[1,10]
var random = getRandom(1,10);
//规定猜数字游戏的最大机会数
var count = 3;
//猜数字游戏的游戏规划
while(count){
   var num = prompt();
   count --;
   if(num > random){
       if(count != 0){
           alert('你所猜的数猜大了！还剩机会数为' + count);
       }else{
           alert('你所猜的数猜大了！还剩机会数为' + count + ',很遗憾你游戏失败！');
       }
       
   }else if(num < random){
       if(count != 0){
           alert('你所猜的数猜小了！还剩机会数为' + count);
       }else{
           alert('你所猜的数猜小了！还剩机会数为' + count + ',很遗憾你游戏失败！');
       }
   }else{
       alert('恭喜你猜对了！');
       break;
   }
}
</script>

【2】日期对象

日期对象

JavaScript中的日期对象用来处理日期和时间。例如：秒杀活动中日期的实时展示效果，在线日历等。

JavaScript中的日期对象需要实例化对象后才能使用，Date’()是日期的构造函数。

在创建日期对象时，可以为Date()构造函数传入一些参数，来表示具体的日期。

日期对象的创建方式可简单地划分为3种：

• 无参数，使用当前系统的当前时间作为对象保存的时间
• 传入年，月（范围为0~11，即真实月份数-1），日，时，分，秒等参数
• 用字符串表示日期和时间

//法1：无参数，使用当前系统的当前时间作为对象保存的时间
var date1 = new Date();
console.log(date1);
//法2：传入年，月（范围为0~11，即真实月份数-1），日，时，分，秒等参数
var date2 = new Date(2022,10,15,10,15,10);
console.log(date2);
//法3：用字符串表示日期和时间
var date3 = new Date('2022-10-15 10:15:10');
console.log(date3);

知识点：

• 在创建日期对象时，必须先用new创建Date对象，否则会报错。
• 如果传入参数数据超过参数的范围，系统会自动转化，不会报错。
• 如果用字符串表示日期和时间，注意该字符串是否合法，若不合法，系统会报错（Invalid Date）。

常用 get 方法

方法	作用
getFullYear()	获取表示年份的4位数字，如2022
getMonth()	获取月份，范围为0~11（0表示1月，1表示2月，依次类推）
getDate()	获取月份中的某一天，范围为1~31
getDay()	获取星期，范围为0~6（0表示星期天，1表示星期一，依次类推）
getHours()	获取小时数，范围为0~23
getMinutes()	获取分钟数，范围为0~59
getSeconds()	获取秒数，范围为0~59
getMilliseconds()	获取毫秒数，范围为0~999
getTime()	获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数

var date = new Date();                 // 通过new基于当前日期创建对象date
console.log(date);                     // 获取当前日期
console.log(date.getFullYear());       // 获取月
console.log(date.getMonth());          // 获取月
console.log(date.getDate());           // 获取日
console.log(date.getHours());          // 获取小时数
console.log(date.getMinutes());        // 获取分钟数
console.log(date.getSeconds());        // 获取秒数
console.log(date.getMilliseconds());   // 获取毫秒数
console.log(date.getTime());           // 获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数

常用 set 方法

方法	作用
setFullYear(value)	设置年数
setMonth(value)	设置月数
setDate(value)	设置月份中的某一天
setHours(value)	设置小时数
setMinutes(value)	设置分钟数
setSeconds(value)	设置秒数
setMilliseconds(value)	设置毫秒数
setTime(value)	通过从1970-01-01 00:00:00计时的毫秒数来设置时间

<script>
    var date = new Date();                //通过new基于当前日期创建对象date
    date.setFullYear(2022);               //设置月
    date.setMonth(10);                    //设置月
    date.setDate(15);                     //设置日
    date.setHours(10);                    //设置小时数
    date.setMinutes(15);                  //设置分钟数
    date.setSeconds(10);                  //设置秒数
    console.log(date);                    //获取当前创建的时间
</script>

知识点：

• 如果没有输入任何参数，则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。
• 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有指定 day 参数）或者 0（如果没有指定 day 以外的参数）。
• JavaScript 的时间由世界标准时间（UTC）1970 年 1 月 1 日开始，用毫秒计时，一天由 86,400,000 毫秒组成。Date 对象的范围是 -100,000,000 天至 100,000,000 天（等效的毫秒值）。
• 以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。
  - Date 对象为跨平台提供了统一的行为。时间属性可以在不同的系统中表示相同的时刻，而如果使用了本地时间对象，则反映当地的时间。

日期对象案例

案例 - 获取时间戳

<script>
//获取时间戳法1：通过日期对象的valueOf()和getTime()方法
var date1 = new Date();
console.log(date1.getTime());
console.log(date1.valueOf());

//获取时间戳法2：通过使用+运算符转换为数值型
var date2 = new Date();
console.log(+date2);

//获取时间戳法3：通过使用html5新增的Date.now()方法
var date3 = new Date();
console.log(Date.now());
</script>

案例 - 统计代码执行时间

<script>
    var timestamp1 = +new Date();
    for(var i = 0, str = ''; i < 1000 ; i++){
        str += i;
    }
    var timestamp2 = +new Date();
    console.log('代码执行时间为' + (timestamp2 - timestamp1));
</script>

案例 - 倒计时

<script>
function countDown(time){
   var nowTime = +new Date();                  //获取当前时间的时间戳
   var inputTime = +new Date(time);            //获取未来时间的时间戳
   var times = (inputTime - nowTime) / 1000;   //获取两个时间的时间戳差值
   var d = parseInt(times / 60 / 60 / 24);     //获取天数
   d = d < 10 ? '0'+ d : d;
   var h = parseInt(times / 60 / 60 % 24);     //获取小时数
   h = h < 10 ? '0'+ h : h;
   var m = parseInt(times / 60 % 60);          //获取分钟数
   m = m < 10 ? '0'+ m : m;
   var s = parseInt(times % 60);               //获取秒数
   s = s < 10 ? '0'+ s : s;
   return '距四级英语考试还有' + d + '天'+ h + '小时' + m + '分' + s + '秒';
}
console.log(countDown('2022-12-10 9:00:00'));
</script>

【3】数组对象

JavaScript中的数组对象可以使用new Array或者字面量“[ ]”来创建，在创建之后，就可以调用数组对象提供的一些方法来实现对数组的操作，如添加或删除数组元素，数组排序，数组索引。

类型检测

在开发中，有时需要检测变量的类型是否为数组。例如，在函数中，要求传入的参数必须是一个数组，不能传入其他类型的值，否则会报错，因此在这个时候可以在函数中检测参数类型是否为数组。

数组类型检测的常见方式有2种，分别为使用instanceof运算符和使用Array.isArray()方法

## 数组类型检测法1：使用instanceof运算符
参数 instanof Array
## 数组类型检测法2：使用Array.isArray()方法
Array.isArray(参数)

## 示例
<script>
    var arr = [];      //空数组创建
    var obj = {};	   //空对象创建
    # 数组类型检测法1：使用instanceof运算符
    console.log(arr instanceof Array);
    console.log(obj instanceof Array);

    # 数组类型检测法2：使用Array.isArray()方法
    console.log(Array.isArray(arr));
    console.log(Array.isArray(obj));
</script>

增删

方法名	功能描述	返回值
push(参数1…)	数组末尾添加一个或多个元素，会修改原数组	返回数组的新长度
unshift(参数1…)	数组开头添加一个或多个元素，会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组返回undefined，会修改原数组	返回删除的元素的值
shift()	删除数组的第一个元素，若是空数组返回undefined，会修改原数组	返回第一个元素的值

<script>
    var arr = ['one','two','three','four'];
    console.log('原数组为：'+ arr);

    //push()方法,数组末尾添加元素，返回新数组长度
    var len1 = arr.push('five','six');
    console.log('新数组为：'+ arr + '，新数组长度为：' + len1);

    //unshift()方法,数组开头添加元素，返回新数组长度
    var len2 = arr.unshift('zero');
    console.log('新数组为：'+ arr + '，新数组长度为：' + len2);

    //pop()方法，数组末尾元素删除，括号里有无参数输出无影响，返回移除的数组元素
    var lastIndex = arr.pop();
    console.log('新数组为：'+ arr + '，删除元素为：' + lastIndex);

    //shift()方法，数组开头元素删除，括号里有无参数输出无影响，返回移除的数组元素
    var firstIndex = arr.shift();
    console.log('新数组为：'+ arr + '，删除元素为：' + firstIndex);
</script>

筛选

<script>
    //筛选数组法1：未调用方法
    var arr = [18,65,48,32,79,84,94,69];
    var j = 0;
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i] >= 70){
            newArr[j++] = arr[i];
        }
    }
    console.log(newArr);

    //筛选数组法2:调用push方法
    var arr = [18,65,48,32,79,84,94,69];
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(arr[i] >= 70){
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);
</script>

排序

方法名	功能描述
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新数组
sort()	对数组的元素进行排序，该方法会改变原数组，返回新数组

<script>
    //数组元素排序
    //reverse()方法，颠倒数组元素位置，改变原数组返回新数组
    var arr1 = ['one','two','three','four'];
    arr1.reverse();
    console.log(arr1);

    //sort()方法，对数组元素进行排序，改变原数组返回新数组
    var arr2 = [14,23,2,8,7,16,9,32,18];
    arr2.sort();
    console.log(arr2);
</script>

索引

方法名	功能描述
indexOf()	返回在数组中找到给定值的第一个索引，如果不存在，则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个的索引，如果不存在，则返回-1

<script>
    var arr = ['yello','red','blue','red','orange'];
    //indexOf()方法，返回指定值在数组里的首个位置的索引，从左至右，如若数组中无该指定值，返回-1
    console.log(arr.indexOf('pink'));      
    console.log(arr.indexOf('red'));

    //lastIndexOf()方法，返回指定值在数组里的首个位置的索引，从右至左，如若数组中无该指定值，返回-1
    console.log(arr.lastIndexOf('pink'));
    console.log(arr.lastIndexOf('red'));
</script>

去重

<script>
    //数组元素去重处理原理：用旧数组元素去查询新数组，不存在就往新数组里添加数组元素，存在就跳过
    function unique(arr){   
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(newArr.indexOf(arr[i]) == -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var arr = [12,22,23,24,42,22,24];
    console.log(unique(arr));
</script>

数组转字符串

方法	功能描述
toString()	把数组转换为字符串，逗号分隔每一项
join(‘分隔符’)	将数组的所有元素连接到一个字符串中

<script>
    var arr = [undefined,'a','b','c','d','e',null];
    //使用toString()将数组转换为字符串
    console.log(arr.toString());  
    //使用join()将数组转换为字符串
    console.log(arr.join());
    console.log(arr.join(' '));
    console.log(arr.join('-'));
</script>

其他方法

方法名	功能描述
fill()	用一个固定值填充到数组中指定下标范围内的全部元素
splice()	数组删除，参数为splice(第几个开始，要删除的个数)，返回被删除项目的新数组
slice()	数组截取，参数为slice(begin,end)，返回被截取项目的新数组
concat()	连接两个或者多个数组，不影响原数组，返回一个新数组

fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

## 语法
fill(value)					//省略start和end，填充范围为[0,arr1.length-1]
fill(value, start)			//省略end,填充范围为[start,arr1.length-1]
fill(value, start, end)		//填充范围为[start,end-1]

## 示例
<script>
    //fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
    var arr1 = ['one','two','three','four','five'];
    console.log(arr1.fill('zero'));//省略start和end，填充范围为[0,arr1.length-1]

    var arr1 = ['one','two','three','four','five'];
    console.log(arr1.fill('zero',2));//省略end,填充范围为[start,arr1.length-1]

    var arr1 = ['one','two','three','four','five'];
    console.log(arr1.fill('zero',3,5));//填充范围为[start,end-1]
</script>

spilce()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组

## 语法
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

## 示例
<script>  
// splice(start)  由start索引开始删除数组元素，删除元素个数为arr.length - start
var arr1 = ['one','two','three','four','five','six'];
console.log(arr1.splice(1));     //返回由被删除的元素组成的一个数组
console.log(arr1);               //返回被删除元素后的数组

// splice(start, deleteCount)   由start索引开始删除数组元素，删除元素个数为deleteCount
var arr2 = ['one','two','three','four','five','six'];
console.log(arr2.splice(2,3));
console.log(arr2);

// splice(start, deleteCount, item1) 
// 由start索引开始删除数组元素，删除元素个数为deleteCount,然后在start位置添加元素item1
var arr3 = ['one','two','three','four','five','six'];
console.log(arr3.splice(2,3,'zero'));
console.log(arr3);

// splice(start, deleteCount, item1, item2, itemN)
// 由start索引开始删除数组元素，删除元素个数为deleteCount,然后在start位置开始添加元素item1，item2....
var arr4 = ['one','two','three','four','five','six'];
console.log(arr4.splice(2,3,'zero','ten'));
console.log(arr4)
</script>

slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝：

• 如果该元素是个对象引用（不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
• 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

## 语法
slice()
slice(start)
slice(start, end)

## 示例
<script>
    //slice() 数组截取，返回被截取元素的新数组，对原数组无影响
    var arr = [1,2,3,4,5];
    console.log(arr.slice());    //无参数，默认截取数组，截取范围：[0,len-1]
    console.log(arr.slice(1));   //有参数start，从start开始截取数组，截取范围：[start,len-1]
    console.log(arr.slice(1,2)); //有参数start和end，从start开始截取数组，截取范围：[start,end-1]
    console.log(arr);            //查看slice()方法对原数组的影响
</script>

concat()

concat()方法，连接多个数组，返回新数组，对原数组无影响

## 示例
<script>
    //concat()方法，连接多个数组，返回新数组，对原数组无影响
    //连接合并2个数组
    var arr1 = [1,2,3];
    var arr2 = [6,7,8];
    console.log(arr1.concat(arr2));

    //连接合并3个数组
    var arr1 = [3];
    var arr2 = [4,5];
    var arr3 = [6,7,8];
    console.log(arr1.concat(arr2,arr3));
</script>

【4】字符串对象

认识字符串对象

<script>
    var str = new String('abcdefg');
    console.log(str);
    console.log(str.length);
    var str = 'abcdefg';
    console.log(str);
    console.log(str.length);
</script>

拓展1：字符串对象String与字符串变量str的区别
为了更好地了解字符串对象String与字符串变量str的区别

<script>       
	//String字符串对象 与 str 字符串变量区别
    var obj = new String('abcdef');
    console.log(typeof obj);
    console.log(obj instanceof String);
    var str = 'abcdef';
    console.log(typeof str);
    console.log(str instanceof String);
</script>

据字符返回位置

方法	作用
indexOf(searchValue)	获取searchValue在字符串中首次出现的位置
lastIndexOf(searchValue)	获取searchValue在字符串中最后出现的位置

<script>
    //根据字符返回位置
    var str = 'abcdefedc';
    console.log(str.indexOf('d'));
    console.log(str.lastIndexOf('d'));
</script>

据位置返回字符

方法	作用
charAt(index)	获取index位置的字符，位置从0开始计算
charCodeAt(index)	获取index位置的字符的ASCll码
str[index]	获取指定index位置处的字符（HTML5新增）

<script>
    //根据位置返回字符
    var str = 'abcdef';
    console.log(str.charAt(2));
    console.log(str.charCodeAt(2));
    console.log(str[2]);
</script>

字符串操作方法

方法	作用
concat(str1,str2,…)	连接多个字符串，等效于+，+更实用
slice(start,end)	截取从start位置到end位置之间的一个子字符串，截取范围为[start,end-1]
substring(start,end)	截取从start位置到end位置之间的一个子字符串，基本和slice相同，但不接收负值
substr(start,end)	截取从start位置开始到length长度的子字符串
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split(separator,limit)	使用separator分隔符将字符串分隔成数组，limit用于限制数量
replace(str1,str2)	使用str2替换字符串中的str1，返回替换结果，只会替换第1个字符

concat()

concat()方法，连接多个字符串

<script>
    var str1 = 'abc';
    console.log(str1.concat('de'));            //连接一个字符串
    console.log(str1.concat('de','fg'));       //连接两个字符串
    console.log(str1.concat('de','fg','h'));   //连接三个字符串
    console.log(str1);                         //查看方法对原字符串的影响
</script>

slice()

slice()方法，截取从start位置到end位置之间的一个子字符串，截取范围为[start,end-1]

<script>
    var str2 = 'abcdefg';
    console.log(str2.slice());                 //无参数，默认截取字符串，截取范围：[0,len-1]
    console.log(str2.slice(2));                //有参数start，从start开始截取字符串，截取范围：[start,len-1]
    console.log(str2.slice(2,4));              //有参数start和end，从start开始截取字符串，截取范围：[start,end-1]
    console.log(str2);                         //查看方法对原字符串的影响
</script>

substr()

substr()方法，截取从start位置开始到length长度的子字符串

<script>
    var str3 = 'abcdefg';
    console.log(str3.substr());                //无参数，默认截取字符串，截取范围：[0,len-1]
    console.log(str3.substr(2));               //有参数start，从start开始截取字符串，截取范围：[start,len-1]
    console.log(str3.substr(2,2));             //有参数start和length，从start开始截取字符串，截取长度：length
    console.log(str3.substr(0,2));             //有参数length，从0开始截取字符串，截取长度：length
    console.log(str3);                         //查看方法对原字符串的影响
</script>

toLowerCase()，toUpperCase()

• toLowerCase()方法，获取字符串的小写形式
• toUpperCase()方法，获取字符串的大写形式

<script>
    var str4 = 'ABCdef';
    console.log(str4.toLowerCase());           //将字符串转为小写形式
    console.log(str4.toUpperCase());           //将字符串转为大写形式
    console.log(str4);                         //查看方法对原字符串的影响
</script>

split()

split()方法，使用separator分隔符将字符串分隔成数组，limit用于限制数量

<script>
    var str5 = 'ab,cd,efgh';
    console.log(str5.split(','));              //有参数separator，以分隔符将字符串分隔成数组
    console.log(str5.split(',',2));            //有参数separator和limit，以分隔符将字符串分隔成数组，limit限制个数
    console.log(str5);
</script>

replace()

replace()方法,使用str2替换字符串中的str1，返回替换结果，只会替换第1个字符

<script>
    //replace()方法,使用str2替换字符串中的str1，返回替换结果，只会替换第1个字符
    var str6 = 'abcdefg';
    console.log(str6.replace('a','b'));       //将字符串中的str1替换为str2，返回替换结果，只会替换第1个字符
    console.log(str6);
</script>

基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

var str = 'andy' ;
console.log(str. length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下︰

//1.生成临时变量，把简单类型包装为复杂数据类型
var temp = new string ( 'andy' );
//2.赋值给我们声明的字符变量
str = temp;
//3.销毁临时变量
temp = null;

字符串的不变性

字符串的不变性指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

<script>
    var str = 'abc';
    console.log(str);       
	var str = 'bcd';     //当重新给str赋值的时候，常量"abc'不会被修改，
    console.log(str);	 //依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
</script>

注意：由于字符串的不可变，在大量拼接字符串的时候会有效率问题