javascript 学习笔记

 参考资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript

JavaScript 调试器：
https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools#javascript_%E8%B0%83%E8%AF%95%E5%99%A8

 

查看内置对象及其方法和属性：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

 

JavaScript 是区分大小写的，并使用 Unicode 字符集

在 JavaScript 中，指令被称为语句（Statement），并用分号（;）进行分隔
如果一条语句独占一行的话，那么分号是可以省略的。（译者注：并不建议这么做。）但如果一行中有多条语句，那么这些语句必须以分号分开。

var
声明一个变量，可选初始化一个值。
let
声明一个块作用域的局部变量，可选初始化一个值。
const
声明一个块作用域的只读常量。

一个 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开头；

如果没有赋初始值，则其值为 undefined, 你可以使用 undefined 来判断一个变量是否已赋值

undefined 值在布尔类型环境中会被当作 false;数值类型环境中 undefined 值会被转换为 NaN;
当你对一个 null 变量求值时，空值 null 在数值类型环境中会被当作 0 来对待，而布尔类型环境中会被当作 false

var a;
a + 2;    // 计算为 NaN
var n = null;
console.log(n * 32); // 在控制台中会显示 0


注意：在使用或引用某个变量之后进行声明和初始化操作，这个被提升的变量仍将返回 undefined 值。
/**
 * 例子 1
 */
console.log(x === undefined); // true
var x = 3;


/**
 * 例子 2
 */
// will return a value of undefined
var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

 

将事件与元素绑定：addEventListener

将事件名称（'click'）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

document.querySelector('html').addEventListener('click', () => {
  alert('别戳我，我怕疼。');
});

箭头函数使用 () => 代替 function ()

 

WEB API
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API
localStorage API，它可以将数据存储在浏览器中供后续获取

 

prompt() 函数：与 alert() 类似会弹出一个对话框。但是这里需要用户输入数据

 

遍历数组：
const fruits = ['apples', 'bananas', 'cherries'];
for (const fruit of fruits) {
  console.log(fruit);
}

 querySelector() 需要用一个 CSS 选择器 可以选中需要引用的元素。

 focus() 是 input 元素可用方法之一，用来获取光标

页面上的每个元素都有一个 style 属性，它本身包含一个对象，其属性包含应用于该元素的所有内联 CSS 样式。

guesses.style.backgroundColor = 'yellow';
guesses.style.fontSize = '200%';
guesses.style.padding = '10px';
guesses.style.boxShadow = '3px 3px 6px black';

 

排错的方法：首先查看开发者控制台，看是否存在语法错误

Math.random(),它生成一个在 0 和 1 之间的十进制随机数

Math.floor()，它会舍弃小数部分返回与之最接近的整数

JavaScript 标准内置对象:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

你可以在初始化变量之后再实际声明它，并且它仍然可以工作。这是因为变量的声明通常在其余的代码执行之前完成

当你使用 var 时，可以根据需要多次声明相同名称的变量，但是 let 不能

我们建议您在代码中尽可能多地使用 let，而不是 var。因为没有理由使用 var，除非您需要用代码支持旧版本的 Internet Explorer (它直到第 11 版才支持 let)

字符串需要用单引号或者双引号包起来

判断变量类型：typeof xxx;

如果想要改变计算优先级，可以把想要优先计算的部分用括号围住

JavaScript 运算符的完整列表:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7

num++; 浏览器返回当前值，然后增加变量

备注： 您可能会看到有些人在他们的代码中使用==和!=来判断相等和不相等，这些都是 JavaScript 中的有效运算符，但它们与===/!==不同，前者测试值是否相同，但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。严格的版本往往导致更少的错误，所以我们建议您使用这些严格的版本

当我们尝试添加 (或连接) 一个字符串和一个数字时，不会报错，浏览器很聪明地将数字转换为字符串，并将这两个字符串连接在一起。：'Front ' + 242;

 

字符串和数值互转：
let myString = '123';
let myNum = Number(myString);

let myNum = 123;
let myString = myNum.toString();

在字符串中查找子字符串：browserType.indexOf('vanilla');

提取子串：browserType.slice(0,3);   
browserType.slice(2);slice()的第二个参数是可选的：如果没有传入这个参数，分片结束位置会在原始字符串的末尾。

转换大小写：
let radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

替换：browserType.replace('moz','van');

遍历数组：
let greetings = ['Happy Birthday!',
                 'Merry Christmas my love',
                 'A happy Christmas to all the family',
                 'You\'re all I want for Christmas',
                 'Get well soon'];
for (var i = 0; i < greetings.length; i++) {
  var input = greetings[i];
  console.log(input);
};

 

数组中包含数组的话称之为多维数组。您可以通过将两组方括号链接在一起来访问数组内的另一个数组： random[2][2];

split字符串变数组：
let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
let myArray = myData.split(',');

join数组变字符串：
let myNewString = myArray.join(',');

将数组转换为字符串的另一种方法是使用 toString() 方法。 toString() 可以比 join() 更简单，但不能指定分割符

使用 push()添加一个或多个要添加到数组末尾:
myArray.push('Bradford', 'Brighton');
从数组中删除最后一个元素的话直接使用 pop() 
unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同，只是它们分别作用于数组的开始，而不是结尾。
在数组最前面追加元素：myArray.unshift('Edinburgh'); 
移除数组最前面的元素：let removedItem = myArray.shift();


Math.round() 是 Javascript 的内建函数，可取得与传入小数最接近的整数，【感觉就是四舍五入】

字符串替换：replace()   
var text = 'I am the biggest lover, I love my love';
text.replace(/love/g,'like');
记住，字符串本身是不可修改的！