早期整理的js知识点

I javascript数据类型

一、六种数据类型

五种基本类型(原始类型):

  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined

一种对象类型

  • Object(Function,Array,Date...)

二、隐式转换

巧用‘+’ 和 ‘-’隐式转换规则

  • 最常用且容易疑惑的是加法运算，除了算数意义，还表示字符串拼接：
    var a = 'The answer is ' + 47;//The answer is 47
    '37' + 7 = 377
    '37' - 7 = 30 //把字符串转换成数值类型

'=='等于,类型不同时，尝试类型转换和比较

  • ‘1.23’ == 1.23 //string转number
  • 0 == false// boolean转number
  • null == undefined
  • new Object() == new Object()
  • [1,2] == [1,2]
  • object == number | string //尝试对象转为基本类型
  • 其他false

'==='全等于

  • 类型不同，返回false
  • 类型相同
    NaN != NaN
    new Object == new Object
    null === null
    undefined ===undefined

三、包装对象

临时性的对象，用完即时删除，设置属性时访问不到。


基本类型的包装对象
基本类型的包装对象

四、类型检测

常用类型检测方法：

  1. typeof:适用于检测基本类型


    typeof
    typeof

  2. instanceof:适用于检测对象的类型,值得注意到是，不同window或iframe间的对象类型检测不能用instanceof


    instanceof
    instanceof

  3. Object.prototype.toString:


    Object.prototype.toString
    Object.prototype.toString

类型检测小结:

II javascript表达式和运算符

1.表达式

表达式是指能计算出值的任何可用程序单元 --Wiki
表达式是一种js短语，可以使js解释器用来产生一个值。--《Js权威指南》

1.1 原始表达式

  • 常量，直接量：3.14，“test”
  • 关键字：null，this，true
  • 变量：i，j，k

1.2 数组，对象的初始化表达式

  • [1,2]
    new Array(1,2)
  • [1，，，4]
    [1，undefined，undefined，4]
  • {x:1,y:2}
    var o =new Object();o.x=1;o.y=2;

1.3 函数表达式

  • var fe = function(){};
  • (function(){console.log("hello world!");})();
  • function add(){};

1.4 属性访问表达式

  • var o = {x:1}
    o.x
    o['x']

1.5 调用表达式

  • funcName()

1.6 对象创建表达式

  • new Func(1,2);
  • new Object;

2.运算符

2.1 常用运算符

常用运算符
常用运算符

2.2 特殊运算符

特殊运算符
特殊运算符

2.3 运算优先级

运算优先级
运算优先级

III javascript语句和严格模式

1.语句(statement)

  • block，break，continue，empty，if...else，switch，try catch
  • var，function，return，do...while，for，for..in，while
  • debugger，label，with

2.块(block)

快语句常用于组合0~多个语句。块语句用一对{}定义，但是没有块级作用域,有函数作用域

有函数作用域


有函数作用域
有函数作用域

没有块级作用域


没有块级作用域
没有块级作用域

3.严格模式(use strict)

严格模式是一种特殊的执行模式，它修复了部分语言上的不足，提供更强的错误检查，并增强安全性。


严格模式
严格模式

IV javascript对象

1.概述

对象中包含一系列属性，这些属性使无序的。每个属性都有一个字符串key和对应的value：
var obj = {x:1,y:2};
obj.x = 1;
obj.y = 2;

2.对象的结构

2.1 结构图解：

对象obj是函数foo的一个实例（var obj = new foo()），而函数foo的原型上定义了一个属性z(foo.prototype.z = 3),对象obj除了自身的x,y属性外，还继承了z属性,那是因为对象obj内部的[[prototype]]属性（指针）指向函数foo的原型，在查找对象属性时查找到了z属性。之外它还拥有[[class]]，[[extensible]]等对象标签和writable，enumerable等属性标签。


对象的结构
对象的结构

2.2 对象创建

  1. 对象字面量
    var obj1 = {x:1,y:2}
    var obj2 = {
    x:1,
    y:2,
    o:{
    z:3,
    n:4
          }
    };
  1. new Object
    new Object
    new Object

    new Object2
    new Object2

  2. Object.create


    Object.create
    Object.create

2.3 属性操作

  1. 属性读写


    属性读写
    属性读写

  1. 属性删除


    属性删除
    属性删除
  2. 属性检测
    属性检测
    属性检测

    属性检测
    属性检测

  3. 属性枚举


    属性枚举
    属性枚举

3.getter setter

3.1 get/set 关键字定义方法

