【JavaScript】JS知识点（一）-新手推荐

不会就问就查询！科技利民，学海无涯²！

JS：用来操作DOM和浏览器BOM。
一、JS组成部分
1、ECMAScript（ES3、ES6~9）：定义JS的语法规范；
2、DOM（document odject model）文档对象模型：提供对应属性和方法，可以让JS操作页面中的DOM元素；
3、BOM（browser object model）浏览器对象模型：提供操作浏览器的属性和方法；

二、创建变量的六种方式

• ES3：var
• ES6：let、const
• function：创建函数
• class：创建类
• import、require：基于ES6模块或Common.js规范导入模块

  <script>
    var a=1;
    let a=1;//es6变量
    const a=1;//es6常量，不能再改，会报错
    function func(){}//创建变量func，指向函数
    class Parent{}//创建变量Parent，指向类
    import axios from './axios';//模块化，定义变量指向模块
    let axios=require('./axios');//同上
  </script>

三、JS中变量命名规范

• 严格遵循大小写；
• 使用驼峰命名法：推荐一个或多个有意义的英文组成；第一个首字母小写，其他首字母大写，如：queryParam；
• 可以使用$、_、数字、字母命名；
• 不能使用数字开头；
• 不能使用中划线-；（box-size ==》×）；
• 不能使用关键字、保留字；

四、JavaScript数据类型

• 基本数据类型（值类型/原始值）
  • 数字 number
  • 字符串 string
  • 布尔 boolean
  • 空对象指针 null
  • 未定义 undefined
  • ES6新增唯一值 symbol
• 引用数据类型
  • 对象数据类型
    • 普通对象 {}
    • 数组对象 []
    • 正则对象 /^$/
    • 日期对象 new Date
    • 数学函数对象 Math
  • 函数数据类型 function

五、JS中常见输出方式

1、console类输出方式–五种常用

• console.log();：控制台输出任意数据类型，一次可输出多个值；
• console.dir();：输出一个对象或值的详细信息；
• console.warn();：以警告方式输出；
• console.table();：用于以表格方式直观展示多维JSON数据；
• console.time(AA);console.timeEnd(AA);：用于计算time/timeEnd之间所有程序的执行时间；（受计算机性能影响）
  

2、window提示框

• alert()：提示框
  • 点击确定后后面代码才执行（alert会阻碍主线程的渲染）；
  • 弹出的内容默认会转为字符串（toString），对象转为：“[object Object]”；
• confirm()：确认取消提示框；

let flag=confirm('确定要删除吗');//通过用户点击“确定”或“取消”，得到返回值；
console.log(flag);//返回结果为true、flase

• prompt()：在confirm的基础上多加一个输入框；

let reason=prompt('确定要删除吗,为什么？');//通过用户点击“确定”或“取消”，得到返回值；
console.log(reason);//返回结果为"用户输入内容"、null

3、向页面中指定容器插入内容

