JAVASCRIPT基础知识

Javascript

js笔记

 

事件三要素

事件源 要触发的对象

事件 怎么触发的这个事情(比如鼠标经过 按键盘)

事件处理程序 (function之类)

数值的前面带  0  表示 八进制 , 数值的前面带  0x  表示 十六进制

var a=10,b=20   等于var a=10  var b=20;

return是用来设置返回值的,一个函数只能有一个返回值,同时终止代码的执行。所以自定义函数默认没有返回值

循环语句页面加载的时候就会执行,跟onclick之类的执行时间不一样

 属性给值是等号,属性是外在特征。方法是可以干什么。是动词特性  一律带()

 

子元素背景会覆盖父元素背景

  • 两个div都在标准流中,因为div的position的默认值是static
  • 父元素div和子元素div是两个不同的格式上下文,他们共同处于body这个格式上下文中

    • 后出现的元素,层级更高,所以子元素div的层级比父元素div的层级高
    • 所以子元素div会遮挡住父元素div(你可以设置子元素div margin-top为负试试效果)

 

javascript中,&&和||的用法比较神奇,经常用在对象上,例如a || b,如果a不存在,则返回b。a && b,如果a存在,则返回b,否则返回a。

光这样看,感觉他的概念还挺复杂的,这样去想的话,不但会在脑子里多出一个无用的概念,而且越记越混乱。看问题还是要看本质。

 

与或运算(短路运算)

本质是什么呢?&& 和 || 的作用只有一个(定义):

进行布尔值的且和或的运算当运算到某一个变量就得出最终结果之后,就返回哪个变量

在javascript中:

以下内容会被当成false处理:""(空字符) , false , 0 , null , undefined , NaN

其他都是true。注意:字符串"false"也会被当做true处理,在未转型的情况下他是字符串,属于一个对象,所以是true

所以:

a || b:如果a是true,那么b不管是true还是false,都返回true。因此不用判断b了,这个时候刚好判断到a,因此返回a。

   如果a是false,那么就要判断b,如果b是true,那么返回true,如果b是false,返回false,其实不就是返回b了吗。

a && b:如果a是false,那么b不管是true还是false,都返回false,因此不用判断b了,这个时候刚好判断到a,因此返回a。

   如果a是true,那么就要在判断b,和刚刚一样,不管b是true是false,都返回b。

 

&&和||的短路运算有什么用?

1、由于&&和||的表达式存在短路运算现象,在短路之后不会对后面的表达式进行运算,所以含有&&和||的表达式最好不要进行变量的赋值和运算操作,可以先计算好每个表达式的结果,直接拿结果进行&&和||的运算。
在代码编写的时候就要注意这一点,以防由于&&和||的短路运算导致写出来的代码运算结果与预期的不同。
2、把能快速确定整个表达式结果true或false的表达式放在前面,这样由于短路运算后面的表达式可能不会被运算到,节省处理器的运算时间。

 

来个复杂的例子(注意一点:在js中&&运算符优先级大于||)

假设:

 var a=new Object(),b=0,c=Number.NaN,d=1,e="Hello"; 

  alert(a || b && c || d && e);  表达式从左往右执行,先&&后||

    1、(b && c):b是false,此时不需要判断c,因为不管c是true是false,最终结果一定是false,因此返回当前判断对象b,也就是0

    2、(d && e):d是true,这个时候判断e,此时不管e是true,是false,返回结果一定是e,e为true,因此返回"Hello";

    3、(a || b):a是true,此时不管b是true是false,结果都是true,所以不判断b,所以返回当前判断对象a,因此返回new Object();

    4、(a || e):同上,因此返回a。

这个表达式最终结果为a,也就是new Object()

 

window属性

 

 

select() 方法用于选中文本域中的内容

<html>
<head>
<script type="text/javascript">
function selText()
  {
  document.getElementById("txt1").select()
  }
</script>
</head>
<body>

<textarea id="txt1">Hello world....</textarea>
<input type="button" value="Select text" onclick="selText()">

</body>
</html>

 

laber的for属性的作用:

通过for属性,可以实现通过点击label标签来达到相当于点击input的作用。

<input type="radio" name="radioName" id="radioName1" />
<label for="radioName1" class="radio-beauty">选中input</label>

 

判断表单输入 

正常浏览器 oninput  ie 6.7.8是onpropertychange

