19

JavaScript基础-changpaozhe

 4 years ago
source link: https://blog.51cto.com/11233559/2442455
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

一 JavaScript 简介

1 JavaScript基本介绍

1 JavaScript 简称JS，是一种动态的弱类型脚本解释型语言，和HTML,CSS并成为三大WEB核心技术，得到了几乎所有主流浏览器的支持

2 JavaScript 历史

1994年，网景Netscape公司成立并发布了Netscape navigator浏览器，占据了很大的时长份额，网景意识到WEB需要动态，需要一种技术来实现
1995年9月网景浏览器2发布测试版本发布了livescript，随即在12月的测试版就更名为JavaScript，同时期，微软推出IE并支持JScript，VBScript。
1997年，网景，微软，SUN，borland公司和其他组织在ECMA确定了ECMAscript语言标准，JS则是ECMAscript的标准实现之一。

由于IE的捆绑销售行为，网景的单一浏览器时长萎缩，从1990年的90%下降到2006年的1%,1999年网景被AOL收购，收购不就，netspace公开了浏览器代码，并创建了Mozilla组织，Mozilla组织使用Gelo引擎重写浏览器，当然Mozilla将Geko引擎发布了Firefox浏览器
2003年5月，网景被解散
AOL于2007年宣布停止支持Netscape浏览器

3 网景的技术

HTTP cookie ，解决HTTP无状态
JavaScript
ssl协议
jar 格式文件，将Java的class文件打包，并加上签名
2012年4月9日，微软以10亿5千6百万购买800向美国在线的专利或专利授权，并收购了SSL，cookie等专利。

ES，ECMAScript是由ECMA国际(前身为欧洲计算机制造协会，英文名称是European Computer Manufactures Association)通过ECMA-262标准化的脚本程序设计语言，该语言被广泛应用于互联网

JavaScript是商品名，目前商标权在Oracle公司手中，ES是标准名。

根据ES标准，有很多实现引擎，其中包括JavaScript或JScript，他们都是ECMA-262标准的实现和扩展。

1997年，制定了首个ECMA-262

1999年12月，EC3，支持更强大的正则表达式

ES4 太过激进，最终被放弃

2009年，ES5发布，得到广泛支持，支持严格模式，支持Json

2015年,ES6发布，引入非常多的新的语言特性，还兼容旧版本的特性，ES6之前按照版本号命名，从ES6开始使用年份作为版本号，ES6 及ECMAscript 2015.

5 之前浏览器中兼容问题

运行HTML，CSS，JS技术都在发展，标准版本很多，浏览器内嵌的引擎实现不太一致，甚至有不按照标准实现，或者减少实现，或者改变实现，或者增加的功能，如IE，就导致了开发人员负担，很难做到一套代码可以兼容的跑在多种浏览器中，甚至不能跑在同一种浏览器的不同版本中。

6 V8 引擎

就在浏览器IE一家独大时，Firefox和Chrome开始变强

2008年9月2日，Google的Chrome浏览器发布，一并发布的js引擎，就是V8引擎，V8使用BSD协议开源

V8引擎支持C++开发，将JavaScript编译成了机器码，而不是字节码，还是用很多优化方式提高性能，因此，V8引擎速度很快。

V8 引擎还可以独立运行，可以嵌入到其他任何C++程序中。

V8 引擎的诞生，使得服务器端运行JS称为了方便的事情。

7 Nodejs

nodejs是服务器端运行JavaScript的开源的，跨平台的运行环境

nodejs原始作者瑞安达尔于2009年发布，使用了V8引擎,并采用事件驱动，非阻塞异步IO模型

2010年,npm软件包管理器诞生，通过它，可以方便的发布，分析nodejs的库和源代码。

nodejs4.0引入了ES6的语言特性。

8 安装组件

需要安装nodejs和visual studio code
相关下载

nodejs

https://npm.taobao.org/mirrors/node/v12.10.0/node-v12.10.0-x64.msi

visual studio code

https://vscode.cdn.azure.cn/stable/b37e54c98e1a74ba89e03073e5a3761284e3ffb0/VSCodeUserSetup-x64-1.38.1.exe

