扩展2：字符串转化为数组

YMIAS

已于 2023-01-03 17:40:37 修改

阅读量180

点赞数

分类专栏： es6 文章标签： javascript es6

于 2023-01-03 17:27:29 首次发布

原文链接：https://blog.csdn.net/qq_40843345/article/details/123204853 https://blog.csdn.net/m0_73257876/article/details/126990676

版权

es6 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、.split('')

const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split('');
console.log(myFavShowArray) //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

split还可以用字符或空格分隔字符串

使用（‘ ’）分割

const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split(' ');
console.log(myFavShowArray) //['The', 'Office']

使用（‘-’）分割

const favDialogue = 'Thats-what-she-said';
const favDialogueArr = favDialogue.split('-');
console.log(favDialogueArr) //['Thats', 'what', 'she', 'said']

2、扩展运算符

扩展运算符（spread），功能是把数组或类数组对象展开成一系列用逗号隔开的值。

剩余运算符（rest），不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

当三个在等号右边，或者放在实参上，是 spread运算符

当三个点(…)在等号左边，或者放在形参上，为 rest 运算符

比如说【扩展运算符spread】

//合并数组
var arr1 = [1,2,3];
var arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

//字符串转数组
var str = 'hello';
var arr3 = [...str];
console.log(arr3); // ["h", "e", "l", "l", "o"]

【剩余运算符】

//参数个数不确定时，用 rest运算符
function f1(...args) {
  console.log(args); // [1,2,3]
}
f1(1,2,3);

//参数个数不确定时的第二种情况
function f2(item, ...arr) {
  console.log(item); // 1
  console.log(arr);  // [2,3]
}
f2(1, 2, 3);

//rest运算符配合 解构使用
let [a,...temp]=[1, 2, 4];
console.log(a);    // 1
console.log(temp); // [2,4]

通过扩展运算符转化为数组：

const myFavShow = 'The Office'

const myFavShowArray = [...myFavShow]

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

消除了在 split() 中的限制也有帮助，考虑下面的例子，我们可以使用这种方法轻松拆分任何字符

const animal = '    '
const animalArr = [...animal]
console.log(animalArr) // ['  ', '  ']

3、使用 Array.from(str)

from() 方法从可迭代或类似数组的对象创建一个新的、浅拷贝的 Array 实例

const myFavShow = 'The Office'

const myFavShowArray = Array.from(myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

4、使用 Array.prototype.slice.call('string')

const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!']

5、for循环、array.push

const s = 'the office';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); // ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e']

slice()、splice()、Array.prototype.slice.call()区别

slice(start,end)：

返回一个新数组，包含从start到end（不包含该元素）的数组元素

注意：该方法不会改变原数组，而是返回一个子数组，如果想删除数组中的一段元素，应该使用Array.splice()方法。

var arr = [1,2,3,4,5];
console.log(arr.slice(1));//[2,3,4,5]  
console.log(arr.slice(1,3))//[2,3]  
console.log(arr); //[1,2,3,4,5]

同时slice(start,end)可以作用于字符串的切割

var str = "Hello,world!";
var sliceStr = str.slice(1,5);//ello 
var subStr = str.substring(1,5);//ello
var subStr = str.substr(1,5);//ello,
var str = "1000000";
var sliceStr = str.slice(-3);//000  从序列号为-3的位置到最后

splice（index,howmany,item1,…itemX）

该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）

index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
howmany参数：必须，要删除的数量，如果为0，则不删除项目。
tem1,…itemX参数：可选，向数组添加的新项目。

var arr = [1,2,3,4,5];
console.log(arr.splice(2,1,"hello"));//[3]  返回的新数组
console.log(arr);//[1, 2, "hello", 4, 5]  改变了原数组

Array.prototype.slice.call()

能将具有length属性的对象转成数组，除了IE下的节点集合

slice:用来截取截取字符串方法
Array: javascript的一个引用类型，其原型prototype上有一个方法叫slice
call和apply ：用来改变对象中函数内部的this引用，使得函数可以随便换‘妈妈’

第一个参数是context（就是上下文的意思），用来替换对象函数中的this
第二个参数是传递给对象函数的参数

function test(a,b,c,d) 
   { 
      var arg = Array.prototype.slice.call(arguments,1); 
      alert(arg); 
   } 
   test("a","b","c","d"); //b,c,d

Array.prototype.slice.call(arguments, 1)可以理解成是让arguments转换成一个数组对象，让arguments具有slice()方法。要是直接写arguments.slice(1)会报错，原因 auguments是类数组，不是数组。arguments 是object 不是Array ，原型上没有slice方法

注意：类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

var a={length:2,0:'first',1:'second'};
//类数组,有length属性，长度为2，第0个是first，第1个是second
console.log(Array.prototype.slice.call(a,0));
// ["first", "second"],调用数组的slice(0);因为第二个参数没有指定，默认到最后一个

var a={length:2,0:'first',1:'second'};
console.log(Array.prototype.slice.call(a,1));//["second"]，调用数组的slice(1);

var a={0:'first',1:'second'};//去掉length属性，返回一个空数组
console.log(Array.prototype.slice.call(a,0));//[]

function test(){
  console.log(Array.prototype.slice.call(arguments,0));//["a", "b", "c"]
  console.log(Array.prototype.slice.call(arguments,1));//["b", "c"]
}
test("a","b","c");

将函数的实际参数转换成数组的方法

var args = Array.prototype.slice.call(arguments);

var args = []; 
for (var i = 1; i < arguments.length; i++) { 
    args.push(arguments[i]);
}

var toArray = function(s){
    try{
        return Array.prototype.slice.call(s);
    } catch(e){
        var arr = [];
        for(var i = 0,len = s.length; i < len; i++){
            //arr.push(s[i]);
               arr[i] = s[i];  //据说这样比push快
        }
         return arr;
    }
}

throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止（throw之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块，程序将会终止。

扩展：substring和substr的区别

截取字符串

相同点：如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

var str = '123456789';
console.log(str.substr(2));    //  "3456789"
console.log(str.substring(2)) ;//  "3456789"

不同点：第二个参数

substr（startIndex,lenth）：第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；

substring（startIndex, endIndex）：第二个参数是截取字符串最终的下标（截取2个位置之间的字符串,‘含头不含尾’）。

console.log("123456789".substr(2,5));    //  "34567"
console.log("123456789".substring(2,5)) ;//  "345"

JavaScript 错误 - throw、try 和 catch

try 和 catch，语句 try 和 catch 是成对出现的

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

Throw 语句，允许我们创建自定义错误。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;

    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}