js对象

一颗大树
202 阅读11分钟

1.Array

2.String

3.Math

4.Date

5.RegExp

6.JSON



Array  数组

数组主要是用来存储一组数据的

创建数组：

1.使用Array构造函数

语法：new Array()


//创建一个保存颜色的数组
var colors=new Array(3);
var nums=new Array(1,3,6,9);
console.log(colors);    //[]
var cols=['red','yellow','green'];
console.log(cols);    //['red','yellow','green']
var infos=[6,'marry',true,{email:'mmarry@sohu.com'}];
console.log(infos);

数组元素的读写

读取和设置值时，使用方括号[]并提供相应的索引，

说明：索引是从0开始的正整数

var cols=['red','yellow','green'];
console.log(cols[1]);    // yellow

var colors=new Array(3);
colors[0]='#f00';
colors[1]='0f0';
colors[2]='00f';
console.log(colors);


数组长度

语法：array.length

功能：获取数组array的长度

返回值：number

说明：1.通过设置length可以从数组的末尾移除项或向数组中添加新项。

var arr=['a','b','c','d'];
console.log(arr.length);    //4
arr.length=3;
console.log(arr);    //['a','b','c',]

//数组的遍历
var arr=['a','b','c','d'];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}



数组的方法 ,栈方法

1.push()  //添加到数组的尾部

2.unshift()    //添加到数组的开头

3.pop()    //删除最后一个元素

4.shift()   //删除第一个元素

5.join（） // 把数组转换成字符串（以一种形式连接）

6.reverse()   //用于颠倒数组中元素的顺序

7.sort()    //用于对数组的元素进行排序

8.concat()   //用于连接两个或多个数组

9.slice()   //从已有的数组中返回选定的元素

10.splice()  //删除从index处开始的零个或多个元素，也可插入、替换

11.indexOf()   //从数组的开头（位置0）开始向后查找

11.lastindexOf() //从数组的末尾开始向后查找

1.push()

语法：arrayObject.push(newele1,newele2,newele3,....neweX)

功能：把它的参数顺序添加到arrayObjgct的尾部。

返回值：把指定的值添加到数组最后的新长度。

var colors=new Array("red","green");
colors.push("blue","yellow");
console.log(colors);

2.unshift() 

语法：arrayObject.unshift(newele1,newele2,newele3,....neweX)

功能：把它的参数顺序添加到arrayObjgct的开头。

返回值：把指定的值添加到数组最后的新长度。

var nums=[2,7,8,6];
var sizs=nums.unshift(99,66);
console.log(size);    //6
console.log(nums);    //[99,66,2,7,8,6]


3.pop() 

语法：arrayObject.pop()

功能：删除arrayObjgct的最后一个元素。

返回值：被删除的那个元素。

var nums=[2,7,8,6];
var n=nums.pop();
console.log(n);    //6
console.log(nums);    //[2,7,8]

4.shift() 

语法：arrayObject.shift()

功能：删除arrayObjgct的第一个元素。

返回值：被删除的那个元素。

var nums=[2,7,8,6];
var n=nums.shift();
console.log(n);    //2
console.log(nums);    //[7,8,6]


5.join（）

语法：arrayObject.join(separator)

功能：用于把数组的所有元素放入一个字符串

返回值：字符串

var nums=[2,4,5];
var str=nums.join();    
console.log(str);  //2,4,5

var words=["border","left","color"];
var wordstr=words.join("-");
console.log(wordstr);    //border-left-color


6.reverse()

语法：arrayObject.reverse()

功能：用于颠倒数组中元素的顺序

返回值：数组

ar nums=[2,4,5];
nums.reverse();
console.log(nums);    //[5,4,2]

 

7.sort()

语法：arrayObject.sort()

功能：用于对数组的元素进行顺序

返回值：数组

说明：1.即使数组中的每一项都是数值，sort()方法比较的也是字符串。 2.sort()方法可以接收一个比较函数作为参数。

var arr=[9,23,15,88,12];
console.log(arr.sort());  //[12,15,23,88,9]
console.log(arr.sort(function(a,b){return a-b}));  //[9,12,15,23,88]


8.concat()

语法：arrayObject.concat(arrayX，arrayX,...,arrayX)

功能：用于连接两个或多个数组

返回值：数组

var arr1=['a','b','c'],
    arr2=['d','e',1,3],
    arr3;
arr3=arr1.concat(arr2,['m',99,8]);
console.log(arr3);


9.slice()

语法：arrayObject.slice(start , end)

功能：从已有的数组中返回选定的元素

参数：start（必需）规定从何处开始选取，如是负数，从数组尾部开始算起

         end（可选）规定从何处结束选取，是数组片段结束处的数组下标

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

