javascript基础(第三天)

开胃菜, var a = [2,3,1,3,8,4,3]; 如何快速找到8的索引位置? 
开始的一句话: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference  这个星球最好的js文档之一

ie9+ (2012年才基本普及,跟现在的es6差不多)

in操作符的使用, 查找属性是否存在当前对象(包括原型也算)

var a = {b:‘bbb‘,c:‘ccc‘}; function b(){ this.d=‘ddd‘ }; b.prototype=a; var bb = new b(); ‘d‘ in bb;

Boolean
    x = Boolean(expression); // 这样用
    x = new Boolean(expression); // 而不要这样!
    !! //才是王道 
Number

Number(thing)
    new Number(thing)

String
    String(thing)
    new String(thing)

String.fromCharCode(65);  //A   unicode ---> 65

Date

RegExp

Error

Function

arguments.callee; //找到自己

arguments.callee.caller;  //找到谁调用的我(找爸爸)

function a(){

console.log(a.caller);

//console.log(a.caller === arguments.callee.caller); //true

};

function b(){

a();

};

b();

bind(); 类似于apply,call的一个方法

var a = {b:‘bbb‘,c:‘ccc‘};

function f(){
                this.b=‘xxx‘;
                return this.b+this.c;
        }
        var fun = f.bind(a); //相当于又创建了一个函数,并没有破坏f
        fun();
        console.log(a);

var a = {b:‘bbb‘,c:‘ccc‘};

function f(param){
                this.b=param;
                return this.b+this.c;
        }
        var fun = f.bind(a); //相当于又创建了一个函数,并没有破坏f
        console.log( fun(‘xxx‘) );
        console.log(a);

Array

isArray();//判断是不是数组类型

Array.isArray({}) // false

Array.isArray([]) //  true

indexOf(); 返回索引位置,或-1

[1,2,3].indexOf(2); //1

lastIndexOf();

[1,2,3].lastIndexOf(2); //1

forEach(); //没有返回值

[1,2,3].forEach(function(value,index,array){
                console.log("value="+value+",index="+index+",array="+array);
        });

[1,2,3].forEach(function(value,index,array){
              if( value === 2 ){
                     return true;
                     //return false; 
              }
              console.log("value="+value+",index="+index+",array="+array);
       });[]

map();  会覆盖原数组吗??

[1,2,3].map(function(value,index,array){

return value*2;

});

var a = [1,2,3];

a.map(function(value,index,array){

return value*2;

});

console.log(a);

filter(); 会覆盖原数组吗?

var a = [1,2,3];
        a.filter(function(value,index,array){
                return value>2;
        });
        //console.log(a);

some(); //返回false,或者true,遍历数组是否满足某种情况

var a = [‘男人‘,‘女人‘,‘妹子‘,‘奶哥‘];

a.some(function(value,index,array){

return value === ‘奶哥‘ ;

});

every(); //返回false,或者true,遍历数组是否全部满足某种情况

var a = [‘男人‘,‘女人‘,‘妹子‘,‘奶哥变身‘];

a.every(function(value,index,array){

return value !== ‘奶哥‘ ;

});

reduce() //循环叠加,从头到尾

var a = [1,2,3,4];

a.reduce(function(prev,cur,index,array){

return prev+cur;

});

reduceRight() //循环叠加,从尾到头

var a = [1,2,3,4];

a.reduceRight(function(prev,cur,index,array){

return prev+cur;

});

Object

var a = {b:‘bbb‘,c:‘ccc‘};
       function b(a){
              a.b=‘xxx‘;
       }
       function c(a){
              delete a.b;
       }
       b(a);
       c(a);
       console.log(a.b);  //这个故事告诉我们, js的不稳定性.所以推出来了好东西

!!!!极其重要的!!!!

Configurable:  能否delelte删除从而重新定义属性,能否修改属性特性.(!!修改为访问器属性或者数据属性!!)

Enumerable: 表示能否通过for-in循环返回属性

Writable: 表示能否修改属性的值

//设置value的叫数据属性, 设置getter,setter的叫访问器属性

Value: 这个属性的数据属性, 从这个位置读, 写入这个位置.

