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

})();

web 10的更多相关文章

  1. 实验吧web题(26/26)全writeup!超详细:)

    #简单的SQL注入 http://www.shiyanbar.com/ctf/1875 1)试着在?id=1,没有错误 2)试着?id=1',出错了,有回显,说明有注入点: You have an e ...

  2. 实验吧web解题记录

    自以为sql注入掌握的还是比较系统的,然而,做了这些题之后才发现,大千世界无奇不有,真是各种猥琐的思路...还是要多学习学习姿势跟上节奏 登录一下好吗?? http://ctf5.shiyanbar. ...

  3. 实验吧 Web的WriteUp

    每次看别人的Writeup都有一种感觉,为什么有了WriteUp我还是不会,每次都打击自己的积极性,所以自己尝试写一篇每个萌新都能看懂的Writeup. 0x01 天下武功唯快不破 题目提示 : 看看 ...

  4. Nginx 实现动态负载均衡(Nginx-1.10.1 + Consul v0.6.4)

    一直也没有找到合适的类似Socat + Haproxy 的组合能用在Nginx,后来发现了Nginx的几个模块,但是也存在各种不足. 而且Nginx 在大流量的情况下nginx -s reload 是 ...

  5. web安全之快速反弹 POST 请求

    在 CTF Web 的基础题中,经常出现一类题型:在 HTTP 响应头获取了一段有效期很短的 key 值后,需要将经过处理后的 key 值快速 POST 给服务器,若 key 值还在有效期内,则服务器 ...

  6. 实现一个基于 SharePoint 2013 的 Timecard 应用(中)

    门户视图 随着 Timecard 列表的增多,如何查找和管理这许多的 Timecard 也就成了问题.尤其对于团队经理而言,他除了自己填写的 Timecard,还要审核团队成员的 Timecard 任 ...

  7. IIS与ASP.NET管道

    IIS 5.x与ASP.NET 我们先来看看IIS 5.x是如何处理基于ASP.NET资源(比如.aspx,.asmx等)请求的,整个过程基本上可以通过图1体现. IIS 5.x运行在进程InetIn ...

  8. ASP.NET管道

    以IIS 6.0为例,在工作进程w3wp.exe中,利用Aspnet_ispai.dll加载.NET运行时(如果.NET运行时尚未加载).IIS 6引入了应用程序池的概念,一个工作进程对应着一个应用程 ...

  9. Atitit 知识图谱的数据来源

    Atitit 知识图谱的数据来源   2. 知识图谱的数据来源1 a) 百科类数据2 b) 结构化数据3 c) 半结构化数据挖掘AVP (垂直站点爬虫)3 d) 通过搜索日志(query record ...

随机推荐

  1. git本机服务器配置(二):TortoiseGit的安装

    1. 下载TortoiseGit https://tortoisegit.org/ 1.1 下载安装包 下载对应安装包,如果不知道自己该下载哪个,那就下载32位的. 1.2 下载语言包 下载和安装包相 ...

  2. python使用pip 18以上版本离线安装package

    在内网办公环境,常常需要使用离线安装python的软件包. 一般都会先在互联网的电脑上下载,再拷贝到内网办公机器上进行离线安装. 一般来说,我是这样做的: 1.拷贝和外网电脑上版本一致,且32位或64 ...

  3. Grunt 实战

    专题截图:(注:这个截图没啥意义) 项目截图: 目录讲解: app/        //开发目录; c/     //开发编译完成css文件夹; i/     //开发img文件夹; j/     / ...

  4. vue的过滤器filter

    前记: 排版记录,未免太耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2 ...

  5. Eclipse 配置Tomcat 服务器

    第一部分:eclipse环境下如何配置tomcat 1.下载并成功安装Eclipse和Tomcat 2.打开Eclipse,单击“window”菜单,选择下方的“Preferences” . 选择好自 ...

  6. Spring Cloud配置中心搭建(集成Git)

    1. 在Github(或其他)创建配置中心仓库bounter-config-repo,然后在仓库创建两个配置文件:simon.properties.susan.properties,链接如下: htt ...

  7. Java后端学习,推荐书籍和学习路线

    最近在学习Java和全栈开发,推荐一些有用的书籍 书架主要针对Java后端和全栈开发用的 书籍介绍 <Spring Boot 2.0企业级应用开发实战> 本书深入浅岀地讲解了 Spring ...

  8. 二丶Django~1

      一 什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于 ...

  9. 小程序+node+mysql做的小项目

    git源码地址: https://github.com/songkangle/weixin_node 小程序页面 数据库 user表 dream表 node的express框架index.js var ...

  10. 【玩转开源】BananaPi R2——移植RPi.GPIO 到 R2

    1. 首先给大家介绍一下什么是RPi.GPIO. 简单去讲,RPi.GPIO就是一个运行在树莓派开发板上可以通过Python去控制GPIO的一个中间件. 现在我这边做了一个基础功能的移植,接下来大家可 ...