event

window.event...

键盘处理程序 onkeypress

字符代码会存放在event.which()//netscape或者event.keyCode()//IE

将ascii转换为字符串

String.fromCharCode(event.which);//event.keyCode;

全局、局部变量

• 任何再函数体内的用var声明的变量都是局部变量，即使和全局变量重名，也是可以的，是不同的变量

• 如果再函数体内不适用var，那么所声明的变量不是局部变量，如果这个时候函数体外有同名变量，就会错误的改变变量值，导致程序出错

   var a = 10;
   function add() {
       a = 20;
       console.log(a);
   }
   add(); //20
   console.log(a); //20

特性

动态性

var key = "property"
console.log(key)

var duixiang = {
    property: "my canshu"
}
console.log(duixiang.property)
console.log(duixiang["property"])
console.log(duixiang[key])

delete duixiang["property"]
console.log(duixiang[key]) 

//property
my canshu
my canshu
my canshu
undefined

弱类型

类型是和值相关的，而不是和变量相关的

定义变量无须显式声明，很大的灵活性

也有不利的一面，比如需要面向对象的时候

数据类型

原始类型：

ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。

引用类型：对象

还有数组（跟对象差不多，因为都存的是首地址呀）

数组

不用new，直接"=[ ]"是一样的意思

string

.length只读属性

大小写转换

toUpperCase()

toLowerCase()

子字符串

.substring(a,b) a--(b-1)索引的字符 b可以没有

单个字符

.charAt(a)

查找字符串

.indexof("text"),返回开始的索引值

.indexof("text",2)可以指定从哪里开始查找（可以用于寻找重复的字符串）

.lastIndexOf("text") 从后向前搜索，即最后一个出现的目标，再返回索引值

.lastIndexOf("text",20) 制定位置参数，会从该位置向前搜索

分离字符串

.split(",") 返回字符串数组

合并字符串

.join(",") 返回字符串

字符串数组排序

.sort() 返回字符串数组！！！这里会改变原数组为有序哦！！！

.sort(numcompare) numcompare自定义函数，根据这个来排序

function numcom(a, b) {
  return a - b;
}
strs = ['3', '4', '435', '13', '1', '2']

console.log(strs.sort(numcom));

数字

处理金钱

toFixed(2) 非常适合处理金钱。
var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

进制

但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。
实例

var myNumber = 128;
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

绝不要用前导零写数字（比如 07）。

一些 JavaScript 版本会把带有前导零的数解释为八进制。

精确范围

整数

整数（不使用指数或科学计数***被精确到 15 位。

小数

小数的最大数是 17 位，浮点的算数并不总是 100% 精准

使用乘除法有助于解决上面的问题：

实例

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

===

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

==

数字啥的对象比较会更糟糕，是因为，两个都是对象无法比较

NaN

这个特殊的Number与所有其他值都不相等，包括它自己：
NaN === NaN; // false
唯一能判断NaN的方法是通过isNaN()函数：

浮点数

注意的相等比较：

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

除以 0（零）也会生成 Infinity：

typeof Infinity;        // 返回 "number"
##  \- undefined

 大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。 

 \- 强烈建议直接使用[]。

 var arr = [1, 2, 3.14, 'Hello', null, true];
 arr[0]; // 返回索引为0的元素，即1
 arr[5]; // 返回索引为5的元素，即true
 arr[6]; // 索引超出了范围，返回undefined

 \- 只能用var申明一次，例如：

 var a = 123; // a的值是整数123
 a = 'ABC'; // a变为字符串

##  \- strict模式

 启用strict模式的方法是在JavaScript代码的第一行写上：

 'use strict';

##  \- 字符

 如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

# ES6标准 

 \1. ES6模板字符串

 console.log(\`你好, ${name}, 你今年${age}岁了!\`);

 \2. 多行字符串的表示方法


 反引号：\`这是一个多行字符串\`;


 访问不存在的属性不报错，而是返回undefined：

 xiaoming.age = 18; 

 // 新增一个age属性

 xiaoming.age; // 18

 delete xiaoming.age; // 删除age属性

 xiaoming.age; // undefined

 \- 'name' in xiaoming; // true

 这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：
 'grade' in xiaoming; // false

 \- 要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

 var xiaoming = {
   name: '小明'
 };

 xiaoming.hasOwnProperty('name'); // true

 xiaoming.hasOwnProperty('toString'); // false

 \- null、undefined、0、NaN和空字符串''视为false，其他值一概视为true


 \- for in
 \- 
   var a = ['A', 'B', 'C'];
   for (var i in a) {

   console.log(i); // '0', '1', '2'

   console.log(a[i]); // 'A', 'B', 'C'
 }

 \- 普通
  var o = {
   name: 'Jack',

   age: 20,

   city: 'Beijing'
   };

   for (var key in o) {

   if (o.hasOwnProperty(key)) {
     console.log(key); // 'name', 'age', 'city'
   }
   }

map ES6标准

-

   var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
   m.get('Michael'); // 95
   m.set('Adam', 67); // 添加新的key-value
   m.has('Adam'); // 是否存在key 'Adam': true
   m.get('Adam'); // 67
   m.delete('Adam'); // 删除key 'Adam'
   m.get('Adam'); // undefined

多次对一个key放入value，后面的值会把前面的值冲掉

set ES6标准

- 在Set中，没有重复的key。
- 重复元素在Set中自动被过滤：
- 注意数字3和字符串'3'是不同的元素。
- 通过delete(key)方法可以删除元素：
## iterable ##

- Array、Map和Set都属于iterable类型。
-

 var a = ['A', 'B', 'C'];

   for (var x of a) { // 遍历Array
   console.log(x);
   }
 \- for each
 \- 

   var a = ['A', 'B', 'C'];
   a.forEach(function (element) {
   console.log(element);
   });
 \- 

函数

箭头函数

其本身就是匿名函数，没有函数名

// 无参数:
() => 3.14

只有一个内容行，就不需要写{}花括号

x => x * x

有一个以上参数，就要加（）和{}

(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：

// SyntaxError:
x => { foo: x }

因为和函数体的{ ... }有语法冲突，所以要改为：

// ok:
x => ({ foo: x })

不能作为构造函数，不能使用new

箭头函数不绑定arguments，取而代之用rest参数...解决

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

箭头函数没有原型属性

箭头函数不能当做Generator函数,不能使用yield关键字

匿名函数

- 如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。

  var abs = function (x) {
   if (x >= 0) {
     return x;
   } else {
     return -x;
   }
   };

function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs
## arguments ##
- arguments.length
- arguments[0]
- arguments类似Array但它不是一个Array
- 即使函数不定义任何参数，还是可以拿到参数的值

变量

- 由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行
- 全局变量会绑定到window上
### 块级作用域的变量 ###

let

-
'use strict';

function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
// SyntaxError:
i += 1;
}

-const ##ES6

-
全部大写的变量

const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
### 名字空间 ###

全局变量

-
// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
return 'foo';
};

重复声明定义（动态类型）

<script>
var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

document.getElementById("demo").innerHTML = x;//Bill
</script>

赋值后在声明，没用，不会改成define

<script>
var x = 7;  
var x; //赋值后在声明，没用，不会改成define
document.getElementById("demo").innerHTML = x;//7
</script>

null

在 JavaScript 中，null 的数据类型是对象。

设置值为 null 清空对象

null === undefined            // false
null == undefined             // true

typeof

typeof {name:'Bill', age:62} // 返回 "object"

typeof [1,2,3,4]             // 返回 "object" (在 JavaScript 中数组即对象)

typeof null                  // 返回 "object"

typeof function myFunc(){}   // 返回 "function"

解构赋值 ES6

-
'use strict';

var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
var {name, age, passport} = person;
console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);

- 变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：
-
// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
- 交换
-
var x=1, y=2;
[x, y] = [y, x]

详见 https://www.liaoxuefeng.com/wiki/1022910821149312/1023021187855808

常见的 HTML 事件

innerhtml

   <script>
   document.getElementById("demo").innerHTML = 5 + 6;// 会覆盖之前html元素的内容
   </script>

<button onclick="this.innerHTML=Date()">现在的时间是？</button>//改自己按钮的元素

document.write()

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

对象

对象也是变量

var car = {type:"porsche", model:"911", color:"white"};//值以  名称:值   ，名称:值对被称为属性

// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

引用对象的非函数属性，可以用objectName.propertyName；

函数属性，用objectName.methodName()，也就是加个“（）”

比较==&===

请注意 (x==y) 与 (x===y) 的区别。

JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。

不把字符串、数值和布尔值声明为对象

如：

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //    把 z 声明为 Boolean 对象

他们会增加代码的复杂性并降低执行速度

字符串

字符串长度

内建属性 length 可返回字符串的长度：

script中字符串换行

写两个script，写成如下可能不换行，不保险：

document.getElementById("demo").innerHTML = "Hello \
Kitty!";

某些浏览器也不允许 \ 字符之后的空格，保险做法：

document.getElementById("demo").innerHTML = "Hello" + 
"Kitty!";

下标访问

它让字符串看起来像是数组（其实并不是）

如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。

它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）

转换为数组

var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

字符串是数字的比较

Boolean

var oFalseObject = new Boolean(false);
var bResult = oFalseObject && true;    //输出 true

在 Boolean 表达式中，所有对象都会被自动转换为 true，所以 oFalseObject 的值是 true

Boolean 对象将覆盖 Object 对象的 ValueOf() 方法，返回原始值，即 true 和 false。ToString() 方法也会被覆盖，返回字符串 "true" 或 "false"。 oFalseObject.valueOf () 就可以了

false: 0、-0、null、""、false、undefined、NAN

true：其余都是

方法

for each

<body>
<p id="demo"></p>

<script>
    var txt="";
    var nums = ['f','ad','ad'];
    nums.forEach(shuchu);
    document.getElementById("demo").innerHTML = txt;

    function shuchu(value,index,array){
        txt += value + "<br/>";
    }

</script>
</body>

输出：
f
ad
ad

随机整数

Math.floor(Math.random() * 10);        // 返回 0 至 9 之间的数

Math.floor(Math.random() * 11);        // 返回 0 至 10 之间的数

适当的整数

//介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

//介于 min 和 max（都包括）之间的随机数
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

跳出

有标签的

var  cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
    text += cars[0] + "<br>"; 
    text += cars[1] + "<br>"; 
    text += cars[2] + "<br>"; 
    break list;
    text += cars[3] + "<br>"; 
    text += cars[4] + "<br>"; 
    text += cars[5] + "<br>"; 
}

//如果有标签引用，则 break 语句可用于跳出任意代码块：

练习

输入字符串并排序

 <form *name*="theForm">
​    <input *type*="text" *name*="newName" *size*="20">
​    <input *type*="button" *name*="add" *value*="add" *onclick*="**SortNames**()">
​    <textarea *cols*="60" *rows*="10" *name*="sorted">the sorts</textarea>
  </form>
  ------------------------------------------------------
var newName = 0;
var names = [];
function SortNames() {
    theName = document.theForm.newName.value;
    names[newName] = theName;
    newName++;
    names.sort();
    document.theForm.sorted.value = names.join("\n");
    console.log(names, "ss")
}

prototype

function addHead(level) {
    title = "h" + level;
    text = this.toString();
    start = "<" + title + ">";
    end = "</" + title + ">";
    return start + text + end;
}
String.prototype.heading = addHead;//为string增加一个方法
document.write("this is one".heading(1));
document.write("this is two".heading(2));
document.write("this is three".heading(3));

for in 循环

function Card(a, b) {
    this.a = a;
    this.b = b;
}
var tom = new Card("tom", "1231");
for (i in tom) {
    console.log(i + ":" + tom[i]);
}
//a:tom
//b:1231