JavaScript 笔记.md

JavaScript 笔记

新建

模板

小书匠

一、JavaScript 历史由来

1、布兰登 艾奇 1995年在网景公司 发明的JavaScript。
2、2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。
3、2004年，JavaScript命运开始改变，谷歌公司开始带头使用Ajax技术，Ajax技术就是JavaScript的一个应用。
4、2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。JavaScript在移动页面中，也是不可或缺的。
5、2010年，人们更加了解HTML5技术，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
6、2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

二、ECMAScript 5.0
1、JS的引入方式

内接式
<scrip type="text/javascript">
</script>
    
 外接式
<!--相当于引入了某个模块-->
<script type="text/javascript" src = './index.js'></script>

2、注释

调试语句
- alert(''); 弹出警告框
- console.log('');  控制台输出

变量的声明
在js中使用var关键字 进行变量的声明,注意 分号作为一句代码的结束符

```javascript
var a = 100;
定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
变量命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。

3、数据基本类型

①数值类型:number
   var a = 100;            //定义了一个变量a，并且赋值100
   console.log(typeof a);  //输出a变量的类型 使用typeof函数 检测变量a的数据类型
   //特殊情况
   var b = 5/0;
   console.log(b); //Infinity 无限大
   console.log(typeof b); //number 类型

ps:在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。

②字符串类型:string
  var a = "abcde";
  var b = "路飞";
  var c = "123123";
  var d = "哈哈哈哈哈";
  var e = "";     //空字符串

③布尔类型：boolean
  var isShow = false;
  console.log(typeof b1);

④空对象：null
  var c1 = null;//空对象. object
  console.log(typeof c1);
 
⑤未定义：undefined
  var d1;
  //表示变量未定义
  console.log(typeof d1);

4、数据转换

①将number类型转换成string类型
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);

// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

②将string类型转换成number类型
var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2); //NaN  Not a Number 但是一个number类型

// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))； //789
console.log(parseFloat(stringNum)); //789.123

③任何的数据类型都可以转换为boolean类型
var b1 = '123'; //true
var b2 = 0; //false
var b3 = -123 //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false
//使用Boolean(变量) 来查看当前变量的真假

5、流程控制

①IF ：
var age = 20;
if(age>18){
    //{}相当于作用域
    console.log('可以去会所');
}
alert('alex'); //下面的代码照样执行

②IF-ELSE ：
var age = 20;
if(age>18){
    //{}相当于作用域
    console.log('可以去会所');
}else{
    console.log('好好学js,年纪够了再去会所');
}
alert('alex'); //下面的代码照样执行

③IF-ELSE IF-ELSE ：
var age = 18;
if(age==18){
    //{}相当于作用域
    console.log('可以去会所');
}else if(age==30){
    console.log('该娶媳妇了！！');
}else{
    console.log('随便你了')
}
alert('alex'); //下面的代码照样执行

④逻辑与&&、 逻辑或||
//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}


//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或  只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
    alert('被复旦大学录入')
}else{
    alert('高考又失利了')
}

⑤switch 语句
var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功')
    break;

    default:
    console.log('很遗憾')

}
//注意：switch相当于if语句 但是玩switch的小心case穿透

⑥while循环
任何语言的循环离不开这三步：
初始化循环变量
判断循环条件
更新循环变量
// 例子：打印 1~9之间的数
var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}

⑦for循环
for循环遍历列表是最常用的对数据的操作，在js中要熟练使用for循环的书写方式
//输出1~10之间的数
for(var i = 1;i<=10;i++){
     console.log(i)
 }

6、常用内置对象（复杂数据类型）
所谓内置对象就是ECMAScript提供出来的一些对象，我们知道对象都是有相应的属性和方法

①数组Array

字面量方式创建（推荐大家使用这种方式，简单粗暴）
var colors = ['red','green','yellow'];

使用构造函数的方式创建 使用new关键词对构造函数进行创建对象,构造函数与后面的面向对象有关系
var colors = new Array();
//通过下标进行赋值
colors[0] = 'red';
colors[1] = 'green';
colors[2] = 'yellow';
console.log(colors);

数组的常用方法：
（1）数组的合并 concat()
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];

var newCity = north.concat(south);
console.log(newCity)

（2）join() 将数组中元素使用指定的字符串连接起来，它会形成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//"98|78|76|100|0"

（3）slice(start,end); 返回数组的一段记录，顾头不顾尾
var arr = ['张三','李四','王文','赵六'];
var newArr  = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]

（4）pop 移除数组的最后一个元素
var arr = ['张三','李四','王文','赵六'];
arr.pop();
console.log(arr);//["张三", "李四"，"王文"]

（5）push() 向数组最后添加一个元素
var arr = ['张三','李四','王文','赵六'];
arr.push('小马哥');
console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]

（6）reverse() 翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反转数组
names.reverse();
console.log(names);

（7）sort对数组排序
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]

（8）判断是否为数组：isArray()
布尔类型值 = Array.isArray(被检测的值) ;

②字符串string

（1）chartAt() 返回指定索引的位置的字符
var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l

（2）concat 返回字符串值，表示两个或多个字符串的拼接
var str1 = 'al';
var str2  = 'ex';
console.log(str1.concat(str2,str2));//alexex

（3）replace(a,b) 将字符串a替换成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755

（4）indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

（5）slice(start，end) 左闭右开 分割字符串
var str = '小马哥';
console.log(str.slice(1,2));//马

（6）split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度
var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

（7）substr(statr,end) 左闭右开
var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,4));//我的天呢

（8）toLowerCase()转小写
var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage

（9）toUpperCase()转大写
var str = 'xiaomage';
console.log(str.toUpperCase());//XIAOMAGE

（10）特别
//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四舍五入
var newNum = num.toFixed(2)
console.log(newNum)

7、Math内置对象

（1）Math.ceil() 向上取整，'天花板函数'
  var x = 1.234;
  //天花板函数  表示大于等于 x，并且与它最接近的整数是2
  var a = Math.ceil(x);
  console.log(a);//2
  
（2）Math.floor 向下取整，'地板函数'
  var x = 1.234;
  // 小于等于 x，并且与它最接近的整数 1
  var b = Math.floor(x);
  console.log(b);//1
（3）求两个数的最大值和最小值
  //求 两个数的最大值 最小值
  console.log(Math.max(2,5));//5
  console.log(Math.min(2,5));//2
（4）随机数 Math.random()
  var ran = Math.random();
  console.log(ran);[0,1)

8、函数
函数：就是把将一些语句进行封装，然后通过调用的形式，执行这些语句。

函数的作用：解决大量的重复性的语句，简化编程，让编程模块化

# python 中声明函数
def add(x,y):
    return x+y

#调用函数
print(add(1,2))

//js中声明函数
function add(x,y){
    return x+y;
}
//js中调用函数
console.log(add(1,2));

9、伪数组 arguments
arguments代表的是实参。arguments只在函数中使用。

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
    console.log(arguments);
    console.log(fn.length);         //获取形参的个数
    console.log(arguments.length);  //获取实参的个数

    console.log("----------------");
}

之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例：

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b) {
    arguments[0] = 99;  //将实参的第一个数改为99
    arguments.push(8);  //此方法不通过，因为无法增加元素
}

清空数组的几种方式：

var array = [1,2,3,4,5,6];
array.splice(0);      //方式1：删除数组中所有项目
array.length = 0;     //方式2：length属性可以赋值，在其它语言中length是只读
array = [];           //方式3：推荐

10、JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。在JSON中，有两种结构：对象

var packJSON= {"name":"alex", "password":"123"};

和数组。

var packJSON = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];

JSON字符串:

var jsonStr ='{"name":"alex", "password":"123"}' ;

JSON对象：

var jsonObj = {"name":"alex", "password":"123"};

JSON字符串转换JSON对象：

var jsonObject= jQuery.parseJSON(jsonstr);

JSON对象转化JSON字符串：

var jsonstr =JSON.stringify(jsonObject );

转载于:https://www.cnblogs.com/bruce-blogs/p/11142850.html