JS红包书读书笔记 — 5.引用类型之常见引用类型&基本包装类型&单体内置对象-CSDN博客

本文链接：https://blog.csdn.net/qq_40503374/article/details/106455202

5.引用类型

5.1.Object

点表示法访问属性
方括号表示法访问属性
- 需要加""
- 可以使用变量访问 person[propertyName]
- 可以使用特殊字符访问 person["first name"]

5.2.Array

检测数组
- instance of
- Array . isArray(value)

var num = [1, 2, 3];
num.length = 2;
alert(num[2]);       // undefined

var num = Array(3);
alert(num[4]);       // undefined

var num = [1, 2, 3];
num[num.length] = 4;

var colors = ["red", "blue", "green"];
console.log(colors.toString());   // 返回元素与逗号拼接的字符串
console.log(colors.valueOf());    // 返回数组本身

// toLocalString 调用数组中每一项的toLocalString方法
// alert自动调用toString方法
var person1 = {
  toLocalString: function () {
    return "ming";
  },
  toString: function() {
    return "Ming";
  }
};
var person2 = {
  toLocalString: function () {
    return "mei";
  },
  toString: function() {
    return "Mei";
  }
};
var people = [person1, person2];
alert(people);    // Ming,Mei
alert(people.toString());   // Ming,Mei
alert(people.toLocalString());   // ming,mei

//删除
var arr = [1,2,3,4,5];
delete arr[2];//arr = [1,2,undefined,4,5];

//查找
var arr = [2,5,6,8,9,10,13];
arr.indexOf(9);//返回4
arr.indexOf(7)；//返回-1

var arr = [5,6,7,8];
//push();在数组的最后添加一个或多个值，返回数组的新的长度
var info1 = arr.push(9);//arr = [5,6,7,8,9];
console.log(info1);//打印为5

//pop();删除并且返回数组最后一个元素
var info2 = arr.pop();//arr = [5,6,7,8];
console.log(info2);//打印为9

//unshift();可以向数组的开头添加一个或者多个元素，返回新长度
var info3 = arr.unshift(4);//arr = [4,5,6,7,8];
console.log(info3);//打印为5

//shift();删除数组的第一个元素，并且返回删除的元素
var info4 = arr.shift();//arr[5,6,7,8];
console.log(info4);//打印为4

//forEach(), 三个参数:元素(必选),index,array
var arr1 = [1,2,3,4,5,6];
var arr2 = [];
arr1.forEach(function(item, index, arr){
    arr2 = arr;
});

//join(),用于把数组中的所有的元素转换成一个字符串
var arr = ['hello','world','!'];
var info = arr.join('');
console.log(info);//helloworld!

//reverse(),用于颠倒数组中元素的顺序（更改初始数组）
var arr = [4,56,87,2,3];
arr.reverse();
console.log(arr);//[3,2,87,56,4]

//sort(),对数组进行排序
var arr = [4,56,87,2,3];
arr.sort(function(arg1,arg2){
    return arg1 - arg2 ;
});
console.log(arr);//[2,3,4,56,87];

//concat(arr1,arr2,...),用于连接两个或多个数组
var arr1 = ['a','b',2];
var arr2 = [1,'cb',45];
var info = arr1.concat(arr2);
console.log(info);

//slice(),可从已有的数组中返回选定的元素
var arr = [1,3,4,5,6,7];
var info = arr.slice(1,3);
console.log(info);//[3,4];

//splice(),用于添加或删除数组中的元素（会改变原数组）三个参数:开始索引，选中元素个数，添加的元素
var arr = [1,3,4,5,6,7];
var info = arr.splice(1,1,'a');
console.log(info);//3
console.log(arr);//[1,'a',4,5,6,7]

//filter();(函数过滤器), 创建一个新的数组，新数组中的元素是通过检查指定数组中符和条件的所有元素
var arr1 = [1,2,3,5,6,8,9,12];
var info = arr1.filter(function(item){
    if(item % 2 === 0){
        return true;
    }
});
console.log(info);//[2,6,8,12]

//map(),返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
var arr1 = [2,4,6,8];
var info = arr1.map(function(item){
    var num = item * 2;
    return item;
});
console.log(info);//[4,8,12,16]

//reduce(),接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
var arr = [2,4,6,8,9,10];
var info = arr.reduce(function(add,item){
    return add + item;
});
console.log(info);//39

//every(),如果数组中有一个元素不满足，则整个表达式返回false.且剩余元素不会进行检测
var arr = [2,4,5,6,8,10];
var info = arr.every(function(item){
    if(item % 2 === 0){
        return ;
    }
});
console.log(info);//false

//some(),如果有一个满足条件，则表达式返回true，剩余的元素不会在执行检测
var arr = [2,4,5,6,8,10];
//判断是否有奇数
var info = arr.some(function(item){
    if(item % 2 ！== 0){
        return;
    }
});

5.3.Date

5.4.RegExp#

5.5.Function

5.5.1.没有重载

5.5.2.函数声明与函数表达式

函数声明