<body>
<p>在文本框中尝试输入触发函数。</p>
<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "你输入的是: " + x;
}
</script>
</body>

 

return和return false的区别

1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交
2. return false,事件处理函数会取消事件,不再继续向下执行。比如表单将终止提交。

 

JS运行的两个阶段

1、预解析

全局预解析

所有变量和函数声明都会提前,同名的函数和变量,函数优先级高

 

函数内部预解析

所有变量、函数、形参都会参与预解析

现代浏览器不会提升if语句中的函数声明,不过在老版本IE中,if语句中的函数声明也会提升

局部变量优先级高于全局变量 形参高于函数名称,高于声明的未赋值变量,低于局部赋值的变量

 

执行

先预解析全局作用域,然后执行全局作用域中的代码

在执行全局代码的过程中遇到函数调用就会先进行函数预解析,然后再执行函数内代码

 

js中的堆内存与栈内存

在js引擎中对变量的存储主要有两种位置,堆内存和栈内存

和java中对内存的处理类似,栈内存主要用于存储各种基本类型的变量,包括Boolean、Number、String、Undefined、Null,**以及对象变量的指针,这时候栈内存给人的感觉就像一个线性排列的空间,每个小单元大小基本相等。

而堆内存主要负责像对象Object这种变量类型的存储,如下图

栈内存中的变量一般都是已知大小或者有范围上限的,算作一种简单存储。而堆内存存储的对象类型数据对于大小这方面,一般都是未知的。个人认为,这也是为什么null作为一个object类型的变量却存储在栈内存中的原因。

因此当我们定义一个const对象的时候,我们说的常量其实是指针,就是const对象对应的堆内存指向是不变的,但是堆内存中的数据本身的大小或者属性是可变的。而对于const定义的基础变量而言,这个值就相当于const对象的指针,是不可变。

既然知道了const在内存中的存储,那么const、let定义的变量不能二次定义的流程也就比较容易猜出来了,每次使用const或者let去初始化一个变量的时候,会首先遍历当前的内存栈,看看有没有重名变量,有的话就返回错误。

说到这里,有一个十分很容易忽略的点,之前也是自己一直没有注意的就是,使用new关键字初始化的之后是不存储在栈内存中的。为什么呢?new大家都知道,根据构造函数生成新实例,这个时候生成的是对象,而不是基本类型。再看一个例子

var a = new String('123')
var b = String('123')
var c = '123'
console.log(a==b, a===b, b==c, b===c, a==c, a===c)	
>>> true false true true true false
console.log(typeof a)
>>> 'object'

我们可以看到new一个String,出来的是对象,而直接字面量赋值和工厂模式出来的都是字符串。但是根据我们上面的分析大小相对固定可预期的即便是对象也可以存储在栈内存的,比如null,为啥这个不是呢?再继续看

var a = new String('123')
var b = new String('123')
console.log(a==b, a===b)
>>> false false

很明显,如果a,b是存储在栈内存中的话,两者应该是明显相等的,就像null === null是true一样,但结果两者并不相等,说明两者都是存储在堆内存中的,指针指向不一致。

说到这里,再去想一想我们常说的值类型和引用类型其实说的就是栈内存变量和堆内存变量,再想想值传递和引用传递、深拷贝和浅拷贝,都是围绕堆栈内存展开的,一个是处理值,一个是处理指针。

内存分配和垃圾回收

一般来说栈内存线性有序存储,容量小,系统分配效率高。而堆内存首先要在堆内存新分配存储区域,之后又要把指针存储到栈内存中,效率相对就要低一些了。
垃圾回收方面,栈内存变量基本上用完就回收了,而推内存中的变量因为存在很多不确定的引用,只有当所有调用的变量全部销毁之后才能回收。

 

栈和堆的区别

数据结构中,我们知道栈和堆的区别主要是定义在其上的数据操作方法不同,前者是LIFO, 后者是动态随机分配的,两者都可以用线性或者链式结构实现,但书中常用的是数组。

对比参照
分配方式 内存以LIFO分配 内存随机分配
是否连续 连续 非连续
分配和回收 编译器自动管理 需手动管理
开销
大小 难以更改 容易更改
调用 O(N) O(1)
存在问题 内存不足 内存碎片化
局部性 优越 适中
访问 速度快 速度稍慢

