关于javascript的笔记,javascript手写笔记

Javascript学习笔记 delete运算符

一、语法

delete后面的表达式必须给出一个属性的引用，比如

var

o

=

{a:1};

delete

o.a;

//此处o.a是对象o的属性a的引用

只有在with语句里才能使用单独的属性名

复制代码

代码如下:

with(o){

delete

a;

}

二、delete的返回值

delete是普通运算符，会返回true或false。规则为：当被delete的对象的属性存在并且不能被删除时

返回false，否则返回true。

这里的一个特点就是，对象属性不存在时也返回true，所以返回值并非完全等同于删除成功与否。

复制代码

代码如下:

var

o

=

{a:1};

delete

o.a;

//返回true

var

b

=

2;

delete

b;//返回false，ECMA规则约定:使用var和function声明的变量不可以被delete

三、哪些情况下不允许delete

上例提到的var和function声明的变量不可以被delete，但隐式声明可以被删除

复制代码

代码如下:

function

c(){return

12;}

delete

c;//返回false

d

=

function(){return

12;}

delete

d;//返回true

不能delete从原型链上继承的属性，但可以删除原型链上的属性

复制代码

代码如下:

function

Foo(){}

Foo.prototype.bar

=

42;

var

foo

=

new

Foo();

delete

foo.bar;

//

返回true,但并没有起作用

alert(foo.bar);

//

alerts

42,

属性是继承的

delete

Foo.prototype.bar;

//

在原型上删除属性bar

alert(foo.bar);

//

alerts

"undefined",

属性已经不存在，无法被继承

四、特例

复制代码

代码如下:

eval执行的代码中如有通过var和function声明的变量，可以被delete

eval("var

a=1");

delete

a;

alert(a);

//报未定义错误

如果声明是在eval执行代码中的闭包内进行的，则变量不能被delete

eval("(function(){var

a=1;delete

a;

return

a;})()");//1

五、delete

数组元素

从数组中delete其元素并不会影响数组的长度

复制代码

代码如下:

var

arr

=

['yuyin','suhuan','baby'];

delete

arr[0];

alert(arr.length);//alert

3

被delete的键值已经不属于数组，但却还是可以被访问，其值为undefined。

复制代码

代码如下:

var

arr

=

['yuyin','suhuan','baby'];

delete

arr[0];

in

arr;

//

false

alert(arr[0]);//undefined

arr[0]

===

undefined;//true

对比直接将键值赋值undefined

复制代码

代码如下:

var

arr

=

['yuyin','suhuan','baby'];

arr[0]

=

undefined;

in

arr;

//

true

alert(arr[0]);//undefined

arr[0]

===

undefined;//true

可以看出delete

操作只是将键值这个属性从数组中删除了，数组本身也是对象，这个情况好理解的。如果需要保留键值，可以用undefined赋值。

相关问答

Q1: Web前端开发知识点之JavaScript对象

今天小编要跟大家分享的文章是关于Web前端开发知识点之JavaScript对象。真正从事web前端工作的小伙伴们来小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1、Function对象

①对象的创建

Function对象的创建共有3种方法。

第一种方法格式如下，不符合我们写代码的习惯，不建议使用

varfun=newFunction(形式参数列表,方法体);

第二种方法格式如下：

function方法名称(形式参数列表){方法体}

第三种方法格式如下：

var方法名称=function(形式参数列表){方法体}

一般我们采用后两种方法进行Function对象的创建。

②对象的属性

·length属性代表形参的个数

③对象的特点

·方法定义时，形式参数的类型不用写，返回值类型也不写。

·方法是一个对象，如果定义名称相同的方法，会覆盖。

·在JavaScript中、方法的调用只与方法的名称有关，和参数列表无关

·在方法声明中有一个隐藏的内置对象(数组)arguments封装所有的实际参数

④对象的调用

方法名称(实际参数列表);

2、Array对象

①对象的创建

Array数组对象也有三种创建方式，三种格式如下所示：

vararr=newArray(元素列表);vararr=newArray(默认长度);vararr=[元素列表];

②对象的方法

Array对象有很多方法，下面介绍两个常用的方法：

join(参数)：将数组中的元秦按照指定的分隔符拼接为字符串

push()：向数组的末尾添加一个或更多元素，并返回新的长度。

