自学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 ...
随机推荐
- MAC下Xcode配置opencv(2017.3.29最新实践,亲测可行)
本文原创,未经同意,谢绝转载!(转载请告知本人并且经过本人同意--By Pacific-hong) 本人小硕一枚,因为专业方向图像相关,所以用到opencv,然后网上MAC下Xcode配置opencv ...
- OpenCV局部变形算法探究
OpenCV是跨平台的强大的计算机视觉识别和图像处理的开源库,可以利用他来实现:模式识别.构建神经网络.深度学习,总之用途多多,入门级就先做一下图像处理吧! 基本的图像处理算法(图像灰阶化.二值化.仿 ...
- es 6点滴记录
关于babel和webpack的使用: Babel 所做的只是帮你把'ES6 模块化语法'转化为'CommonJS 模块化语法',其中的require exports 等是 CommonJS 在具体实 ...
- body全屏
html, body { min-height: 100%; }
- Node.js 安装配置介绍
Node.js 安装配置 本章节我们将向大家介绍在window和Linux上安装Node.js的方法. 本安装教程以Node.js v6.10.1 LTS(长期支持版本)版本为例. Node.js安装 ...
- 【R.转载】apply函数族的使用方法
为什么用apply 因为我是一个程序员,所以在最初学习R的时候,当成"又一门编程语言"来学习,但是怎么学都觉得别扭.现在我的看法倾向于,R不是一种通用型的编程语言,而是一种统计领域 ...
- alert 和 console.log的区别
出走半月,一直以为 console.log 和 alert 的用法是一样的,只是表现的形式不同,alert 是以弹框的形式出现,console.log 是在后台打印输出. 但是今天在写东西的时候,发现 ...
- 我的iOS博客旅行开始了,欢迎光临!
期待您的关注!
- canvas绘制一定数目的圆(均分)
绘制多圆 2016年5月24日12:12:26 绘制一定数目(num)颜色随机的小圆,围成一个大圆.根据num完全自动生成,且小圆自动均分大圆路径(num≥20). 效果: 前置技能:(1).Canv ...
- angular购物车
<body ng-app> <div class="container" ng-controller="carController"> ...