Getter/Setter, 这个属性叫访问器属性, 从getter读, 从setter取

Object.keys(); //返回一个指定对象的所有非继承,可枚举属性名的数组

var a = {b:‘bbb‘,c:‘ccc‘}; Object.keys(a); //["b", "c"]

Object.getPrototypeOf(); 返回指定对象的原型

var a = {b:‘bbb‘,c:‘ccc‘}; Object.getPrototypeOf(a);  //Object {}

var a = {b:‘bbb‘,c:‘ccc‘}; function b(){}; b.prototype=a; Object.getPrototypeOf(b); //function Empty() {}

var a = {b:‘bbb‘,c:‘ccc‘}; function b(){}; b.prototype=a; Object.getPrototypeOf(new b()); //Object {b: "bbb", c: "ccc"}

Object.create(指定的原型,属性); //使用指定的原型及属性创建一个新对象

var a = Object.create(null); a;  //创建空对象

var a = Object.create({}); a;  //创建空对象

var a = {b:‘bbb‘,c:‘ccc‘};

var children = Object.create(a);

children.__proto__ === a; // true;

children.prototype; === undefined; //true

var cc = new children();  //TypeError: object is not a function

function b(){ this.bb=‘bb‘;}  var a = Object.create(b); new a.__proto__().bb; //bb

function b(){ this.bb=‘bb‘;}  b.cc=‘cc‘;   var a = Object.create(b); a.cc; //cc

var a = Object.create(Array); console.log(a.isArray([])); a === Array; //false;  //也就是说新建了一个全局的Array对象 !!挺好玩的

//!!比较重要的例子!!!

var a = {b:‘bbb‘}; //自己指定的默认都为true,writable:true,enumerable:true,configurable:true
           var children = Object.create(a,{
                x:{value:1,writable:false,enumerable:true,configurable:true},
                y:{value:2,writable:false,enumerable:false,configurable:true},
                z:{value:3,writable:false,enumerable:false,configurable:false},
                r:{
                     get:function(){
                          return this._r; //这个必须是指向一个其他字段,不然就会无限递归调用
                     },
                     set:function(r){
                          this._r=r;
                     }
                     /*writable:false,反复测试的结果就是不能设, (只指定get,不指定set,意味着不可写).*/enumerable:false,configurable:false 
                }
           });

children.r=100;
           console.log(children.r);

Object.freeze(); 将指定的对象设置为不可以改变 增,删,改都不行,只能查

var a = {b:‘bbb‘,c:‘ccc‘};

Object.freeze(a);

delete a.b;

a.c = ‘xxx‘;

a.d = ‘ddd‘;

console.log(a.b); //bbb

console.log(a.c); //ccc

console.log(a.d); //undefined

Object.seal(); //阻止添加新属性或者删除现有属性, 增/删不行, 可以改和查

var a = {b:‘bbb‘,c:‘ccc‘};

Object.seal(a);

delete a.b;

a.c = ‘xxx‘;

a.d = ‘ddd‘;

console.log(a.b); //bbb

console.log(a.c); //xxx

console.log(a.d); //undefined

Object.preventExtensions(); //阻止在一个对象上添加新属性, 新增不行, 删除,改,查可以.

var a = {b:‘bbb‘,c:‘ccc‘};
            Object.preventExtensions(a);
            delete a.b;
            a.c = ‘xxx‘;
            a.d = ‘ddd‘;
            console.log(a.b); //undefined
            console.log(a.c); //xxx
            console.log(a.d); //undefined

Object.isFrozen(); //判断当前对象是否冻结 -->专门针对Object.freeze()的

var a = {aa:‘aa‘,aaa:‘aaa‘};
            Object.freeze(a);
            var b = {bb:‘bb‘,aaa:‘bbb‘};
            Object.seal(b);
            var c = {cc:‘cc‘,ccc:‘ccc‘};
            console.log(Object.isFrozen(a)); //true
            console.log(Object.isFrozen(b)); //false
            console.log(Object.isFrozen(c)); //false

Object.isSealed(); //判断当前是否为封闭-->专门针对Object.seal()的

