前端系列之JavaScript(内置对象)

Array(数组)

ECMAScript中的Array数组，数组主要是用来存储一组数据的。

创建数组

1.使用Array构造函数，语法：new Array()
小括号()说明：
（1）预先知道数组要保存的项目数量
（2）向Array构造函数中传递数组应包含的项。
2.使用数组字面量表示法
由一堆包含数组项的方括号[]表示，多个数组项之间以逗号隔开。

数组元素的读写：
读取和设置值时，使用方括号[]并提供相应的索引
说明：索引是从0开始的正整数

length属性

语法：array.length
功能：获取数组array的长度
返回值：number
说明：1、通过设置length可以从数组的末尾移除项或向数组中添加新项。
2、把一个值放在超出当前数组大小的位置上时，会重新计算数组长度值，长度值等于最后一项索引加1.

<script>
            //创建一个保存颜色的数组
            var colors=new Array(3);
            colors[0]="#f00";
            colors[1]="#00f";
            var nums=new Array(1,2,5,8);
            console.log(colors);
            console.log(nums);
            var cols=["red","yellow","green"];
            console.log(cols);
            var infos=[6,"marry",true,{email:"vishuo@163.com"}];
            console.log(infos);

            console.log(cols[1]);//读取cols数组中索引为1的值·

            infos.length=3;
            console.log(infos.length);

            infos[99]="z";
            console.log(infos);

            //数组的遍历
            for(var i=0;i<infos.length;i++){
                console.log(infos[i]);
            }


</script>

数组的栈方法：

push():
语法：arrayObject.push(newele1,newele2,......,newxX)
功能：把它的参数顺序添加到arrayObject的尾部。
返回值：把指定的值添加到数组后的新长度

<script>
    var cols=["red","yellow","green"];
    var len= cols.push("blue","black");
    console.log(cols);
    console.log(len);
</script>

unshift():
语法：arrayObkect.unshift(newele1,newele2,......,newxX)
功能：把它的参数顺序添加到arrayObject的开头。
返回值：把指定的值添加到数组后的新长度。

//unshift
var nums=[2,5,6,8,9];
var size = nums.unshift(99,88);
console.log(nums);

pop():
语法：arrayObject.pop()
功能：删除arrayObject的最后一个元素
返回值：被删除的那个元素

//pop
var n=nums.pop();
console.log(n);
console.log(nums);

shift()：
语法：arrayObject.shift()
功能：删除arrayObject中的第一个元素
返回值：被删除的那个元素

//shift
var m=cols.shift();
console.log(m);
console.log(cols);

数组的转换方法

join():

语法：arrayObject.join(separator)
功能：用于把数组中的所有元素放入一个字符串。
返回值：字符串

//join
var nums=[2,4,5];
var str = nums.join();//默认","隔开
console.log(str);

var str1 = nums.join("-");
console.log(str1);

var str2 = nums.join("");
console.log(str2);

数组的重排序方法

reverse():

语法：stringObject.reverse()
功能：用于颠倒数组中元素的顺序
返回值：数组。

//reverse
var strs=["a","b","c","d"];
strs=strs.reverse().join("");
console.log(strs);

sort():

功能：用于对数组的元素进行排序
语法：arrayObject.sort(sortby)
返回值：数组。
说明：
1.即使数组中的每一项都是数值，sort()方法比较的也是字符串。
2.sort()方法可以接收一个比较函数作为参数。

//29,5,24,17,32排序 sort
var arr=[29,5,24,-2,17,32,-99];
//降序
arr.sort(function(a,b){return b-a});
//升序
arr.sort(function(a,b){return a-b})
console.log(arr);

数组的操作方法：

concat():

功能：用于连接两个或多个数组
语法：arrayObject.concat(arrayX,arrayX,arrayX)
返回值：数组。

var arr1=["a","b","c","d"],
              arr2=["1","2","3","4","5"],
              arr3;
          //concat
          arr3=arr1.concat(arr2,["m",99]);
          console.log(arr3);

slice():

功能：从已有的数组中返回选定的元素
语法：arrayObject.slice(start,end)
参数：start（必须）规定从何处开始选取，如是负数，从数组尾部开始算起
end（可选）规定从何处结束选取，是数片断结束处的数组下标
返回值：数组。

说明：1.如果没有指定end，切分的数组包含从start到数组结束的所有元素。
2.如slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。

//slice
var colors=["red","green","blue","yellow","orange"];
var newColors=colors.slice(1);
console.log(newColors);

var newColors1=colors.slice(1,2);
console.log(newColors1);

var newColors2=colors.slice(-4,3);//1，3
console.log(newColors2);

//面试题：完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
var a=[1,"yes",3],
b;
//1.数组遍历，push
b=new Array();
for(var i=0;i<a.length;i++){
    b.push(a[i]);
}
console.log(b);
//2.concat()
b=[].concat(a);
console.log(b);
//3.slice();
b=a.slice(0);
console.log(b);
//4
b=a;
console.log(b);

splice()

splice()方法删除数组项:
功能：删除从index处开始的零个或多个元素
语法：arrayObkect.splice(index,cont)
返回值：含有被删除的元素的数组
说明：cont是要删除的项目数量，如果设置为0，则不会删除项目。
如果不设置，则删除从index开始的所有值。

