程序博客网 > dojo 对象数组转json

js基础知识

来源：互联网 发布：dojo 对象数组转json 编辑：程序博客网 时间：2024/06/06 07:01

JS基础​​​

    • 数据类型
      String
      （1）单双引号都可
      （2）ECMAScript中字符串不可改变
      1.    var lang = "java";
      2.   lang = lang + "Script";
      字符串拼接时会先创建新的字符串然后销毁原来的，导致在一些旧浏览器中拼接字符串的速度很慢。
    • 解决办法(模拟Java中的StringBuffer)：
      1.   function StringBuffer(){
      2.       this._strings_ = new Array();
      3.  }
      4.  StringBuffer.prototype.append = function(str){
      5.       this._strings_.push(str);
      6.       return this;
      7. }
      8. StringBuffer.prototype.toString = function(){
      9.         return this._strings_.join("");
      10. }
      相关网址：http://www.jb51.net/article/55690.htm
      （3）String对象的常用方法
      charCodeAt(index):返回一个整数，代表指定位置字符的Unicode编码
      1.   var str = "ABC";
      2.   str.charCodeAt(0);  //65
      charAt(index):返回指定索引位置处的字符，超出索引返回空
      1.   var str = "ABC";
      2.   str.charAt(1); // B
      slice(start,end):返回字符串片段,start表示子字符串的起始位置，end表示子字符串的结束位置，含头不含尾，
    • 如果参数为负值则做length+start处理。
      1.   var str = "ABCDEF";
      2.   str.slice(2,4); // CD
      substring(start,end):与slice类似，不同之处在于参数，如果参数为负值则替换成0。
      1.   var str = "ABCDEF";
      2.   str.substring(2,4); // CD 同str.substring(4,2)
      substr(start,length):返回从指定位置开始的指定长度的子字符串。
      1.   var str = "ABCDEF";
      2.   str.substr(2,4); // CDEF
      indexOf(str):返回子字符串第一次出现的位置，如果子串不存在则返回-1。
      1.   var str = "ABCDEF";
      2.   str.substr("CD"); // 3
      Boolean
      Js对boolean的判断
      1.    '' == '0'          // false  
      2.  2. 0 == ''            // true  
      3.  3. 0 == '0'           // true  
      4.  4. false == 'false'   // false  
      5.  5. false == '0'       // true  
      6.  6. false == undefined // false  
      7.  7. false == null      // false  
      8.  8. null == undefined  // true  
      9.  9. true == 1          // true  
      10. 10. '' == null         // false  
      11. 11. false == ''        // true
      不同类型的值转换为true或false的情况
    • 数据类型 转换为true的值 转换为false的值
数据类型转换为true的值转换为false的值BooleantruefalseString任何非空的字符串“”(空字符串)Number任何非0数值（包括无穷大）0和NANObject任何对象nullUndefined不适用undefined

“==”与“===”判断的不同

先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等： 
1、如果类型不同，就[不相等] 
2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。

（判断一个值是否是NaN，只能用isNaN()来判断） 
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。 
4、如果两个值都是true，或者都是false，那么[相等]。 
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。 
6、如果两个值都是null，或者都是undefined，那么[相等]。 ​​

再说 ==，根据以下规则： 
1、如果两个值类型相同，进行 === 比较。 
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较： 
a、如果一个是null、一个是undefined，那么[相等]。 
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。 
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。 
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。

对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；

例外的是Date，Date利用的是toString转换。
e、任何其他组合，都[不相等]。 

举例： 
"1" == true 
类型不等，true会先转换成数值 1，现在变成 "1" == 1，再把"1"转换成 1，比较 1 == 1， 相等。 

= 赋值运算符 
== 等于 
=== 严格等于 
例： 
var a = 3; 
var b = "3"; 

a==b 返回 true 
a===b 返回 false 

因为a,b的类型不一样 
===用来进行严格的比较判断

Number
（1）整数及浮点数（浮点数值必须包含一个小数点，且小数点后面至少有一位数字）
（2）浮点数计算会产生舍入误差，如：

  1.     var a = 0.1;
  2.     var b = 0.2;
  3.     console.log(a+b); //0.30000000000000004

或

  1.     alert(0.7+0.1);   //0.7999999999999999
  2.     alert(0.6+0.2);   //0.8

