JS基础 运算符

赋值运算符

使用 = 进行变量赋值

let url = 'https://wgchen.blog.csdn.net';

算术运算符

包括以下几种算术运算符。

运算符说明*乘法/除法+加法-减法%取余数

let a = 5,b = 3;
console.log(a * b); //15
console.log(a % b); //2

复合运算符

可以使用 =、/=、+=、-=、%= 简写算术运算。即 n*=2等同于n=n*2。

let n = 2;
n *= 2;
console.log(n);

对变量加减相应数值。

let n = 2;
n += 3;
console.log(n); //5

n -= 5;
console.log(n); //0

n+=3 是 n=n+3 的简写形式

一元运算符 前置操作

前置操作会在表达式最先执行。

let n = 1;
++n
console.log(n);

--n
console.log(n);

++n 就是 n=n+1 的简写形式。

let n = 2;
let f = 30 + ++n;
console.log(f);

使用后置操作符，++n 会在最先执行，所以f的结果是33。

后置操作

后置操作会在表达式最后执行。

let n = 1;
n++
console.log(n);

let n = 2;
let f = 30 + n++;
console.log(f);

使用后置操作符，n++ 会在最后执行，所以f的结果是32。 参与数学计算

let a = 1;
b = a++ + 2;
console.log(b); //3

比较运算符 运算符说明>大于=大于或等于 { // console.log(item); item.addEventListener("keyup", () => { let msg = ""; if ( queryByName("password").value != queryByName("confirm_password").value || queryByName("password").value.length x * x 上面的箭头函数相当于： function (x) { return x * x; }

箭头函数相当于匿名函数，并且简化了函数定义。

箭头函数有两种格式： 一种像上面的，只包含一个表达式，连 { ... } 和return都省略掉了。 还有一种可以包含多条语句，这时候就不能省略 { ... } 和 return：

x => {
    if (x > 0) {
        return x * x;
    }else {
        return - x * x;
    }
}

如果参数不是一个，就需要用括号 () 括起来：

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i { foo: x }

因为和函数体的{ ... }有语法冲突，所以要改为

// ok:
x => ({ foo: x })

this

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的 this 是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对 this 绑定的错误处理，下面的例子无法得到预期结果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
        	// this指向 window 或 undefined
            return new Date().getFullYear() - this.birth; 
        };
        return fn();
    }
};

现在，箭头函数完全修复了 this 的指向，this 总是指向词法作用域，也就是外层调用者obj：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        // this指向obj对象
        var fn = () => new Date().getFullYear() - this.birth;
        return fn();
    }
};
obj.getAge(); // 25

由于 this 在箭头函数中已经按照词法作用域绑定了，所以，用 call() 或者 apply() 调用箭头函数时，无法对 this 进行绑定，即传入的第一个参数被忽略：

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

短路运算

下例中 a 为真值，就已经知道结果了就不会再判断 f 的值了。

let a = true,f = false;
console.log(a || f);

同理当 f 值为假时，就已经可以判断 && 的结果了，就没有判断 a 的必要了。

let a = true,f = false;
console.log(f && a);

使用短路特性赋值

let sex = prompt("你的性别是？") || "保密";
console.log(sex);

当 opt.url 没有值时，使用短路特性设置 url 的值

let opt = {
    url: ''
};

function getUrl(opt) {
    opt.url = 'https://wgchen.blog.csdn.net';
}

opt.url || getUrl(opt);
console.log(opt.url);

实例操作

下面的例子在用户输入表单项并接收协议后才可提交

    用户名: 
    
     接收协议
    
    



    function query(el) {
        return document.querySelector(el);
    }
    query("#form").addEventListener("submit", function (event) {
        let username = query('input[name="username"]').value;
        let copyright = query('input[name="copyright"]').checked;
        
        console.log(!!username);

        if (!username || copyright === false) {
            alert("请填写用户名并接受协议");
            event.preventDefault();
        }
    });

HTML DOM prompt() 方法

定义和用法 prompt() 方法用于显示可提示用户进行输入的对话框。

语法

prompt(text,defaultText)

参数描述text可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。defaultText可选。默认的输入文本。

说明 如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

function disp_prompt()
{
  var name=prompt("Please enter your name","")
  if (name!=null && name!="")
    {
    document.write("Hello " + name + "!")
    }
}

HTML DOM addEventListener() 方法

该实例使用 addEventListener() 方法来向按钮添加点击事件。
点我



document.getElementById("myBtn").addEventListener("click", function()
{
    document.getElementById("demo").innerHTML = "Hello World";
});

定义和用法 addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法 element.addEventListener(event, function, useCapture)

参数描述event必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。function必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:

• true - 事件句柄在捕获阶段执行
• false- false- 默认。事件句柄在冒泡阶段执行

    
    wgchen
    
        div {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }
    




    该实例演示了在添加事件监听时冒泡与捕获阶段的不同。
    
        点击该段落， 我是冒泡
    
    
        点击该段落， 我是捕获
    
    
        document.getElementById("myP").addEventListener("click", function () {
            alert("你点击了 P 元素!");
        }, false);
        document.getElementById("myDiv").addEventListener("click", function () {
            alert("你点击了 DIV 元素!");
        }, false);
        document.getElementById("myP2").addEventListener("click", function () {
            alert("你点击了 P 元素!");
        }, true);
        document.getElementById("myDiv2").addEventListener("click", function () {
            alert("你点击了 DIV 元素!");
        }, true);