插件NodeExec和汉化包安装

JavaScript基础
JavaScript基础

重新启动软件即可生效，

二 JavaScript基础

1 注释，常量，变量

和C 、Java一样
//单行注释
/*注释*/多行注释，也可以使用在语句中

JavaScript基础

注: 使用快捷键F8运行代码，其代码必须是已经保存的文件，不能是空，F8可能和有道词典快捷键冲突，建议在此运行期间不运行有道词典。

2 常量和变量

1 标识符
标识符必须是字母，下滑线，美元符号和数字，但必须是字母，下划线，美元符号开头，依然不能是数字开头
标识符区分大小写

2 标识符的声明

var 声明一个变量
let 声明一个块作用域中的局部变量
const 声明一个常量

JS中的变量声明和初始化时可以分开的
常量的存放位置和变量是不在一起的

console.log(a) // 后面声明的变量，前面可以使用，但没意义
var  a    //只是声明，并未赋值，其类型是undefined，
let b   //声明为块变量
console.log(1,a,b) //打印 
a=1  //变量赋值，不规范化操作，不推荐，在严格模式下回导致异常。在赋值之前不能引用，因为未为进行声明，其赋值的结果是全局作用域
b='123'  
console.log(2,a,b)
const  c=100  //定义常量 
console.log(c)
var d=10 //规范声明并初始化
console.log(3,d)
c=200  //修改常量值,不可修改，因为其是常量
console.log(4,c)
JavaScript基础

常量和变量的选择
如果明确知道一个标识符定以后便不再改变，应该尽量声明成const常量，减少被修改的风险，减少bug。

3 函数对作用域的控制


function  test(){
    var  x=10;  //声明并初始化x  
    y=20;  //声明vi能够初始化y 
        console.log(x,y)
}
test()
console.log(x,y)  //此处在函数中，其所有参数皆不能冲破作用域
// x=100
// console.log(x)
JavaScript基础

函数本身天生就是一个作用域

4 提升作用域

其实就是将声明定义到最前面罢了,及就是先调用，再定义

console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
var a=200;  // 提升作用域，只有var定义变量的方式可以提升作用域
var  b;  
const  c=300; //此处不能提升作用域
let d;
e=300;

结果如下

JavaScript基础

2 数据类型

1 基本数据类型介绍

序号 名称 说明
1 number 数值型，包括整数类型和浮点型
2 boolean 布尔型，true和false
3 string 字符串
4 null 只有一个值null
5 undefined 变量声明未赋值的，对象未定义的属性
6 symbol ES6新引入的类型
7 object类型 是以上基本类型的复合类型，是容器

ES是动态语言，弱类型语言
虽然先声明了变量，但是变量可以重新赋值成任何类型

2 类型转换

1 字符串类型转换

console.log(a=1+'test',typeof(a))  //  typeof:打印类型
console.log(a=false+'test',typeof(a))  //和布尔类型运算 
console.log(a=null+'test',typeof(a))  //和null比较
console.log(a=true+'test',typeof(a))
console.log(a=undefined+'test',typeof(a))  //和数字
JavaScript基础

2 数字类型转换

console.log(a=1+false,typeof(a))
console.log(a=1+true,typeof(a))
console.log(a=1+null,typeof(a))
console.log(a=1+undefined,typeof(a))
JavaScript基础

3 布尔类型转换相关

console.log(a=false+undefined,typeof(a))
console.log(a=true+undefined,typeof(a))
console.log(a=false+null,typeof(a))
console.log(a=true+null,typeof(a))
console.log(a=true &  '',typeof(a))  //位运算 
console.log(a=undefined  &&  true,typeof(a))  //与运算
JavaScript基础

True是透明的，false则直接就是短路，返回直接就是false，类型是布尔。true主要是看后面的情况

console.log(a=false  && null,typeof(a))  //如果前面是false，则返回结果是false，且类型是布尔类型
console.log(a=false  &&  'zhangbing',typeof(a))
console.log(a=true  && '32534534',typeof(a))  //如果前面是true，则以后面为准
console.log(a=true  && '' ,typeof(a))
JavaScript基础