3.2 一些复杂的应用，检测输入是否合法

3.3 get/set与原型链的关系

当尝试去修改位于原型上的属性时，如果是一般属性，则可以在对象内部创建新值以修改。如果要修改的属性含有get关键字，那么就不能修改。要想尝试去修改的话，可以调用Object的定义属性方法。



同样的，如果尝试修改原型上的属性是只读的（writable=false,默认是false）,也不能直接修改。还是要用Object.defineProperty()方法去修改。


4.属性标签

4.1 定义属性

方法getOwnPropertyDescripor(对象,’属性名‘)（标签属性访问器）用于获取属性的标签。该方法以键值对形式返回一个对象。
方法defineProperty(对象，‘属性’，{标签：值})自定义属性的配置信息。



方法keys(对象)枚举对象上的属性，对于设置了不可枚举（enumerable：false）的属性不枚举出来。


4.2 定义多个属性

方法defineProperties(对象，{
属性1：{value:"",标签：值}，
属性2：{value:"",标签：值}
})定义多个属性。



结合get/set方法定义属性



属性权限对照表

5.对象标签

5.1对象原型标签指向对应的原型（原型链的形成）

5.2 表示对象的类别（属于哪类引用类型）

5.3 扩展性标签（对标签进行修改）

6.序列化和其它对象方法

6.1把对象序列化为JSON数据和解析json数据

值为undefined的属性序列化时不显示，值为NaN或Infinity的属性会转换成null，new Date()会被转换为UTC。


6.2自定义序列化方法toJSON:function(){}

6.3 其它对象方法

V javascript数组（Array）

1 创建数组、数组操作

  1. js中数组是弱类型的，数组中的每一项可以保存任何类型的数据
    var arr = [1,true,null,undefined,{x:1},[1,2.3]];
  • js中数组的大小是动态可调整的，可以随着数据的添加自动增长
    var arr = [1,2,3,4,5];
    arr[5] = 6; // 增加第5项
    arr.length //6 自动增长,也可以动态修改
    arr[2]; //3 访问数组第2项
  • 创建数组-使用Array构造函数
    var arr = new Array();
    var arr = new Array(20); //如果是数值，指定长度；如果是其它类型，则创建包含这个值的只有一项的数组
    var arr = new Array(“red”，“blue”，“orange”，“black”); //指定元素
    var arr = Array(); //可以省略new关键字
  • 创建数组-数组字面量表示法（不会调用Array构造函数）
    var arr = [1,2,3,4];
    var arr = []; //空数组
  • 检测数组
    if(Array.isArray( 要检测的数组 ）){//对数组执行操作}
  • 转换方法
    var arr = ['a','b','c'];
    arr.toString(); //拼接成一个以逗号分隔的字符串 a,b,c
    arr.valueOf(); //返回原数组
    alert(arr); //同toString(),会在后台调用toString()方法
    arr.join(','); //a,b,c
    arr.join('|'); //a|b|c
    如果数组中的某一项的值是null或undefined，该值在join(),toString(),toLocaleString()和valueOf()方法的返回结果中以空字符串显示

2 数组方法

  1. 栈方法（后进先出-向后推入push(),末尾取出pop()）
    var arr = new Array();
    arr.push('NBA'，'AT&T'); // 推入2项
    arr.pop(); // 取得最后一项 'AT&T'
  1. 队列方法（先进先出-向前推入unshift(),前端取出shift()）
    var arr =new Array(1,2,3);
    arr.unshift('num'); //在前端添加一项
    arr.shift(); //取得第一项
  2. 重排序方法（升序排序sort(),反转排序reverse()）
    sort() 方法会调用每个数组项的toString()转型方法，比较的是字符串。所以不是最佳方案
    创建比较函数：
    function compare1(v1,v2) {
    if (v1 < v2) {
    return -1;
    }else if (v1 > v2) {
    return 1;
    }else{
    return 0;
    }
    };
    //对于数值类型的比较方法
    function compare2(v1,v2) {
    return v2 - v1;
    };
    var arr = [0,1,10,5];
    arr.sort(compare1);//会得到正确的数值排序0，1，5，10

  3. 数组迭代


  4. 二维数组


  5. Array.prototype.concat()


  6. Array.prototype.slice()


  7. Array.prototype.splice()


  8. Array.prototype.forEach()


  9. Array.prototype.map()


  10. Array.prototype.filter()


  11. Array.prototype.every&some()


  12. Array.prototype.reduce&reduceRight()


  13. Array.prototype.indexOf&lastIndexOf()


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容