• document.write：向页面中输入内容（插入内容会转为字符串）；
• innerHTML/innerText：向页面指定容器中输入内容；
  • 需要获取元素；
  • 插入的内容也会转为字符串；
  • 会替换元素原本内容；
  • 可以使用``box.innerHTML/Text += “aa”`；在原始内容上继续增加；
  • innerHTML可以解析输入内容中的html代码；
• value：向页面表单元素中输入内容；
  • document.getElementById(‘userName’).value=“haha”;

---

六、基本数据类型–Number

1、包含

• 正数、零、负数（0：代表是八进制数，010=8；0x：代表十六进制数，0xa=10）
• NaN：not a number，任何数+NaN=NaN
• Infinity：无穷大

2、isNaN
检测某个值是否为非有效数字；（通过JS内置方法Number()将内容会转为Number类型）
console.log( isNaN(1) );//false
console.log( isNaN(NaN) );//true
console.log( isNaN(Infinity) );//false

3、转换为Number类型的四种方法

• 隐式转换：通过数学运算符\ * -，利用Number方法将其他类型转为数字类型；
• i++、++i 、i--、--i:都是返回数字类型
• Number( [value] );：JS内置的转换方法，将其他类型强制转换为数字类型；（强制转换）
  • 基本数据类型转Number类型：

空字符串：0；
非空字符串包含非有效数字：NaN；
非空字符串只包含有效数字：正常Number；
Boolean类型true：1；
Boolean类型false：0；
null：0；
undefined：NaN；
Symbol唯一值：报错！

+ 引用数据类型转Number类型： 

普通对象先转为字符串：'[object Object]',再转为数字：NaN;
数组类型先转为字符串：去掉[]，将子项转为字符串，再转为数字；一般为NaN;特别地，类似[10]能转为正常Number类型；
其余对象格式：基本都是NaN;
函数转为数字：都是NaN.

• parseInt( [value] );：不能识别小数点；
• parsetFloat( [value] );：能识别小数点；
  原理：
  • 从字符串中最左边开始找，找到的有效数字字符转为数字，一直遇到一个非有效数字字符就停止，结束查找；
  • 要处理的值不是字符串，不管基本类型还是引用类型都需要（toString()）转为字符串；而Number()是只把对象类型转为字符串；
    
• ==比较：通过Number()方法转的；
• 数学运算：通过Number()方法转的；

4、Number.toFixed( n )：保留小数点后面N位（最后结果是一个字符串）

let n = 3.1415;
console.log( n.toFixed(2) );//"3.14"

七、基本数据类型–String

1、什么是字符串

• 用单引号、双引号、反引号（`${变量名}年${变量名2}月`，es6模板字符串：可以套变量的字符串）包起来的都是字符串。

2、字符串重点：将其他数据类型转为字符串

• String( [value] )：强制转换
• [value].toString()
• 通过[value]+''，空字符串拼接，隐式转换

显示转换规则:
基本数据类型转为字符串：就是直接加上双引号；
引用数据类型转为字符串：

• 普通对象转字符串： "[object Object]"
• 数组对象转字符串：内部每一项单独按规定转为字符串；
  • 内部为对象时："[object Object],[object Object]"（每一项都类似普通对象，用逗号隔开）
  • 内部为普通数据时：[1,2].toString();//==>"1,2"
• 函数对象：直接加引号；
  (function func(){}).toString();==>"function func(){}"

3、字符串重点：字符串拼接

背景：除了加法+以外，都是数学运算：非数字类型，基本类型基于Number方法转为数字类型；引用类型基于Number规则转为字符串

加法+：

• 正常数学运算：两边都是数字类型；
• 字符串拼接：只要一边出现字符串（或者引用类型，先转为字符串，再拼接），计算完就是字符串类型了；基本数据类型可以转为数字类型所以正常计算；
  console.log( 1+{} );//==》“1[object Object]”
console.log( 1+[] );//==》“1”
console.log( 1+true );//==》2
  

4、什么情况转为字符串

• String、toString方法
• 字符串拼接
• Number方法，把对象转为数字之前，先转为字符串
• alert、confirm弹出框方法

5、模板字符串的使用

普通引号不能直接写分行代码，需要用转义字符：\n；
模板字符串可以直接写分行的代码；

let year='2020';
let a=`${year}年`;
let b=year+"年";console.log(b)//"2020年"
console.log(a)//"2020年"

八、基本数据类型–Boolean

1、布尔类型重点：将其他类型转为布尔类型；（不需要先转为字符串）

• 方式一：Boolean( [value] )；
• 方式二：![ value ]把指定值转为布尔类型后取反；
• 方式三：!![ value ]取反再取反，相当于只是转为布尔类型；

2、转换规则
只有"0/NaN/null/undefined/空字符串"转为false；其余的都是true。

console.log(!![]);//true
console.log(!!{});//true
console.log(!!'');//false
console.log(!!Number('12px'));//false

3、应用：

• 条件判断
• ==或===比较

九、引用数据类型–Object对象类型

1、普通对象特点

• 用键值对（key：value，俗称属性名：属性值）来描述一个对象的特征，存在零个或多个键值对；
• 多组键值对用逗号隔开；
• key属性名不能是引用数据类型；
• value属性值可以为任意数据类型。

2、普通对象的增删改查操作

• 新增与修改：对象的属性名是不允许重复的，之前没有设置的为新增，之前有这个属性，则是修改属性对应的值；
  • 基于点：属性名不能是数字；
  • 基于[]：属性名如果不是基本数据类型，也不加引号是变量，变量需要提前声明/赋值，只声明属性名就是undefined；非字符串的基本类型可以不加引号，加的话就是字符串类型，不加就是自身类型，结果值都一样；
  • 属性名不能是引用类型，因为会转为字符串：[object Object]；

var myName={
name:'name',
'11':11,//定义时加不加引号都一样
'age':'is 18'//定义时加不加引号都一样效果
}
主要是使用时：要注意以下
两种方式添加属性：
console.log(myName.name);//属性名不能是数字、引用类型
console.log(myName['name']);//有引号是字符串，没有引号是变量，需要定义；非字符串的基本类型的属性名加不加引号都一样；
myName[name];//报错，变量name没有定义
myName[11]==myName['11']
obj[{}]='111';//对象做属性名，会把对象转为字符串：'[object Object]': '111'；
ES6中新数据结构map，可以让对象做属性名。

• 获取属性值：
  • 获取指定属性值：obj.name;obj['name'];
  • 获取不存在的属性值：obj.age;//==>undefined(不报错)
  • 获取当前对象所有可枚举属性名，Object.keys或用for…in循环（for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，还会获取到原型链上的可枚举属性）；
  • 获取所有属性甚至不可枚举：Object.getOwnPropertyNames() 返回一个数组；var arr = ["a", "b", "c"]; console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]
  • 返回结果是包含所有可枚举属性名的数组；console.log(Object.keys( obj ));//==>(2) ["name", "age"]
  • 获取当前对象所有属性名和值，返回结果是包含所有属性名与值的数组集合；console.log(Object.entries(obj));//==>(2) [Array(2), Array(2)]-0: (2) ["name", "zak"] 1: (2) ["age", 18]
• 删除对象中指定的属性：
  • 假删除：当前属性还在，只是属性值赋值为空
    obj.age=null;
  • 真删除：彻底把属性从对象中删除
    delete.obj.age;

3、数组是特殊的对象

• 属性名是数字，从零开始，逐级递增，每一个数字代表当前项的位置，我们把这种数字属性名叫做“索引”；
• 默认有一个length属性，存储数组的长度。

4、关于遍历对象属性的方法

• for in :遍历obj对象的可枚举属性，包含原型上的可枚举属性，除Symbol以外；
  • for…in不应该用于迭代一个 Array，其中索引顺序很重要，而for in 循环顺序不定。

var triangle = {a: 1, b: 2, c: 3};
function ColoredTriangle() {
  this.color = 'red';
}
ColoredTriangle.prototype = triangle;
var obj = new ColoredTriangle();
for (var prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.color = red"
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

• Object.getOwnPropertyNames(obj):返回自身拥有的属性，枚举或不可枚举都算；

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; }
  }
});
my_obj.foo = 1;
console.log(Object.getOwnPropertyNames(my_obj)); // ["getFoo", "foo"]

• Object.keys():只返回实例对象自身可枚举的属性；

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

• obj.hasOwnProperty(prop):判断是否是实例自身拥有，通常与for in连用，过滤原型上可枚举属性；

var triangle = {a: 1, b: 2, c: 3};
function ColoredTriangle() {
  this.color = 'red';
}
ColoredTriangle.prototype = triangle;
var obj = new ColoredTriangle();
for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Output:
// "obj.color = red"

下一站：十 》》