弱类型，不需要强制转换
NaN，Not a Number，转换数字失败

遇到字符串，加括号就是拼接字符串，所有非字符串隐式转换为字符串
如果没有字符串，加号把其他所有类型都当数字处理，非数字类型隐式转换成数字，undefined特殊，因为它都没有定义值，所有其是一个特殊的数字Nan。
如果运算符是逻辑运算符，短路符，则返回就是短路时的类型，没有隐式转换
除非你十分明确，否则不要依赖隐式类型转换，写代码时，往往为了程序的健壮性，建议显式转换

3 字符串定义及操作

将一个值一单引号或双引号引用后便形成了字符串 

let a="a\"aaaaaa"  // 可使用转义符号 
let b='adadsaasd'  //单引号定义
let c="asfsdfsadfsdf'sdfsdfsdfsdf'"  //混合定义 
let d=`'abcd'`  //反引号定义
let e=`x= ${a}  y=${b}`  //插值，类似于Java中的替换和python中的format
console.log(a,b,c,d)
console.log(e)
JavaScript基础

2 转义字符

字符 说明
\0 Null 字节
\b 退格符
\f 换页符
\n 换行符
\r 回车符
\t Tab(制表符)
\v 垂直制表符
' 单引号
" 双引号
|反斜杠字符()
\XXX 由从0到377最多三个八进制数XXX表示的Latin-1字符
\xXX 由从00和FF的两位十六进制数字XX表示的Latin-1字符
\uXXXX 由4位十六进制数字XXXX表示的Unicode字符，例如，\u00A9是版权符号的Unicode序列，见Unicode escape sequence
\u{xxxxxx} Unicode代码点(code point)转义字符

3 字符串操作

支持索引，切片，查询，替换和链接

console.log('adasddasdasd'.indexOf(1))  //查找位置，若不存在，则返回-1  
console.log('abced'.indexOf('c')) //获取对应位置 
console.log('12345'.charAt(4))  //索引获取元素 
console.log('1234'.concat('666'))  // 元素追加 

const  a='123456'  //定义一个常量
console.log(a[3])  //通过索引获取元素 
console.log(a.toUpperCase())  //大写转换 
console.log(a.slice(1,3))  //切片，左闭右开 1,2处的元素 
console.log(a.slice(-3,-1))   //45
const  url=' www.baidu.com  '
console.log(url.split('.'))  //字符串分割
console.log(url.startsWith('www'))  //匹配字符串起始，返回false或true 
console.log(url.substr(3,6))  //从索引为3开始6个字符
console.log(url.substr(3,6))  //从索引为3开始到索引为6结束
console.log(url.replace('com','edu'))  //字符串一替换 
console.log(url.trim())  //取出两边的空白字符

4 数值类型number

进制符 描述
0bxxx/0Bxxx 二进制
0oxxx 八进制
0xxxx 十六进制

在JS中，数据均为双精度浮点型范围只能在-(2^53-1)和2^53-1之间，整数类型也不例外，数字类型还有三种符号值:+Infinity(正无穷)，-Infinity(负无穷)和Nan(not-a-number非数字)

二进制0b0010,0B100.
八进制0755，注意0855，将被认作是十进制，因为8不在八进制中，ES6中最好使用0o 前缀表示八进制
十六进制0xAA,0xff
指数表示1E3(1000),2e-2(0.02)

var biggestNum=Number.MAX_VALUE; //最大值
var smallestNum=Number.MIN_VALUE; //最小的大于0的数
var infiniteNum=Number.POSITIVE_INFINITY;
var negInfiniteNum=Number.NEGATIVE_INFINITY;
var notANum=Number.NaN;
方法 描述
Number.paraseFloat() 把字符串参数解析成浮点数，和全局方法parseFloat()作用一样
Number.parseLnt() 把字符串解析成特定基数对应的整数类型数字，和全局方法parseInt()作用一致
Number.isFinite() 判断传递的值是否为有限数字
Number.isInteger() 判断传递的值是否为整数
Number.isNaN() 判断传递的值是否是NaN

内置数学对象Math
Math提供了绝对值，对数指数运算，三角函数运算，最大值，最小值，随机数，开方等运算函数，提供了P|值

