JavaScript

最新推荐文章于 2024-04-29 15:27:03 发布

403_ss

最新推荐文章于 2024-04-29 15:27:03 发布

阅读量226

点赞数 1

分类专栏： JavaScript 文章标签： Script

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript ：是一门脚本语言。不用编译，直接执行

是一门解释性语言。遇到一行就执行一行。

是弱类型语言。定义变量都用var

是基于对象语言。没有面向对象的三大特性：继承封装多态，但是可以模拟面对对象的思想

是动态驱动。1. 执行到某一行代码时，才知道变量存储的是什么，知道对象的属性方法，变量的作用等等。

2.对象什么也没有，通过.点语法，就可以给对象添加属性和方法

组成的三部分：

ECMAScript 标准（js基本语法）
DOM 文档对象模型操作页面的元素
BOM 浏览器对象模型操作浏览器

特点:

1、简单性:它是基于java基本语句和控制流之上的简单而紧凑的设计，是学习Java的好过渡，而且，它的变量类型是采用弱类型，未采用严格的数据类型。

2、安全性: JS不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览和动态交互，从而有效的防止数据的丢失。

3、动态性Js可以直接对用户或客户输入做出响应，无须经过Web程序。它对用户的响应通过以事件驱动的方式进行，即由某种操作动作引发响应的事件响应，如:点击鼠标、移动窗口、选择菜单等。

4、跨平台JS依赖浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并安装了支持JS的浏览器就可以正确执行，从而实现了编写次，走遍天下~的梦想。

5、单线程

变量名可以任意取名，但要遵循命名规则: var ...

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

3.不能使用JavaScript关键词与JavaScript保留字。

全局变量: var声明的变量，那么这个变量就是全局变量，全局变量可以在页面的任何位置使用

* 除了函数以外，其他的任何位置定义的变量都是全局变量

* 全局变量如果页面不关闭，那么就不会释放，就会占空间，消耗内存

隐式全局变量: 声明的变量没有var,就叫隐式全局变量

* 全局变量是不能被删除的，隐式全局变量是可以被删除的

* 定义变量使用var是不会被删除的，没有var是可以删除的

局部变量: 在函数内部定义的变量,是局部变量，外面不能使用

全局作用域: 全局变量的使用范围

局部作用域: 局部变量的使用范围

0级作用域; 在script标签里声明的变量，函数等。

1级作用域：

2级作用域

.........

数据类型：

基本类型（简单类型，值类型）： undefined 、 number、string、boolean、null

复杂类型（引用类型）：Object 、Math 、Date、String、Array、Function

、基本包装类型： Boolean 、Number 、String

、单体内置对象：Global 、Math

注意：值类型的之间传递，传递的是值。值在栈中存储。

引用类型之间传递，传递的是地址。对象在堆上存储，地址在栈中存储。

类型检测：

typeof

instanceOf

object.

num2隐式全局变量：

类型转换:

1.转数字：

parseInt（x）整数

parseFloat（x）小数

2.转字符串 ; x . toString（）有意义的调用

String（x）无意义，单纯的数值。

3.转布尔型： Boolean（x）

== 与 === 的区别

== 会隐式类型转换：

1 =="1"

" === " 首先比较两边的数据类型，如果数据类型不一致，返回false，数据类型一致后才会比较两者的值

JavaScript从键盘输入数据的方式：

var number = prompt（" 输入"）； parseInt（prompt（"输入整型"））；

JavaScript 可以通过不同的方式来输出数据 (没有任何打印或者输出的函数。)：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。(可以输出标签内容)
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

函数先声明，再调用

1. 函数声明： function f （）{ }

2.函数调用： f（）； // 函数名f 代表整个函数代码（即声明），因而有函数自调用

3.函数自调用：（函数声明）（函数调用的括号）；

相当于（ function (){ console.log("我是函数自调用")} ）（）；

函数之预解析与提升

在同级作用域中。如果函数还没声明先调用，javascript 解释器会预解析，把函数的声明提前到调用之前。（变量同理会将声明提升到使用之前，将 var a;提前，没有赋值，所以值应该是undefined）并且变量声明一定在函数声明之上。
当变量名跟函数名重复时，函数名优先级高。

图一变量、函数定义图二变量函数声明提升

