Javascript内置对象（一）——String&Array

JavaScript有一些常见的内置对象，如String，Array，Boolean，Date，Regexp，Object，Number，Function等。这些内置对象看起来简单，实际关系异常复杂。
这些内置对象从表现形式来说很像其他语言中的类型（type）或者类（class），比如Java中的String 类。有时候说js是比java更加面向对象的语言，一点不为过。

String对象

String对象是JavaScript原生提供的三个包装对象之一，用来生成字符串的包装对象实例。
平时我们经常使用的String对象属性方法有：

• length属性：返回字符串长度
• concat：用来连接两个字符串
• substr和slice：用来截取字符串，不过截取方式不同
• indexOf：确定一个字符串在另一个字符串中的位置
• trim：用于去除字符串两端的空格
• toLowerCase 和 toUpperCase ：改变字符串大小写
• repalce：用于替换匹配的子字符串，一般情况下只替换第一个匹配
• split：分割字符串，返回一个由分割出来的各部分组成的新数组。

下面分析一段代码

    var str1 = 'a test string'    var str2 = new String('a test string')    str1.length                    //13    str1.indexOf('t')              //2    console.log(typeof str1)       //string    console.log(typeof str2)       //object    str1 instanceof String         //false    str2 instanceof String         //true

原始值str1 并不是一个对象，它只是一个字面量，并且是一个不可变的值。如果要在这个字面量上执行一些操作，比如获取长度、访问其中某个字符等，那需要将其转换为String 对象。
以上的内容用下面这段代码解释再好不过。

String instanceof Objectnew String('foo') instanceof String; // truenew String('foo') instanceof Object; // true'foo' instanceof String; // false'foo' instanceof Object; // false

String对象调用Array对象方法

许多数组函数用来处理字符串很方便。虽然字符串没有这些函数，但可以通过“借用”数组的非变更方法来处理字符串：

var a = 'feiyan'a.join; // undefineda.map; // undefinedvar c = Array.prototype.join.call( a, "-" );var d = Array.prototype.map.call( a, function(v){return v.toUpperCase() + ".";} ).join( "" );c;            //f-e-i-y-a-nd;            //F.E.I.Y.A.N.

其中的join方法和map方法都是数组对象的方法，这里字符串对象可以通过原型调用先把字符串对象转化为数字对象，然后再通过join方法变为字符串。而很多时候我们可以用[]代替Array.prototype:

Array.prototype === [].__proto__   //true

在许多方面，字符串表现的好像字符数组，许多Javascript array相关方法也可以使用在String类型上，但是并不是所有的方法都可以。看下面示例：

var name = 'feiyan'a = [].push.call(name, 'is my love girl')

报错：提示Javascript中字符串是只读的，因此任何方法想改变字符串都将失败，因此可以排除掉数组的push、pop、shift、unshift、splice、reverse方法。如果真要实现这个功能，这样这么做：

var name = 'feiyan'name.concat(' is my love girl').split()

其他一些不改变原字符串的方法（如一些遍历方法）可以随意使用：

var str1 = 'a lovely girl'var a = [].forEach.call(str1,function(ele,index,arr){    console.log(ele)    })

ES6常用字符串特性

ES6为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历。

for(var i of 'string'){    console.log(i)}

ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ’ 或 ” 外，它们看起来与普通字符串并无二致。在最简单的情况下，它们与普通字符串的表现一致。
现在，我们看到了一个比 + 运算符更优雅的语法，下面是一些你期待的特性：

• 模板占位符可以是任何 JavaScript 表达式，所以函数调用和四则运算等都是合法的。（甚至你还可以在一个模板字符串中嵌套另一个模板字符串。）
• 如果一个值不是字符串，它将被转换为字符串。例如，如果 action 是一个对象，那么该对象的 .toString() 将被调用，来将其转换为字符串。
• 如果你想在模板字符串中使用反引号，你需要使用反斜杠 \ 将其转义。
• 同样地，如果想在模板字符串中输出 ${，也需要使用反斜杠将其转义：${ 或 ${。
• 模板字符串可以跨越多行：

$("#warning").html(`  <h1>Warning Title!</h1>  <p>This is some information,it is ${warning}</p>`);

Array对象

Array是JavaScript的内置对象，同时也是一个构造函数，可以用它生成新的数组。
作为构造函数时，Array可以接受参数，但是不同的参数，会使得Array产生不同的行为。
数组对象的常用方法如下：

• isArray：判断一个值是否为数组
• toString：返回数组的字符串形式
• push方法，pop方法：push方法用于在数组的末端添加一个或多个元素，并返回添加后的数组的长度，pop方法用于删除数组的最后一个元素，并返回该元素
• join：以参数作为分隔符，将所有数组成员组成一个字符串返回
• concat：将新数组的成员，添加到原数组的尾部，然后返回一个新数组，常用于连接多个数组
• shift方法，unshift方法： shift方法用于删除数组的第一个元素，并返回该元素，unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度
• reverse：用于颠倒数组中元素的顺序
• slice返回指定位置的数组成员组成的新数组，原数组不变。它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员
• sort：对数组元素进行排序，默认是按照字典顺序排序
• map：对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组
• forEach：遍历数组的所有成员
• filter：依次对所有数组成员调用一个测试函数
• indexOf：返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1

Array.from

有时需要将类数组（一组通过数字索引的值）转换为真正的数组，这一般通过数组工具函数（如indexOf(..)、concat(..)、forEach(..) 等）来实现。类数组如下：
例如，一些DOM 查询操作会返回DOM 元素列表，它们并非真正意义上的数组，但十分
类似。另一个例子是通过arguments 对象（类数组）将函数的参数当作列表来访问（从
ES6 开始已废止）。

function foo() {var arr = Array.prototype.slice.call( arguments );arr.push( "bam" );console.log( arr );}foo( "bar", "baz" ); // ["bar","baz","bam"]

如上所示，slice() 返回参数列表（上例中是一个类数组）的一个数组复本。
用ES6 中的内置工具函数Array.from(..) 也能实现同样的功能：

function f() {  return Array.from(arguments);}

Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例。

Array.from('foo'); // ["f", "o", "o"]

Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

Array.from({ length: 3 });// [ undefined, undefined, undefined ]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]Array.from([1,2,3].map((x) => x * x))// [1, 4, 9]

find方法

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 5, 10, 15].find(function(value, index, arr) {  return value > 9;}) // 10

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

fill方法

fill方法使用给定值，填充一个数组。fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']

includes方法

includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

空位的处理

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。
ES5 对空位的处理，大多数情况下会忽略空位。

• forEach(), filter(), every() 和some()都会跳过空位。
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// forEach方法[,'a'].forEach((x,i) => console.log(i)); // 1// filter方法['a',,'b'].filter(x => true) // ['a','b']// every方法[,'a'].every(x => x==='a') // true// some方法[,'a'].some(x => x !== 'a') // false// map方法[,'a'].map(x => 1) // [,1]// join方法[,'a',undefined,null].join('#') // "#a##"// toString方法[,'a',undefined,null].toString() // ",a,,"

ES6 则是明确将空位转为undefined。Array.from方法会将数组的空位，转为undefined，也就是说，这个方法不会忽略空位。for…of循环也会遍历空位。

Array.from(['a',,'b'])// [ "a", undefined, "b" ]let arr = [, ,];for (let i of arr) {  console.log(1);}// 1// 1

数组arr有两个空位，for…of并没有忽略它们。如果改成map方法遍历，空位是会跳过的。