console.log(typeof(parseInt('1234123423423')),'134234')  //转换为数值类型
console.log(isNaN(10))  //判断是否为NaN
console.log(isFinite(10/3))
console.log(Math.abs(-1))  //绝对值 
console.log(Math.random()*1000)  //生成随机数
JavaScript基础

1 算数运算符

符号 描述
+ 加
- 减
* 乘
/ 除
% 余
++i 单目运算符先加后赋值
i++ 单目运算符先赋值后加
--i 单目运算符先减后赋值
i-- 单目运算符先赋值后减

单目运算符，自增和自减只针对一个参数的运算符
++ 和 --
i++ 表示先用，后加，其加的值为1
++i 表示先加，后用，其加的值也是1
总之，谁在左，谁先执行
反之--也是亦然。

let i=0;
a=i++  //此处是先用后加，因此其a的值应该是0，之后加1
console.log(a)
b=++i;  //此处是先加后用，此处的b的值应该是i为1的基础是加1，及为2
console.log(b)
c=i++;  //此处是先用，及c为2
console.log(c)
JavaScript基础

其中单目运算符的优先级高于双目运算符。

let i=0;
a=(++i+i+++i+++i)
//其中单目优先级高，则可拆解为 ++i   +   i++    +   i++   +i
//++i结果为1 ，i++结果i为1  i++ 结果i为2  i的结果为3 最终为1+1+2+3=7
console.log(a)
JavaScript基础

此题主要考虑两个点

1 单目运算符优先级高于双目运算符
2 加号+是双目运算符，两边的表达式必须先计算好

2 比较运算符

符号 描述
> 大于
< 小于
>= 大于等于
<= 小于等于
!= 不等于，宽松模式进行类型转换
== 宽松模式等于，及就是进行类型转换
!== 严格模式不等于，及不进行类型转换
=== 恒等，及全等，不进行类型转换 
console.log('1'==1) //此处为宽松模式，进行类型转换，此处为true
console.log('1'===1) //此处为严格模式，此处返回为False
console.log('200'>300)  //此处为true，进行了类型转换
console.log('2a'<200)  //此处为false，此处的2a是不能转换为数字的，因此不能参与比较，因此其返回值为false 
console.log(Number.MAX_VALUE>10000)  //和最大比较，返回为true
console.log(Number.MIN_VALUE < 0.00001) //和最小比较，范围为true
console.log(Number.MAX_VALUE>Number.MIN_VALUE) //最大和最小比较，返回为true
JavaScript基础

3 逻辑运算符

Column 1 Column 2
&& 逻辑与
|| 逻辑或
! 逻辑非

这些运算符和其他高级语言相同。支持短路。

4 位运算符

方法 描述
& 位与
| 位或
^ 异或
~ 取反
<< 左移
>> 右移

5 三元运算符

条件表达式?真值:假值，邓建与简单的if ...else 结构 

console.log(('3'>30)?'真':'假')
console.log((4<5)?'假':'真')
JavaScript基础

6 逗号操作符

JS 运行多个表达式写在一起的情况 

console.log(a,b,c)  
var  a=100,b=200,c=300  //提升作用域，会定义三个元素
JavaScript基础

7 运算符优先级

详情见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