a报错原因是局部变量不能在外部使用。

函数表达式。f1是变量，声明提前，作为函数调用肯定会报错。

如果一个函数中有return ,那么这个函数就有返回值
如果一个函数中没有return,这个函数就没有返回值
如果一个函数中没有明确的返回值或者没有返回值，那么调用的时候接收了,结果就是undefined

(没有明确返回值:函数中没有return 或函数中有return,但是return 后面没有任何内容)

变量声明了，没有赋值，结果也是undefined
如果一个函数有参数，叫有参数的函数
如果一个函数没有参数，叫没有参数的函数
形参的个数和实参的个数可以不一致

函数有多个返回值时，定义数组将返回值存放到数组里，然后return 数组，然后在函数外定义一个数组接收调用函数
函数有数据类型，类型是function 。（typeof 函数名）
函数可以作为参数使用，如果一个函数作为参数使用，那么这个函数叫回调函数。function fib（fib2）{ }。fib2函数作为参数
函数可以作为返回值使用

命名函数：function fib() { } 有函数名。调用方式： fib（）； //函数名fib的内容是整个函数代码

匿名函数：function () { } 没有函数名。调用方式，匿名函数不能直接调用，只能将函数赋值给一个变量(函数表达式)。

如： var f = function () { }; 然后调用 f（);

注意：命名函数的函数名不能相同，相同时，后面的函数会将前面的覆盖。

函数表达式在结束的方括号后面一定要加分号。

arguments 作用：

1.获取函数在调用时传入了几个参数。 arguments.length

2.获取arguments 对象获取传入的每个参数的值。for循环--》 arguments[i]

js没有面向对象的三大特性：继承封装多态，但是可以模拟面对对象的思想

什么是对象？有属性与方法，以及特指的某个事物。

没有对象怎么办？创建一个。

创建对象的三种方式：

1.调用系统构造函数new 一个

var obj = new Object（）；

*对象要有特征与行为（属性、方法）

*所以添加属性，如何添加：对象.属性名 = 值；例： obj.name = " tom ";

*所以添加方法，如何添加：对象.方法名 = 函数；例：obj.play = function() { .... };

调用：属性 obj.name 方法 obj.play()

2.自定义构造函数创建对象 (函数首字母大写)

1.先定义构造函数 function People（name,sex,age）{

this.name= name; this.sex= sex; this.age=age ; //属性 this为当前对象People

this.play = function (){ console.log("名字是："+this.name) }; //方法

}

2. 创建对象 //并初始化，实例化 var person = new People(七七, "女" , 18) ;

3.字面量方式创建对象

var obj = { } //空对象与字面量创建数组一样。1. var arr =[] ;

obj.name = "校区"；属性 arr[ 0 ] = 10;

obj.activity =function (){ } 方法 2. 或者 var arr = [ 10 ,20 ,30 ] ;

*重点** 那么如何像数组2. 那样在里面直接写？优化后结果如下；