解决办法
先乘再除（较为常用）
其他解决办法：
http://www.cnblogs.com/xinggood/p/6639022.html

（3）NaN表示非数字类型
NaN与任何值（包括自身）相比结果均为false，判断某一值是否为NaN不能用==及===，要使用isNaN()，返回true或false

Undefined
表示变量初始化但为定义
Null
空对象的引用，typeOf(null)结果为”object”

变量提升
  1.     var a = 100;
  2.     myfun();
  3.     function myfun(){
  4.         console.log(a);  //undefined
  5.         var a = 50;
  6.         console.log(a); //50
  7.     }

Js分为预加载阶段及执行期两个阶段，前者只会确定变量的作用域，在执行期才会为变量赋值。

闭包

（1）作用域变量
变量作用域分为两种：全局变量、局部变量
函数内部可以读取全局变量，而函数外部不可以读取函数内部的变量，注意声明一个局部变量的时候必须带上var,否则声明的是全局变量。

链式作用域：子对象会向上一级一级的寻找所有父对象的变量。所有函数都是全局变量window的子函数。

（2）闭包概念
使用被作用域封闭的变量，函数，闭包等执行的一个函数的作用域

  1.     function f1(){
  2.         var n=999;
  3.         function f2(){
  4.             var m = 10;
  5.             console.log(m);
  6.         }
  7.         return f2;
  8. }
  9.     var result=f1();
  10.     result(); // 10

经常遇到的坑：

  1.     for(var i=0;i<mydiv.length;i++){
  2.         mydiv[i].onclick = function(){
  3.             alert(i);
  4.         };
  5. }

输出是？
解决办法：利用闭包使变量暴露出来

  1.     for(var i=0;i<mydiv.length;i++){
  2.         (function(){
  3.             var index = i;
  4.             mydiv[index].onclick = function(){
  5.                 alert(index);
  6.         };
  7.     })()
  8. }
This

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window

  1.     function a(){
  2.         var user = "追梦子";
  3.         console.log(this.user); //undefined
  4.         console.log(this); //Window
  5. }
  6. a();

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

  1.     var o = {
  2.         user:"追梦子",
  3.         fn:function(){
  4.         console.log(this.user);  //追梦子
  5.         }
  6. }
  7. o.fn();

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

  1.     var o = {
  2.         a:10,
  3.         b:{
  4.             fn:function(){
  5.                 console.log(this.a); //undefined
  6.             }
  7.         }
  8. }
  9. o.b.fn();

易混淆：

  1.     var o = {
  2.         a:10,
  3.         b:{
  4.             a:12,
  5.             fn:function(){
  6.                 console.log(this.a); //undefined
  7.                 console.log(this); //window
  8.         }
  9.         }
  10. }
  11. var j = o.b.fn;
  12. j();

改变this的指向（apply、call、bind）：

  1. var name = "window";
  2. var person = {
  3.     name: "kxy"
  4. };
  5. function sayName() {
  6.     console.log(this.name);
  7. }
  8. sayName();    //window
  9. sayName.apply(person);   //kxy

jQuery基础知识

1、 window.onload 与ready方法对比
window.onload的方法是页面所有资源都加载完成在执行。
ready()方法在页面Dom加载结束后，整个页面加载结束前执行代码，节约时间。

2、 jq选择器

层次选择器：