var a = {aa:‘aa‘,aaa:‘aaa‘};
             Object.freeze(a);
             var b = {bb:‘bb‘,aaa:‘bbb‘};
             Object.seal(b);
             var c = {cc:‘cc‘,ccc:‘ccc‘};
             console.log(Object.isSealed(a)); //true
             console.log(Object.isSealed(b)); //true
             console.log(Object.isSealed(c)); //false

Object.isExtensible(); 判断当前对象是否能新增属性, --->针对Object.preventExtensions()的

var a = {aa:‘aa‘,aaa:‘aaa‘};
            Object.freeze(a);
            var b = {bb:‘bb‘,aaa:‘bbb‘};
            Object.seal(b);
            var c = {cc:‘cc‘,ccc:‘ccc‘};
            console.log(Object.isExtensible(a)); //false
            console.log(Object.isExtensible(b)); //false
            console.log(Object.isExtensible(c)); //true

Object.propertyIsEnumerable();//检查对象的某个属性是否可枚举(for in) –> 针对enumerable字段

var a = {b:‘bbb‘}; //自己指定的默认都为true,writable:true,enumerable:true,configurable:true
           var children = Object.create(a,{
                x:{value:1,writable:false,enumerable:true,configurable:true},
                y:{value:2,writable:false,enumerable:false,configurable:true},
                z:{value:3,writable:false,enumerable:false,configurable:false},
           });
           console.log( children.propertyIsEnumerable(‘x‘) ); //true
           console.log( children.propertyIsEnumerable(‘y‘) ); //false
           console.log( children.propertyIsEnumerable(‘z‘) ); //false

Object.getOwnPropertyNames(); 返回一个包含指定对象的所有非继承属性名的数组,包含不可枚举类型

var a = {b:‘bbb‘}; //自己指定的默认都为true,writable:true,enumerable:true,configurable:true
           var children = Object.create(a,{
                x:{value:1,writable:false,enumerable:true,configurable:true},
                y:{value:2,writable:false,enumerable:false,configurable:true},
                z:{value:3,writable:false,enumerable:false,configurable:false},
                r:{
                     get:function(){
                          return this._r; 
                     },
                     set:function(r){
                          this._r=r;
                     }
                }
           });

Object.getOwnPropertyNames(children);  //["x", "y", "z", "r"]

Object.defineProperty(); //要修改属性默认的特性,使用它

var person = { name: ‘1234‘ }; //这样定义Configurable,Enumerable,Writable默认为true,Value等于指定值

var woman = {};
             Object.defineProperty(woman,"name",{
                      configurable:false, //删除
enumerable:false, //for in
writable:false, //修改
                      value:‘奶哥‘
             });
             console.log(woman.name); //奶哥

delete woman.name;
             console.log(woman.name); //奶哥

for(var i in woman){
                     console.log(i);
             }

woman.name=‘奶哥变身‘;
             console.log(woman.name); //奶哥

Object.defineProperty(woman,"name",{
                          configurable:true,
             });

var book = {
                   _year:2004,
                   edition:1
             }
             Object.defineProperty(book,"year",{
                   get:function(){
                         return this._year;
                   },
                   set:function(newValue){
                         if(newValue>2004){
                               this._year = newValue;
                               this.edition += newValue - 2004;
                               //!!!吊炸天!!!!!设置一个值,其他值跟着联动
                         }
                   }
             });
             book.year=2005;
             console.log(book._year);
             console.log(book.edition);

Object.defineProperties(对象, 属性);  //设置多个属性

var book = {}
              Object.defineProperties(book,{
                     _year:{value:2004},
                     edition:{value:1},
                     year:{
                            get:function(){
                                   return this._year;
                            },
                            set:function(newValue){
                                   if(newValue>2004){
                                          this._year = newValue;
                                          this.edition += newValue - 2004;
                                   }
                            }
                     }
              });

Object.getOwnPropertyDescriptor(对象, 属性); //返回对象属性的描述特征