返回值：数组

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

var colors=["red","green","blue","yellow","orange"];
var newColors=colors.slice(-2,4);    //3(数组长度+ -2),3
console.log(newColors);    //["blue"]

//完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
var a=[1,'yew',3],
    b;
//1.数组遍历，push
b=[]
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);


10.splice()

语法：删除：arrayObject.splice(index , count) 

         插入：arrayObject.splice(index , 0，item1,...itemX)

功能：删除：从index处开始的零个或多个元素

         插入：在指定位置插入值

返回值：数组

说明：count是要删除的项目数量，如果设置为0，则不会删除项目。如果不设置，则删除从index开始的所有值。item1,...itemX是要插入的项

//删除的操作
var arr=['a','b','c','d','e','f'];
var delArr=arr.splice(2,2);
console.log(arr);   //['a','b','e','f']
console.log(delArr);    //['c','d']

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

//插入的操作
var arr=['a','b','c','d','e','f'];
var replaceArr=arr.splice(1,2,'x','y','z');
console.log(arr);   //['a','x','y','z','e','f']
console.log(replaceArr);    //['b','c']


11.indexOf

语法：arrayObject.indexOf(searchvalue , startIndex)

功能：从数组的开头（位置0）开始向后查找

参数：searchvalue：必需，要查找的项，startIndex：可选，起点位置的索引。

返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.indexOf(7);  //检测第一个7的索引
console.log(pos);    //1

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.indexOf(7,2);    //从索引为3开始检测7的索引
console.log(pos);    //3


12.lastindexOf

语法：arrayObject.lastindexOf(searchvalue , startIndex)

功能：从数组的末尾开始向后查找

参数：searchvalue：必需，要查找的项，startIndex：可选，起点位置的索引。

返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.lastindexOf(1);    //从末尾开始检测1的索引
console.log(pos);    //5

//封装一个方法实现indexOf的功能兼容低版本浏览器
var nums=[1,7,5,7,8,1,6,9];    
function ArrayIndexOf(arr,value){
       for(var i=0;i<arr.length;i++){
           if (arr[i]===value){
               return i;  }       
            }       
        return -1;   
}    
var pos2=ArrayIndexOf(nums,7);    
console.log(pos2);



Sting 的方法

1.charAt()     //查看索引位置上的字符

2.charCodeAt()    //查看索引位置上的字符编码

3.indexOf()     //查看字符在字符串上的索引

4.lastIndexOf()  //从后往前查看字符在字符串上的索引

5.slice()   //截取子字符串

6.substring()  //语法及功能同slice()完全一样，截取子字符串，碰到负数转化为0

7.substr()   //截取子字符串

8.split()    //把一个字符串分割成字符串数组

9.replace()   //替换字符

10.toUpperCase()   //把字符串转为大写

11.toLowerCase()   把字符串转为小写


1.charAt()与

语法：stringObject.charAt(index)

功能：返回stringObject中index位置字符。

2.charCodeAt()

语法：stringObject.charCodeAt(index)

功能：返回stringObject中index位置字符的字符编码。

var str="hello world";
console.log(str.charAt(4));    //o
console.log(str.charCodeAt(4));    //111(o的编码)

3.indexOf()

语法：stringObject.indeOf("o")

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

返回值：数值

说明：如果没有找到该子字符串，则返回-1

var email="marry@163.com";
console.log(email.indexOf("@"));    //5
console.log(email.indexOf("rr"));    //2

4.lastIndexOf() 

语法：stringObject.lastIndeOf("o")

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

返回值：数值

说明：如果没有找到该子字符串，则返回-1

var email="marry.mailoo@163.com";
console.log(email.lastIndexOf("o"));    //18
console.log(email.lastIndexOf("."));    //16


5.slice()

语法：stringObject.slice(start,end)

功能：截取子字符串

说明：1.start：必需，指定子字符串的开始位置。2.end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。

var str="hello world";
console.log(str.slice(7,10));    //orl
console.log(str.slice(-3));    //  字符串长度+ -3


6.substring()

说明：语法及功能同slice()完全一样。

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

var str="hello world";
console.log(str.substring(7,10));    //orl
console.log(str.sunbstring(-7，5));    //  负数转化为0，hello


7.substr()

语法：stringObject.substr(start,len)

功能：截取子字符串

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

var str="hello world";
console.log(str.substr(6,3));    //wor
console.log(str.sunbstr(-5，4));    //字符串长度+ -5  worl  



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


8.split()

语法：stringObject.split(separator)

功能：把一个字符串分割成字符串数组。

返回值：Array

说明：separator：必需，分隔符