选择器描 述返 回 $(“ancestor descendant")匹配ancestor里的所有
descendant(后代)元素集合元素 $(“parent>child")匹配parent下的所有
child(子)元素集合元素 $(“prev+next")匹配紧接在prev后的
next元素集合元素 $(“prev~siblings")匹配prev后的所有
siblings元素集合元素 

 

过滤选择器：

选择器 描 述 :first 选取第1个元素 :last 选取最后一个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 选取索引是偶数的所有元素，索引从0开始 :odd 选取索引是奇数的所有元素，索引从1开始 :eq(index) 选取索引等于index的元素，index从0开始

可见性过滤选择器：

选择器描 述返 回 :hidden匹配所有不可见
的元素集合元素 :visible匹配所有可见元素集合元素 

子元素过滤选择器：

选择器描 述返 回 :nth-child匹配每个父元素下的
第index个子元素
索引从1开始集合元素 :first-child匹配每个父元素的
第一个子元素集合元素 :last-child匹配每个父元素的
最后一个子元素集合元素 : only-child某元素是它父元素中
的唯一的子元素
则匹配它集合元素​


3、 对DOM的操作
插入节点：

  1.     append(): 向每个匹配的元素内部追加内容.
  2.     appendTo(): 将所有匹配的元素追加到指定的元素中,即$(A).appendTo(B),是将A追加到B中.
  3.     prepend(): 向每个匹配的元素内部前置内容.
  4.     prependTo(): 将所有匹配的元素前置到指定的元素中,即$(A).prependTo(B),是将A前置到B中.

前面几个方法都是插入子元素,后面的这几个方法是插入兄弟元素.

  1.     after(): 在每个匹配的元素之后插入内容.
  2.     insertAfter(): 将所有匹配的元素插入到指定元素的后面.
  3.     before(): 在每个匹配的元素之前插入内容.
  4.     insertBefore(): 将所有匹配的元素插入到指定元素的前面.

移动节点：

  1.     <ul>
  2.     <li title="li1">1</li>
  3.     <li title="li2">2</li>
  4.     <li title="li3">3</li>
  5.     <li title="li4">4</li>
  6.     <li title="li5">5</li>
  7.     </ul>

js:

  1.      $(document).ready(function(){
  2.         $("ul li:eq(0)").appendTo("ul");
  3.     });
  • 2

  • 3

  • 4

  • 5

  • 1

删除节点：
remove(): 默认情况下会删除选择器选中的所有元素.会返回被删除节点的jQuery对象.可以把这个对象插入到其他的地方.

  1.     var removeLi = $("ul li:eq(0)").remove();//delete     
  2.     removeLi.appendTo($("ul"));//add removed li

empty(): 删除匹配的元素集合中所有内容,包括子节点.注意,元素本身没有被删除.
$(“ul li:eq(3)”).empty();

  • 1

  • 2

  • 3



  • 5

复制节点：
clone(): 创建匹配元素集合的副本.
clone(true): 复制节点,包括所有的事件处理.
clone(false): 复制节点,但不包括事件处理.不带参数时默认是这种情况.

替换节点:
replaceAll(): 用指定的HTML内容或元素替换被选元素.
语法: $(content).replaceAll(selector).
replaceWith(): 用新内容替换所匹配到的元素.
语法: $(selector).replaceWith(content).
其中的content可以是HTML代码,可以是新元素,也可以是已经存在的元素。用已有元素替换,原来的元素是会被移除的。

CSS

结合项目

1、 模块化

  1. var module = (function(){
  2.     //操作中途停靠
  3.     var OperatorStops = function(){
  4.         //中途停靠dialog格式定义
  5.         $("#tblAdditionalStop").dialog({
  6.             title: "中途停靠",
  7.             draggable: false,
  8.             resizable: false,
  9.             modal: true,
  10.             width: 600,
  11.             height: 700,
  12.             autoOpen: false,
  13.             closeOnEscape: false
  14.         });
  15.     }
  16.     var ChangePuAddressType = function(obj){
  17.         var i = $(":radio[name='rdPuAddressType']").index(obj);
  18.         if (i == 0) {
  19.             $("#tblPuLocater").css("display", "none");
  20.         } else {
  21.             $("#tblPuLocater").css("display", "");
  22.         }
  23.         $(".tblPuPanel").css("display", "none");
  24.         $(".tblPuPanel").eq(i).css("display", "");
  25.     }
  26.     return {
  27.         OperatorStops:OperatorStops,
  28.         ChangePuAddressType:ChangePuAddressType
  29.     }
  30. })();
  31. module.OperatorStops();

2、多封装，如：各种验证

  1. var validate = (function(){
  2.     //验证手机号
  3.     var testPhone = function(val){
  4.         if(!(/^1[34578]\d{9}$/.test(val))){
  5.             return false;
  6.         }else{
  7.             return true;
  8.         }
  9.     }
  10.     var testMail = function(val){
  11.         if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(mail))){
  12.             return false;
  13.         }else{
  14.             return true;
  15.         }
  16.     }
  17.     return {
  18.         testPhone : testPhone,
  19.         testMail : testMail
  20.     }
  21. })();
  1. $("#btnConfirmOrderInformation").click(function () {
  2.        if(validate.testPhone($("#txtBookerPhone").val())==false){
  3.             alert('手机号错误');
  4.             return false;   
  5.        }else{
  6.             $("#txtBookerPhone").css("background-color", "white");
  7.        }
  8. });

3 、何时验证

4、js 写法优化

利用好选择器，可将代码简化
原代码：

  1. /选项卡菜单设计和使用
  2. function tabChange() {
  3.     $(".tab_content").css("display", "none");
  4.     $(".tab_content:eq(0)").css("display", "");
  6.     $(".tab_index").click(function () {
  7.         $(".tab_background span[class!='tab_index_close']").removeClass();
  8.         $(".tab_background span[class!='tab_index_close']").addClass("tab_index");
  10.         $(this).addClass("tab_index_active");
  12.         $(".tab_content").css("display", "none");
  13.         $(".tab_content").eq($(this).index()).css("display", "");
  15.         if ($(".tab_index").index(this) == $(".tab_index").length - 1) {
  16.             $("#btnNext").css("display", "none");
  17.         } else {
  18.             $("#btnNext").css("display", "");
  19.         }
  21.         $("#tab_current_index").val($(".tab_index").index(this));
  22.         //在切换到价格Tab时自动执行获取报价操作
  23.         if ($(this).index() == "2") {
  24.             //只有创建订单，或者修改订单同时价格控件值为空时才需要获取报价
  25.             if ($("#hdnActionType").val() == "" || ($("#hdnActionType").val() != "" && $("#txtPrice").val() == "")) {
  26.                 //获取自动报价
  27.                 ajaxGetChauffeurPrice();    
  28.             }
  29.         }
  30.     });
  31.     $(".tab_index:eq(0)").addClass("tab_index_active");
  33.     if ($("#tab_current_index").val() != "") {
  34.         $(".tab_index").eq($("#tab_current_index").val()).click();
  35.     }
  36. }

改进后代码：

  1. $(".tab_index").click(function(){
  2.     $(this).siblings().removeClass('tab_index_active');
  3.     $(this).addClass('tab_index_active');
  4.     $(".tab_content").css('display','none');
  5.     $(".tab_content:eq("+$(this).index()+")").css('display','block');
  6.     //下一步按钮
  7.     if ($(".tab_index").index(this) == $(".tab_index").length - 1) {
  8.         $("#btnNext").css("display", "none");
  9.     } else {
  10.          $("#btnNext").css("display", "");
  11.     }
  12.     //在切换到价格Tab时自动执行获取报价操作
  13.         if ($(this).index() == "2") {
  14.             //只有创建订单，或者修改订单同时价格控件值为空时才需要获取报价
  15.             if ($("#hdnActionType").val() == "" || ($("#hdnActionType").val() != "" && $("#txtPrice").val() == "")) {
  16.                 //获取自动报价
  17.                 ajaxGetChauffeurPrice();    
  18.             }
  19.         }
  20. });
阅读全文
0 0
dojo 对象数组转json dojo 对象数组转json
原创粉丝点击
热门IT博客
夏雨的演技 知乎夏雨的演技 知乎
java 生成二维码demojava 生成二维码demo
js 新窗口打开页面
淘宝卖家流量怎么计算
epoll 高性能网络库
小浣熊视频软件
编程语言最新排名
燕雀焉知鸿鹄之志翻译
ubuntu删除virtualbox
用matlab实现遗传算法
java中的排序方法
php array 遍历
软件设计和程序员
淘宝搜索代码
pano.js
力港网络客服电话
手机淘宝如何取消授权
上海汇钰网络通信设备
复杂网络的聚类系数
炫迈妹儿it
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 日式森林系 森林系素材 森林系婚礼布置 森林系男孩 森林系婚纱 森林系房间 森林系杂志 森林系家具 森林系女孩发型 森林系头饰 森林系服装 森林系户外婚礼 森林系图片 绿森林 森林绿花岗岩价格 绿森林硅藻泥厂家 绿森林发热地板 绿森林净水器 招远绿森林鲜花店电话 绿森林装饰 森林绿产地 绿森林硅藻泥招商 淄博绿森林户外 绿森林家具 绿森林硅藻泥咋样 走过绿森林的老树 绿森林鲜花店 森林绿石材 森林绿石材图片 森林绿图片 森林绿 雾灵山森林公园 雾灵山森林公园旅游 马凡舒出黑森林gif 马凡舒gif 森林鸟 森林鸟旗舰店淘宝 森波拉度假森林 森波拉 森波拉旅游 森波拉度假

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里