③对象的属性

·length属性代表数组的长度

④对象的特点

在JavaScript中，数组元素的类型是可变的。

在JavaScript中，数组的长度是可变的。

3、Date对象

①对象的创建

vardata=newDate();

②对象的方法

Array对象有很多方法，下面介绍两个常用的方法：

toLocalestring()：返回当前date对象对应的时间本地字符串格式

getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差

4、Math对象

①对象的创建

Math数学对象不用创建，可以直接使用，使用方式如下：

Math.方法名();

②对象的方法

Array对象有很多方法，下面介绍四个常用的方法：

random()：返回0~1之间的随机数。含0不含1。

ceil(x)：对数进行上取整。

floor(x)：对数进行下取整。

round(x)：对数进行四舍五入。

5、RegExp对象

在学习RegExp正则对象之前，我们首先来复习一下什么是正则表达式?正则表达式就是定义字符串的组成规则。

单个字符用[]表示。如：

[a]表示字符a

[a-z]表示a-z中的任一字符

还有一些特殊符号代表特殊含义的单个字符。例如：

\d表示单个数字字符=[0-9]

\w表示单个单词字符=[a-zA-Z0-9_]

量词符号用?、*、+、{m,n}表示。其中

·?：表示出现0次或1次

·*：表示出现0次或多次

·+：出现1次或多次

·{m,n}：表示m

§m如果缺省，即{,n}：最多n次

§n如果缺省，即{m,}：最少m次

①对象的创建

RegExp正则对象的创建有两种方法，我们一般采用第二种。

varreg=newRegExp("正则表达式");varreg=/正则表达式/;

②对象的方法

RegExp对象的常用方法只有一种：

test(参数)：验证指定的字符串是否符合正则定义的规范

6、Global对象

①对象的创建

顾名思义，Global对象就是全局对象，这个Global中封装的方法不需要对象就可以直接调用。格式如下：

方法名();

②对象的方法

全局对象的方法有很多，下面简单介绍几种：

encodeURI()：url编码

decodeURI()：url解码

parseInt()：将字符串转为数字。逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

isNaN()：判断一个值是否是NaN。NaN六亲不认，连自己都不认。NaN参与的==比较全部为false。

eval()：将JavaScript转化为字符串，并把它作为脚本代码来执行。

以上就是小编今天为大家分享的关于Web前端开发知识点之JavaScript对象的文章，希望本篇文章能够对正在从事web前端学习和工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。

文章来源：原创凯哥的故事

Q2: Web前端工程师应该知道的JavaScript使用小技巧

今天小编要跟大家分享的文章是关于Web前端工程师应该知道的JavaScript使用小技巧。任何一门技术在实际中都会有一些属于自己的小技巧。同样的，在使用JavaScript时也有一些自己的小技巧，只不过很多时候有可能容易被大家忽略。而在互联网上，时不时的有很多同行朋友会总结(或收集)一些这方面的小技巧。

今天在这篇文章中，小编会整理一些大家熟悉或不熟悉的有关于JavaScript的小技巧，希望能够对大家的学习和工作有所帮助。

一、数组

先来看使用数组中常用的一些小技巧。

01、数组去重

ES6提供了几种简洁的数组去重的方法，但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重，可以使用...new

Set()来过滤掉数组中重复的值，创建一个只有唯一值的新数组。

constarray=[1,1,2,3,5,5,1]

constuniqueArray=[...newSet(array)];

console.log(uniqueArray);

Result:(4)[1,2,3,5]

这是ES6中的新特性，在ES6之前，要实现同样的效果，我们需要使用更多的代码。该技巧适用于包含基本类型的数组：undefined、null、boolean、string和number。如果数组中包含了一个object,function或其他数组，那就需要使用另一种方法。

除了上面的方法之外，还可以使用Array.from(newSet())来实现：

constarray=[1,1,2,3,5,5,1]

Array.from(newSet(array))

Result:(4)[1,2,3,5]

另外，还可以使用Array的.filter及indexOf()来实现：

constarray=[1,1,2,3,5,5,1]

array.filter((arr,index)=array.indexOf(arr)===index)

Result:(4)[1,2,3,5]

注意，indexOf()方法将返回数组中第一个出现的数组项。这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当索索引进行比较，以确定当前项是否重复。