alert(sum(10,10));          
function(num1, num2) {   					 // 函数声明
  return num1 + num2;
}  
// 函数声明提升

函数表达式

alert(sum(10,10));                 // unexpected identifier
var sum = function(num1, num2) {   // 函数表达式
  return num1 + num2;
}

5.5.3.作为值的函数

函数作为参数
函数作为返回值

5.5.4.函数内部属性

arguments

function factorial(num) {
  if(num <= 1){
    return 1;
  }else {
    // return num * factorial(num - 1);
    return num * arguments.callee(num - 1);    // 严格模式下不支持
  }
}

this
- this指向的是函数据以执行的环境对象
caller
- 返回当前函数的调用者

5.5.5.函数属性和方法

ECMAScript中的函数也是对象，所以也有属性和方法
属性：length, prototype
- length表示函数希望接受的命名参数的个数
- prototype (第六章详细介绍)
方法：call( ), apply( ), bind( )
- call : 调用函数，改变函数内部的this指向；主要用于继承
- apply : 调用函数，函数第二个参数必须是数组，改变函数内部this指向；主要应用于数组
- bind : 不会调用函数，改变函数内部this指向
```
var btn = document.querySelector('button');
btn.onclick = function() {
  	this.disabled = true;
  	setTimeout(function() {
      	this.disabled = false;
    }.bind(this), 3000)
}
```

5.6.基本包装类型

基本类型没有方法，所以后台会进行如下处理

var s1 = "some text";
var s2 = s1.substring(2);
// 真正的执行过程
var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

特点

与引用类型相比，生存期不同

检测类型

var s1 = "some text";
var s2 = new String("some text");
alert(typeof s1);               // string
alert(typeof s2);               // object
alert(s1 instanceof String);    // false
alert(s2 instanceof String);    // true

Object的构造函数会像工厂方法一样，根据传入值的类型返回相应的基本包装类型的实例
```
var obj = new Object("hello");
alert(obj instanceof String);  // true
```

使用new调用基本包装类型的构造函数，与直接调用同名的转型函数不同

var value = 25;

var num = Number(value);
alert(typeof num);     // number

var obj = new Number(value);
alert(typeof obj);     // object

Boolean 类型
- 布尔表达式中所有的Boolean类型实例都会被转换为true
- 重写了valueOf( )，toString( )方法
  - valueOf( )返回基本布尔类型

Number类型

重写了valueOf( ), toLocalString( ), toString( )方法
- toString( )可以传参(指定进制)

方法

// 格式化数值
// toFixed()  指定小数位数
var num1 = 10;
alert(num1.toFixed(2));   // "10.00"

var num2 = 10.005;
alert(num2.toFixed(2));   // "10.01"

// toExponential()  指数表示法
var num = 10;
alert(num.toExponential(1));    // 1.0e + 1

// toPrecision(表示数字的位数)    根据需要选择toFixed() or toExponential()
var num = 99;
alert(num.toPrecision(1));      // 1e + 2
alert(num.toPrecision(2));      // 99
alert(num.toPrecision(3));      // 99.0

String类型

toString( ), valueOf( ), toLocalString( )返回对象所表示的基本字符串值

方法

//charAt(),可返回指定位置的字符
var str = 'hello world';
var info = str.charAt(2);
console.log(info);//l

//concat(),将多个字符串拼接
var str1 = 'hello';
var str2 = 'world';
var str3 = '!';
var info = str1.concat(str2,str3);
console.log(info);//helloworld!

//split(),可以把字符串分割成字符串（第二个参数非必须）
var str = 'hello world !';
var info = str.split(' ',2);
console.log(info);//['hello','world'];

//indexOf(),可以返回一个字符在字符串中首次出现的位置
var str = 'hello world';
var info = str.indexOf('l');
console.log(info);//2

//lastIndexOf(),返回一个字符在字符串最后出现的位置
var str = 'hello world';
var info = str.lastIndexOf('l');
console.log(info);//9

//slice(),可以从字符串中截取指定的字符
var str = 'hello world';
var info = str.slice(1,3);
console.log(info);//el

//substr(),可以从字符串当中抽取从开始位置指定的个数的字符 两个参数：截取位置，截取长度
var str = 'hello world';
var info = str.substr(2,2);
console.log(info);//ll

//substring(),从开始和结束的中间截取字符串
var str = 'hello world';
var info = str.substring(1,3);
console.log(info);//el

//toLowerCase() and toUpperCase()

//replace(),替换字符,（可以和正则搭配）
var str = 'hello world';
var info = str.replace('lo','**');
console.log(info);//hel** world

//search(),用于在字符串当中检索查找指定的字符（可以和正则配合）
var str = 'hello world';
var info = str.search('o');
console.log(info);//4

//match(),可以在字符串中检索指定的值,返回具体的信息（可以和正则配合）
var str = 'hello world';
var info = str.match('o');
console.log(info);//Array[0:'o',index:4,input:'hello world',length:1]

//charCodeAt(),可返回指定位置的字符的Unicode编码
var str = 'hello world';
var info = str.charCodeAt(2);
console.log(info);//108