2017.12.9-学习笔记：js基础知识点整理

前言：古人云，温故而知新，把自己学习js的基础笔记整理一下，有错误之处还望指出，谢谢。

→点我去看js进阶知识点整理

→点我去看jQuery知识点整理

→点我去看dom知识点整理

JavaScript基础

Js是客户端脚本语言，最初的目的是为了处理表单验证。

1.Js组成部分：

• 1.ECMAScript是一个标准，目前学的是es5；
• 2.Bom是浏览器对象模型；
• 3.Dom是文档对象模型。

2.Js书写位置：

内嵌式：；
外链式：。

3.变量（标识符）：用来在内存中存储数据。

• 声明变量：var / es6 中用 let；
• 变量赋值：= 赋值运算符；
• 同时声明多个变量并赋值：用，隔开；
• 命名规范：
  • 1.由字母、数字、下划线、$符号组成，不能以数字开头；
  • 2.不能是关键字和保留字；
  • 3.区分大小写；
  • 4.变量名有语义；
  • 5.驼峰命名法。：用大写代替单词间的空格。
    css选择器的命名规范:字母,数字,下划线(_),连接符(-),并且不能以数字开头。
    查看变量类型：typeof 变量名；typeof（变量名）。
• 字面量：表示变量赋值的值。
• 注释 //

4.数据类型

• 基本数据类型：
  • number：数字类型；
    1.具体数字；
    2.浮点数；
    3.NaN；（判断用isNaN）不是一个数字。
  • string：字符串类型；
    用单双引号包裹的。
    嵌套，转义符。\n换行；\t制表；\b空格；\r回车；\’单引号；\’’双引号。
  • boolean：布尔类型；
    两个值，true为1；false为0.
  • undefined：undefined类型；
    表示一个声明了变量却没赋值，变量的默认值为undefined。
  • null：表示空。
• 引用数据类型：
  • object：对象。
• 数据类型的转换：

  • 其他转字符串：

    • 1.String（变量）；
    • 2.变量.toString（）；不能转换undefined和null；
    • 3.+ 拼接字符串----有两个操作数，其中一个是字符串。+’’。

  • 其他转数字：

    • 1.Number（变量）；null 0.
    • 2.parseInt（变量）；取整，如遇数字后加字母也可转换，直到遇见字母停止；
    • 3.parseFloat（变量）；
    • 4.取正+/取负-；null 0.
      i.Number 和 取正/取负 都能转换 , 如果字符串有非数字字符,直接NaN;
      ii.parseInt 和 parseFloat 只能转换字符串 , 如果字符串有非数字类型,还要再分析非数字字符的位置;
      iii.parseInt 只能转成整数 parsefloat 可以转浮点数.

  • 其他转布尔类型：

    • 1.Boolean（变量）；
      i.除0、NaN、undefined、’空字符串’、null--------转换为false；其他都是true；
    • 2. ！取反；！！取反反。

5.运算符

• 算术运算符：

  • 加号+
    1.如果+ 有两个操作数,其他有一个是字符串,那么 最后返回的是字符串；
    2.如果 + 有两个操作数,但是两个都不是字符串,转成number ,然后在计算；
    3.+只有一个操作符,直接转成number。
    减号-
    两边的操作数都转成number，再计算；
    乘号*
    除号/
    取余%

• 一元运算符：
  ++自身加一/--自身减一；
  ++num 先+1，再运算赋值；
  num++ 先运算赋值，再+1.

• 逻辑运算符：
  && 与 并且 条件同时满足true返回true；
  || 或 或者 条件满足其一true返回true；
  ！ 非 取反。
  以下情况原理为短路现象。

  

  短路