02、确保数组的长度

在处理网格结构时，如果原始数据每行的长度不相等，就需要重新创建该数据。为了确保每行的数据长度相等，可以使用Array.fill来处理：

letarray=Array(5).fill('');

console.log(array);

Result:(5)["","","","",""]

03、数组映射

不使用Array.map来映射数组值的方法。

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constname=Array.from(array,({name})=name)

Result:(2)["大漠","Airen"]

04、数组截断

如果你想从数组末尾删除值(删除数组中的最后一项)，有比使用splice()更快的替代方法。

例如，你知道原始数组的大小，可以重新定义数组的length属性的值，就可以实现从数组末尾删除值：

letarray=[0,1,2,3,4,5,6,7,8,9]

console.log(array.length)

Result:10

array.length=4

console.log(array)

Result:(4)[0,1,2,3]

这是一个特别简洁的解决方案。但是，slice()方法运行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];

array=array.slice(0,4);

console.log(array);

Result:[0,1,2,3]

05、过滤掉数组中的falsy值

如果你想过滤数组中的falsy值，比如0、undefined、null、false，那么可以通过map和filter方法实现：

constarray=[0,1,'0','1','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN','1'+0]

array.map(item={

returnitem

}).filter(Boolean)

Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]

06、获取数组的最后一项

数组的slice()取值为正值时，从数组的开始处截取数组的项，如果取值为负整数时，可以从数组末属开始获取数组项。

letarray=[1,2,3,4,5,6,7]

constfirstArrayVal=array.slice(0,1)

Result:[1]

constlastArrayVal=array.slice(-1)

Result:[7]

console.log(array.slice(1))

Result:(6)[2,3,4,5,6,7]

console.log(array.slice(array.length))

Result:[]

正如上面示例所示，使用array.slice(-1)获取数组的最后一项，除此之外还可以使用下面的方式来获取数组的最后一项：

console.log(array.slice(array.length-1))

Result:[7]

07、过滤并排序字符串列表

你可能有一个很多名字组成的列表，需要过滤掉重复的名字并按字母表将其排序。

在我们的例子里准备用不同版本语言的JavaScript

保留字的列表，但是你能发现，有很多重复的关键字而且它们并没有按字母表顺序排列。所以这是一个完美的字符串列表(数组)来测试我们的JavaScript小知识。

varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];

因为我们不想改变我们的原始列表，所以我们准备用高阶函数叫做filter，它将基于我们传递的回调方法返回一个新的过滤后的数组。回调方法将比较当前关键字在原始列表里的索引和新列表中的索引，仅当索引匹配时将当前关键字push到新数组。

最后我们准备使用sort方法排序过滤后的列表，sort只接受一个比较方法作为参数，并返回按字母表排序后的列表。

在ES6下使用箭头函数看起来更简单:

constfilteredAndSortedKeywords=keywords

.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)

.sort((a,b)=a

这是最后过滤和排序后的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);

Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']

08、清空数组

如果你定义了一个数组，然后你想清空它。通常，你会这样做：

letarray=[1,2,3,4];

functionemptyArray(){

array=[];

}

emptyArray();

但是，这有一个效率更高的方法来清空数组。你可以这样写:

letarray=[1,2,3,4];

functionemptyArray(){

array.length=0;

}

emptyArray();

09、拍平多维数组

使用...运算符，将多维数组拍平：

10、从数组中获取最大值和最小值

可以使用Math.max和Math.min取出数组中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]

constmaxInNumbers=Math.max.apply(Math,numbers)

constminInNumbers=Math.min.apply(Math,numbers)

console.log(maxInNumbers)

Result:90

console.log(minInNumbers)

Result:-99

另外还可以使用ES6的...运算符来完成：

constnumbers=[1,2,3,4];

Math.max(...numbers)

Result:4

Math.min(...numbers)

Result:1

二、对象

在操作对象时也有一些小技巧。

01、使用...运算符合并对象或数组中的对象

同样使用ES的...运算符可以替代人工操作，合并对象或者合并数组中的对象。

//合并对象

constobj1={

ame:'大漠',

url:'#'

}

constobj2={

ame:'airen',

age:30

}

constmergingObj={...obj1,...obj2}

Result:{name:"airen",url:"#",age:30}