通过研读文章了解到栈是由编译器分配的,在内存中小的固定大小的内存空间,是连续的,用于静态内存分配,故有良好的程序局部性,Cache命中率高,效率高,访问速度快;而堆则是由程序员主动申请分配和管理的,用于动态内存分配,其大小可变,不连续分配,存在碎片化的问题,效率较低,访问速度慢得多。常说得堆栈就是栈,
区分栈和堆主要是看速度快慢。

使用场景

通常一个新的线程启动,编译器会创建对应的堆栈环境,用于保存参数和数据,容量比较小,保存常被访问的,此外函数调用是将一系列的堆栈入口地址压入堆栈,然后依据LIFO次序,传给程序计数器,这些地址称之为Stack Frame。在C中,栈常用于低开销的简单数据类型,如整型,浮点型,指针(指针其实就是无符合整型的数,代表内存地址),主要存在的问题是容量小,容易stack overflow。

堆则是位于内存中的一块大区域,用来存储任意的无顺序的数据,所以其访问速度比较慢,但由于有指针指向对应的数据,访问是O(1)级别的,其申请和回收都需要程序员管理,常见的有malloc 申请空闲空间等

 

window.onload

一、网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免类似情况的发生,可以使用以下两种方式:

(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。

(2).通过window.onload来执行脚本代码。比如window.onload=countBody  页面加载完调用countBody函数

每个页面只能使用一次window.onload,而且多次使用的话,只有最后一次绑定的方法可以执行!

全局变量

function里面创建的变量,得调用一次函数才会创建。function里面用var创建变量为局部变量,不用就是全局变量

 

JS编写规范

写函数,变量,对象的时候分辨开头的大小写!!!

.函数驼峰命名,变量用下划线分开,循环中中间变量命名 i j k依次往后

如果script标签的作用是引入外部标签,那他里面不能再写代码了

用户自定义的所有名字叫做标识符,必须由数字 字母 下划线和美元符号$组成 不能以数字开头 区分大小写

在js中连续使用符号对比是极其容易出错的。比如a<b<c  ,如果想简单实现连续对比的话,可以采用js提供的逻辑&&,即a<b&&b<c

运算符优先级    先计算小括号 再计算乘、除、取余数,    乘、除、取余数的运算优先级相同,谁写在前面,先算谁,然后再计算加减

JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。

 

单双引号问题

最外面用了双引号了,那么里面就不能再用双引号了,因为引号是成双对的,浏览器读到一个双引号后,到第2个双引号时才算结束;同理,浏览器读到一个单引号后,必须要读到第二个单引号才算结束

不管是单引号还是双引号,里面都可以套相反的引号,但是不可以双引号里面套单引号,这个单引号再套双引号,这是不行的。

如果在引号里面使用相同的引号,需要用 \ 转义。

单引号转义为\'

单引号转义为\"     

单引号和双引号之间的字符串可以相加

'af'+"bvvv"+'dd'

输出 "afbvvvdd"

css有种写法  js触发事件后给元素添加class类名,比如原先类目为  .header .logo    .logo是header的子元素。这里面是一堆css代码  通过js事件给header添加了新类名。 .header .新类名 .logo 这里再添加一堆css新的代码。因为权重的关系。添加了新类名后 会使用新的css代码

 

对象

对象就是可以拥有属性和方法的一个集合 士兵就是一个对象,它拥有身高体重的属性,吃饭睡觉的动作方法

方法是在对象上执行的动作。方法以函数定义被存储在属性中。对象方法是包含函数定义的对象属性。

在 JavaScript 中,几乎“所有事物”都是对象。

  • 布尔是对象(如果用 new 关键词定义)
  • 数字是对象(如果用 new 关键词定义)
  • 字符串是对象(如果用 new 关键词定义).//用new创建Number 和String Boolean的时候,开头记得大写
  • 不用new则是原始数据类型
  • 日期永远都是对象
  • 算术永远都是对象
  • 正则表达式永远都是对象
  • 数组永远都是对象
  • 函数永远都是对象
  • 对象永远都是对象

所有 JavaScript 值,除了原始值,都是对象

原始值指的是没有属性或方法的值。

原始数据类型指的是拥有原始值的数据。

JavaScript 定义了 5 种原始数据类型:

  • string
  • number
  • boolean
  • null
  • undefined

原始值是一成不变的(它们是硬编码的,因此不能改变),当基本类型的数据赋值时,赋得是实际的值,a和b是没有关联关系的,b由a复制得到,相互独立。(字面量的才是基本类型)

对象是易变的它们通过引用来寻址,而非值。

引用类型指的是对象。可以拥有属性和方法,并且我们可以修改其属性和方法访问方式:值保存在内存中,js不允许直接访问内存,在操作的时候,操作的是对象的引用

 

对象使用的是引用赋值。当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是栈中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。

例:  如果 person 是一个对象,下面的语句不会创建 person 的副本:

var x = person;  // 这不会创建 person 的副本。并非把preson的值赋值给了x,而是把引用的链接赋值给了x

对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。

对 x 的任何改变都将改变 person,因为 x 和 person 是相同的对象。

实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
 
var x = person;
x.age = 10;           // 这将同时改变 x.age 和 person.age

 

日期对象

创建日期对象 var d =new Date()

不加参数 ,默认获取当前系统时间,有参数,时间变成参数

日期对象格式化方法:通过某种格式输出 【格式】日期对象.方法

getFullYear  年
getMonth  月(从0开始计算)
getDate 日

getHours  时
getMinutes  分
getSeconds  秒
getMilliseconds  毫秒

getDay  一周第几天

获取一周的某一天,是从0开始计算 0代表周日。获取某个月也是从0开始计算

例子

<script>

var day=new Date().getDay(); //通过日期对象获取数字形式的星期几

var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");

document.write("今天是 : "+weeks[day]);

</script>

setFullYear
setMonth
setDate
setHours
setMinutes
setSeconds 修改日期

 

数据类型算法和转换

任何类型数据和字符串相加操作,其他数据类型会自动转换成为字符串类型,字符串拼接如果其中一个操作数是字符串的时候,+叫做字符串拼接符

转换为布尔值 使用函数Boolean()函数

原始数据

转换后的结果

undefined    

false

null       

false

非空字符串

如果该字符串能被转换成一个有效的非零数字,则为true,否则,为false。在ECMA-262标准中,一个非空字符串总是能被转换为true(为了与Flash 4版本保持兼容,Flash 5和Flash MX版本突破了该规则)

空字符串(”")

false

NaN

false

0

false

Infinity

  true

-Infinity

  true

其他数字值

 true

数组

 true

对象

 true

电影剪辑

 true

 

var num1 = !!num1 ? num1 : a;,如果num1是undefined,null,那么!num1是true,!!num1是false,以此可以看出这句代码的意思是如果num1不是undifined和null则取参数的值num1,否则取变量a的值。

+这个符号到底是什么意思,必须要看左右的东西是什么类型的。如果都是数字,那么就是加;否则,就是连字符。

但是,其他的运算符,是完全没有歧义的。比如*、-、/、%。 这些运算符,就是用来计算的

如果使用-、*、/、%, 即使不进行格式转换,也是对的。计算机自动帮我们进行“隐式转换”。

如 “3” * 5  得15         “3” * “5” 得15

小测试:

但是,即使计算机有“隐式转换”,一个靠谱的程序员,一定要自己完成转换。否则,其他人看你的代码,有可能造成误会。

"4" + 3 - 6  //37

 

          <script type="text/javascript">     
//得到用户输入的摄氏温度,用c变量来接收 //接收的东西是“字符串”,必须通过parseFloat才能进行运算 var c = parseFloat(prompt("请输入摄氏温度啊")); //计算华氏温度,我们用变量f来表示 var f = 9 / 5 * c + 32; //显示结果 alert("我帮你算出了华氏温度" + f); </script>

拓展一下知识:

parseInt() 将字符串转为整数

parseInt 把字符串转换成数字

带有自动净化的功能,后面的字符自动消失,只保留最开头的数字

自动带有截断小数功能(取整,不四舍五入) 比如5.8 取8,3.5ab32得3

 

parseFloat 将字符串转为浮点数(小数)

字符串转换成数字,纯数字的字符串转化成对应数字,否则NaN(Not a Number) 数字与NaN相加等于NaN

字符串比较 比较字符串的数字编码表,逐位比较 直到比较出大小

 

在JS中 0是可以被除的,1/0=infinity    -1/0= -infinity

在等于不等的比较的时候,字符串转换成数字再进行比较,如果进行的比较其中一个操作数为NaN,则==返回false , !=返回true  NaN和NaN自身不相等

非运算‘’!”,空字符串返回true 非空返回false  0返回true  非0包括infinity返回false,NaN和underfined返回true

 

其他类型转number

一:基本类型

字符串

把字符串转换为数字,只要字符串中包含任意一个非有效数字字符(第一个点除外)结果都是NaN,空字符串会变为数字零

1
2
3
4
console.log(Number("12.5")); //12.5
console.log(Number("12.5px")); //NAN
console.log(Number("12.5.5px"));//NAN
console.log(Number(""));//0

布尔

1
2
3
console.log(Number(true));//1
console.log(Number(false));//0
console.log(isNaN(false));//false 是有效数字

false 转换numer返回0 true返回1

null和undefined

1
2
console.log(Number(null));//0
console.log(Number(undefined));//NaN

二:引用数据类型

把引用数据类型转换为数字是先把它基于toString()转换为字符串,再转换为数字

1
2
3
4
5
console.log(Number({num:"10"}));//NaN
console.log(Number({}));//NaN ({num:"10"}).toString();是"[object Object]" 是非有效数字字符所以是NaN
console.log(Number([]));//0 [].toString()是""所以转为数字是0
console.log(Number([12]));//12 [12].toString()是"12"所以转为数字是12
console.log(Number([12,23]));//NaN [12].toString()是"12,23"里面的","是非有效数字字符所以是NaN

相关面试题

1
2
let a=10+null+true+[]+undefined+'腾讯'+null+[]+10+false;
console.log(a)//11undefined腾讯null10false

null变为数字是0,true是1, []变为数字,先要经历变为空字符串,遇到字符串,啥也别想了,直接变为字符串拼接.

当去掉undefined前面的[]结果就变成了NaN腾讯null10false

以上就是本次介绍的javaScript把其它类型转换为Number类型全部知识点内容,感谢大家的学习和对脚本之家的支持。

 

字符串不可被改变,只能销毁以前字符串再创建新的字符串

字符串.replace()

(匹配得字符串/正则表达式,替换新的字符串)返回值:替换完成以后生成的新字符串,想替换所有字符串必须使用正则表达式完成,否则只替换第一个

<script type="text/javascript">

var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."

document.write(str.replace(/Microsoft/g, "W3School"))

</script>

 

字符串.substring()

【格式】字符串。substring(start,end);

作用:字符串提取,在指定范围内,提取字符串,生成新的字符串【注】包括 start 处的字符,但不包括 stop 处的字符

<script type="text/javascript">

var str="Hello world!"
document.write(str.substring(3,7))

</script>
//lo w

 

js中求百位数 十位数 个位数的方法

var i 

parseInt(i/100) //得百位数

parseInt(i%100/10) //得十位数

i%10 //得个位数

 

函数操作

函数的返回值

<script type="text/javascript">
              console.log(qiuhe(3,4));
              function qiuhe(a,b){
                     return a + b;
              }
       </script>

 

return就是英语“返回”的意思,那么就表示此时这个“函数调用的表达式”(红色部分),值就是这个a+b。

● 函数里面可以没有return,如果有,只能有一个。不能有多个return;

函数里面,return后面不允许书写程序了,也就是说写在后面的程序无效;

 

map()

返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

array.map(function(currentValue,index,arr), thisValue)

function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:
参数描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

map 映射  遍历-》操作-》返回

var arr=[5,6,7,8];
var oarr =arr.map(function(item){
    return item+2;
});
console.log(oarr);//7,8,9,10

补充 map中的this

array.map(callback, this)
中的this:把this仅仅当做一个参数,即函数的实参。所以实参具体是什么要看它的声明、定义以及值。举个例子:

var object = {}
array.map(callback, object)
也就是说对于map方法而言,在实际用的时候,它的第二个参数是一个前面已经声明过的变量。但是如果你传入this,那么这个this就要往前找,往它所在的上一级作用域去找,
如果可以找到对应的实例化对象,那么就是这个实例化对象了,如果找不到,那就指向了全局对象。 还是要举个栗子: var array = [1,2,3] var a = { mapObject: function() { array.map(function(){}, this) // 这个时候的this是什么呢?是a啊! } } 而如果不是在一个实例化对象里面: array.map(function(){}, this) // this是window或者global啊! 至于你里面console.log(this)为什么是window,你就得知道.bind,比如: !function(){ console.log(this.name) }.bind({ name: "Sam" }) bind, call, apply的作用都是让函数里面的this指向给定的一个对象。 array.map(function() {}, this) 的作用实际上和 array.map(function() {}.bind(this)) 是一样的。map的第二个参数就是给第一个参数bind一个对象,这样在第一个参数里面就可以用this代替第二个参数。 this指向的一个小窍门:this指向的是当前作用域所属实例化对象,如果没有找到该对象,则是指向window。

map()中的this 

map五种用法  https://www.jb51.net/article/150818.htm 

 

set()

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

Set对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。

// 去重操作
function
unique(arr) { if (!Array.isArray(arr)) { console.log("type error!"); return; } return Array.from(new Set(arr)); }

 

concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

var abc = [4,5,6]
var a = [1,2,3]
a.concat(abc) //[1,2,3,4,5,6]
// 也可以直接添加数
a.concat(4,5,6)

例子

数组扁平化

var arr = [1, [2, [3, 4]]];

function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

console.log(flatten(arr));

 

 

Element.scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

参数 

true  选择的元素顶端与可视区域顶端对齐

false 底端与可视区域底端对齐

{behavior:smooth} 加上动画效果

 

test() 方法用于检测一个字符串是否匹配某个模式.

语法

RegExpObject.test(string)

reduce()

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数

arr.reduce(function(pre,cur,index,array){

},init) 

pre 为上一次return的回调值或者初始值init

cur当前处理的元素   

index当前处理的元素索引,若提供init值,索引位置为0,不提供索引位置为1

init表示初始值,不是下标

 

filter 过滤

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

例子

array.filter(function(currentValue,index,arr),thisValue)

index 可选,当前索引值

arr 可选 当前元素属于的数组对象

 

var res=[10,20,30,40].filter(function(item,index,array){

return item>30;//找出所有大于30的值

})

alert(res);//40

 

函数判断条件

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

var arr=[1,20,30,40,50]
var res=arr.some(function(item,index,array){
return item ==30;//判断数组中是否有值为30的元素,条件可以随意

//some作用判断ruturn后面的表达式,在当前数组是否成立,如果成立返回true,否则false,some一旦匹配成功,后面不再进行遍历,arr.every和some差不多,但是要求每一项都符合,有一项不符合则返回false,直接终止循环

 

js中的math函数

前面要有 Math.

random() 返回 0 ~ 1 之间的随机数。不包含1
round(x) 把数四舍五入为最接近的整数。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
floor(x) 对数返回小于或者等于的最小整数。例子(1.9返回1)不四舍五入
ceil(x) 对数返回大于或者等于的最小整数。例子(1.1返回2)不四舍五入
abs(x) 返回数的绝对值。

pow(x,y)

sqrt()

返回 x 的 y 次幂。

开根号

 

得到一个两数之间的随机数

这个例子返回了一个在指定值之间的随机数。这个值不小于 min(有可能等于),并且小于(不等于)max

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min; 
}

//Math.random()可以随机0-1之间任意的数//不包含1

得到一个两数之间的随机整数,包括两个数在内
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);//返回大于或等于的最小整数
  max = Math.floor(max);//放回小于或等于的最小整数
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 
}

 

匿名函数

匿名函数:如 var a=function(){ 例 return 1 };

此函数function 没有函数名,但是它将值赋给了变量 a

普通函数: function abc(){  例 return 1  };

此函数声明了一个名为abc的函数

注意:使用匿名函数表达式时,函数的调用语句,必须放在函数声明语句之后!!!

注:匿名函数只有在被调用时才能初始化(例 return 1);普通函数在编译后函数声明和他的赋值都会被提前(包括: 例 return 1 都会被提前)。所以普通函数的调用可以在任意位置

匿名函数只能声明后调用

 

JS中innerHTML 和innerText和value的区别

(1)innerHTML 和innerText和value的区别:

   innerHTML innerText是对非表单元素进行操作的。

   value是对表单元素进行操作的。(input,button, textarea, option, selece元素等等)

(2)innerHTML 和innerText的区别

当innerHTML赋值时,能对内容里面的标记元素(<h1></h1>)进行处理,展现出效果 。一般多运用于赋值

当innerHTML 取值时,输出的结果也含有标记元素

当innerText赋值时,输入什么内容就显示什么内容,不对标记元素进行处理。

innerText取值时,输出的结果不含有标记元素。多运用于取值。

posted @ 2020-05-27 15:25  Ren小白  阅读(166)  评论(0)    收藏  举报
levels of contents