web 10
一、Iterations :
1.do...while : 创建执行指定语句的循环,直到测试条件评估为false。在执行语句后评估条件,导致指定语句至少执行一次。
例子:在以下示例中,do...而循环迭代至少一次并重复,直到我不再小于5。
var result = '';
var i = 0;
do {
i += 1;
result += i + ' ';
} while (i < 5);
document.getElementById('example').innerHTML = result;
2.for : for语句创建了一个循环,该循环由三个可选表达式组成,括在括号中,用分号分隔,然后是一个要在循环中执行的语句(通常是block语句)。
例子:下面的for语句首先声明变量I并将它初始化为0。它检查I是否小于9,执行两个后续语句,并在每次通过循环后将I递增1。
for (var i = 0; i < 9; i++) {
console.log(i);
// more statements
}
3.for each...in : 在对象属性的所有值上迭代指定的变量。对于每个不同的属性,都会执行指定的语句。
例子:
var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
sum += item;
}
console.log(sum); // logs "26", which is 5+13+8
4.for...in : 在迭代对象的所有非符号、可枚举属性时。
例子:以下函数将对象作为其参数。然后,它迭代所有对象的可枚举、非符号属性,并返回一串属性名称及其值。
var obj = {a: 1, b: 2, c: 3};
for (const prop in obj) {
console.log(`obj.${prop} = ${obj[prop]}`);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
5.for...of : 创建一个循环迭代可迭代对象(包括内置字符串、数组,例如类似数组的参数或节点列表对象、typedaray、Map and Set和用户定义的iterables ),调用一个自定义迭代挂钩,其中包含要为对象的每个不同属性的值执行的语句。
如果不在块内重新分配变量,也可以使用const而不是let。
let iterable = [10, 20, 30];
for (let value of iterable) {
value += 1;
console.log(value);
}
// 11
// 21
// 31
6.while : 创建一个循环,只要测试条件评估为true,该循环就会执行指定的语句。在执行语句之前评估条件。
例子:只要n小于3,下面的while循环就会迭代。
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
二、Constructor 与 object 区别和联系 (最好了解一下起源):
1. Constructor:是用于创建和初始化类中创建的一个对象的一种特殊方法。
constructor([arguments])
{ ... }
在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (constructor)方法将会抛出一个 SyntaxError 错误。
在一个构造方法中可以使用super关键字来调用一个父类的构造方法。
如果没有显式指定构造方法,则会添加默认的 constructor 方法。
如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。
如果不指定构造方法,则使用默认构造函数。对于基类,默认构造函数是:
constructor() {}
对于派生类,默认构造函数是:
constructor(...args) {
super(...args);
}
2.Object:
起源:对象(Object)是某一个类(Class)的实例(Instance) ,因此说有对象之前必须先有类型,然后再将类型实例化就得到了对象。
(1)Object.assign()
可以用作对象的复制
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
可以用作对象的合并
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
(2)Object.is()
Object.is(‘haorooms‘, ‘haorooms‘); // true
Object.is(window, window); // true
Object.is(‘foo‘, ‘bar‘); // false
Object.is([], []); // false
var test = { a: 1 };
Object.is(test, test); // true
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
(3)Object.keys()
这个方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。
/* 类数组对象 */
var obj = { 0 : "a", 1 : "b", 2 : "c"};
alert(Object.keys(obj));
// 弹出"0,1,2"
/* 具有随机键排序的数组类对象 */
var an_obj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };
console.log(Object.keys(an_obj));
// console: [‘2‘, ‘7‘, ‘100‘]
(4)Object.create()
Object.create(proto, [ propertiesObject ])
第二个参数是可选的,主要用于指定我们创建的对象的一些属性,(例如:是否可读、是否可写,是否可以枚举等等)可以通过下面案例来了解第二个参数!
ar o;
o = Object.create(Object.prototype, {
// foo会成为所创建对象的数据属性
foo: { writable:true, configurable:true, value: "hello" },
// bar会成为所创建对象的访问器属性
bar: {
configurable: false,
get: function() { return 10 },
set: function(value) { console.log("Setting `o.bar` to", value) }
}})
// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: 42 } })
// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42
o.q = 12
for (var prop in o) {
console.log(prop)
}
//"q"
delete o.p
//false
//创建一个可写的,可枚举的,可配置的属性p
o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });
三、Arrow functions restore
在js中,函数可以用 "arrow" => 定义。
1.箭头函数的语法:
const show=(a,b) => a+b;
show(1,5); // 结果返回6
之前,传统的函数定义:
function show(a,b){
return a+b;
}
show(1,5) //结果返回6
2.箭头函数传递一个参数:
const show=a => a+1; // 这样可以,参数不加括号
const show=(a) => a+1; //加上括号也可以,建议加上√
箭头函数不传递参数:
const show=() => 'welcome strive'; //此时圆括号必须加上
3.完整的箭头函数形式:
const show=a =>{
const b=12;
return a+b;
}
show(5); //返回结果 17
const show=(a,b)=>{
return a+b;
}
show(12,5); //返回结果 17
* 箭头函数需要注意的地方:
箭头函数里面不在提供一个arguments对象了
const show= x => console.log(arguments);
show(12.5) // arguments is not defined
当然还有,caller/callee都不在支持了
关于arguments那个问题,可以解决:
const show=(...arr) => console.log(arr);
show(12,5);
4.箭头函数里面this
var name='window-strive';
var obj={
name:'strive',
showName:()=>{
alert(this.name); //结果是 window-strive
}
}
obj.showName();
5.隐式return
const show= x=> x+1; //类似这种语句没有写return,叫做隐式return
show(1); // 返回结果2
隐式return需要有个注意的地方:
const show=()=>{a:1}; //想返回json,但是这个答案为 undefined
const show=()=>({a:1}); //加上括号了,结果就是 {a:1}
6.显式return(自己动手写return了)
const show=x=>{
return x+1;
}
show(1); //结果为2
总结一下:
箭头函数的语法:
x=>y; // 隐式的return
x=>{return y}; //显式的return
(x,y,z) => {....} //多个参数
(()=>{ // 自执行匿名函数 IIFE
//....code
})();