js笔记

note

1.

js版本：发布时叫ECMAScript，简称ES，2015年发布了ES2015版，大家也称它为ES6（非官方命名，从2015开始只有年份版本号，无数字版本号了）。

2.

ES2015开始，定义变量和变量名的关键词用let，已经不推荐用var了，两者对代码的影响有很多的不同，以后学到需留意。

3.

ES6可以用来做开发，然后上线前可以打包然后通过babel来将它编译成对应的ES5代码，从而解决ie和其它低版本浏览器对ES2015及其新版本的兼容问题。

4.

ES5里，定义变量用var（变量）和funceion，而ES6里，定义变量用let（变量）、conat（常量）和function。写代码时，要么全用ES5的规则定义变量，要么全用ES6的规则定义变量，绝对不能串着用。

5.

定义变量名时把变量名都统一的放在前面一起

6.关于变量名的规定：

6.1

不能使用JS关键词或保留词，如let、function、static、float等（用了会报错）

6.2

不能使用JS里已经被赋予了意义的词，如document、alert等（用了不会报错!!!，但不利于团队合作）

6.3

组成名字的字符最好是数字、字母、_和$四种，而且不能以数字开头。（其它的如汉字等也可以用，不会报错，但最好是不用，以防编译出现问题）（减号-绝对不行！！！）

6.4

变量名最好能见名知意，例如常用o+变量名表示html里的对象节点等，同时变量名推荐使用驼峰命名法，

7.

变量名=数据类型
let定义的变量名不能重名，否则会报错

8.

常量const不允许初始不赋值，即不能写为const x=；（let可以这么写）但可以写成const x=undefined；

9.

数组定义是可以换行的，但要记得加逗号

10.

n维数组就是数组里面再套n-1层数组

11.

let 变量名={属性名1：属性值1，属性名2：属性值2}；取值时用变量名.属性名来取，属性名命名规则参考变量名。
例如let x={name：“123”，age：12}；
取值则是x.age，x.name等

JS的对象选取方式

例：

<div id="wrap">
          <p></p> 1
          <p></p> 2
   </div>
   <p class=“text”></p> 3

用标签名、id等属性来选取：

let a = document.getElementsByName("p");取到123.
let ap = oWrap.getElementsByName("p");取到12.
let p = oWrap.getElementsByClassName("text");取到3.(ClassName不兼容IE8)
let oWrap = document.getElementById("wrap");取到div.

（getElementsByName、getElementsByClassName等属性很多节点都有，区别在于document是从全文去找，而类似oWrap等的节点则只是从节点的范围里去找。）
（getElementById不同！它只属于document节点才有，因为id唯一，所以其他节点没有这个属性）

用选择器来选取：

let ap = document.querySelectorAll("#wrap p");取到12.
let ap = document.querySelector("#wrap p");取到1.(无All时取到的是选择器的第一个元素。query的这两个兼容至IE8，不兼容IE7及以下)

考虑系统兼容性问题时，因为xp系统自带的就是IE8，所以一般极限只考虑到IE8，低于IE8的不考虑。

JS操作CSS

JS操作CSS内部样式时，解析的都是CSS，JS操作的样式和CSS里的样式依据CSS使用的优先级来判断，谁优先级高就用谁的。

内部样式

1	let oCss = ducument.getElementsByClassName("style"); 或 let oCss = ducument.getElementsById("css");

行内样式

let oDiv;（需注意，操作是针对对象的）

读取操作：console.log(oDiv.title);（不改变其内部的值，只是读取输出）

写入操作:

oDiv.title="123";(改title);
oDiv.className="123";(改class)(较特殊)
oWrap.innerHTML += "123";(在原有基础上加123)
oWrap.style.height = "100px";
oWrap.style.backgroundColor = "pink";
上两项综合可写为oWrap.style.cssText += "height:100px,background-color:pink";(其他属性也可以往里加，用逗号分隔)

注意
oWrap.style += "123";这个赋值语句不能用！！！因为style这个属性十分特殊，一个节点的style属性是存储着这个节点所有类别样式的对象，简单说，其是objict型，不是字符串，所以不能用

自定义标签属性

-getAttribute 获取自定义标签属性，如oWrap.getAttribute("afei");
-setAttribute 设置自定义标签属性
-removeAttribute 移除自定义标签属性

（以上的不仅可以操作非法的标签属性，合法的也可以操作，但一般不用于操作合法的，因为太麻烦，合法的操作应该用Id、className等进行。）

innerHTML 和 innerText

innerHTML可以解析HTML标签结构，类似文本加粗之类的效果可以体现出来，innerText则不可以。

例如：

1 2	oWrap.innerHTML = "<b>我</b>很帅“；输出结果为我很帅，”我“字会被加粗。 oWrap.innerText = "<b>我</b>很帅“；输出结果为<b>我</b>很帅，完全原样输出。

火狐浏览器低版本不支持innerText，要换成.texeContent
innerHTML 和 innerText都获取不到input中输入的值，input输入的值是存储在value里面的，若要操作其输入值，应使用innerValue属性

symbol的使用

