自学JS
通过慕课网自学JS,敲了好多代码,好像没什么卵用,附上代码,再接再厉吧!
//属性getter setter方法
var man = {name : 'wsy',
weibo : '@wsy',
get age(){return new Date().getFullYear()-1996;},
set age(val){console.log('Age can\'t be set to' +val);}
}
var man = {
weibo : '@wsy',
$age : null,
get age(){
if(this.$age == undefined){
return new Date().getFullYear()-1996;
}else{
return this.$age;
}
},
set age(val){
val = +val;
if(!isNaN(val)&&val >0 && val < 150){
this.$age = +val;
}else{
throw new Error('Incorrect val =' +val);
}
}
}
//属性标签及操作
function foo(){}
Object.defineProperty(foo.prototype,'z',{get : function(){return 1;}});
var obj = new foo();
Object.defineProperty(obj,'z',{value : 100,configurable : true});
var o = {};
Object.defineProperty(o , 'x' , {value : 1});
var obj = Object.create(o);
Object.defineProperty(obj , 'x' ,{writable : true , configurable : true , value : 100});
Object.getOwnPropertyDescriptor({pro : true} , 'pro');
Object.getOwnPropertyDescriptor({pro : true} , 'a');
var person = {};
Object.defineProperty(person , 'name' , {
configurable : false,
writable : false,
enumerable : false,
value : "wsy"
});
Object.defineProperty(person , 'type' , {
configurable : true,
writable : true,
enumerable : false,
value : "Object"
});
Object.defineProperties(person , {
title : {value : 'fe' , enumerable : true},
corp : {value : 'BABA' , enumerable : true},
salary : {value : 50000 , enumerable : true , writable : true}
});
Object.getOwnPropertyDescriptor(person , 'salary');
Object.getOwnPropertyDescriptor(person , 'corp');
Object.defineProperties(person , {
title : {value : 'fe' , enumerable : true},
corp : {value : 'BABA' , enumerable : true},
salary : {value : 50000 , enumerable : true , writable : true},
luck : {
get : function(){
return Math.random() > 0.5 ? 'good':'bad';
}
},
promote : {
set : function(level){
this.salary *= 1 + level * 0.1;
}
}
});
//对象标签 [[extensible]]
var obj = {x : 1 , y : 2};
Object.isExtensible(obj);
Object.preventExtensions(obj);
Object.isExtensible(obj);
obj.z = 1;
obj.z;
Object.getOwnPropertyDescriptor(obj , 'x');
Object.seal(obj);
Object.getOwnPropertyDescriptor(obj , 'x');
Object.isSealed(obj);
Object.freeze(obj);
Object.getOwnPropertyDescriptor(obj , 'x');
Object.isFrozen(obj);
//序列化
var obj = {x : 1 , y : true , z : [1,2,3] , nullVal : null};
JSON.stringify(obj);
obj = {val : undefined , a : NaN , b : Infinity, c : new Date()};
JSON.stringify(obj);
obj = JSON.parse('{"x" : 1}');
obj.x;
//序列化-自定义
var obj = {
x : 1,
y : 2,
o : {
o1 : 1,
o2 : 2,
toJSON : function(){
return this.o1 + this.o2;
}
}
};
JSON.stringify(obj);
//其它对象方法
var obj = {x : 1 , y : 2};
obj.toString();
obj.toString = function(){return this.x + this.y};
"Result" + obj;
+obj;
obj.valueOf = function(){return this.x + this.y + 100};
+obj;
"Result" + obj;
//数组操作
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3);
arr;
arr[2] = undefined;
2 in arr;//true
delete arr[2];
2 in arr;//false
//遍历二维数组
var arr = [[1,2],[3,4],[5,6]];
var i = 0;
var row;
for(; i<arr.length;i++){
row = arr[i];
console.log('row' +i);
for(j = 0; j<row.length;j++){
console.log(row[j]);
}
}
//数组方法
//join
var arr = [1,2,3];
arr.join();
arr.join("_");
function repeatString(str , n){
return new Array(n+1).join(str);
}
repeatString("a" , 3);
repeatString("Hi" , 5);
//reverse
var arr = [1,2,3];
arr.reverse();
arr;
//sort
var arr = ["a","d","b","c"];
arr.sort();
arr = [13,24,3,44,5];
arr.sort();
arr;
arr.sort(function(a , b){
return a - b;
})
arr = [{age : 25},{age : 39},{age : 99}];
arr.sort(function(a , b){
return a.age - b.age;
})
arr.forEach(function(item){
console.log('age' , item.age);
})
//concat
var arr = [1,2,3];
arr.concat(4,5);
arr;
arr.concat([10,11],13);
arr.concat([1,[2,3]]);
//slice
var arr = [1,2,3,4,5];
arr.slice(1,3);
arr.slice(1);
arr.slice(1 , -1);
arr.slice(-4 , -3);
//splice
var arr = [1,2,3,4,5];
arr.splice(2);
arr;
arr = [1,2,3,4,5];
arr.splice(2,2);
arr;
arr = [1,2,3,4,5];
arr.splice(1,1,'a','b');
arr;
//forEach
var arr = [1,2,6,4,5];
arr.forEach(function(x , index , a){
console.log(x + '|' + index + '|' + (a === arr));
});
//map
var arr = [1,2,3];
arr.map(function(x){
return x + 10;
})
arr;
//filter
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.filter(function(x,index){
return index%3 ===0||x >=8;
});
arr;
//every&some
var arr = [1,2,3,4,5];
arr.every(function(x){
return x <10;
});
arr.every(function(x){
return x <3;
});
var arr = [1,2,3,4,5];
arr.some(function(x){
return x === 10;
});
arr.some(function(x){
return x === 3;
});
//reduce&reduceRight
var arr = [1,2,3];
var sum = arr.reduce(function(x,y){
return x + y;
},0);
arr;
arr = [3,9,6];
var max = arr.reduce(function(x , y){
console.log(x + "|" +y);
return x > y ? x : y;
});
max;
arr = [3,9,6];
var max = arr.reduceRight(function(x , y){
console.log(x + "|" +y);
return x > y ? x : y;
});
max;
//IndexOf&lastIndexOf
var arr = [1,2,3,2,1];
arr.indexOf(2);
arr.indexOf(99);
arr.indexOf(1,1);
arr.indexOf(2,-1);
arr.lastIndexOf(2);
arr.lastIndexOf(2,2);
arr.lastIndexOf(2,-3);
//Array.isArray
Array.isArray([]);
[] instanceof Array;
({}).toString.apply([]) === '[object Array]';
//变量&函数的声明前置
var num = add(1,2);
console.log(num);
function add(a , b){
a = + a;
b = + b;
if(isNaN(a) || isNaN(b)){
return;
}
return a + b;
}
var num = add(1,2);
console.log(num);
var add = function(a , b){
a = + a;
b = + b;
if(isNaN(a) || isNaN(b)){
return;
}
return a + b;
}
//命名函数表的式(NFE)
var func = function nfe(){};
alert(func === nfe);//Uncaught ReferenceError: nfe is not defined at <anonymous>:2:16
//Function构造器
var func = new Function('a' , 'b' , 'console.log(a + b);');
func(1 , 2);
var func = Function('a' , 'b' , 'console.log(a + b);');
func(1 , 2);
Function('var localVal = "local"; console.log(localVal);')();
console.log(typeof localVal);
var globalVal = 'global';
(function(){
var localVal = 'local';
Function('console.log(typeof localVal , typeof globalVal);')();
})();
//全局的this(浏览器)
console.log(this.document === document);
console.log(this === window);
this.a = 37;
console.log(window.a);
//一般函数的this(浏览器)
function f1(){
return this;
}
f1() === window;
function f2(){
"use strict";
return this;
}
f2() === undefined;
//作为对象方法的函数的this
var o = {
prop : 37,
f : function(){
return this.prop;
}
};
console.log(o.f());
var o = {prop : 36};
function independent(){
return this.prop;
}
o.f = independent;
console.log(o.f());
//对象原型链上的this
var o = {f:function(){return this.a + this.b;}};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f());
//get/set方法与this
function modulus(){
return Math.sqrt(this.re * this.re + this.im * this.im);
}
var o = {
re : 1,
im : -1,
get phase(){
return Math.atan2(this.im , this.re);
}
};
Object.defineProperty(o , 'modulus' , {
get : modulus , enumerable:true , configurable:true
});
console.log(o.phase , o.modulus);
//构造器中的this
function MyClass(){
this.a = 37;
}
var o = new MyClass();
console.log(o.a);
function C2(){
this.a = 37;
return {a : 38};
}
o = new C2();
console.log(o.a);
//call/apply方法与this
function add(c , d){
return this.a + this.b + c + d;
}
var o = {a : 1 , b : 3};
add.call(o , 4 ,5);
add.apply(o , [10 , 20]);
function bar(){
console.log(Object.prototype.toString.call(this));
}
bar.call(7);
//bind方法与this
function f(){
return this.a;
}
var g = f.bind({a : "test"});
console.log(g());
var o = {a : 37 , f : f , g : g};
console.log(o.f(),o.g());
自学JS的更多相关文章
- 黄金点游戏(js+css)
一.项目描述:黄金点游戏 黄金点游戏是一个数字小游戏,其游戏规则是: N个同学(N通常大于10),每人写一个0-100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0 ...
- 使用CSS3+jquery.js 实现微信抽奖转盘效果
上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...
- JS 实现无缝滚动动画原理(初学者入)
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- eclipse解决js提示
自学js,发现eclipse中不管js文件.html文件.jsp文件没有都没js代码的提示,对于js代码也不报错,有时候就因为单词敲错却查了很久没查出来,很烦很难受. 在网上找了很多方法,都没有解决, ...
- 【Alpha版本】冲刺阶段——Day 8
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- NodeJS写模块和引入模块的例子
nodejs自学.js function hello(){ console.log("hello world");} function s(){ console.log(" ...
- 前端自学路线之js篇
上一篇我们讲了前端切图的学习路线,不知大家有没有收获.今天来聊聊前端工程师的核心技能之——JavaScript.js这门语言看似简单,但要做到入门.熟练以至于架构的程度,还是有一段路要走的,今天就来聊 ...
- JS自学笔记05
JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...
- JS自学笔记04
JS自学笔记04 arguments[索引] 实参的值 1.对象 1)创建对象 ①调用系统的构造函数创建对象 var obj=new Object(); //添加属性.对象.名字=值; obj.nam ...
随机推荐
- org.springframework.beans.factory.BeanDefinitionStoreException异常
1.下面是我遇到的异常信息: 2017-03-25 18:01:11,322 [localhost-startStop-1][org.springframework.web.context.Conte ...
- jquery-base64.js插件使用
官方文档地址:https://github.com/yckart/jquery.base64.js var a="123"; var b=$.base64.btoa(a); con ...
- windows下搭建tensorflow的环境
这年头,不会点人工智能和神经网络,都不好意思跟人打招呼了.之前搞了一下sklearn,今天觉得应该要了解一下google这个传说中的人工智能开源神器. 最近终于有时间了,凡事从hello world开 ...
- 【Electron】Electron开发入门
Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...
- 使用VS2015将解决方案同步更新到Github上
如今开源已经是一种趋势与潮流了,今天就来谈一谈如何将利用VS将我们的解决方案同步更新到Github上. 第一步:登录自己的Github账号(没有的自行注册). 我的Github登录后的界面: 第二步: ...
- JavaWeb总结(九)—过滤器
一.Filter简介 Web开发人员通过Filter技术,对Web服务器管理的所有Web资源:JSP.Servlet.静态文件.静态HTML等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限 ...
- Centos7部署Zabbix
转载于http://www.cnblogs.com/xqzt/p/5124894.html,更正了部分错误,并增加了个别问题处理办法. 一.Zabbix简介 zabbix是一个基于WEB界面的提供分布 ...
- C#调用WebService接口实现天气预报在web前端显示
本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...
- cssreset
/** * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, ...
- ios sqlite3的简单使用
第一:创建表格 //创建表格 -(void)creatTab{ NSString*creatSQL=@"CREATE TABLE IF NOT EXISTS PERSIONFO(ID INT ...