var str="welcome-to-beijing";
var date="2016/05/05";
//使用split将str转换为数组
var arr = str.split('-');
var dateArr = date.split("/");
console.log(arr);    //['welcome','to','beijing']
console.log(dateArr);    //['2016','05','05']


9.replace()

语法：stringObject.replace(regexp/substr，replacement)

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

返回值：String

参数：regexp：必需，规定子字符串或要替换的模式的RegExp对象。replacement：必需，一个字符串值。

var tel="010-1234678,400-100-9098,010-86768689";
var newTel=tel.replace(','," ");
console.log(newTel)


10.toUpperCase()

语法：stringObject.toUpperCase()

功能：把字符串转为大写

var str="hello world";
console.log(str.toUpperCase());    //HELLO WORLD

11.toLowerCase()

语法：stringObject.toLowerrCase()

功能：把字符串转为小写

var str="hHELLO WORLD";
console.log(str.toLowerCase());    //hello world
function camelback(str){
    //通过-这个分隔符将str拆分成数组
    var arr =str.split("-"),newStr=arr[0];
    for(var i=1,len=arr.length;i<len;i++){
        var word=arr[i];
        //将每一个单词的首字母转化为大写,连接剩余字符
        newStr+=word.charAt(0).toUpperCase()+word.substr(1);
    };
    return newStr;
}
var camelFormat=camelback("border-left-color");
console.log(camelFormat);




Math对象

1.min()    //求一组数中的最小值。

2.max()   //求一组数中的最大值。

3.ceil()    //向上取整

4.floor()   //向下取整

5.round()  //四舍五入取整

6.abs()   //返回绝对值

7.random()  //返回大于等于0小于1的一个随机数


1.Math.min()

语法：Math.min（num1,num2,...numN）

功能：求一组数中的最小值。

返回值：Number。

var min=Math.min(5,-4,0,9,108,-55);
console.log(min);    //-55,（min中如果出现非数字就返回NaN）

2.Math.max()

语法：Math.max（num1,num2,...numN）

功能：求一组数中的最大值。

返回值：Number。

var max=Math.max(5,-4,0,9,108,-55);
console.log(max);    //108,（min中如果出现非数字就返回NaN）

3.Math.ceil()

语法：Math.ceil（num）

功能：向上取整，即返回大于num的最小整数。

返回值：Number。

var num=Math.ceil(189.09);
console.log(num);    //190

4.Math.floor()

语法：Math.floor（num）

功能：向下取整，返回num的整数部分。

返回值：Number。

var num=Math.floor(189.09);
console.log(num);    //189

5.Math.round()

语法：Math.round（num）

功能：将数值四舍五入为最接近的整数

返回值：Number。

var num=Math.round(189.09);
console.log(num);    //189

6.Math.abs()

语法：Math.abs（num）

功能：返回num的绝对值

返回值：Number。

var nums=-55;
console.log(Math.abs(nums));    //55

7.Math.random()

语法：Math.random（）

功能：返回大于等于0小于1的一个随机数

返回值：Number。

说明：求n到m之间的随机整数的公式：

random=Math.floor(Math.random()*(m-n+1)+n); 

var random=Math.random();
console.log(random);

function getRandom(n,m){
    var choise=m-n+1;    //随机整数的个数
    return Math.floor(Math.random()*(m-n+1)+n); 
}
var random1=getRandom(2,6);
console.log(random1)


date对象

创建一个日期对象

语法：new Date();

功能：创建一个日期时间对象

返回值：不传参的情况下，返回当前的日期时间对象

//创建一个日期时间对象
var today=new Date();
console.log(today);


var weeks=['日','一','二','三','四','五','六'],    today=new Date(),    year=today.getFullYear(),    month=today.getMonth()+1,    date=today.getDate(),    week=today.getDay(),    hours=today.getHours(),    minutes=today.getMinutes(),    seconds=today.getSeconds(),    time=year+'年'+month+'月'+date+'日'+hours+'时'+minutes+'分'+seconds+'秒 星期'+weeks[week];console.log('现在是：'+time);




var today=new Date();
today.setUTCFullYear(2017);
console.log(today);




RegExp  正则表达式

描述字符串规则的表达式

/pattern/attrs

/13566668888/
/jerry/i

语法：regexObj.test(str)

说明：测试正则表达式与指定字符串是否匹配

/13566668888/.text（'13566668888'）;     //true

<body>
   <input type="text" onblur="check(this)" onfocus="reset(this)">
   <script>
       function check(mobileInput){
           var value = mobileInput.value;
           if (!/13566668888/.test(value)) {
                mobileInput.style.borderColor="red"
                          }
       }
       function reset(mobileInput){
           var value = mobileInput.value;
           if (!/13566668888/.test(value)) {
                mobileInput.style.borderColor=" "
                          }
       }
   </script>
</body>

锚点：匹配一个位置

^ ：起始位置，

$：结束位置 

 \b:单词边界

/\.jpg$/.test('1.jpg')    //true
/\.jpg$/.test('1.jpg abc')    //false
/^http:/.test('http://www.baidu.com')    //true
/^http:/.test('qhttp://www.baidu.com')    //false
/\bis\b/.test('this')    //false
/\bis\b/.test('this is tom')    //true

/^13566668888$/    //以1开头，以8结尾

字符类：匹配一类字符中的一个

[abc]:a或b或c

[0-9]:一个数字，[^0-9]:非数字的一个字符

[a-z]:一个字母

.  :任一字符（换行除外）

/[0-9]/.test('123')        //true
/[0-9]/.test('abc')        //false
/[^0-9]/.test('abc')        //true 

<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
    <script>
        function check(mobileInput){
            var value = mobileInput.value;
            if(!/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test(value)){
                mobileInput.style.borderColor = 'red';
            }
        }
        function reset(mobileInput){
            mobileInput.style.borderColor = '';
        }
    </script>

元字符：具有特殊意义的字符

^,  $,  \b

\d ===   [0-9]   0-9的任意数字   \D === [^\d]      非数值

\s 空白符  \S 非空白符

\w  [A-Za-z0-9_]  单词字符     \W   非单词字符

/\d/.test('123')        //true


<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
    <script>
        function check(mobileInput){
            var value = mobileInput.value;
            if(!/^1\d\d\d\d\d\d\d\d\d\d$/.test(value)){
                mobileInput.style.borderColor = 'red';
            }
        }
        function reset(mobileInput){
            mobileInput.style.borderColor = '';
        }
    </script>



量词：出现的次数

语法：{m,n}:m到n次

*  ：{0,}

?: {0,1}

+:  {1,}

<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
    <script>
        function check(mobileInput){
            var value = mobileInput.value;
            if(!/^1\d{10}$/.test(value)){
                mobileInput.style.borderColor = 'red';
            }
        }
        function reset(mobileInput){
            mobileInput.style.borderColor = '';
        }
    </script>


转义符：需要匹配的字符是元字符

\ 用来转义

/^http:\/\//
/@16\.com/


多选分支

或

/thi(c|n)k/
/\.(png|jpg|jpeg|gif)$/

<label>邮箱：</label><input type="text" onblur="checkNetEase(this)" onfocus="reset(this)" placeholder="网易邮箱">
    <script>
        function checkNetEase(mobileInput){
            var value = mobileInput.value;
            if(!/(.+)@(163|126|188)\.com$/.test(value)){
                mobileInput.style.borderColor = 'red';
            }
        }
        function reset(mobileInput){
            mobileInput.style.borderColor = '';
        }
    </script>


捕获：保存匹配到的字符串，日后再用

()：捕获

/(.+)@(163|126|188)\.com$

(?:) :不捕获

/(.+)@(?:163|126|188)\.com$

使用：

$1,$2,...

api参数或返回值


str.match(regexp)

获取匹配的字符串

<script>
        var url = 'http://blog.163.com/album?id=1#comment';
        var arr = url.match(/(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?/);
        // var arr = url.match(/(https?:)\/\/([^\/]+)([^\?]*)([^#]*)(.*)/);
        console.log(arr);
</script>


str.replace(regexp,replacement)

替换一个子串

var str="The price of tomato is 5.";
str.replace(/(\d+)/,'$1.00');    //The price of tomato is 5.00.

var str="The price of tomato is 5,the price of apple is 10.";
str.replace(/(\d+)/g,'$1.00');    //The price of tomato is 5.00,the price of apple is 10.00.


regexpObj.exec(str)更强大的检索

更详尽的结果：index

过程的状态：lastIndex

script>
        var reg = /(.)(\d+)/g;
        var scores = 'Tom $88, Nicholas ￥100, jack £38.';
        var result;        while(result = reg.exec(scores)){
            console.log(result);
            console.log(reg.lastIndex);
            // reg.lastIndex += 10;
        }

</script>




JSON

JSON.parse(text)

JSON->JS

var userJson='{\
    "id":1,\
    "nick":"春鸟"，\
    "avatar":"1.jpg",\
    "tags":null,\
    "authed":false\
}'

var user= JSON.parse(userJson);


JSON.stringify(value)

JS->JSON


var user={
    id:1,
    nick:"春鸟"，
    avatar:"1.jpg",
    tags:null,
    authed:false
}
JSON.stringify(user);


avatar
文章
阅读
粉丝