当前位置 : 首页 » 文章分类 :  开发  »  JavaScript

JavaScript

javascript 学习笔记

在线执行代码
https://tool.lu/coderunner/

廖雪峰JavaScript教程
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

Mozilla MDN JS教程
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript


字符串

模板字符串

模板字符串使用反引号 “" (键盘左上角波浪线下面的字符) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression}` )的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。
在模版字符串内使用反引号时,需要在它前面加转义符(\)

如果有很多变量需要连接,用+号就比较麻烦。ECMAScript 6(ES 6) 新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量:
例如拼接当前页面的链接:

var pageRef = `<a href="${window.location.protocol}//${window.location.host}${window.location.pathname}">当前页面链接</a>`
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

字符串判空

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
  var variable2 = variable1;
}

字符串比较

JavaScript有两种相等运算符。一种是完全向后兼容的,标准的”==”,如果两个操作数类型不一致,它会在某些时候自动对操作数进行类型转换,考虑下面的赋值语句:

var strA = "i love you!";
var strB = new String("i love you!");

这两个变量含有相同的字符序列,但数据类型却不同,前者为string,后者为object,在使用”==”操作符时,JavaScript会尝试各种求值,以检测两者是否会在某种情况下相等。所以下面的表达式结果为true: strA == strB。

第二种操作符是”严格”的”===”,它在求值时不会这么宽容,不会进行类型转换。所以表达式strA === strB的值为false,虽然两个变量持有的值相同。
有时代码的逻辑要求你判断两个值是否不相等,这里也有两个选择:”!=”和严格的”!==”,它们的关系就类似于”==”和”===”。

“==”和”!=”在求值时会尽可能地寻找值的匹配性,但你可能还是想在比较前进行显式的类型转换,以”帮助”它们完成工作。比如,如果想判断一个用户的输入值(字符串)是否等于一个数字,你可以让”==”帮你完成类型转换:

if(document.form1.txtAge.value == someNumericVar) {
   …
}

也可以提前转换:

if(parseInt(document.form1.txtAge.value) == someNumericVar) {
  …
}

substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。
str.substring(indexStart[, indexEnd])
indexStart 需要截取的第一个字符的索引,该索引位置的字符作为返回的字符串的首字母。
indexEnd 可选。一个 0 到字符串长度之间的整数,以该数字为索引的字符不包含在截取的字符串内。

startsWith() 以开头

startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或 false。

const str1 = 'Saturday night plans';

console.log(str1.startsWith('Sat'));
// expected output: true

console.log(str1.startsWith('Sat', 3));
// expected output: false

String.prototype.startsWith()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

includes() 是否包含子串

includes() 方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。
includes() 方法是区分大小写的。

var string = "foo",
    substring = "oo";

console.log(string.includes(substring));

String.prototype.includes()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/includes


数组

map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

例如:

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.prototype.map()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

reduce()

reduce() 方法对数组中的每个元素执行一个传入的reducer函数(升序执行),将其结果汇总为单个返回值。

语法:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback 执行数组中每个值的函数,包含四个参数:

  • accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。
  • currentValue 数组中正在处理的元素。
  • currentIndex 可选 数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1。
  • array 可选 调用reduce()的数组

initialValue 可选 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值 函数累计处理的结果

回调函数第一次执行时,accumulator 和 currentValue 的取值有两种情况:如果调用 reduce() 时提供了 initialValue,accumulator 取值为 initialValue,currentValue 取数组中的第一个值;如果没有提供 initialValue,那么 accumulator 取数组中的第一个值,currentValue 取数组中的第二个值。

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

例如

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Array.prototype.reduce()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce


js求集合并集交集差集

a = [1, 2, 3];
b = [2, 4, 5];

// 并集
let union = a.concat(b.filter(v => !a.includes(v))) // [1,2,3,4,5]
console.log(union)

// 交集
let intersection = a.filter(v => b.includes(v)) // [2]
console.log(intersection)

// 差集
let difference = a.concat(b).filter(v => !a.includes(v) || !b.includes(v)) // [1,3,4,5]
console.log(difference)

js数组元素去重

a = [1,2,2,3,4];

b = Array.from(new Set(a));
console.log(b);

js数组判空

var arr = [];
if(Array.isArray(arr) && arr.length === 0){
    console.log('是空数组');
}

全局变量和局部变量

在JavaScript中,常常把定义在函数外的变量称为全局变量;而在函数内声明的变量称为局部变量。

var variable = 'global';

function checkVariable () {
    var variable = 'local';
    console.log(variable); // local
}

checkVariable();
console.log(variable); // global

上面的示例,在函数checkVariable()外声明了一个全局变量variable,同时在函数内声明了一个局部变量variable。

variable = 'global';

function checkVariable() {
    variable = 'local';
    console.log(variable); // local
    myVariable = 'local';
    console.log(myVariable); // local
}

checkVariable();

console.log(variable); // local
console.log(myVariable); // local

在全局作用域中声明变量可以省略var关键字,但如果在函数体内声明变量时不使用var关键字,这样会隐式的声明了全局变量。 即使该语句是在一个function内,当该function被执行后就变成了全局变量。

所以:
声明局部变量一定要使用var关键字,使用var关键字声明变量时,变量会自动添加到距离最近的可用环境中。如果没有写var, 变量就会暴露在全局上下文中, 这样很可能会和现有变量冲突。


浏览器

window对象

window 对象表示一个包含DOM文档的窗口,其 document 属性指向窗口中载入的 DOM文档 。
window 作为全局变量,代表了脚本正在运行的窗口,暴露给 Javascript 代码。

Window
https://developer.mozilla.org/zh-CN/docs/Web/API/Window