//合并数组中的对象

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constresult=array.reduce((accumulator,item)={

return{

...accumulator,

[item.name]:item.email

}

},{})

Result:{大漠:"w3cplus@#",Airen:"airen@#"}

02、有条件的添加对象属性

不再需要根据一个条件创建两个不同的对象，以使它具有特定的属性。为此，使用...操作符是最简单的。

constgetUser=(emailIncluded)={

return{

ame:'大漠',

blog:'w3cplus',

...emailIncluded{email:'w3cplus@#'}

}

}

constuser=getUser(true)

console.log(user)

Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

constuserWithoutEmail=getUser(false)

console.log(userWithoutEmail)

Result:{name:"大漠",blog:"w3cplus"}

03、解构原始数据

你可以在使用数据的时候，把所有数据都放在一个对象中。同时想在这个数据对象中获取自己想要的数据。

在这里可以使用ES6的Destructuring特性来实现。比如你想把下面这个obj中的数据分成两个部分：

constobj={

ame:'大漠',

blog:'w3cplus',

email:'w3cplus@#',

joined:'2019-06-19',

followers:45

}

letuser={},userDetails={}

({name:user.name,email:user.email,...userDetails}=obj)

{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}

console.log(user)

Result:{name:"大漠",email:"w3cplus@#"}

console.log(userDetails)

Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}

04、动态更改对象的key

在过去，我们首先必须声明一个对象，然后在需要动态属性名的情况下分配一个属性。在以前，这是不可能以声明的方式实现的。不过在ES6中，我们可以实现：

constdynamicKey='email'

letobj={

ame:'大漠',

blog:'w3cplus',

[dynamicKey]:'w3cplus@#'

}

console.log(obj)

Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

05、判断对象的数据类型

使用Object.prototype.toString配合闭包来实现对象数据类型的判断：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisArray=isType('Array')([1,2,3])

console.log(isArray)

Result:true

上面的代码相当于：

functionisType(type){

returnfunction(target){

return`[object${type}]`===Object.prototype.toString.call(target)

}

}

isType('Array')([1,2,3])

Result:true

或者：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisString=isType('String')

constres=isString(('1'))

console.log(res)

Result:true

06、检查某对象是否有某属性

当你需要检查某属性是否存在于一个对象，你可能会这样做：

varobj={

ame:'大漠'

}

if(obj.name){

console.l

Q3: 学习Web前端要知道的JavaScript基础语法规则

今天小编要跟大家分享的文章是关于学习web前端要知道的JavaScript基础语法规则。俗话说，“无规矩不成方圆”。用在计算机语言上也同样使用。每种计算机语言都有自己的语法规则，只有遵循语法规则才能写出符合要求的代码。JavaScript也不例外，在使用JavaScript语言时，需要遵循某些语法规则，如执行顺序、大写和注释规范。下面我们就以来介绍下，JavaScript基础语法规则。

1.按从上到下的顺序执行

JavaScript程序按照在HTML文档中的排列顺序逐行执行。如果代码(例如函数、全局变量等)需要在整个HTML文件中使用，最好将这些代码放在HTML文件的标记中。

2.区分大小写字母

JavaScript严格区分字母大小写。也就是说，在输入关键字、函数名、变量以及其他标识符时，都必须采用正确的大小写形式。例如，变量username与变量UserName是两个不同的变量。

3.每行结尾的分号可有可无

JavaScript语言并不要求必须以分号“;”"作为语句的结束标记。如果语句的结束处没有分，JavaScript会自动将该行代码的结尾作为整个语句的结束。例如，下面两行示例代码，虽然第一行代码结尾没有写分号，但也是正确的。(注意：书写JavaScript代码时，为了保证代码的严谨性、准确性，最好在每行代码的结尾加上分号。)

alert

alert

4、注释规范

使用JavaScript时，为了使代码易于阅读，需要为

JavaScript代码加一些注释。JavaScript代码注释和CSS代码注释方式相同，也分为单行注释和多行注释，示例代码如下：

//我是单行注释

/*

我是多行注释1

我是多行注释2

我是多行注释3

*/

以上就是小编今天为大家分享的关于学习web前端要知道的JavaScript基础语法规则的文章，希望本篇文章能够对正在从事会计相关工作的小伙伴们有所帮助。想要了解更多会计相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利成为一名优秀的web前端工程师！