var book = {}
          Object.defineProperties(book,{
               _year:{value:2004},
               edition:{value:1},
               year:{
                    get:function(){
                         return this._year;
                    },
                    set:function(newValue){
                         if(newValue>2004){
                              this._year = newValue;
                              this.edition += newValue - 2004;
                         }
                    }
               }
          });
          var descriptor = Object.getOwnPropertyDescriptor(book,‘_year‘);
          console.log(descriptor);
          console.log(typeof descriptor.get);
          console.log(typeof descriptor.set);
          console.log("----------------------------------------------");
          descriptor = Object.getOwnPropertyDescriptor(book,‘year‘);
          console.log(descriptor);
          console.log(descriptor.value);
          console.log(descriptor.writable);
          console.log(typeof descriptor.get);
          console.log(typeof descriptor.set);

关于对象的补充:

Object.create();     Object.defineProperty();       Object.defineProperties();   都可以设置对象属性的状态.

<javascript高级程序设计>第三版 141页中 "访问器属性不能直接定义,必须使用Object.defineProperty()来定义",  这个是错误的,我爱李松峰的翻译,这个事肯定是曹力干的.

 凡事无绝对, 拿不准, 执行码子,最有说服力

时间： 2024-11-10 04:34:37

javascript基础(第三天)的相关文章

JavaScript基础（三）

JavaScript基础(三) for循环嵌套 循环嵌套不是什么特殊语法,就是说js中的许多语法结构都可以嵌套使用,for也可以 循环嵌套时,代码执行次数变多,通常使用是在2层左右 while循环 规则: 先进行条件检测,如果为true,执行循环体代码 再检测条件,再为true再执行循环体,以此类推 直到条件为false时循环结束 while (条件) { // 循环体 } for和while的使用场景 for循环适用于次数确定的重复操作(for使用较多) while循环适用于不确定次数的重复操

JavaScript基础学习(三)&mdash;数组

一.数组简介     JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可以随着数据的添加而自动增长以扩容纳新增数据.   二.数组的操作 1.创建 //创建一个空数组 var arr = []; var arr2 = [1,true,new Date()]; arr2.length = 2; alert(arr2); //true   2.pop和push方法     

JavaScript 基础（三）

数据类型 1.字符串 2.数值型 3.布尔型 4.对象 5.数组 为了更规范,使自己将来在工作时更容易与方便维护,采用一些数据类型的名命习惯 类型 前缀 例子 数组 a aArray 布尔值 b bMale 浮点 f fTax 函数 fn fnSwap 整型 i iAge 对象 o oCar 正则 re RePattern 字符串 s sUniversity 一.字符串 String var sMyString = "hello world"; 字符串可以是引号中的任意文本.可使用单引

JavaScript 基础语法三

一.循环 循环结构:在满足特定条件的情况下反复执行的操作.循环四要素:循环变量 ,循环条件 , 循环增量 ,循环体. 第一种:while 循环. while (条件表达式) {循环体;}. //第一步:定义循环变量 var count = 1; // 第二部:判断循环条件 while (count <= 5){ //第三部:循环体 console.log("跑圈") //第四步:循环增量 count++; } // 用while打印出1~100之间不是7的倍数并且不包含7的数 v

JavaScript基础（三） 事件

事件流 事件流意味着页面上不止一个元素可响应相同的事件如:当我们点击页面上的按钮时,实际上我们是点击了按钮,以及按钮的容器--整个页面. 事件冒泡window ← document ← html ← body ← div由点击的位置扩散到整个界面 事件捕获由整个界面缩小到点击的位置window → document → html → body → div DOM事件流包含事件冒泡和事件捕捉 传统事件处理程序指派方法 一.取得id = div1的元素节点.var div1 = document.g

JavaScript基础教程(三)

一.JS变量 1.变量是用来储存信息的"容器".例:var x=10; var y=10.1; var z="hello"; <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body&g

JavaScript基础学习&lt;三&gt;参数传递

在函数体内可以通过arguments对象来访问这个参数数组,从而获取传递给函数的每一个参数 其实arguments与数组类似,但不是Array的实例,可以使用方括号的语法来访问每个一个元素 例如:arguments[0],arguments[1]以此类推. function How(){ alert(arguments.length); } How("string",45);//2 How("");//0; ECMAScript函数不能重载.

JavaScript基础三

1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 1.10.2 事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.事件.事件驱动程序. 比

JavaScript基础：DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心