javascript

最新推荐文章于 2021-03-19 01:03:24 发布

故事悠悠if

最新推荐文章于 2021-03-19 01:03:24 发布

阅读量147

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_22082055/article/details/79673236

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介

1，javascript：与网页交互而设计的脚本语言
2，组成：

核心（ECMAScript）提供核心语言功能
文档对象模型（DOM）访问和操作网页内容的方法，接口
浏览器对象模型（BOM）与浏览器交互的方法和接口

3，js引入(放在</body>标签前，避免等待js代码下载解析的延迟时间，提高效率)

直接引用 <script>//...代码...</script>
外部文件<script src="demo.js"></script>，好处：便于维护，浏览器可进行缓存，加快页面加载速度，适应性好

4，脚本属性

延迟脚本，defer，只适用于外部脚本，脚本按先后顺序执行
异步脚本，async，只适用于外部脚本，不一定保证脚本先后执行顺序，目的是不让页面等待脚本下载执行，需要确保脚本之间互不依赖；

5，早期用来处理页面的平稳退化，使用<noscript>：1）浏览器不支持脚本；2）浏览器支持脚本，但禁用脚本

基础概念部分

1，标识符：变量，函数，属性，参数的名字；

字母，下划线，数字，美元符号$组成
数字不首位
驼峰命名
关键字，保留字，true,false,null除外

2，注释

行，//…..
块，/* ….. */

3，变量

函数function里，var 和不var 的区别：

var i =1;是一个局部变量，函数结束后会销毁；但不用var 的情况，即 i = 1;是一个全局变量，可在函数外被使用
不推荐不使用var 来定义变量
PS：ES5引入严格模式，定义不同的解析和执行：在脚本顶部使用use strict；这里题外话

4，数据类型

基本数据类型：Undefined,Null,Boolean,Number,String
复杂类型：Object
typeof操作符，用来检测数据类型，操作数可以是变量，可以是字面值

4.1 Boolean

因为ECMAScript中所有的类型值都有与两个Boolean值等价的；可以对任何数据类型的值调用Boolean()函数进行转换；

String – 任何非空字符串(true) – “”(false)
Number – 任何非0数字（包括无穷大）–0或者NaN;
Object – 任何对象 – null
Undefined – n/a – undefined
常用来控制语句if（message）{....}

4.2 NaN

与任何值不等，包括本身
和NaN的操作都会返回NaN
isNaN()函数，判断是否是NaN

4.3 Number数值转换

Number()：适用于任何数据类型
1. Boolean类型： true – 1；false – 0 ；
2. null – 0 ；
3. undefined – NaN ；
4. 数值 – 数值输出；
5. 字符串： var num = Number("123")//123；var n = Number("hello") //字符串的是NaN；var n = Number(""); // 0；var num = Number("0123") //123；num = Number("1.23")//1.23；
6. 其他进制的会转换为十进制
7. 对象，调用valueOf()；如果返回NaN,会再调用toStiring()；然后按照其它的转换规则进行转换
parseInt() : 适用于字符串转换数值
1. 依次判断是否符合数值，自动忽略字符串前面的空格，
2. 如果第一个非空格字符串不是数字或者负号，会返回NaN；
3. 如果是一个数值，会依次解析，知道非数字字符var n = parseInt("123aaa456")//123
parseFloat()，和parseInt()类似，浮点型转换

4.3Stirng类型

字符串可由单引号或双引号表示；
ECMAScript的字符串不可变，一旦创建，值就不能改变，如果要改变某个变量保存的字符串，需要先销毁原来字符串，再赋值其他字符串进行填充；
把值转换为字符串
1. toString()，返回相应值的字符串表现var age = 11,var ageString = age.toString()//"11"
2. 给toString()传递参数，即指定基数，该数就是输出的进制var n = 10,alert(n.toString(2))// "1010"
3. 当不知道转换的值是否是null 或者 undefined，可以使用String()函数，可以将任何类型转换为字符串
  1. 如果值有toString()方法，则调用
  2. 如果值时null ，则返回”null”；undefined则返回”undefined”

