//固定用法示例:按数值大小排序
arr.sort( function(value1, value2){
return value2 - value1;
})
//定义一个长度是10的数组
//【当参数为一个,且是整数时,定义的是带长度的数组】
var arr = new Array(10);
//数组的初始化
var arr1 = [10, 20, 30, 40];
var arr2 = new Array(10,“哈哈”,30.8,a);
alert(num); //undefined
var num = 10;
alert(num); //10
show(); //hello
function show(){
document.write("hello");
}
var arr1 = [10, 20, 30, 40];
var arr2 = arr1;
arr2.push(50, 60);
alert(arr1); //10,20,30,40,50,60
alert(arr2); //10,20,30,40,50,60
var arr = [10, 20, 30, 40, 50];
arr.forEach( function(item, index, arr){
/*
item当前遍历到的元素
index当前遍历到元素的下标
arr数组本身
*/
document.write(item + ", " + index + ", " + arr + "
");
});
var arr = [10, 20, 30, 40, 50];
var newArr = arr.map( function(item, index, arr){
//参数同上
//遍历要做的事情 映射关系
return item * 1.3;
});
alert(newArr); //13,26,39,52,65
//传入的原数组不改变
alert(arr); //10,20,30,40,50
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter( function(item, index, arr){
//参数同上
//过滤的条件
return item > 20;
});
alert(newArr); //30,40,50
//传入的原数组不改变
alert(arr); //10,20,30,40,50
var arr = [10, 20, 30, 40, 50];
var res = arr.some( function(item, index, arr){
//参数同上
//过滤的条件
return item > 20;
});
alert(res); //true
//传入的原数组不改变
alert(arr); //10,20,30,40,50
var arr = [10, 20, 30, 40, 50];
var res = arr.every( function(item, index, arr){
//参数同上
//过滤的条件
return item < 100;
});
alert(res); //true
//传入的原数组不改变
alert(arr); //10,20,30,40,50
var arr = [10, 20, 30, 40, 50];
var res = arr.reduce( function(item, index, arr){
prev :第一次是 下标为0的元素 ;
第二次开始 上一次遍历return的值
next :从下标1开始,当前遍历到的元素
arr :数组本身
return prev + next;
});
alert(res); //150 (10+20=30,30+30=60,60+40=100,100+50=150)即所有元素之和
var str1 = new String(100);
alert(typeof str1); //object 对象 引用数据类型
var str2 = String(100);
alert(typeof str2); //string
var str3 = "100";
alert(typeof str3); //string
// 如下图表示:
var str = "hello北京";
var str2 = str;
var str = "how are you";
var arr1 = str.split(" ");
alert(arr1); //how,are,you
alert(str); //how are you 即原字符串不变
var arr2 = str.split("");
alert(arr); //h,o,w, ,a,r,e, ,y,o,u
var str1 = "hello";
//下面两行代码效果一样
var newStr = str1.concat("world", 100);
var newStr = str1 + "world" + 100;
alert(newStr); //helloworld100
window.onload = function(){
//写在这里的代码,是整个页面加载完成以后执行
}
/*
设置样式
.style.xxx方式设置css样式。
*/
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
oDiv.style.backgroundColor = 'orange';
oDiv.style.height = '500px';
}
nodeType nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
用法:
oDiv.childNodes[1].nodeValue
oDiv.childNodes[0].nodeName
//以下两行效果一样
oDiv.attributes["title"].nodeValue (推荐使用√ ,简洁)
oDiv.attributes.getNamedItem("title").nodeValue
集合:1.无序 2.不重复.
var oDiv = document.getElementById("div1");
//oDiv.title 与 oDiv.getAttribute("title") 效果一样,都是获取div1中属性为title的值
//class的访问
//oDiv.className 与 oDiv.getAttribute("class") 效果一样
//oDiv.className = 'box4' 与 oDiv.setAttribute("class", 'box4') 效果一样
oDiv.className = ''; class属性还存在,只是类名置空
oDiv.removeAttribute("title"); class属性直接移除
oDiv.innerHTML = "hello world
"
//使用格式:
oDiv.offsetWidth //width + border + padding
oDiv.offsetLeft //眼睛能看到实际距离第一个有定位的父节点的距离。
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(ev){
//事件对象获取的方式,固定写法。即兼容了所有浏览器
var e = ev || window.event;
alert(e);
}
}
//使用方法,获取事件对象.属性访问,上同
document.onmousedown = function(ev){
var e = ev || window.event;
alert(e); // [object MouseEvent] ,即鼠标事件对象
alert(e.button);
alert(e.clientX + ", " + e.clientY);
alert(e.pageX + "," + e.pageY);
alert(e.screenX + ", " + e.screenY);
}
oBtn.onkeydown = function(ev){
//事件对象获取的方式,固定写法。
var e = ev || window.event;
alert(e); //[object KeyboardEvent] ,即键盘事件对象
}
//即:根据元素节点.方法来判断返回什么事件的对象。
//键盘键位
document.onmousedown = function(ev){
var e = ev || window.event;
if(e.shiftKey){
alert("按下了shift!");
}
}
//键码和字符码
window.onkeydown = function(ev){
var e = ev || window.event;
// alert(e.keyCode);
// alert(e.which);
var which = e.keyCode || e.which;
alert(which); //回车=13
}
window.onkeypress = function(ev){
var e = ev || window.event;
var which = e.charCode || e.which;
alert(which);
}
//target 和 this
//html布局
- 1111
- 2222
- 3333
//JS逻辑
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
//当点击第一个li时
alert(this.tagName); //显示:UL
alert(target.innerHTML); //显示:1111
}
/* 事件监听器的兼容
attachEvent()和 detachEvent()
*/
function addEvent(node, evenType, funcName){
if(node.addEventListener){
node.addEventListener(evenType, funcName, false);
}else{
node.attachEvent("on" + evenType, funcName);
}
}
function removeEvent(node, eventType, funcName){
if(node.removeEventListener){
node.removeEventListener(eventType, funcName);
}else{
node.detachEvent("on" + eventType, funcName);
}
}
var str = "how aRe you";
var box = /are/i;
alert(box.test(str)); //true
alert(box.exec(str)[0]); //aRe
var str = "how are Are ARE you";
alert(str.search(/are/ig));
var arr = str.split(/are/i);
alert(arr);
var newStr = str.replace(/are/ig, "*");
alert(newStr);
var box = /arex/ig;
alert(str.match(box));
//匹配成功返回true,否则返回false
var str = "goo12le";
var box = /goo\d{2}le/;
alert(box.test(str)); //true
var str = "googabcabcabcle";
var box = /goog(abc)+le/;
alert(box.test(str)); //true
var str = "goog\nle";
var box = /goog\sle/;
alert(box.test(str)); //true
var str = "google";
var box = /^google$/;
alert(box.test(str)); //true
var str = "google";
var box = /google|baidu|bing/;
alert(box.test(str)); //true
// 将每行开头第一个数字换成*
var str = "1、ba13idu\n2、go33ogle\n3、b12ing";
var box = /^\d/gm;
alert(str.replace(box, "*"));
//父类
function Person(name, sex, age){
this.name = name;
this.sex = sex;
this.age = age;
}
Person.prototype.showSelf = function(){
alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
}
//子类
function Worker(name, sex, age, job){
//1、构造函数的伪装 -- 继承父级的属性
Person.call(this, name, sex, age); //继承父类(Person)的属性
this.job = job; //子类自己另外的属性
}
//2、原型链 继承父一级的方法
//<1>通过for...in遍历继承
for(var funcName in Person.prototype){
Worker.prototype[funcName] = Person.prototype[funcName];
}
//<2>Object.create()
// Worker.prototype = Object.create(Person.prototype);
//<3>调用构造函数继承
//Worker.prototype = new Person();
Worker.prototype.showJob = function(){ //添加子类自己另外的方法(即多态,与父类的区别)
alert("我的工作是" + this.job);
}
var w1 = new Worker("阿呆", "男", 23, "攻城狮");
w1.showSelf();
w1.showJob();
//ECMA6class语法
class Person{
//class属性添加
constructor(name, sex, age){
this.name = name;
this.sex = sex;
this.age = age;
}
showSelf(){
alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
}
}
var p1 = new Person("JerryBro", "男", 18);
p1.showSelf();
//extends 继承
class Worker extends Person{
constructor(name, sex, age, job){
//1、继承到父一级的属性
super(name, sex, age);
this.job = job;
}
showJob(){
alert("我的工作是" + this.job);
}
}
var w2 = new Worker("阿花", "男", 20, "攻城狮");
w2.showSelf();
w2.showJob();
function show(){
var num = 10;
alert(num);
}
show(); // 10
alert(num); //报错,即函数外部访问不到函数内声明的num
if(1){
var num = 10;
}
alert(num); // 10
if(1){
let num = 10;
alert(num);
}
alert(num); // 报错,num访问不到
//若将let 改成 var i = 0,则点击每个按钮都输出的是i循环结束后的值,
//因为在点击按钮时(即页面已经渲染好了),代码已经执行完成,
// i 是退出循环后的值,固显示的 i 都一样
//这里的每个按钮被点击,都会显示对应被赋予的 i 值。
//即函数执行了5遍,每遍的 i 值都不同,因为let定义的 i 是块级作用域,
//只能访问每个函数下对应的 i
var aBtns = document.getElementsByTagName("button");
for(let i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(i);
}
}
function add(x){
return x + 10;
}
//上述正常函数改成箭头函数表示:
var add = x => x + 10;
alert(add(5)); //15
/*
各种形式的箭头函数
*/
//1、无参数,无返回值
function show(){
alert("hello world");
}
var show = () => {
alert("hello world");
}
//2、有一个参数,无返回值
function xxx(num){
alert(num);
}
var xxx = num => {
alert(num);
}
//3、有一个参数,有返回值
function add(x){
return x + 10;
}
var add = x => {
//代码
return x + 10;
};
//4、多个参数,有返回值
function show(x, y){
alert(x + y);
}
var show = (x, y) => {
alert(x + y);
}
/*
箭头函数结合ES5数组的 filter 和 map 方法
*/
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter(function(item){ //正常写法
return item > 20;
});
var newArr = arr.filter(item => item > 20); //箭头函数写法,比较简洁
alert(newArr); //30,40,50
var newArr = arr.map(item => item * 1.3); //箭头函数写法,比较简洁
alert(newArr); //13,26,39,52,65
function show(){ //正常写法,return返回对象
return {
username: 'xxx'
}
}
var show = () => ({ //箭头函数写法,return返回对象,则要在{}外面包上(括号)
username: '小鱼儿'
});
var test = show();
alert(test.username); //小鱼儿
var person = {
username: "钢铁侠",
/* show: function(){
alert(person.username);
alert(this.username);
} */
show: () => {
alert(person.username); //钢铁侠
alert(this); //指向的是上一层函数的主人,而不是person
}
}
//注意这里的this不是指向person,而是上一层,即这里的上一层是Window
person.show(); //[object Window]
var x = 10, y = 20, z = 30; //一般定义变量
var [x, y, z] = [10, 20, 30]; //中括号解构定义变量
alert(x + ", " + y); // 10,30
var [x, [a, b], y] = [10, [20], 40];
alert(a + ", " + y); //20,40
alert(b); //Undefined
var {name, age, sex} = { //大括号解构
age: 18,
name: "小鱼儿",
};
alert(name); //小鱼儿
alert(age); //18
var [x, y] = [10, 20];
[x, y] = [y, x]; //快速交换x,y的值
alert(x + ", " + y); //20 ,10
function show(){ //能有多个返回值
return ["结果1", "结果2", "结果3"];
}
var [a, b, c] = show();
alert(a + ", " + c); //结果1,结果3
//参数可以带默认值,不传该参数即为默认值
function showSelf({name, age, sex = "男"}){
alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
}
showSelf({ //调用函数,传入对象参数,只要键值对应即可,参数顺序可以改变
age: 18,
name: "小鱼儿",
sex: "男"
})
let imgs = new Set();
//添加元素
imgs.add(100);
imgs.add(100);
imgs.add("hello");
imgs.add("hello");
imgs.add(true);
imgs.add(new String("world"));
imgs.add(new String("world"));
//重复的只存一个,new String()产生的地址不同,因此会存两个String
console.log(imgs); // {100, "hello", true, String, String}
/*
集合遍历
for(...of...) 遍历集合
*/
for(let item of imgs.keys()){
console.log(item);
}
for(let item of imgs.values()){
console.log(item);
}
//每项item返回都是Array,存放了键和值都相同
for(let item of imgs.entries()){
console.log(`每一项:${item} ,key:${item[0]} , value:${item[1]}`);
}
//数组变集合
var set = new Set([10, 20, 30, 40, 50, 40, 30, 20, 10]);
console.log(set); //Set(5) {10, 20, 30, 40, 50},可通过遍历取出
//集合变数组 将Set的数据结构展开成数组
var arr = [...set];
alert(arr); //10,20,30,40,50
var arr = [10, 20, 30, 40, 50, 40, 30, 20, 10];
//数组去重,先将数组转成Set(即不能出现重复的),再转回数组从而实现
arr = [...new Set(arr)];
alert(arr); //10,20,30,40,50
/*
map映射
*/
let map = new Map();
//添加数据
map.set("张三", "苹果");
map.set("李四", "香蕉");
map.set("王五", "菠萝");
map.set("李四", "橘子"); //后面的覆盖前面存在相同的Key
console.log(map); //Map(3) {"张三" => "苹果", "李四" => "橘子", "王五" => "菠萝"}
//取值01
alert(map.get("李四")); //橘子
//取值02
for(let [key,value] of map){
console.log(key,value);
}
function showSelf({name, age, sex = "男"}){
// alert("我叫" + name + ",今年" + age + ",是一位" + sex + "性");
alert(`我叫${name},今年${Math.max(age, 20, 30)}岁,是一位${sex}性`);
}
showSelf({
age: 18,
name: "小鱼儿",
sex: "男"
}); // 我叫小鱼儿,今年30岁,是一位男性
var arr = [10, 20, 30, 40, 50];
var res = arr.find(function(item, index, arr){
//查找条件
return item > 20;
})
alert(res); //30
//将上式改成箭头函数表示
alert(arr.find(item => item > 20)); //30
alert(arr.findIndex(item => item > 20)); //2
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.copyWithin(2, 4, 9); //从3(即数组下标2)开始替换5个数:5,6,7,8,9(即数组下标4,5,6,7,8)
alert(arr); //1,2,5,6,7,8,9,8,9,10
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: ["hello", "world", true]
}
Object.assign(obj1, obj2, obj3);
console.log(obj1); //{a: 10, b: 20, c: 30, d: 40, f: Array(3)}
obj2.b = 100;
console.log(obj2); //{b: 100, c: 30} ,即b的值改变了
//第一层是深拷贝(即复制)
console.log(obj1); //{a: 10, b: 20, c: 30, d: 40, f: Array(3)}
obj3.f.push("xxx"); //第二层浅拷贝(即会随原拷贝对象地址内容而改变)
console.log(obj3); //其中 f: (4) ["hello", "world", true, "xxx"]
console.log(obj1); //其中 f: (4) ["hello", "world", true, "xxx"]
var arr1 = [10, 20, 30, 40, 50];
var arr2 = [1, 2, 3, 4, 5];
Array.prototype.sum = function(){
var res = 0;
for(var i = 0; i < this.length; i++){
res += this[i];
}
return res;
}
alert(arr1.sum()); //150
alert(arr2.sum()); //15
alert(arr1.sum == arr2.sum); //true
/*
回顾垃圾回收机制:函数作用域(结果)
*/
function show(num1){
var num2 = 20;
alert(num1 + ", " + num2);
}
show(10); //10,20
alert(num1); //报错num1未定义,访问不到num1这个变量
//使用闭包写法
function aaa(num1){
var num2 = 20;
function bbb(){
alert(num1 + ", " + num2);
}
return bbb; //将函数bbb()返回,即bbb()这个函数能够使用到aaa() 函数的实参和形参
}
var ccc = aaa(10); //函数bbb()
ccc(); //10,20
/*
问题:a要进行累加,并且不能声明为全局变量。
解决:使用闭包
*/
function show(){ //不用闭包,每次调用show()都是新的函数a输出都为3
var a = 2; //局部变量
a++;
alert(a);
}
show(); //3
show(); //3
function aaa(){
var a = 2; //私有变量
function bbb(){
a++;
alert(a);
}
return bbb;
}
var ccc = aaa();
ccc(); //3
ccc(); //4
alert(a); // a is not defined */
//第一种:声明函数
function show(){
alert("hello world");
}
//第二种:声明函数
var show = function(){
alert("hello world");
}
show(); //但都是要调用函数,代码长
//立即执行函数:直接调用声明的函数
(function(){
alert("hello world");
})();
/*
内存泄漏
低版本IE浏览器。
*/
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){
alert(oDiv.id);
}
//解决办法:刷新或关闭页面时,将获取变量置null
window.onunload = function(){
oDiv.onclick = null;
oDiv = null;
}
}
//使用循环给元素都添加点击事件
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
for(var i = 0; i < aBtns.length; i++){
//方法1: 每个元素都加一个index属性并赋予当前 i 值
aBtns[i].index = i;
aBtns[i].onclick = function(){
alert(this.index);
}
//方法2-1:用闭包写,返回函数
aBtns[i].onclick = (function(index){
return function(){
alert(index);
}
})(i);
//方法2-2:闭包拆开写,比较好理解
aBtns[i].onclick = btnClick(i);
}
//方法2-2:闭包拆开写,比较好理解
function btnClick(index){
return function(){
alert(index);
}
}
}
localStorage.setItem("a", "1"); //存储方式1
localStorage.b = '2'; //存储方式2
localStorage["c"] = "3"; //存储方式3
alert(localStorage.getItem("b"));
alert(localStorage.c);
alert(localStorage['a']);
localStorage.removeItem("a");
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("get", "https://api.asilu.com/weather/", true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
}
var timer = setTimeout(function(){
alert("hello world");
}, 4000);
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
clearTimeout(timer);
}
}
//会执行demo.js的代码,但是
//1、全局函数
function show(){
alert(this); //[object Window]
}
//2、this => person
var person = {
username: "钢铁侠",
show: function(){
alert(person.username);
alert(this.username);
}
}
person.show(); // 显示:钢铁侠
//元素绑定函数,this指向元素
oBtn.onclick = function(){
alert(this.innerHTML); //显示:oBtn元素的内容
}
function show(x, y){
alert(this);
alert(x + ", " + y);
}
show(10, 20); [object Window]
show.call("call", 20, 40); //call的使用, 显示:call
show.apply("apply", [20, 40]); //apply的使用,第二个参数传入数组(原来的参数当数组传入)
var res = show.bind("bind"); //bind方式1
res(40, 50);
show.bind("bind")(40, 50); //bind方式2,即写在一行
//这里的标签被自动解析了
document.write("黑人问号脸
");
显示:黑人问号脸
/*
数组
for循环
for...in
foreach
for...of
对象(只能用for...in)
for...in
Set :
for...of
Map :
for...of
*/
var arr = [10, 20, 30, 40, 50];
for(var i = 0; i < arr.length; i++){
document.write("for循环:" + arr[i] + ", " + i + "
");
}
for(var i in arr){
document.write("for...in遍历:" + arr[i] + ", " + i + "
");
}
arr.forEach(function(item, index){
document.write("forEach:" + item + ", " + index + "
");
})
//通过for...of遍历数组
for(var item of arr){
/*
item是当前遍历到的元素
*/
document.write("for...of:" + item + "
");
}
var person = {
username: "钢铁侠",
age: 20,
sex: "男"
};
for(var attr in person){
/*
attr 遍历到的对象的属性
*/
document.write("对象:" + attr + person[attr] + "
");
}
- a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;
- a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;
- JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
// 若window.sessionStorage.getItem(STORAGE_KEY)为null,则JSON.parse('{}'),将字符串'{}'转成一个对象{}