自学JS

Posted 2020-09-18 渊源谭

  通过慕课网自学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());