Object类型

作为一组数据和功能的集合

创建对象：var obj = new Object()

5 操作符

相等操作符： == ，先转换再比较
全等操作符：=== ，仅比较不转换

6 语句

关于for语句：因为ECMAScript不存在块级作用域，所以在循环内部定义的变量在外部可以访问到

    var count = 10;
    for(var i=0;i<count;i++){
            console.log("inner",i);
        }
    console.log("outer",i);//10

for-in语句：迭代语句，用来迭代对象的属性；需要判断对象的值不是null或者undefined;

    for(var name in objList){
        console.log(name);
}

6 函数

关于函数参数：ECMAScript没有函数参数的概念，其函数参数是以数组的形式传递；可以向函数传递任意数量的参数，并且可以通过arugments对象来访问这些参数；

    function howManyArgs()
    {console.log(arguments.length);}
    howManyArgs(11);//1
    howManyArgs("aaa",12);//2

因为不存在函数签名特性，所以没有函数重载

变量，作用域，内存

1，变量：

基本类型值：源自5种基本数据类型：Undefined,Null,Boolean,Number,String;
引用类型值
两者特点：
1. 基本类型值保存在栈内存种，占据固定大小空间；引用类型的值是对象，保存在堆内存中；
2. typeof操作符判断基本类型；intanceof操作符判断引用类型
3. 复制基本类型的值；会创建这个值的一个副本；复制引用类型的值；复制的是其指针，指向同一个对象

2，执行环境（作用域）

分为全局执行环境（全局作用域）和函数执行环境（局部作用域）
每次进入新的执行环境，都会创建一个用于搜索变量和函数的作用域链
函数的局部环境不仅有权访问函数作用域中的变量，而且有权访问其包含环境（即它的父环境），以及全局环境
全局环境只能访问在全局环境中定义的变量和函数，而不能直接访问局部环境中的任何数据；
变量的执行环境有助于确定何时释放内存

3，垃圾收集

javascript 是一门具有自动垃圾收集机制的编程语言；
离开作用域的值会被自动标记为可回收，在垃圾收集期间被删除；
标记清除（是当前主流垃圾收集算法）：给当前不使用的值加上标记，然后回收内存
引用计数（垃圾收集算法）：跟踪记录所有值被引用的次数，循环引用现象中，该算法可能会出现问题

引用类型

引用类型的值（即对象）是引用类型的一个实例，引用类型是一种数据结构，将数据和功能组织在一起；

1，object类型

创建方式：
1. new操作符和Object构造函数，
  var person = new Object(); person.name="gushi"; alert(person.name)；//访问对象属性可使用点表示法
2. 对象字面量
  var person = {name:"gushi"};//属性名也可加"" alert(person[name]);//访问对象属性使用方括号表示法 //该方法可以包含非字母非数字的属性 var obj = {frist name:"gushi"}; alert(obj["frist name"]);//中间有一个空格，点表示不可以

2，Array类型

js的数组每一项都可以保存任何类型的数据，可动态调整

创建方法：
1. 使用构造函数，var nums = new Array();//new 可以省略
2. 字面量表示法，var nums = [1,2,3,4];var colors = [];
length属性：可返回数组长度，还可以通过该属性，向数组末尾项进行增删操作
1. 新增，var nums = [1,2,3];nums[nums.length]=4;//在末尾处加4
2. 删除，var nums = [1,2,3];nums.length = 2;//删除3
检测数组方法：如果只有一个全局执行环境，使用intanceof操作符，多个全局执行环境就使用Array.isArray()方法
数组转换方法：由于每个对象都有toLocaleString(),toString(),valueOf();
1. 默认情况下，都会以逗号分隔的字符串形式返回数组项,使用join()方法可改变分隔符var nums=[1,2,3];alert(nums.join("|"))//1|2|3
栈方法：（表现像栈一样，后进先出，push()和pop()配合）
1. push()：接收任意数量的参数，将其逐个添加到数组末尾
2. pop()：从数组末尾移除最后一项
  1. var nums=[1,2,3]; nums.push("4","5"); //1,2,3,4,5; nums.pop();//1，2，3，4
