AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript基础之定义函数

2017-11-08 1136
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

javascript 字符串

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法


常见功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
obj.length                           长度
  
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj. split (delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                      $数字：匹配的第n个组内容；
                                      $&：当前匹配的内容；
                                      $`：位于匹配子串左侧的文本；
                                      $'：位于匹配子串右侧的文本
                                      $$：直接量$符号


布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写（true/false）

==  比较值相等

例如：

1
2
1== '1'
true


!=  不等于

例如：

1
2
1!=2
true


===  比较值和类型相等

1 === "1"

例如：

1
2
3
false
1 === 1
true

!===  不等于


||  或


&& 且



数组

JavaScript中的数组类似于python的列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
obj.length          数组的大小
  
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj. shift ()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                     obj.splice(n,0,val) 指定位置插入元素
                     obj.splice(n,1,val) 指定位置替换元素
                     obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj. join (sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj. sort ( )         对数组元素进行排序




JavaScript定义变量：

全局变量：

     name = "abc"

局部变量

     var name = "cba"


定义函数：

1
2
3
4
5
6
<script>
     function  function_name(){
         statement1;
         statement2
     }
< /script >

调用函数：

1
function_name()


示例：定义并调用函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
< head >
     <meta charset= "utf-8" >
     <title>demp< /title >
< /head >
<body>
<h1  id = "demo" >欢迎老男孩< /h1 >
< /body >
<script>
     function  func(){
         var tag = document.getElementById( 'demo' ); // 根据ID获取标签
         var content =tag.innerText; // 获取标签中的文本内容（这里为欢迎老男孩）
         var f = content.charAt(0);  // 获取文本第一个字符
         var l = content.substring(1,content.length);  // 获取文本第二个字符到最后一个字符
         var new_content = l + f;  // 第二个字符到最后一个字符加上第一个字符（迎老男孩欢）
         tag.innerText = new_content; // 用新的字符替换原来的字符
     }
     setInterval( 'func()' ,1000);
< /script >
< /html >


setInterval('func()',interval)是javascript定时器, 表示每间隔interval毫秒，执行一次func()函数

charAt(n)：JavaScript字符串的一个方法：获取指定下标的字符，跟python一样，下标从0开始

substring(m,n)：JavaScript字符串的一个方法，获取从第m下标到第n下标的字符集

length：JavaScript字符串的一个方法，获取字符串长度


JavaScript for循环

1、循环时，循环元素是索引

1
2
3
4
5
6
7
8
a=[11,22,33,44]
for (var i  in  a){
     console.log(a[i]);
}
11
22
33
44


循环字典

1
2
3
4
5
6
7
8
9
10
11
12
13
a={ "name" : "zeng" , "age" :28}
for (var item  in  a){
     console.log(a[item]);    
}
"zeng"
28
 
a={ "name" : "zeng" , "age" :28}
for (var item  in  a){
     console.log(item);    
}
name
age


2、循环时，循环元素的下标，不支持字典

1
2
3
4
5
6
7
8
a=[11,22,33,44]
for (var i=0;i<a.length;i=i+1){
     console.log(a[i]);
}
11
22
33
44



JavaScript条件判断

if(条件){

}else if(条件){

}else if(条件){

}else{

}



JavaScript DOM操作：

1、找到标签

a、直接找标签 

1
2
3
     document.getElementById( 'id' )：通过 id 获取单个元素
     document.getElementByTagName( 'div' )：通过tag获取多个元素
     document.getElementByClassName( 'cl' )：通过class获取多个元素

b、间接找标签

    

1
2
3
4
5
6
     parentElement                  // 父节点标签元素
     children                       // 所有字标签
     firstElementChild              // 第一个子标签元素
     lastElementChild               // 最后一个子标签元素
     nextElementSibling             // 下一个兄弟标签元素
     previousElementSibling         // 上一个兄弟标签元素



2、操作标签

获取标签中的文本内容

a、

    标签.innerText

    对标签内部文本重新赋值

    标签.innerText=""

1
2
3
4
5
6
7
8
9
<a>asdfa< /a >
<a>8908< /a >
<a>asd234< /a >
 
// 获取所有a标签，保存到ll列表中，然后用 for 循环修改所有a标签的文本内容。
ll=document.getElementsByTagName( 'a' )
[a, a, a]
for (var i=0;i<ll.length;i=i+1){ll[i].innerText= '666' }
"666"


b、

1
2
3
4
     classname
         tag.className =  ""  直接整体操作
         tag.classList.add(“样式名”)  添加样式
         tag.classList.remove(“样式名”)  删除样式


实例：全选、反选、取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
< head >
<meta charset= "utf-8" >
<title>demp< /title >
< /head >
<body style= "margin: 0" ;>
<div>
     <input  type = "button"  value= "添加"  onclick= "ShowModel();" >
     <input  type = "button"  value= "全选"  onclick= "ChooseAll();" >
     <input  type = "button"  value= "取消"  onclick= "CancleAll();" >
     <input  type = "button"  value= "反选"  onclick= "ReverseAll();" >
     <table>
         <thead>
             < tr >
                 <th>选择< /th >
                 <th>主机名< /th >
                 <th>端口< /th >
             < /tr >
         < /thead >
         <tbody  id = "tb" >
             < tr >
                 <td><input  type = "checkbox" >< /td >
                 <td>host1< /td >
                 <td>8080< /td >
             < /tr >
             < tr >
                 <td><input  type = "checkbox" >< /td >
                 <td>host2< /td >
                 <td>8081< /td >
             < /tr >
             < tr >
                 <td><input  type = "checkbox" >< /td >
                 <td>host3< /td >
                 <td>8083< /td >
             < /tr >
         < /tbody >
     < /table >
< /div >
< /body >
<script  type = "text/javascript" >
     function  ChooseAll(){
         var tbody = document.getElementById( "tb" );
         var tr_list = tbody.children;
         for (var i=0;i<tr_list.length;i=i+1){
             var current_tr = tr_list[i]
             var checkbox = current_tr.children[0].children[0];
             checkbox.checked =  true ;
         }
     }
     
     function  CancleAll(){
         var tbody = document.getElementById( "tb" );
         var tr_list = tbody.children;
         for (var i=0;i<tr_list.length;i=i+1){
             var current_tr = tr_list[i]
             var checkbox = current_tr.children[0].children[0];
             checkbox.checked =  false ;
         }
     }
     
     function  ReverseAll(){
         var tbody = document.getElementById( "tb" );
         var tr_list = tbody.children;
             for (var i=0;i<tr_list.length;i=i+1){
             var current_tr = tr_list[i]
             var checkbox = current_tr.children[0].children[0];
             if (checkbox.checked) {
                 checkbox.checked =  false ;
             }
             else {
                 checkbox.checked =  true ;
             }
         }
     }
< /script >
< /html >



JavaScript序列化及转义


序列化：

JSON.stringify( )：将对象转化成字符串

JSON.parse( ）：将字符串序列化成对象


例如：在Google chrome开发者工具中测试：

1
2
3
4
5
6
7
8
a
[11, 22, 33, 44]
s=JSON.stringify(a)
"[11,22,33,44]"
s
"[11,22,33,44]"
JSON.parse(s)
[11, 22, 33, 44]


转义：

  • decodeURI( )                   URl中未转义的字符

  • decodeURIComponent( )   URI组件中的未转义字符

  • encodeURI( )                   URI中的转义字符

  • encodeURIComponent( )   转义URI组件中的字符

  • escape( )                         对字符串转义

  • unescape( )                     给转义字符串解码

  • URIError                         由URl的编码和解码方法抛出


示例：

    

1
2
3
4
5
6
7
8
9
10
url =  "http://www.w3school.com.cn/jsref/中文"
 
new_url = encodeURI(url)
"http://www.w3school.com.cn/jsref/%E4%B8%AD%E6%96%87"
 
decodeURI(new_url)
"
 
encodeURIComponent(url)
"http%3A%2F%2Fwww.w3school.com.cn%2Fjsref%2F%E4%B8%AD%E6%96%87"

 

encodeURI()： 就是将url中的中的特殊字符重新编码

encodeURIComponent()：将URI前面的双斜杠和冒号也重新编码


JavaScript作用域

我们先来说下python的作用域

例1：

1
2
3
4
def func():
     if  1 == 1:
         name =  "abc"
     print name

例2：

1
2
3
4
def func():
     if  1 ==1:
         name =  "abc"
print name

我们知道python以函数作为作用域，所以例1不会报错，例2会报错


JavaScript作用域的重要三句话:

  • JavaScript默认跟python一样，以函数作为作用域

  • 函数的作用域在函数未被调用之前就已经被创建了

  • 函数的作用域存在作用域链

  • 函数内局部变量要提前声明


实例1：=================JavaScript默认跟python一样，以函数作为作用域==============

1
2
3
4
5
6
7
8
function  func(){
     if (1==1){
         var name =  'abc' ;
     }
     console.log(name);
}
func()
abc



======================函数的作用域存在作用域链========================

实例2:

1
2
3
4
5
6
7
8
9
10
11
name =  "aaa"
function  func(){
     var name =  "bbb" ;
     function  inner(){
         var name =  "ccc" ;
         console.log(name);
     }
     inner()
}
func()
ccc

函数的作用域链其实就是函数作用域的优先级关系



例3：

1
2
3
4
5
6
7
8
9
10
11
12
name =  "aaa"
function  func(){
     var name =  "bbb" ;
     function  inner(){
         //var  name =  "ccc" ;
         console.log(name);
     }
     return  inner
}
var ret = func()
ret()
bbb

由于func( )函数返回的是inner函数, 所以func()被调用时，返回的是inner()函数自身，而ret()则是调用inner()函数。函数的作用域链在函数创建时就产生了，所以在在调用func()函数时，name=“bbb”, 执行ret()时name也就是bbb


例4：

name = "aaa"

1
2
3
4
5
6
7
8
9
10
11
12
function  func(){
     var name =  "bbb" ;
     function  inner(){
         //var  name =  "ccc" ;
         console.log(name);
     }
     var name =  "ddd"
     return  inner
}
var ret = func()
ret()
ddd

现不看inner()函数代码段，先设置name=“bbb”, 后来又设置name=“ddd”，所以name是由bbb修改成了ddd，所以最终结果是ddd。



例5 =======================函数内局部变量要提前声==============================

1
2
3
4
5
6
function  func(){
     console.log(xxoo)
     var xxoo =  "aaa"
}
func()
undefined

JavaScript跟python一样，代码是从上往下执行的，当解释器读到console.log(xxoo)时，会发现xxoo代码没有赋值，JavaScript会给这个变量设置默认值为undefined，所以执行func()函



JavaScript面向对象编程

1
2
3
4
5
6
7
8
9
10
11
12
function  Person(name, age){
   this.name = name;
   this.age = age;      
}
  
var p = new Person( 'tree' , 25)
p (回车)
Person {name:  "tree" , age: 25}
p.name （回车）
"tree"
p.age （回车）
25


JavaScript绑定事件的三种方式：

1、在标签上绑定，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
< head >
     <meta charset= "utf-8" >
     <title>绑定事件< /title >
< /head >
<body>
<table border= "1"  style= "width: 100px; height: 100px;" > 
     < tr  onmouseover= "f1(0)" ; onmouseout= "f2(0)" >
         <td>1< /td >
         <td>1< /td >
         <td>1< /td >
     < /tr >
     < tr  onmouseover= "f1(1)" ; onmouseout= "f2(1)" >
         <td>2< /td >
         <td>2< /td >
         <td>2< /td >
     < /tr >
     < tr  onmouseover= "f1(2)" ; onmouseout= "f2(2)" >
         <td>3< /td >
         <td>3< /td >
         <td>3< /td >
     < /tr >
< /table >
< /body >
<script  type = "text/javascript" >
     function  f1(n){
         var tag = document.getElementsByTagName( 'tr' )[n];
         tag.style.backgroundColor =  "red" ;
     }
     function  f2(n){
         var tag = document.getElementsByTagName( 'tr' )[n];
         tag.style.backgroundColor =  "" ;
     }
< /script >
< /html >


2、在js中绑定事件，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
     < head >
     <meta charset= "utf-8" >
<title>绑定事件< /title >
< /head >
<body>
<table border= "1"  style= "width: 100px; height: 100px;" > 
     < tr ">
         <td>1< /td >
         <td>1< /td >
         <td>1< /td >
     < /tr >
     < tr ">
         <td>2< /td >
         <td>2< /td >
         <td>2< /td >
     < /tr >
     < tr ">
         <td>3< /td >
         <td>3< /td >
         <td>3< /td >
< /tr >
< /table >
< /body >
<script  type = "text/javascript" >
     var tag = document.getElementsByTagName( "tr" );
     var len = tag.length;
     for (var i=0; i<len; i++){
         tag[i].onmouseover =  function (){
         this.style.backgroundColor =  "red" ;
         }
         tag[i].onmouseout =  function (){
         this.style.backgroundColor =  "" ;
         }
     }
< /script >
< /html >

这里有一个很重要的关键字this，谁调用函数this就指向谁。











本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/1918963，如需转载请自行联系原作者

文章标签：
JavaScript
前端开发
Python
Web App开发
关键词：
JavaScript函数
JavaScript定义
JavaScript基础
JavaScript定义函数
余二五
目录
相关文章
廖小凡
|
2月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
廖小凡
49 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
大树营养快线
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
49 2
游客44yag4ft7nckq
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
35 1
德国都芳最好
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性，但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现，开发者可以更好地编写和维护 JavaScript 代码，避免因不了解这些机制而导致的错误和不一致。同时，不断提高对执行上下文等相关概念的认识，将有助于提升对 JavaScript 语言的整体理解和运用能力。
德国都芳最好
28 1
神明木佑
|
3月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
神明木佑
61 4
神明木佑
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
神明木佑
36 2
小强在此
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
38 5
cqtianxin1
|
3月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
cqtianxin1
29 3
Li370234940
|
3月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
Li370234940
27 3
邹荣乐
|
3月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
邹荣乐
74 0

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    一个好看的小时钟html+js+css源码
  • 3
    如何使用Selenium处理JavaScript动态加载的内容？
  • 4
    带方向感知功能的js图片遮罩层插件
  • 5
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 6
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 7
    页面滚动触发css3动画js插件
  • 8
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 9
    捕获键盘输入和输入组合键的js库hotkeys
  • 10
    Node.js导入MongoDB具体操作指南
  • 1
    【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
    432
  • 2
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    64
  • 3
    js设计模式-观察者模式与发布/订阅模式
    89
  • 4
    js设计模式-策略模式与代理模式的应用
    83
  • 5
    深入理解JavaScript中的闭包机制
    68
  • 6
    使用Vue.js构建交互式前端的技术探索
    100
  • 7
    使用Node.js构建实时聊天应用的技术指南
    153
  • 8
    深入理解JavaScript中的事件循环机制
    100
  • 9
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    136
  • 10
    JavaScript 数组方法概览
    44

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Python语言基础 - 函数、面向对象、异常处理

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 面向对象-1：类的定义
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