var arr=["a","b","c","d","e","f"];
var delArr=arr.splice(2,2);
console.log(arr);
console.log(delArr);

splice()方法插入数组项

var arr=["a","b","c","d","e","f"];
//插入
var insertArr=arr.splice(3,0,"m","n");
console.log(arr);
console.log(insertArr);

splice()方法替换数组项

var arr=["a","b","c","d","e","f"];
//替换
var replaceArr=arr.splice(1,2,"x","y");
console.log(arr);
console.log(replaceArr);

indexOf()

var arr=[1,7,5,7,8,1,6,9];
var pos=arr.indexOf(7);
console.log(pos);//第一个7在数组中出现的位置

var pos1=arr.indexOf(99);
console.log(pos1);//-1 查询不到返回-1

var pos2=arr.indexOf(7,2);//设置开始查找的位置
console.log(pos2);//找到的是索引为3的7

lastIndexOf()

如果想要兼容低版本浏览器，需要自己封装

var nums=[1,5,9,3,10,9];
//封装一个方法实现indexOf的功能
function ArrayIndexOf(arr,value){
//检测value在arr中出现的位置
for(var i=0;i<arr.length;i++){
     if(arr[i]===value){
          return i;
       }
   }
    return -1;
 }
 var pos=  ArrayIndexOf(nums,8);
console.log(pos);

String

字符串对象的方法：

charAt() 功能：返回stringOblect中index位置字符

语法：stringOblect.charAt(index)

charCodeAt()
功能：返回stringObject中index位置字符的字符编码

说明：ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined。

var str="hello world";
console.log(str[1]);//IE7及更早浏览器不支持

console.log(str.charAt(0));//h
console.log(str.charCodeAt(0));//104

indexOf() 功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。

语法：stringObject.indexOf("o")
返回值：数值。
说明：如果没有找到该字符串，则返回-1.

//检测@在email中出现的位置
var email="marry@163.com";
console.log(email.indexOf("@"));//5
console.log(email.indexOf("z"));//-1
console.log(email.indexOf("rr"));//2

lastIndexOf()
功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。跟indexOf相比，它是从后往前找。

语法：stringObject.lastIndexOf(“o”)
返回值：数值。
说明：如果没有找到该子字符串，则返回-1

字符串对象截取方法

slice():功能：截取字符串

语法：stringObject.slice(start,end)
参数说明：1、start：必须，指定子字符串的开始位置。
2、end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。
3、当参数为负数时，会将传入的负值与字符串的长度相加。

//截取
var str1="hello world";
console.log(str1.slice(7,10));//orl 注意：end本身不在截取范围之内
console.log(str1.slice(7));//orld  注意：当不写end时，截取到字符串末尾
console.log(str1.slice(-3));//str1.slice(8) rld
console.log(str1.slice(-7,-2));//str1.slice(4,9) o wor

substring():语法及功能同slice()完全一样。

说明：
区别在于：1.当参数为负数时，自动将参数转换为0.
2.substring()会将较小的数作为开始位置，将较大的数作为结束位置。

console.log(str.substring(-7,5));//(0,5)
console.log(str1.substring(2,-5));//(0,2)

substr()：功能：截取子字符串。

语法：stringObject.substr(start,len)

参数说明：1、start：必须，指定字符串的开始位置。
2、len：可选，表示截取的字符总数，省略时截取至字符串的末尾。
3、当start为负数时，会将传入的负值与字符串的长度相加。
4、当len为负数时，返回空字符串。

字符串方法综合应用

编写js函数，用于获得输入参数的后缀名，如输入abc.txt,返回.txt

//获取拓展名
var url="http://baidu.com/index.txt";
function getFileFormat(url){
    //获取.在url中出现的位置
    var pos=url.lastIndexOf(".");
    var newUrl=url.slice(pos);
return newUrl;
}
var formatName=getFileFormat(url);
console.log(formatName);

split()：功能把一个字符串分割成字符串数组

语法：stringObject.split(separator)
返回值：Array。
说明：separator：必须，分隔符。

var str='welcome-to-beijing';
//使用split将str转换为数组
var arr=str.split("-");
console.log(arr);

replace() 功能：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：StringObject.replace(regexp/substr,replacement)
返回值：String
参数：regexp：必须。规定子字符串或要替换的模式的RegExp对象。
replacement：必须。一个字符串值。

//替换replace
var tel="010-62971268,400-100-9098";
//newTel被替换之后的字符串，原字符串不会改变
var newTel=tel.replace(',','/');
console.log(tel);
console.log(newTel);

字符串转换大小写

toUpperCase()
toLowerCase()

将字符串border-left-color转换成borderLeftColor

function cameback(str){
var arr=str.split("-");//拆分成数组
var newArray=new  Array();
var upper;
newArray.push(arr[0]);
//遍历数组
    for(var i=1;i<arr.length;i++){
      //将每一个单词的首字母转换为大写，链接剩余字符
      upper=arr[i].charAt(0).toUpperCase()+arr[i].substr(1);
      newArray.push(upper);
      }     
    var newStr=newArray.join("");
    return newStr;
   }
var str='border-left-color';
var camelFormat=cameback(str);
console.log(camelFormat);