名称 说明
Instanceof 判断是否属于指定类型
typeof 返回类型字符串
delete delete操作符，删除一个对象(an object)或者一个对象的属性(an object's property) 或者一个数组中的某一个键值(an element at a specified index in an array)。
in 如果指定的属性在对象内，则返回true

instanceof 要求必须明确使用类型定义变量，就是对象必须是new关键字声明创建的，它可以用于继承关系的判断

typeof 就是返回对象的类型字符串

delete删除对象，属性，数组元素

a=new  String('abcd')
b=new  Number(123)
console.log(a instanceof  String)
console.log(b instanceof  Number)
console.log(typeof(a))
console.log(typeof(b))
console.log(typeof(100))

console.log('--------------delete-----------')
x=42
var y=43
let  z=60
myobj=new Number();
myobj.h=4  //增加属性 
console.log(delete  x);  //隐式声明使用delete能够删除成功
console.log(delete y);  //var声明的不能删除
console.log(delete z); //let声明的依然不能删除
console.log(delete myobj.PI) //不能删除预定义的对象，
console.log(delete myobj.h) // 自定义的属性变量是可以删除的
console.log(delete myobj)  //自定义的对象可以删除，因为其是隐式声明，因此可以删除
console.log('+++++++++++++++++++')
var  trees = new Array('redwoord','bay','cendar','cak','maple')
for (var  i=0;i<trees.length;i++)
    console.log(trees[i])
console.log('====================')
delete trees[3];//删除其中的元素,其数组不会少，只会在当前索引对应的数据变为undefined
for (var  i=0;i<trees.length;i++)
    console.log(trees[i])
console.log('-------------object----------------')
let mycar ={
        make:'Honda',
        model:'Accord',year: 2019
    };
console.log('make' in mycar);  //true
console.log('model' in mycar);  //true  
JavaScript基础

四 JavaScript控制语句

1 条件判断语句

1 if 判断语句

if  (cond1)  {
}
else if  (cond2) {
}
else if (cond3) {
}
else {
}

条件为false的等效
false
undefined
null
0
NaN
空字符串

其他的将均被视为True,如空列表。

 if ([])
 {
     let d=4;//定义为块变量，其不能穿透if  
     var  e=5;  //var 定义，能够穿透if
     f=6;  //定义，能够穿透
     if (true)  {
         console.log(d);
         console.log(e);
         console.log(f);
         g=10;
         var h=11;
         let t=13;//定义为块变量，其不能穿透if  
     }
 }

 console.log(h,g,f)
 console.log(t)
JavaScript基础

2 switch...case 分支语句

switch  (expression)  {
    case  label_1:
        statements_1
        [break;]
    case  label_2:
        statements_2
        [break;]
    ...
    default:
        statements_def 
        [break;]
}
let a=3
switch  (a) {
    case 1:
        console.log(1)
        break;
    case 2:
        console.log(2)
        break;
    case 3:
        console.log(3)
        break;
    default:
        console.log(4)
        break;
}
JavaScript基础

switch的穿透效果，直到碰见break为止。

let a=3
switch  (a) {
    case 1:
        console.log(1)
    case 2:
        console.log(2)
    case 3:
        console.log(3)
    default:
        console.log(4)
}
JavaScript基础

1 for 循环

//C风格for循环

for  ([initialExpression];[condition];[incrementExpression])
{
    statement
}
arr=[10,20,30]

for (let  x=0;x<arr.length;x++){
    console.log('i',arr[x])
}
console.log('+++++++++++++++++')
for (let j=0;j<arr.length;j++,j++) {  //注意，此处是逗号(i++,i++)
    console.log('j',arr[j])
}
// for (z=0;z<arr.length;) { // 此处是死循环，因为没有增加条件 
//     console.log(arr[z])
// }
for  (let a=0,b=200;a<arr.length;a++,b++) {   // 多条件操作 
    console.log(a,arr[a],b);
}

for  ( let z  in arr)  { //此处获取到的是索引 
    console.log(z,arr[z])  
}
for  (let  w  of  arr)  {   //此处获取到的是值
    console.log(w)
}

let obj={'a':1,'b':2,'c':3}
for  (let x  in  obj) {  //使用for循环处理对key的访问
    console.log('obj',x)
}

// for  (let y  of   obj)  {  //此处不能实现，因为其不能迭代对象
//     console.log(y)
// }
JavaScript基础

注意：for in 循环返回的是索引或者key,需要间接访问到值。
数组反正返回的是索引，C风格for循环操作较为便利
对象使用for in 可以遍历其key，但不能使用for of 迭代对象，原因是of后面必须是一个迭代器，可类比python中的for in。

3 while循环和do...while 循环

while 循环一般适用于死循环，while循环是先判断，do...while循环是先执行，后判断。

while  (condition){
     statement 
         }
do {
    statement
    }
while(condition)

先进入循环，然后判断，为真就继续循环 

let x=10;
while  (x--){
    console.log(x)
}
JavaScript基础
let x=10;
do  {
    console.log(x)
}while(x--)
JavaScript基础

3 break 和 continue

break 结束当前循环，直接退出这个循环体
continue 中断当前循环，直接进入下一次循环，同一个循环中的某一个跳过

练习
打印9*9乘法口诀

for  (i=1;i<10;i++) {
    line=" "
    for (j=1;j<=i;j++){
        line += `${j}*${i} = ${i*j}  `
        if  (i==j)
            console.log(line);
    }
}

1 函数基础

1 基础函数

函数： 函数也是对象

function  函数名(参数列表) {
    函数体;
    return  返回值；
}
function  add(x,y){
    return x+y;
}
console.log(add(4,5))
JavaScript基础

2 函数表达式

使用表达式来定义函数，表达式中的函数名可以省略，如果这个函数名不省略，也只能用于该函数的内部。

1 基础函数表达式

const add =function  _add(x,y) {
    return x+y;
}

console.log(_add(4,5))
JavaScript基础

2 递归调用

const add =function _add(x) {
    if (x==1){
        return  x;
    }    
    return  _add(x-1)+x  //递归调用，该函数只能在其内部被调用
}
console.log(add(10))
JavaScript基础

3 匿名函数

const add =function (x,y) {  //匿名函数
    return x+y;
}
console.log(add(4,5))
JavaScript基础

4 函数和函数表达式

console.log(show)
function show(){  //函数可以提升作用域
    console.log('show')
}
console.log(add)
var add=function(){  //函数表达式则不能提升作用域
    return  1;
}
JavaScript基础

函数，匿名函数，函数表达式的差异
函数和匿名函数，本质上都是一样的，都是函数对象，只不过函数有自己的标识符--函数名。匿名函数需要借助其他标识符而已。
区别在于，函数会声明提升，函数表达式不会。

2 高阶函数

高阶函数：参数为函数或返回值为函数的函数称为高阶函数 

function   a(){
    console.log('a')
    return    function  b(){
        console.log('b')
        return  'b'  //函数必须有返回值，否则，返回为undefined
    }
}
console.log(a())  //调用外层函数 

console.log(a()()) //由于a返回值函数，因此可以使用括号来进行相关的调用操作
JavaScript基础
let counter=function() {
    let i=0;
    function  _fun(){
        return  ++i;
    }
    return  _fun
}
c=counter()
console.log(c())
console.log(c())
console.log(c())
console.log(c())
JavaScript基础

实现map函数的功能，传入一个函数，传入一个值，输出一个值处理后的情况，如输入1,2,3,4，输出为1 4 9 16 及平方

const  map1= function (fn,arr){
    newarry=[];
    for  (i  in  arr){
        newarry[i]=fn(arr[i]);
    }
    return  newarry;
}
const  sq = function(x){
    return  x*x;
}
console.log(map1(sq,[1,2,3,4]))
JavaScript基础

3 箭头函数

箭头函数就是匿名函数，它是一种更加精简的格式

箭头函数参数
如果一个函数没有参数，则使用()
如果只有一个参数，参数列表可以省略小括号
多个参数不能省略小括号，且使用逗号间隔

箭头函数返回值

如果函数体部分有多行，就需要使用{},如果有返回值则使用return。
如果只有一行语句，可以同时省略大括号和return
只有一条return语句，不能省略大括号，有return必须有大括号
如果只有一条非return语句，加上大括号，函数无返回值

将上述实例中的函数修改为箭头函数 

const  map1=  (fn,arr)  => {
    newarry=[];
    for  (i  in  arr){
        newarry[i]=fn(arr[i]);
    }
    return  newarry;
}
const  sq = (x)  =>  x*x;
console.log(map1(sq,[1,2,3,4]))

JavaScript基础

const  map1=  (fn,arr)  => {
    newarry=[];
    for  (i  in  arr){
        newarry[i]=fn(arr[i]);
    }
    return  newarry;
}
let  new1  = map1((function  (x) {return x*x}),[1,2,3,4])  //函数
let new2=map1((x)=> {return x*x},[1,2,3,4] ) //去除function ，将后面的变为(x) => {return x}形式
let new3  =map1((x)=> x*x,[1,2,3,4])  //若只有一个返回值，则可以省略{}，但{} 和return是同时存在，因此可以写成如下
let new4  =map1( x => x*x,[1,2,3,4])  //如果只有一个参数，则可以省略()

console.log(new1)
console.log(new2)
console.log(new3)
console.log(new4)
JavaScript基础

4 函数参数

1 基本参数传递

const  add = (x,y)  => x+y;
console.log('add',add(4,5))

const  add1 = (x,y=5)  => x+y;  //支持默认参数
console.log('add1',add1(4))

const  add2 = (x=6,y) => x+y;
console.log('add2',add2(1))  //此处默认会将x=6代替为x=1,而y的值为undefined其传入的值为add2(1,undefined)
console.log('add2',add2(1,10))
console.log('add2',add2(y=10,z=20))  //此处的结果为30，其不关心形式参数，此处为add2(10,20)
console.log('add2',add2(a=1000,b=3000,c=4000))  //多传递参数没错，只匹配前面的
JavaScript基础

JS 基本参数总结
1 JS 中并没有python中的关键字传参
2 JS 只是再做参数位置的对应
3 JS 并不限制默认参数的位置
4 JS 多传递参数没影响，其只是做位置的匹配操作

2 可变参数(rest parameters 剩余参数)

const  add =  (...args) => {  // 可变参数 ，默认结果为列表 
    result=0;
    console.log(args);
    for  (let  x  in args)  {
        result  += args[x];
    }
    return  result;
} 
console.log(add(1,2,3,4,5))
JavaScript基础

3 实参解构

和python 类似，JS提供了参数解构，依然使用了...符号来解构。

const add  =(...args)  => {
    console.log(args)
}
add(1,2,3,4)

l1=[1,2,3,4]
add(l1)

//参数解构
console.log(...l1)
add(...l1)
JavaScript基础

4 arguments对象

函数的所有参数都会被保存在一个arguments的键值对字典对象中。

(function   (p1,...args) {
    console.log(p1);
    console.log(args);
    console.log('---------------');
    console.log(arguments,typeof(arguments));
    for  (let x  of arguments)  
        console.log(x);

})('abcd',1,2,3,4,5)  //此处是调用操作
JavaScript基础
console.log(arguments)
JavaScript基础

在函数外，其指的是全局的，在函数内，其是函数中的参数

基本表达式和python差不多 

function  *  inc(){  //使用* 来定义生成器 
    let  i=0;
    while  (1)
        yield  (++i);
}
g=inc()  //实例化生成器 

console.log(g.next().value,g.next())  //执行生成器调用 
console.log(g.next().value)
console.log(g.next().value)
console.log(g.next().value,g.next())
JavaScript基础

每次调用next()方法返回一个对象，这个对象包含两个属性: value和done，value属性表示本次yield表达式的返回值，done属性为布尔值，done是false表示后续还有yield语句执行，如果执行完成或者return后，none为true。

function  *  inc(){
    let  i=0;
    while  (true)  {
        yield  ++i;
        if (i>3)
            return i;
    }
}
g= inc()
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())
JavaScript基础

JS 使用大括号构成语句块
ES6 之前语句块是没有作用域的，从ES6开始支持块作用域，let只能在块作用域中可见。

2 基础代码

function  hello(){
        let a=1;
        var b=2;
        c=3
    }
    let d=100
    if (1)
    {
        let d=4; //局部和下一级有效，除非被覆盖掉
        var e=5
        f=6
        if (true) {
            console.log(d)
            console.log(e)
            console.log(f)
            console.log('____________________')
            g=10  //只要不是函数，都没问题
            var h=11  //只要是函数，都没问题
        }
    }
    //console.log(a)  //不可见
    //console.log(b)  //不可见
    //console.log(c)  //不可见
    console.log(d)  //不可见  let 突破不了块作用域，但外界共享
    console.log(e) //var可见
    console.log(f)  //隐式声明，可见
    console.log(g) //可见
    console.log(h)  //可见
JavaScript基础

块作用域只对let有效，对var和隐式声明等特性无效
函数中var 和 let 都突破不了
块作用域向下是穿透的，除非覆盖问题


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK