web 10

Posted 2021-02-04 hjsn-101ycy

一、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

})();