symbol是ES6（或称JS6或ES2015）里面的，若不是使用ES6语法编写，则symbol不允许使用！
let x,y;在访问变量时，x.y不成立，因为.无法访问变量，x.属性名才是是访问变量的正确用法。

symbol会创建一个独一无二的值，常常用于解决变量冲突的问题。

x[symbol("age")] = 88;
若用console.log(x[symbol("age")])是取不到上面symbol的值的！因为这里又新创建了一个独一无二的symbol，和上面的symbol是不同的，所以取不到值（两者同名同值，看着一样，但由于symbol是独一无二的，因此实际上它们两个是不同的！！！）
要取到上面创建的symbol值，应该用let y = symbol("age"); console.log(x[y]);来取。

函数相关

不同的对象可以有相同的类，对象是通过类来产生的。例如： div id=wrap与div id=box这两个对象就是相同类下的不同实体。
函数在数据类型上是属于object型的，其一般是用于对代码的封装，虽然赋值也可以用函数，但一般是用对象进行赋值操作。。

3.对象类型与基础数据类型的区别在于，对象类型可以被赋予一些自定义属性，然后可以通过类似 a.goudan = "123";的方式来赋值，而基础数据类型则不可以。

4.函数的定义方式 let a =function(){}; 或 function a(){};。

函数的执行方式：function a(){...};

主动执行a()；非主动执行不准加（）。

被动执行document.onClick = a;或document.onClick = function{a()};

typeof

typeof用于显示数据类型(是显示不是定义！！显示为该种类型，并不能说明就是该种类型，有几个特殊的，要注意区分)，基本用法为let a = 10; console.log(typaof a)；此时，输出的结果为number。

let a = 10， b = typaof a; console.log(typaof b)；此时，输出的结果为string。
let a = null; console.log(typaof a)；此时，输出的结果为string。（此处有问题！！null应该是null类型！不是object类型！但typeof在检测null类型时会返回object值。同理，在检测function时，typaof会返回function，但这只是typaof为了区分function与其他才会返回这个值，并不能说明有function这种类型！！！）

笔记

let w = oWrap.style.width; 后，需注意w = "100px";和oWrap.style.width = "100px";是不同的，因为等号是单向赋值的意思，表示单向的把右边给左边。前者是再次给变量赋值，后者是更改属性值，不等同！！！
将小数转换成指数，运算后在除以对应的倍数来得出结果，可解决JS里小数运算后精度丢失的问题。
JS里没有百分数的概念，输入百分数都会以小数的情况来表示。而符号%表示取余数的意思，例如alert（10%3）；弹出结果是1。
alert（10.5%3）；弹出结果是1.5。

隐式类型转换

let a =“10”，b = 20； alert（a+b）；弹出的结果是1020，这个结果是字符串型，但b里的值仍然是数字而不是字符串。alert（1+2+“8”）；弹出结果38.alert（“8”+1+2）；弹出结果812. （先乘除后加减，同一级别从左到右）
（+号两边任意一边有字符串，那么都会进行隐式字符串转换步骤，将另一边也转成字符串再进行拼接输出，布尔值和数字运算时，布尔值会转成1和0进行运算。）除开number string`` boolean之外，比如去讨论一个对象和另一个对象的加法是没有实际意义的。 jsfuck课外可以自己了解一下。

let a =“10”，b = “5”； alert（a-b）；弹出的结果是5，数字型。

let a =“10”，b = “5”； alert（a*b）；弹出的结果是50，数字型。

let a =“10”，b = “5”； alert（a/b）；弹出的结果是2，数字型。

出现不合理的运算之后，例如alert（“打” * “热”）；会显示NaN，即No a Number的意思（输出NaN这不是报错！！！）。NaN是一个关键词，它不是一个数字，但却属于数据类型（不是所有的数字类型都是数字，而是所有的数字和NaN一起组成了数字类型）

自增自减

let a = 10； console.log（a++）；console.log（a）；输出10,11.

let a = 10； console.log（++a）；console.log（a）；输出11,11.

（先赋值再自增和先自增再赋值的区别）

自减同1。
++和--进行隐式转换时会强行变数字进行运算，最终输出的值也是数字，无法转成数字的，输出NaN。

模板字符串相关

模板字符串是es6的，不属于es5的内容
普通字符串内部不能直接换行，内部换行只能+号拼接，但模板字符串内部可以直接换行。

普通字符串

let x = “1234”；

oWrap.innerHTML = "<div>"+
      "<ul>"+
	      "<li>"+
                "<p>" + x +"</p>" +
	      "</li>"+
      "<ul>"+
  "</div>";

x不能用“”包着，要独立出来才能表示变量。

模板字符串

let x = “1234”；

oWrap.innerHTML = `<div>
      <ul>
	      <li>
                <p>${x}</p>
	      </li>
      <ul>+
  </div>`;

x用${}包着，表示变量。

若要在字符串中加入$或“”或{}或\的符号，需在前面加上转义字符\,表示成\$或\"\"或\{\}或\\的形式才行。

最后更新： 2019年10月13日 22:34

原始链接： http://ldc5886.github.io/2019/05/24/js%E7%AC%94%E8%AE%B01/

赏

DC的小水洼

出于崖涘观于大海

1.

2.

3.

4.

5.