• 关系运算符：
  <
  >
  >=
  <=
  == 相等先转换数据类型，然后比较值，如果相同则返回true；
  !=
  === 全等先比较数据类型，如果不相同则返回false，如果数据类型相同，再比较值。
  !== 如果值或者数据类型有一个不相等则返回true。
  /*当比较运算涉及类型转换时,JavaScript 会按以下规则对字符串，数字，布尔类型的操作数进行操作:

1.当比较数字和字符串时，字符串会转换成数字值。
2.如果其中一个操作数为布尔类型，那么布尔操作数如果为true，那么会转换为1，如果为false，会转换为整数0

x	y	==	===
0	false	true	false
""	false	true	false
""	0	true	false
"0"	0	true	false
"17"	17	true	false
null	undefined	true	false
null	0	false	false
null	false	false	false
undefined	false	false	false
0	NaN	false	false
"foo"	NaN	false	false
NaN	NaN	false	false

注意:NaN != NaN 的时候返回的是true
与NaN比较的都将返回false。
在比较相等性之前，null 没有被转换为其他类型
面试题：null == undefined ?以及object.is()区别

• 赋值运算符：
  =
  += num += 5; //相当于 num = num + 5;
  -=
  *=
  /=
  %=

• 运算符的优先级：

  • 1. () 优先级最高
  • 2. 一元运算符 ++ -- !
  • 3. 算数运算符 先* / % 后 + -
  • 4. 关系运算符 > >= < <=
  • 5. 相等运算符 == != === !==
  • 6. 逻辑运算符 先&& 后||
  • 7. 赋值运算符

6.流程

• 表达式：能返回值，可能是运算，函数调用，字面量，变量。

• 语句：一般用分号隔开的代码，if while也是，语句包含表达式。

• 流程控制：顺序结构，分支结构，循环结构。

  • 顺序结构：默认从上到下执行，遇到报错停止程序。

  • 分支结构：

    • If语句：可单独if；可if----else；可if---else if；if中可嵌套；
    • 三元运算符：表达式1 ? 表达式2 : 表达式3；
    • Switch语句：

switch (expression) {
  case 常量1:
    语句;
    Break；
  case 常量2:
    语句;
    Break；
  default:
    语句;
    break;
}

// break 可以省略，如果省略，代码会继续执行下一个case(造成case穿透)
// switch 语句在比较值时使用的是全等0.操作符, 因此不会发生类型转换（例如，字符  串'10' 不等于数值 10）

布尔类型的隐式转换：流程控制语句会把括号里的值隐式转换为布尔类型。
例举 3 种强制类型转换和 2 种隐式类型转换?
1.强制（parseInt(),parseFloat(),Number()）
2.隐式（== ,console.log(),alert()）

• 循环结构：
  • While语句：while（循环条件）{循环体}；
  • Do...while语句：do{循环体}while（循环条件）；
  • For语句：for（初始化；判断；自增）{循环体}；
    执行顺序：初始化→判断→循环体→自增
  • Break：立即结束循环；
  • Continue：立即跳过当前循环，继续下一次循环；

7.断点调试：

• 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

• 调试步骤：
  浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点。

• 调试中的相关操作：
  Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

8.数组Array：

• 创建数组：var arr = [1,2,3];
• 获取数组：arr[下标];
• 遍历数组：for(var i = 0; i < arr.length; i++);
• 新增元素：arr[下标]=值；

冒泡排序：
外循环控制趟数，内循环控制每趟的次数，判断相邻两个值的大小，大的放后面；
1.前一个和后一个比较,把较大的值放到后面的位置上；
2.每一趟比较次数递减；

9.函数：

• 可以把一些重复的功能性的代码封装起来，可以重复使用，便于开发。

• 函数三要素：
  函数名：用于调用函数以及传递函数；
  参数：此函数需要从外部传入的数据；
  返回值：此函数执行后，需要返回的数据。

• 函数的定义：函数声明的时候不会执行函数体里的代码，只有当调用的时候才会执行。

  • 函数声明：
    function 函数名(){
    // 函数体
    }
  • 函数表达式：
    var fn = function() {
    // 函数体
    }

• 函数的调用：
  语法：函数名（）；
  作用：为了执行函数体里的代码。

• 函数的参数：形参；实参。

• 函数的返回值：
  如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
  如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
  如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
  函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

• Arguments：是当前函数的一个属性，是一个伪数组（因为不具备数组的内置属性），可以遍历。

• 匿名函数：
  1.将匿名函数赋值给一个变量，这样就可以通过变量进行调用
  2.匿名函数自调用 关于自执行函数（匿名函数自调用）的作用：防止全局变量污染。
  3.把匿名函数作为参数,传递到另一个函数中(回调函数)

• 自调用函数：用于匿名函数执行（沙箱）。
  (function () {
  alert(123);
  })();

• 函数是一种数据类型：
  function fn() {}
  console.log(typeof fn);
  • 函数作为参数：
    因为函数也是一种类型，可以把函数作为另一个函数的参数，在另一个函数中调用。
  • 函数作为返回值：
    因为函数是一种类型，所以可以把函数可以作为返回值从函数内部返回。

function fn(){ 
  console.log('fn函数的执行代码'); 
  function fnSon(){ 
    console.log('fnSon函数的执行代码'); 
  } 
  return fnSon;//undefiend 
} 
var result = fn();//0x0011 
result(); 
var fn = function(){ 
  console.log('函数表达式的内容'); 
} 
fn();

10.作用域：变量可以起作用的范围

• 全局作用域：script标签或者一个js外部文件。
  局部作用域：函数构成一个局部作用域。

• 全局变量：定义在全局作用域中的变量；全局变量在代码任何地方都可以访问到。
  局部变量：定义在局部作用域中的变量。

• 作用域链：0级链==全局作用域，1级链==函数内的局部作用域。
  从下往上找（就是从函数里往外找）。

• 预解析：
  Js解析器在执行时分为两个阶段：预解析、代码执行阶段。
  预解析过程：
  1.把声明的变量提升到当前作用域的最前面，只会提升声明，不会提升赋值。
  2.把声明的函数提升到当前作用域的最前面，只会提升声明，不会提升调用。
  3.先提升function，在提升var。
  4.如果在同一个作用域中申明的变量和申明的函数重名,那么函数的优先级更高。

• 词法作用域：
  变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。

11.对象：存储数据的一种方式，无序的键值对的集合。

创建对象：

• 1.字面量创建对象：

Var 变量名 = {
  属性name: 'zs’,
  方法sayHi: function () {
    console.log(this.name);
  }
};

• 2.自定义构造函数创建对象：

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
    console.log('Hello,everyBody');
  }
}
var p1 = new Person('张三', 22, 'actor');

• 3.object()创建对象：（Object对象是所有对象的根对象）

var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}

• 4.工厂模式创建对象：

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('张三', 22, 'actor');

New关键字：

• 1.会在内存中创建出一个新的对象；
• 2.让this 指向新创建出来的这个对象。

This关键字：this在构造函数中,this就指向的是新new 出来的那个对象。

增删改查：

• 增：对象名。属性=赋值运算符‘属性值’（ff.color = 'pink';）；
• 删：delete 对象名。属性（delete ff.gender;）如删除函数，不用加括号；
• 改：对象名。属性=赋值运算符‘属性值’（ff.color = 'pink';）；
• 查：对象名。属性（ff.name；ff.hit()）如查看函数，要加括号。

遍历对象：for..in..

var obj = {
    name : 'zs',
    age : 18,
    run : function(){
      console.log('so 快');
    }
  }
for(var key in obj){
    console.log(obj[key]);
  }
//  console.log(obj.key);
//使用for ..in 遍历对象
// 循环次数: 属性的个数
//  key 相当于就是一个变量    obj 就是我们要遍历的对象

点语法和中括号语法的区别

• 点语法: obj.haha 在obj对象中找haha这个属性; .语法后面的字符,就是属性,不允许是变量
• 中括号语法 obj[haha] 如果直接写haha,那么底层会认为haha是一个变量;
  可以直接写对象中对应属性的字符串形式

12.栈和堆：

• 简单类型存储在内存中的栈区域{number；string；boolean；null；undefined}
  栈: 先进后出
• 复杂类型存储在内存中的堆区域{object；array；function}

13.Math对象：

• Math.random();随机生成0~1的数，包0不包1；
• Math.floor()/Math.ceil();向下取整/向上取整；
• Math.round();四舍五入取整；
• Math.max()/Math.min();取大小值。

14.Date对象：

• 创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。
• 获取当前时间：var now = new Date();
• 获取当前时间的毫秒形式：now.valueOf();
• 获取日期的指定部分：getSeconds()；getMinutes()；getHours()；getDay()周几；getDate()；getMonth()；getFullYear()；getTime()；getMilliseconds()。

格式化日期：

function formatDate(d) {
  //如果date不是日期对象，返回
  if (!date instanceof Date) {
    return;
  } 
  var year = d.getFullYear(),
      month = d.getMonth() + 1,
      date = d.getDate(),
      hour = d.getHours(),
      minute = d.getMinutes(),
      second = d.getSeconds();

  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;

  return year + '‐' + month + '‐' + date + ' ' + hour + ':' + minute + ':' + second;
} 

计算时间差：

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end ‐ start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
} 

15.Array对象：

• 检验是否为一个数组：
  1.x instanceof Array
  2.Array.isArray(x) HTML5中提供的方法，有兼容性问题

• 数组转为字符串：array.join();不传默认，隔开；传字符串参数，按参数隔开。

• 数组的增删操作：改变了原数组；
  array.push(value,[value[,...]]);往后加 返回长度 原数组发生改变。
  array.pop();//从数组中删除最后一个元素，返回的删除的值 变化 不需要传参数。
  array.unshift(value,[value[,...]]);//往前加 返回长度 原数组发生改变。
  array.shift();//从数组中删除第一个元素，返回的删除的值 变化 不需要传参数。

• 数组的翻转与排序：

array.reverse();//翻转数组,返回翻转过的数组
array.sort();//默认排序顺序是根据字符串Unicode码点。

// 设置回调函数：
arr.sort(function(a,b){
  return a‐b; //负数按照正序
  //return b‐a //正数按照倒序
}) 

• 数组的拼接与截取

//concat：数组合并，不会影响原来的数组，会返回一个新数组。
var arr = [1,2,3]
var arr1 = ["a","b","c"]
var newArray = arr.concat(arr1);//[1,2,3,"a","b","c"];

//slice截取复制:复制数组的一部分到一个新数组，并返回这个新数组
//原来的数组不受影响，包含头，不包含尾
var newArray = array.slice(begin, end);
var arr = [1,2,3,4,5];
arr.slice(0,3) //[1,2,3]
//arr.slice(‐3,‐1) //[3,4]

//splice截取拼接: 以新元素来替换旧元素，以此来修改数组的内容，返回被替换的内容,原数组被改变。
//start:开始位置 deleteCount:删除的个数 items:替换的内容
array.splice(start, deleteCount, [items[,items...]);
var arr = [1,2,3,4,5]
var newArray = arr.splice(0,3,"a","b","c","d")
console.log(newArray)//[1, 2, 3]
console.log(arr)// ["a", "b", "c", "d", 4, 5] 

• 数组查找元素：
  indexOf方法用来查找数组中某个元素第一次出现的位置，如果找不到，返回-1
  array.indexOf(元素, 起始索引);
  lastIndexOf()从后面开始查找数组中元素出现位置,如果找不到，返回-1
  array.lastIndexOf(元素, 起始索引);

• 操作数组里的元素（数组的迭代）

    var arr = [12,34,56,89,78,23,45,19];
    1.filter过滤，符合规则的元素会被存放到新数组里。    
    filter方法的数组。
    var newArr = arr.filter(function(element,index,array){
        return element > 30; //返回true表示保留该元素（通过测试），false则不保留。
    });
    console.log(arr);  //filter方法不会改变原数组里的数据[12,34,56,89,78,23,45,19];
    console.log(newArr);  //新数组里保存符合要求的元素[34, 56, 89, 78, 45]
      
    2.map方法让数组中的每个元素都调用一次提供的函数，将调用的后的结果存放到一个新数组里并返回。
    newArr = arr.map(function(element,index,array)){
    在数组里的每一个元素的最后面都添加一个字符串"0"
        return element + "0";
    });
    console.log(newArr);  //["120", "340", "560", "890", "780", "230", "450", "190"]
    console.log(arr);    //map方法不会改变原数组里的数据 [12,34,56,89,78,23,45,19]
      
    3.forEach() 方法对数组的每个元素执行一次提供的函数,且这个函数没有返回值
    var result = arr.forEach(function (element, index, array) {
        数组里的每一个元素都会被打印
    console.log("第" + index + "个元素是" + element);
    });
    console.log(result);   //函数没有返回值
      
    4.some() 只要有一个符合条件就返回true；
      
    5.every() 要求每一个都符合条件才能返回true。

• 清空数组：
  方式1 推荐
  arr = [];
  方式2
  arr.length = 0;
  方式3
  arr.splice(0, arr.length);
• 基本包装对象： String Numer Boolean
  1. 创建一个基本包装对象；
  2. 调用对应属性和方法；
  3. 返回值；
  4. 销毁这个基本包装对象。

16.String对象：

• 字符串的不可变：被重新赋值后，原字符串不会消失，依然存在内存中。
  获取字符串中字符个数：str.length;

• 常用方法：

  • 1.获取指定位置处字符：
    str.charAt(索引);
    str[索引]。
  • 2.查找字符串：
    indexOf:获取某个字符第一次出现的位置，如果没有，返回-1；
    lastIndexOf:从后面开始查找第一次出现的位置。如果没有，返回-1。
  • 3.去除空白：
    trim();//去除字符串两边的空格，内部空格不会去除。
    str.replace(/\s/g, "")//用正则去除所有空格
  • 4.大小写转换：
    toUpperCase()//全部转换成大写字母；
    toLowerCase()//全部转换成小写字母。
  • 5.字符串拼接与截取：
    拼接：concat，一般用 + 号；
    截取：
    1.slice ：从start开始，end结束，包含头,不包含尾 ,返回一个新的字符串,原字符串不变；
    2.substring ：从start开始，end结束，包含头,不包含尾 ,返回一个新的字符串,原字符串不变；
    3.substr ：从start开始，截取length个字符。(推荐)
    切割：split:将字符串切割成数组,原字符串不改变（很常用）
    var str = "张三,李四,王五";
    var arr = str.split(",");
    替换：
    replace(searchValue, replaceValue)//参数:searchValue:需要替换的值 replaceValue:用来替换的值
    //注意,返回一个新的字符串,原来的字符串没有改变

---

上面 数组 和 字符串 方法整理的比较粗略，详细参考本人整理的下面的各种数组字符串方法

→点我去看基本的数组方法

→点我去看基本的字符串方法

→点我去看ES5新增的数组方法

→点我去看ES6新增的字符串方法

→点我去看ES6数组的扩展

---

---

Knowledge changes the mind