文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript的运算符和方法怎么使用

2023-06-26 09:45

关注

这篇文章主要介绍“JavaScript的运算符和方法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的运算符和方法怎么使用”文章能帮助大家解决问题。

1.JS的类型

按照数据类型划分:

原始类型:Number、String、Boolean、Null、Undefined、Symbol(ES6加入,它的实例唯一,且不可改变,不能使用关键“new”声明);

对象类型:Object

扩展:普通的js对象是“命名值”的无序集合,js同样定义了一种特殊对象——数组(array),表示带编号的有序集合。

ES6新出了键控集合:Set和Map,Set集合值唯一,不会重复;Map存储的为键值对。

JS还定义了另一种特殊对象——函数。如果函数用new来初始化一个新建对象,我们称为构造函数(constructor),每个构造函数定义一类对象,除了数组(array)类和函数(Function)类之外,还有日期(Date)类、正则(RegExp)类、错误(Error)类都是js的核心类。

2.JS中的算术运算

算术运算符除了+、-、*、/、%运算符(求余,求整数后的余数)、还有更复杂的运算通过定义Math对象的函数和常量来实现

Math.abs(-10);        // => 10:绝对值Math.ceil(0.6);       // => 1.0:向上取整数Math.floor(0.6);       // => 向下取整数Math.round(0.6);       // =>:1.0:四舍五入Math.random();         // => 0-1随机数Math.max(1, 3, 5);     // => 返回最高值Math.min(1, -3, 50);   // => 返回最低值Math.pow(2, 3);        // => 8:2的3次方Math.PI;             // => π:圆周率Math.sin(3);           // => 3的正弦值Math.sqrt(30);        // => 平方根Math.tan(100);        // => 正切Math.acos(10);        // => 反余弦值Math.cos(100);        // => 余弦值Math.exp(100);        // => e的100次幂

3.string的slice用法

string的slice()用法,提取字符串的一部分,返回一个新字符,不改变原来字符串(和array.slice用法一致)。

var str1 = "hello world";str1.slice(1, 4);   // "ell":截取下标1到下标4,不包含最后一位str1.slice(1);      //"ello world":截取下标1以后的所有字符str1.slice(-3);    //"rld":截取后三位

4.JS中的“假值”

undefined、null、0、-0、""、NaN 这6个可以转换成false的值,称作“假值”。

var exp1 = undefined;if (exp1) {    console.log("真");} else {    console.log("假");}//output:假

5.数字转换的方法(科学技术或四舍五入)

Number转换成字符串的场景提供了三种方法:

toFixed() => 根据小数点后指定位数将数字转化成字符串,会进行四舍五入;

toExponential() => 使用指数计数法将数字转换为字符串;

toPrecision() => 根据指定的有效字位数将数字转换成字符串;

var n = 123456.78;n.toFixed(0);       //output:123457n.toFixed(1);       //ouput:123456.8n.toFixed(5);       //output:123456.78000n.toExponential(1);    //output:1.2e+5n.toPrecision(4);      //output:1.2346e+5n.toPrecision(7);      //output:123456.8n.toPrecision(10);     //output:123456.7800

6.parseInt()的“高级”玩法

parseInt()可以接收第二个可选参数,这个参数指定了数字转换的基数,有效的取值范围是2-36.

parseInt("11", 5);    //6 => 1*5+1parseInt("ff", 16);   //255 => 15*16+15parseInt("077", 10);  //77 => 70*10+7

7.全局变量和"全局属性"的delete

js声明变量使用var和不用var的区别,大部分我们使用的时候都是一样的,例如:

var str1 = "hello";str2 = "world!";console.log("%s %s", str1, str2);//output:hello world!

而在使用delete属性时,使用var的变量是不允许删除的,例如:

var str1 = "hello";str2 = "world!";this.str3 = "!!!";delete str1;    //falsedelete str2;    //truedelete str3;    //true

总结:使用var的变量,可以理解为全局变量,全局变量属性是不可编辑的,而不使用var的可以看做是声明了一个全局属性,等同于this.xxx=yyy,属性是可以编辑的,所以是可以delete的。

8.JS的局部变量提升和块级作用域

先来看代码执行的结果(也是一道经典的js面试题):

var scope = "global";function f() {    console.log(scope);    var scope = "local";    console.log(scope);}f();console.log(scope);//output: undefined、local、global

这是什么原因造成的?为什么不是global/local/global呢?因为es5没有块级作用域,局部变量被提升到最前了声明了,js解析器的机制造成的,上面的代码类似于下面这段代码:

var scope = "global";function f() {    var scope; //只声明变量,变量前置    console.log(scope);    scope = "local";    console.log(scope);}f();console.log(scope);//output: undefined、local、global

所以通常来说,在作用域里面变量声明的代码要放在代码的最顶部,这是一个非常不错的编程习惯,也可以避免一些不必要的问题。

9.特殊的Date类型转换

如果我告诉你typeof(new Date()+1)和typeof(new Date-1)的值不同你信吗?

下面来看具体代码:

var now = new Date();typeof (now + 1);     //output:stringtypeof (now - 1);     //output:numbernow == now.toString(); //output:true

那上面的问题是怎么造成的,typeof(now+1)不应该是number类型吗?

原因分析:

“+” 有两种含义,一个是字符串连接,一个是加法。

类型转换的时候,默认先调用valueOf,然后才调用toString,而Date类型除外,所以对于new Date()的时候优先,调用的是toString(),而“+”操作是把他当成了字符串连接而不是数字相加。

“-”的时候,只有减法的含义,也就是说优先调用valuleOf,所以结果为number类

10.js的继承机制

继承机制:js是通过原型链实现继承的。简单实现如下:

function Animal(name) {    this.name = name || 'Animal';    this.sleep = function () {        console.log(this.name + '正在睡觉!');    }}Animal.prototype.eat = function (food) {    console.log(this.name + '正在吃:' + food);};function Cat() {}Cat.prototype = new Animal();Cat.prototype.name = 'cat';var cat = new Cat();console.log(cat.name);console.log(cat.eat('fish'));console.log(cat.sleep());console.log(cat instanceof Animal); //trueconsole.log(cat instanceof Cat); //true

11.Array的高级用法

(1)slice和splice区别

虽然都是截取数组然而slice和splice的区别很大,接下来具体来看。

先说slice

slice定义:方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

var array = ["apple", "banana", "cherry", "dates", "fig"];array.slice(1, 4);    //["banana", "cherry", "dates"]array.slice(1);       //["banana", "cherry", "dates", "fig"]array.slice(-2);      //["dates", "fig"]console.log(array);     //["apple", "banana", "cherry", "dates", "fig"]

Array.prototype.slice(x,y); 第一位参数为截取开始下标,截取的时候包含此下标,第二位参数缺省参数,如果不填写,标识截取到数组的最后一位,如果填写了,标识截取到下标的位置,截取元素不包含最后一位,截取不改变原来数组。

splice部分

splice定义:方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

代码1:

//方法通过删除现有元素和/或添加新元素来更改一个数组的内容。var array = ["apple", "banana", "cherry", "dates", "fig"];array.splice(2, 2); //从下标2开始截取,截取2个console.log(array); //["apple", "banana", "fig"]

代码2:

var array = ["apple", "banana", "cherry", "dates", "fig"];array.splice(2); //从下标2开始截取,截取到最后console.log(array); //["apple", "banana"]

代码3:

var array = ["apple", "banana", "cherry", "dates", "fig"];array.splice(2, 2, "plum", "orange"); //截取下标2到后面2个元素替换成"plum", "orange"console.log(array); //["apple", "banana", "plum", "orange", "fig"]

小技巧:可以使用var newArray = array.splice();实现数组复制。

(2)length的另一种用法

var array = ["apple", "banana", "cherry", "dates", "fig"];array.length = 3; //["apple", "banana", "cherry"]array.length = 0; //[] => 删除所有元素

(3)reduce()

定义:方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

var array = [10, 5, 20, 15];var sum = array.reduce(function (x, y) { return x + y }, 0);       //求和var product = array.reduce(function (x, y) { return x * y }, 0);    //求积var max = array.reduce(function (x, y) { return (x > y) ? x : y }); //求最大值

(4)every()和some()

定义:数组的逻辑判断,对每一个元素进行判断,返回true或者false.

every()每一个元素都要满足条件才会返回true,some()其中一项满足条件即会为true.

function fun(element, index, array) {    return element > 10;}[2, 5, 8, 1, 4].some(fun);      // false[12, 5, 8, 1, 4].some(fun);     // true[12, 5, 8, 1, 4].every(fun);    // false[12, 15, 18, 11, 14].every(fun);  // true

(5)map()

定义:将调用数组的每一个元素传递给指定的函数,并返回一个新的数组,不会改变老数组。

var array = [1, 4, 9, 16];var map = array.map(x => x * 2);    //[2, 8, 18, 32]

(6)Arguments.callee

定义:当前正在执行的函数.

在匿名函数中使用Arguments.callee引用自身,以便实现递归。代码如下:

var fun = function (x) {    console.log(x);    if (x < 1) {        return 1;    }    return x + arguments.callee(x - 1);}fun(3);   //7 => 3+2+1+1

(7)sort()排序规则的理解

sort()是可以介绍一个匿名函数作为排序规则的,例如:

var array = [3, 9, 3, 12, 5, 8, 1, 4];array.sort(function (a, b) { return a - b; }); //[1, 3, 3, 4, 5, 8, 9, 12]

理解:a-b得到一个值,而这个正常的值将按照数字的正常规则进行排序,也就是 负数=>0=>正数,所以理解a-b不能单纯的理解他为一个boolean值,而是根据a-b给数组一个排序规则,如果需要倒叙的话就用b-a.

12.高阶函数

定义: 高阶函数就是操作函数的函数,它接受一个或多个作为参数,并返回一个新函数。

function sum(x, y, f) {    return f(x) + f(y);}console.log(sum(-5, 6, Math.abs));

13.正则表达式字符

[...]    方块内任意字符

[^...]   非方块内任意字符

w     [a-zA-Z0-9]

W     [^a-zA-Z0-9]

d     [0-9]

D     [^0-9]

14.解构赋值

let [x, y] = [1, 2];[x, y] = [x + 1, y + 1];[x, y] = [y, x];console.log(x, y);  // 3 2

15.闭包

“闭包”这个词刚开始开的时候就头皮发麻,感觉很“高大上”难以理解,其实掌握之后,发现也挺好用的,下面介绍一下我对于闭包的理解。

定义:闭包就是可以访问一个函数局部(私有)变量的方法。

var Cat = function () {    var name = "cat";    var age = 2;    this.getName = function () {        return name;    }    this.getAge = function () {        return age;    }}var cat = new Cat();console.log(cat.name);        //undefinedconsole.log(cat.age);         //undefinedconsole.log(cat.getName());    //catconsole.log(cat.getAge());     //2

如上代码:利用闭包可以给用特权的方法访问私有属性,保证了私有变量不被修改和污染,当然根据实际需求可以设置通过方法修改私有属性也是可行的。

关于“JavaScript的运算符和方法怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