document对象

referrer 上一个页面url

document.referrer 返回 跳转或打开到当前页面 的页面的 URI
如果用户直接打开了这个页面(不是通过页面跳转,而是通过地址栏或者书签等打开的),则该属性为空字符串。

document和window的区别

window对象表示浏览器中打开的窗口。
window对象可以省略,如: alert() 等价于 window.alert()

document对象是window对象的一部分。如:
document.body 等价于 window.document.body
浏览器的html文档称为document对象。


location对象

Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。
它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。

当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

Location
https://developer.mozilla.org/zh-CN/docs/Web/API/Location

href 页面完整url

protocol 协议

包含URL对应协议的一个DOMString,最后有一个”:”。

host 域名:端口号

对于没有端口的页面, host 等于 hostname
对于带端口的页面, host 包括整个 域名:端口, hostname只包含域名

hostname 不带端口号的域名

port 端口号

pathname url的path

包含URL中路径部分的一个DOMString,开头有一个“/“

search url的查询串

包含URL参数的一个DOMString,开头有一个“?”

hash 页内锚点

包含块标识符的DOMString,开头有一个“#”

origin 源信息(只读)

包含页面来源的域名的标准形式

通过location获取当前页面的url等信息

window.location.protocol: http:
window.location.host: localhost:4000
window.location.hostname: localhost
window.location.origin: http://localhost:4000
window.location.pathname: /article/JavaScript/
window.location.href: http://localhost:4000/article/JavaScript/

window.location与document.location

window 对象的 location 属性 等于 document 对象的 location属性, 都是引用了 location 对象

window.location === document.location //true
document.location===location // true
window.location===location // true

JavaScript获取html元素值

JavaScript中取得元素的方法有4种:分别是:

  • 1、getElementById() :通过id取得HTML元素。
  • 2、getElementsByName() :通过name取得元素,是一个数组。
  • 3、getElementsByTagName() :通过HTML标签取得元素,是一个数组。
  • 4、getElementsByClassName() :根据类名获得元素,是一个数组

getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。
不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

例1,获取元素标签内的值

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>

<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>

例2,自定义id(x)方法
getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。


getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

例,统计文档内name为myInput的标签有多少个

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>

<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个?" />
</body>

</html>

getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
注意:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

例1,统计文档内有多少个input标签

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>

<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>

</html>

例2,统计文档内有多少表格table

var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");

例3,获得文档中的第4个段落
如果您非常了解文档的结构,也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。例如,下面的代码可以获得文档中的第四个段落:
var myParagragh = document.getElementsByTagName("p")[3];
不过,如果您需要操作某个特定的元素,使用 getElementById() 方法将更为有效。

例4,获取id=”main”的元素中的所有p元素
下面的例子返回包含文档中所有p元素的列表,并且这些p元素应该是 id=”main” 的元素的后代(子、孙等等):
document.getElementById("main").getElementsByTagName("p");


getElementsByClassName()

getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象,元素在集合中的顺序以其在代码中的出现次序排序。
若获取class为多个类的元素,多个类名使用空格分隔,如 “test demo”。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

例1,获取class为”example”和”color”的所有元素
var x = document.getElementsByClassName("example color");

例2,统计文档中有多少个class为example的元素

<html>
<body>

<div class="example">样式 class="example" 的 div 元素</div>
<div class="example">另外一个样式 class="example" 的 div 元素</div>
<p class="example">样式 class="example" 的 p 元素</p>
<p>点击按钮查看文档中有多少个类名为 "example" 的元素。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    document.getElementById("demo").innerHTML = x.length;
}
</script>

</body>
</html>

例3,修改所有样式class为”example”的元素的背景颜色

<html>
<head>
<style>
.example {
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>

<body>

<div class="example">样式 class="example" 的 Div 元素</div>
<div class="example">另外一个样式 class="example" 的 Div 元素</div>
<p class="example">样式为 class="example" 的 p 元素。</p>
<p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p>
<p>点击按钮修改所有样式 class="example" 的背景颜色。</p>
<button class="example" onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}
</script>

</body>
</html>

例4,修改第一个类为”example color”的div元素的背景颜色

<html>
<head>
<style>
div {
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>

<body>

<div class="example">
  <p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="example color">
  <p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="example color">
  <p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
</div>
<p>点击按钮修改第一个类为 "example color" 的 div 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example color");
    x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

innerHTML与value的区别

getElementById().innerHTML与getElementById().value的区别
有value属性的标签才能操作其value值,只有input等表单输入标签才有value值。
例如:
<input type="text" id="txt1" value="hello"/>
这样一个元素,当你使用document.getElementById(“txt1”).value时,可以得到其value值,即”hello”这个字符串。
如果一个元素没有value值,那么使用document.getElementById().value时是取不到。这是理所当然的,没有的东西怎么访问?
比如一个div标记,就不一定有value值。

innerHTML是指元素起始标记和结束标记之间的内容。
例如:
<label id="lb1">this is a label</label>
当你使用document.getElementById(“lb1”).innerHTML可以取到<label></label>之间的内容,即“this is a label”。

一个实例如下:

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
function getValue2()
{
var x=document.getElementById("myInput")
alert(x.value)
}
</script>
</head>

<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<input id="myInput" type="text" value="value值" onclick="getValue2()" />
<p>点击标题,会提示出它的innerHTML值。</p>
<p>点击input框,会提示出它的value值。</p>
</body>

</html>

优化

JavaScript 的性能优化:加载和执行
https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/


上一篇 Spring-JDBC

下一篇 c3p0

阅读
评论
4,312
阅读预计18分钟
创建日期 2017-05-22
修改日期 2020-01-11
类别

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:

评论