var obj2 = { 字面量方式创建的对象的缺陷：对象是一次性值， obj2.name="火火"；替换掉定义的

name:" 小明" ,

age : 18,

play:function () {

console.log( "我喜欢踢足球")；

}

例子1.调用系统构造函数 new 对象

如何一次创建多个对象？

把创建对象的代码封装到函数中。

这里实现了创建多个对象，但是所有对象都是一样的，所以用变量来替换常数。

实现创建多个不同的对象。即工厂模思想。

例子2.自定义构造函数创建对象

如何分辨对象的类型？是人呢还是动物还是手机？？new Object（）只知道是它是一个对象。

所以要自定义构造函数创建对象， function Dog（）{ } var dog= new Dog() ;即知道他的类型是Dog类型

（dog instanceof Dog）结果为true ；

对象的数据类型判断与获取

instanceof 作用： 判断该变量（对象）是否属于当前类型

语法：变量名 instanceof 类型名 Obeject等（或自定义的构造函数）

typeof 判断当前对象的数据类型 typeof num

用来检测一个对象是否已经定义或者是否已经赋值。typeof index =="undefined"

Object.prototype.toString.call（对象）获取某个对象的数据类型的样子。

自定义构造函数后，创建对象时会一并初始化与实例化，这时的堆栈变化

访问属性的两种方式：

obj .属性名

obj[ " 属性名 " ] //当对象是变量时常用

属性的值可以是任意类型，数字，字符，函数，布尔值

访问方法同理可证

obj.方法名 === obj [ '' 方法名，不带括号" ]

JSON 数据格式： json数据也是一个对象，是成对出现的，键值都用双引号括起来,相邻键用单引号隔开

var json = {

"name" : " tom " ,

" age " : " 20"

}

访问数据：

1. json["name"]

等同于 2. var key = "name" json[ key] //key为属性名

不能for循环遍历，因为是无顺序的。那么如何遍历json 格式的数据？？

解决： for -in循环

for（var keys in json）{

console.log( keys) ; // keys是属性名，所以输出结果是 name age

console.log (json [ keys]) //此时输出的才是 tom 20

}

JS三种对象（地址传递，堆栈）：
1.内置对象----js系统自带的对象

2.自定义对象---自己定义的构造函数创建的对象

3.浏览器对象---BOM操作

实例对象与静态对象区别：

实例对象：通过构造函数new出来，实例化的对象 var dog = new Dog（）

静态对象：不需要创建，方法直接通过对象名字调用， Math.abs(-200)

实例方法必须通过实例对象调用

静态方法必须通过大写的对象调用

普通变量是不能调用属性与方法的，对象才可以

什么是是普通变量？像 var a=10 ，var str = " " ,var arr = [ ] 等这些是基本类型。

基本包装类型 是什么？

本身是基本类型，但是在执行代码时，这种类型的变量调用了属性或方法（变成了变量），这种类型就变成了基本包装类型，变量叫基本包装变量。如 number string boolean

例子：

基本包装类型的劣势：

如果var result = 对象&& true ，那么结果是true

如果var result = true && 对象，那么结果是对象。

例子：var flag = new Boolean（false）； //new 创建对象

var result = flag && true；结果是true

1. 例子：

var num =10；

var num2 = Number（" 10 "）; // 叫类型转换

var num3 = new Number（"10 "）; //基本包装类型

内置对象的常用方法：

Math

Math.PI 派

Math.E 常数的底数

Math.abs ( 值) 绝对值

Math.ceil（值）向上取整

Math.floor（值）向下取整

Date:

var date = new Date（）；

date.getFullYear（）；年

date.getMonth（）；月，从0开始，要加一

date.geDate（）；日

date.getHours（）；小时

date.getMinutes（）；分钟

date.getSeconds（）；秒

date.getDay（）；星期几，从0开始

date.toDateString（）； //获取日期

date.toLocalDateString（）； //当地日期

date.toTimeString（）； //获取时间

date.toLocalTimeString（）； //获取时间

date.valueOf（）；毫秒

String 字符串

var str = '"hello " 是字符串。字符串是一个对象；可以看是一个个字符组成的数组，但是js中是没有字符类型的

因为字符串可以看作数组，所以可以通过for循环遍历，但是只能访问，只读方式，不可修改

字符串的常用属性、方法：

str .length 字符串的长度

.indexOf（要找的字符串，开始的索引值）；返回这个字符串的索引值，找不到返回-1 //知字找位置

.lastIndexOf（要找的字符串）从后面开始找，但是索引值从左往右的，找不到返回-1

.charAt( 索引值(0到str.length-1) )；返回索引所在位置的字符串，超出索引时，结果为空字符串。 //知位置找字

.concat（字符串2，字符串3）；返回连接后的新的字符串

.replace（"原来的字符串", "新的字符串"）；替换字符串

.slice ( 开始索引值，结束索引值) 由begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。

原始数组不会被改变，返回浅拷贝后的字符串

.substr(开始索引值，个数) 返回截取后的字符串 //与slice（）效果一致

.substring(开始索引值，结束的索引) 包括 begin，不包括end）返回截取后的字符串 //与slice（）效果一致

.split（"要干掉的字符串"，切割后留下的个数）；用来切割字符串，返回一个切割后的数组

例子： var str11 = "汪峰|白百何|汪洋|小李杜|杜甫";

var ss = str11.split("|",4); //切割个数可不写，默认全部

结果：["汪峰", "白百何", "汪洋", "小李杜"]

.trim（）去除字符串两端的空格

.toLocaleLowerCase（）；转小写

.toLowerCase（）；转小写

.toLocaleUpperCase（）；转大写

.toUpperCase（）；转大写

String .fromCharCode( 数字值（可多个）) 返回ASCII码对应的值。是String的静态方法，不能通过str. 。

例子：String.fromCharCode( 72,69,76,76,79) 输出: HELLO

注意：字符串的不可变性。通过for循环遍历，但是只能访问，只读方式，不可在原来字符串直接修改。通过赋值方式（用字符串是对象的思想，修改的是指向的地址，原来的值还是在之前开辟的空间上）

原来的值还在之前的空间里，地址指向了另一个，所以值才会变。

例子：

Array: 数组

创建的两种方式

1. 构造函数 var arr = new Array（）； 2. 字面量 var arr1 = [];

判断的两种方式：

1. arr instanceOf Array 2. Array.isArray( arr1 ) //true or false

数组的常用属性、方法：

.concat( 数组1，数组2，数组3) 组合一个新的数组

.every（函数）返回一个boolean值，函数作为参数使用，函数中有三个参数，第一个元素的值，第二个索引值，第三数组名（没用）。当这个数组的每一个元素的值都满足条件时，才返回true ；

例子：

var arr = [ 1500, 2000, 5000];

var flag = arr.every( function ( ele , index) {

return ele>=2000 ; //数组的每个元素大于等于2000 才会返回true；

});

结果：false

.filter（函数）返回的是数组中满足条件的元素，组成一个新数组

例子：

var arr = [ 10 ,0，15，20，0， 50];

var flag = arr.filter( function ( ele , index) {

return ele ！=0 ; //返回不等于0的数

});

结果：[10,15,20,50]

.push （值）将值 (可多个 )追加到数组的最后一个元素后面。返回值是追加后的数组长度

.pop（）删除数组的最后一个元素。返回值是删除的元素的值。

.shift（）删除数组的第一个元素。返回值是删除的元素的值。

.unshift（值）将值 (可多个 ) 插入到数组的第一个元素前面。返回值是插入后的数组长度。

.forEach（函数）遍历数组--相当于for循环 //有些不支持这个函数需要放下面的一段代码到引用前

例子：

var arr = [ 1，2，3，4，5];

arr.forEach ( function ( ele , index) {

console.log( index+" ===="+ ele )；

});

.map（函数）数组中的每个元素都要执行这个函数，执行后的结果放到一个新的数组中

.reverse（）反转数组

.join（分隔符）把数组的每个元素转换为字符串，然后通过分隔符将字符串连接起来。不输入分隔符，默认逗号

var arr = ["a", "b", "c", "e"];

console.log( arr.join("&")); //结果：a&b&c&e

.sort（）排序，不太稳定，需要加MDN的固定代码

.indexOf（元素值）返回值所在的索引 // 知字找索引。

.slice（）由begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变

返回浅拷贝后的数组 //定义一个新数组接受它

.splice （开始的索引，要删除的个数，item1，item2...）删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

遍历数组的三种方式：

//1. for -in 遍历

// i 从0 开始

var arr = new Array("tom","JACK","kifflin","Jonh");

for( var i in arr){

console.log(i);

console.log(arr[i]);

}

</script>

// 2. for循环遍历

var arry = [1,2,3,4,5];

for(var j=0; j<arry.length;j++){

console.log(arry[j]);

}

</script>

/* 3. foreach 遍历。用于调用数组的每个元素，并将元素传递给回调函数。

语法数组名.forEach( 函数名( ) )

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

参数

currentValue 必需。当前元素

index 可选。当前元素的索引值。

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

thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

IE8不支持foreach 需要在使用前面加上这段代码

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling toObject() passing the
    // |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get() internal
    // method of O with the argument "length".
    // 3. Let len be toUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If isCallable(callback) is false, throw a TypeError exception. 
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let
    // T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k < len
    while (k < len) {

      var kValue;

      // a. Let Pk be ToString(k).
      //    This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty
      //    internal method of O with argument Pk.
      //    This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal
        // method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as
        // the this value and argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined
  };
}

一、阻止a链接默认跳转

函数中

1.return false ；

2.e.prventDefalut（）； //传入参数e

a标签内：

javascript：；

二、设置滚动条移动时不要选中文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();