队列方法：（先进先出，push()和shift()配合）
1. shift()：移除数组中第一个项并返回该项，数组长度减1
2. unshift()；增加数组第一个项
重排序：
1. reverse(),数组反转；
2. sort(),数组升序排序，可加入参数进行比较；
  function compareTest(value1,value2){ if(value1<value2)return -1; else if(value>value2)return 1; else return 0; } arrayName.sort(compareTest);
操作方法：
1. concat()，基于当前数组中所有项创建一个新数组，如果传入多个参数，会依次添加到新数组末尾；
```
 var colors = ["red","green","blue"];
 var item = colors.concat("yellow",["black","white"]); 
 alert(item);//red,green,blue,yellow,black,white
```
2. slice():基于当前数组一个或多个项创建一个新数组，参数为起始项和结束项（不含）
```
 var nums=[1,2,3,4];
 var item1 = nums.slice(1);//2,3,4;从sums[1]开始到结束
 var item2 = nums.slice(1，3);//2，3
```
3. splice():向数组中插入项，会返回一个包含删除项的数组
  1. 删除，splice(删除项位置，删除数量);
  2. 插入，splice(删除项位置，删除数量，插入项)；
  3. 替换，splice(删除项位置，删除数量，替换项)；
    function test(prop){ var nums = [1,2,3,4,5]; nums.splice(1,1);//[1,3,4,5] console.log("1",nums); nums.splice(1,0,100); console.log("2",nums);//[1,100,3,4,5] nums.splice(2,1,200); console.log("3",nums);//[1,100,200,4,5] } test();
indexOf():从数组开头查询；lastIndexOf();从数组结尾开始查询，都返回查找项在数组中的索引位置，如果没有找到，返回-1；都接受两个参数indexOf(查找项，查找开始位置);
迭代方法：以下方法都接收2个参数，每一项运行的函数，运行改函数的作用域（选）；该函数接收3个参数，数组项的值，该项位置，数组本身；
1. every();函数每一项都返回true,则返回true;
2. some();函数只要有一项返回true，则返回true;
3. filter():返回ture的项组成的数组；
4. map():返回每次调用的结果组成的数组；
5. forEach():没有返回值，本质和for一样
归并方法：reduce()从数组的第一项开始迭代，然后返回最终值；reduceRight()从数组最后一项向前迭代，然后返回最终值；方法接收2个参数：迭代函数，初始值；迭代函数接收4个参数：前一个值，当前值，项索引，数组对象；
var numbers = [1,2,3,4,5,6,7]; var sum = numbers.reduce(function(pre,cur,index,array){ return pre + cur; }); console.log(sum);//28

Date类型（经常与Data混淆，我的天）

创建一个日期对象；var now = new Date();//自动获得当前时间

RegExp 类型

创建正则表达式：
1. 字面量方式：var exp = / pattern/ flags
  1. pattern 模式，简单或者复杂的正则表达式
  2. flags 标志，
    1. g 全局模式；应用于所有字符串，不会在发现第一个匹配项立即停止
    2. i 不区分大小写模式；匹配项忽略大小写
    3. m 多行模式；到达一行文本结尾会继续查找下一行的匹配项
2. RegExp构造函数：var exp = new RegExp("pattern","flags");
  1. 实例属性：
    1. global：布尔值，是否设置g标签
    2. ignoreCase：布尔值，是否设置i标签
    3. lastIndex ：整数，开始搜索下一个匹配项的字符位置，0开始；
    4. multiline ：布尔值，是否设置m标志
    5. source ：正则表达式的字符串表示，即字面量形式所用的字符串
  2. 实例方法：exec()；接收应用模式的字符串，返回包含第一个匹配项信息的数组，没有匹配项返回null
    1. 返回的数组有额外的属性：
      1. index：匹配项在字符串中的位置
      2. input ：正则表达式的字符串
方括号
1. [abc]：查找方括号之间任何字符
2. [0-9] ：查找方括号之间任何0-9数字
3. （x|y）：查找任何以 | 分隔的选项
元字符
1. \d：查找数字
2. .：查找单个字符（除换行，行结束符外）
3. \s：查找空白字符
4. \b：匹配单词边界
量词
1. n+：匹配任何包含至少一个n的字符串
2. n*：匹配任何包含0个或多个n的字符串
3. n?：匹配任何包含0个或一个n的字符串

Function类型；

1,命名方式：

函数声明语法定义： function sum(){}
函数表达式定义： var sum = function(){};
Function构造函数：var sum = new Function("num1","num2","return num1 + num2");//因为会导致解析两次代码（一解析常规ECMAScript代码，二解析传入构造函数中的字符串），影响性能

2 没有重载，同名函数后者会覆盖前者

3 函数声明和函数表达式的区别：解析器会先读取函数声明，并在执行任何代码之前可用；而函数表达式需要等到解析器执行到所在代码行，才会被解析执行

    alert(sum(10,10));
    function sum(num1,num2){return num1+num2}
    //但是 函数表达式会报错
    var sum = function(num1,num2){return num1+num2}; //报错

4 可作为值
因为函数名本身就是变量，可用作为参数传给另一个函数，也可以作为另一个函数的结果返回

    function add(num){return num+10;}
    var result = callSome(add,10);//函数作为参数
    console.log(result);//20
//--------函数作为另一个函数的结果返回---------------------
    function test(prop){
  return function(obj1,obj2){
    var value1 = obj1[prop];
    var value2 = obj2[prop];
    if(value1 < value2){
      return -1;
    }else if(value1 > value2){
      return 1;
    }else {
      return 0;
    }
  };
}
var data = [{name:"nick",age:10},{name:"lick",age:20}];
data.sort(test("name"));
console.log(data[0].name + "||" + data[0].age);//lick||20
data.sort(test("age"));
console.log(data[0].name + "||" + data[0].age);//nick||10

5函数内部属性：这里有两个特殊对象
1）arguments:保存函数参数；关于callee属性，它是一个指针，可以指向这个arguments对象的函数；

    //消除耦合现象
    function test(num){
        if(num<=1){return 1;}else{return num*arguments.callee(num-1)}
    }

2）this:引用对应函数执行环境对象

6 .函数属性和方法：因为函数也是对象，所以函数也具有属性和方法

每个函数都包含两个属性：length和prototype；
1. length：函数接收的参数个数
  function sayName(name){alert(name);alert(sayName.length);//1} function num(n1,n2){alert(n1+n2);alert(num.length);//2}
2. prototype:不可以枚举

包含两个非继承的方法：apply()和call()；

都在特定的作用域中调用函数，等价于设置函数体内this对象的值

apply()：两个参数，运行函数的作用域，参数数组（可以是Array实例，可以是arguments对象）；

function sum(num1,num2){
    return num1 + num2;
}
function callSum1(num1,num2){
    return sum.apply(this,arguments);
}
function callSum2(num1,num2){
    return sum.apply(this,[num1,num2]);
}
console.log(callSum1(10,10));//20
console.log(callSum2(10,10));//20

call()：第一个参数 this；第二个参数需要逐个列举出来; return sum.call(this,num1,num2);
apply()和call()可以扩充函数的作用域

故事悠悠if

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript

简介1，javascript：与网页交互而设计的脚本语言 2，组成：核心（ECMAScript）提供核心语言功能文档对象模型（DOM）访问和操作网页内容的方法，接口浏览器对象模型（BOM）与浏览器交互的方法和接口3，js引入(放在&lt;/body&gt;标签前，避免等待js代码下载解析的延迟时间，提高效率)直接引用 &lt;script&gt;//...代码...&l...
复制链接

扫一扫