Js中的对象&实例

其他 2018-06-18 09:57:11 阅读次数: 2

对象

String

  • toString():返回字符串的数组表示（就个人理解toLocaleStrig()和toString()无明显差别）
  • valueOf():返回 Boolean 对象的原始值
  • charAt()返回在指定位置的字符
  • concat()连接字符串
  • indexOf()检索字符串
  • lastIndexOf()从后向前搜索字符串
  • match()找到一个或多个正则表达式的匹配
  • replace()替换与正则表达式匹配的子串
  • search()检索与正则表达式相匹配的值
  • split()把字符串分割为字符串数组
  • substr()从起始索引号提取字符串中指定数目的字符
  • substring()提取字符串中两个指定索引号之间的字符
  • toLowerCase()将字符串转换为小写
  • toUpperCase()将字符串转换为大写

Date

  • Date()返回今天的日期和时间
  • getTime()计算从1970年到今天有多少年
  • 使用 setFullYear() 设置具体的日期
  • 使用 toUTCString() 把当日的日期（根据 UTC）转换为字符串
  • 使用 getDay() 来显示星期，而不仅仅是数字
  • 显示一个钟表（电子表）
<html>
<head>
<script type="text/javascript">
    function startTime(){
        var today=new Date()
        var h=today.getHours()
        var m=today.getMinutes()
        var s=today.getSeconds()
        // add a zero in front of numbers<10
        m=checkTime(m)
        s=checkTime(s)
        document.getElementById('txt').innerHTML=h+":"+m+":"+s
        t=setTimeout('startTime()',500)
    }

    function checkTime(i){
        if (i<10) 
          {i="0" + i}
          return i
    }
</script>
</head>

Array

  • 创建数组：var arr = new Array();
  • 确定某个值是否为数组：
    • ++instanceof++:if(value instanceof Array)
      • 此操作符的问题在于其假定只有一个全局执行环境。若网页中包涵多个框架则会出问题
    • ++isArray(value)++:if(arr.isArray(value))
  • ++indexOf(value)++:搜索一个指定元素的位置。注意区分字符串和数字
  • ++slice(indexfront,indexbehined)++:截取Array的部分元素，然后返回一个新的Array.返回的数组元素不包括indexbehined
    • 如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用此特性我们可以轻易的复制一个数组：++var aCopy = arr.slice();++
    • ==若传入参数为负数，则用数组长度加上该数来确定位置==
  • ++arr.length = Length++;
    • 此语句可直接改变数组的长度（空位输出为undefined）。
    • 通过索引赋值时，索引超过了范围，同样会引起Array大小的变化
  • ++splice(indexfront,indexbehined,’value’,’value’)++:从指定的索引开始删除若干元素，然后再从该位置添加若干元素
    • 删除：splice(删除项首位置，删除项个数);
    • 插入：splice(起始位置，要删除的项数，要插入的项);
    • 替换：splice(起始位置，要删除的项数，要插入的任意数量的项);
    • ++最全能的一个方法！！！！！！！！！！++
  • 重排序
    • ++reverse++：arr.reverse();—-降序排列数组中元素
    • ++sort()++：arr.sort();—-升序排列数组中元素
    • 然而这两种发方法有个致命缺陷：默认将数字视为字符串。也就是说会出现升序排序时10在5之前。故我们需要手动在此之前加一个比较函数compare(calue1,value2)
重排序

function compare(value1,value2){
    if(value1 < value2)
        return -1;
    else if(value1 > value2)
        return 1;
    else
        return 0;
}

var value = [0,5,10,15];
value.sort(compare);
alert(value);           //15,10,5,0
  • ++位置方法++
    • indexOf()：从头找
    • lastIndexOf()：从尾找
    • 二者接收的参数为：要查找的项&查找起点位置的索引（这个写不写都行）。返回值为所找到的值的对应的索引。
  • 迭代方法
    • 以下五种方法的参数均为要在数组中每一项上运行的函数和运行函数的作用域对象（影响this的值）。
    • 传入这些方法中的函数会接收3个参数：数组项的值、该项在数组中的位置和数组对象本身
    • ++every(function(item,index,array){….})++:对数组中每一项运行给定函数，若对每一项都返回true，则返回true
    • ++filter(function(item,index,array){….})++：对数组中每一项运行给定函数，返回该函数会返回true的项组成的数组
    • ++forEach(function(item,index,array){….})++：对数组中每一项运行给定函数，无返回值
    • ++map(function(item,index,array){….})++：对数组中每一项运行给定函数，返回每次函数调用的结果组成的数组
    • ++some(function(item,index,array){….})++：对数组中每一项运行给定函数，对任一项返回true则返回true
  • 归并方法
    • ++reduce()++:从前向后迭代数组的所有项然后构建一个最终返回的值
    • ++reduceRight()++:从后向前迭代数组的所有项然后构建一个最终返回的值
    • 二者接受的参数为：一个在每一项上调用的函数和作为归并基础的初始值。传给reduce()和reuceRight()的函数接收四个参数：前一个值、当前值、项的索引、数组对象
求数组中所有值之和

var value = [1,2,3,4,5];
var sum = value.reduce(function(prev,cur,index,array){
    return prev + cur;
});
alert(sum);             //15
  • ++push、pop、shift、unshift++：
    • ++push(‘value’,’value’,….)++:向Array的末尾添加若干元素
    • ++pop()++:把Array的最后一个元素删除掉——–返回删除的元素
    • ++unshift(‘value’,’value’,….)++:往Array的头部添加若干元素——-返回值为数组长度
    • ++shift()++ 方法则把Array的第一个元素删掉——空数组继续shift不会报错，而是返回undefined
    • 如此一来，用这四条语句就可以轻易的实现栈和队列
栈方法

var colors = new Array();               //创建一个数组
var count = colors.push('red','green');     //推入两项
alert(count);               //2

count = colors.push('black');       //再推入一项
alert(count);                   //3

var item = colors.pop();            //取得最后一项
alert(itemm);               //"black";
alert(colors.length);           //2
队列方法

var colors = new Array();               //创建一个数组
var count = colors.push('red','green');     //推入两项
alert(count);               //2

count = colors.push('black');       //再推入一项
alert(count);                   //3

var item = colors.shift();            //取得最后一项
alert(itemm);               //"red";
alert(colors.length);           //2
  • 使用 for…in 声明来遍历数组中的元素
<html>
<body>
<script type="text/javascript">

    var x
    var mycars = new Array()
    mycars[0] = "Saab"
    mycars[1] = "Volvo"
    mycars[2] = "BMW"
    for (x in mycars)
        document.write(mycars[x] + "<br />")

</script>
</body>
</html>


//Saab
//Volvo
//BMW

    • join():它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
    • 合并两个数组 — ++arr1.concat(arr2)++：++doucument.write(arr1.concat(arr2))++
    • 用数组的元素组成字符串 — join()
<html>
<body>
<script type="text/javascript">

    var arr = new Array(3);
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"

    document.write(arr.join());
    document.write("<br />");
    document.write(arr.join("."));

</script>
</body>
</html>


//George,John,Thomas
//George.John.Thomas
    • 文字数组 - sort()：document.write(arr.sort())
    • 数字数组 - sort()：document.writte(arr.sort(sortNumber))
    • 迭代方法
      • every():对数组中的每一项运行给定函数。若该函数对每一项都返回true，则返回true
      • filter():对数组中每一项运行给定函数，返回该函数会返回true的项组成的数组
      • forEach():对数组的每一项运行给定函数。此方法无返回值
      • map():对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
      • some():对数组中的每一项运行给定函数，若该函数的对任一项返回true，则返回true。
      • 以上方法均不会修改数组中包含的值

Boolean

  • 检查逻辑值++var x=new Boolean(你所想要检查的值)++。结果只能为true和false

Math

  • 使用 round() 对数字进行舍入（四舍五入至整数位）
  • 使用 random() 来返回 0 到 1 之间的随机数（document.write(Math.random())。每次结果都不一样）
  • 使用 max() 来返回两个给定的数中的较大的数
  • 使用 min() 来返回两个给定的数中的较小的数

几条需要遵守的规则

  • 不要使用new Number()、new Boolean()、new String()创建包装对象；
  • 用parseInt()或parseFloat()来转换任意类型到number；
  • 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
  • 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {…}
  • typeof操作符可以判断出number、boolean、string、function和undefined；
  • 判断Array要使用Array.isArray(arr)；
  • 判断null请使用myVar === null；
  • 判断某个全局变量是否存在用typeof window.myVar === ‘undefined’；

  • 函数内部判断某个变量是否存在用typeof myVar === ‘undefined’

  • 对了，还得注意一点：null和undefined是唯二两个没有toString()方法的对象（虽然null伪装成了object类型）

  • number对象调用toString()报SyntaxError：
123.toString(); // SyntaxError

这种情况当然需要特殊处理

123..toString(); // '123', 注意是两个点！
(123).toString(); // '123'

实例

  • 生成文本：==document.write(“Hello World!”)==
  • 生成普通文本和标签：==document.write(“

    Hello World!

    “)==
  • head 部分：==function message()
    {
    alert(“该提示框是通过 onload 事件调用的。”)
    }==
  • body 部分：==
    document.write(“该消息在页面加载时输出。”)==
    • ==
  • 警告框（此处用一个button按钮来触发警告框以便让大家看到效果）
<html>
<head>
<script type="text/javascript">
    function disp_alert(){
        alert("我是警告框！！")
    }
</script>
</head>
<body>
    <input type="button" onclick="disp_alert()" value="显示警告框" />
</body>
</html>
  • 带有折行的警告框（代码同上边的类似，只不过用Js的语法加个+’\n’+即可）
  • 确认框
<html>
<head>
<script type="text/javascript">
function show_confirm(){
    var r=confirm("Press a button!");
    if (r==true){
        alert("You pressed OK!");
    }
    else{
        alert("You pressed Cancel!");
    }
}
</script>
</head>
<body>
    <input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
  • 提示框
<html>
<head>
<script type="text/javascript">
    function disp_prompt(){
        var name=prompt("请输入您的名字","Bill Gates")
        if (name!=null && name!=""){
            document.write("你好！" + name + " 今天过得怎么样？")
        }
    }
</script>
</head>
<body>
    <input type="button" onclick="disp_prompt()" value="显示提示框" />
</body>
</html>
  • 错误处理
    • try…catch语句
try{
    //要执行的语句
}
catch(err){
    //当try中的语句错时要执行的语句
}
<html>
<head>
    <script type="text/javascript">
    var txt=""
    function message(){
        try{
            adddlert("Welcome guest!")
        }
        catch(err){
            txt="本页中存在错误。\n\n"
            txt+="错误描述：" + err.description + "\n\n"
            txt+="点击“确定”继续。\n\n"
            alert(txt)
        }
    }
    </script>
</head>
<body>
    <input type="button" value="查看消息" onclick="message()" />
</body>
</html>

image
- - 带有确认框的 try…catch 语句

<html>
<head>
<script type="text/javascript">
var txt=""
function message(){
    try{
        adddlert("Welcome guest!")
    }
    catch(err){
        txt="本页中存在错误。\n\n"
        txt+="点击“确定”继续查看本页，\n"
        txt+="点击“取消”返回首页。\n\n"
        if(!confirm(txt)){
            document.location.href="/index.html"
        }
    }
}
</script>
</head>
<body>
    <input type="button" value="查看消息" onclick="message()" />
</body>
</html>

image

猜你喜欢

转载自blog.csdn.net/qq_38722097/article/details/80632704
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022