Javascript 学习笔记
文章目录
- getting started
- JS HTML DOM
- JS的位置
- JS输出
- JS的statement
- JS语法
- Js basics 基础
- JS数据类型
- **undefined 和null 和“ ” 的区别**
- 变量
- const
- JS操作符 operators
- **==** 和 **===** 的区别
- JS flow control流程控制
- 条件控制
- 循环
- JS array
- JS function
- arguments
- rest operator
- default parameter
- get和set方法
- js中的对象object
- factory function and constructor function创建类
- 引用传递和值传递
- string format
- Dates对象
- JS面向对象OOP
- 私有和公有
- JS的继承
- ES6 classes
以下为个人学习JS记录，由于看的是英文版的教程详情参考 w3school，以及codemosh的视频教程，这个是付费的。
getting started
javascript可以运行在浏览器,如谷歌v8引擎，在浏览器外运行在Node环境上。所以可以运用命令node index.js来运行js文件
JS和PYTHON都是动态类型语言，简单说就是可以不指明变量类型而在之后可以随时改变变量类型。
个人感觉应该先了解一下JS DOM
JS HTML DOM
HTML DOM是HTML执行的一个标准，也就是HTML DOM遵循此标准来进行操作HTML元素。
JS的位置
在HTML中JS代码都放在 tags标签中
<script src="https://www.w3schools.com/js/myScript1.js"></script> 引用URL连接作为script
<script src="/js/myScript1.js"></script> 指定一个文件夹作为引用
<script src="myScript1.js"></script> 引用当前页面相同路径下的scrpit文件
JS输出
<html>
<body>
<h1>My First Web Pageh1>
<p>My First Paragraphp>
<p id="demo">p>
1. getElementById用来获取html中的组件，innerHTML决定组件内容
这种方式很常见
<script>
document.getElementById("demo").innerHTML = 5 + 6;
script>
2.测试方便运用document.write(), 只用来测试使用
<script>
document.write(5+6);
script>
3. window.alert(); 展示一个提示框
<script>
window.alert(5+6);
script>
4.调试需求用 console.log()
<script>
consloe.log(5+6);
script>
body>
html>
JS的statement
以下的每一行叫做statement，JS用分号来分开JS statement，计算机来执行statement，在js中执行者是浏览器。
var a, b, c; // Declare 3 variables 声明三个变量
a = 5; // Assign the value 5 to a 给每个变量赋值
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
每一行代码长度最好不要超过80个字符，如果超过了尽量在操作符如“=”后面换行。
JS的关键字中跟JAVA基本一致，但是变量为var
JS语法
JS语法中有两种值：固定值和变量
固定值 literals
Numbers 包括整数和小数，不作区分
Strings 包括"John" 和 ‘John’ 单双引号不做区分
变量 variables
变量用来存储数据
JS用var声明变量用 =来给变量赋值
JS中变量命名习惯和JAVA中一样驼峰命名法
变量没有赋值的时候会被自动赋值为undefined
可以连续给变量赋值
var person = "John Doe", carName = "Volvo", price = 200;
//当变量被重新声明的时候他还是拥有之前的值。但重新赋值就会拥有新的值
var carName = "Volvo";
var carName;
var x = 2 + 3 + 5 + '3' + 5 //变量中有一个是string 则这个string后面的数字会被看成string ,前面的还是数字运算，这个输出为1035
Js basics 基础
JS数据类型
五种基本数据类型（primitive types)：
- string
- number
- boolean
- null
- undefined
三种对象类型：
- Object{}大括号
- Function
- Array中括号[]
基本数据类型是值传递，对象类型是引用传递。
例子如下：
let number = 10;
function increase(num){
num++;
}
increase(number);
console.log(number);
let obj = { value: 10};
function increaseO(ob){
ob.value++;
}
increaseO(obj);
console.log(obj);
//第一个输出为10，第二个输出为11
typeof 作为查看变量类型
typeof "John" // Returns "string"
typeof 3.14 // Returns "number"
typeof true // Returns "boolean"
typeof x // Returns "undefined" (if x has no value)
typeof {name:'John', age:34} // Returns "object"
typeof [1,2,3,4] // Returns "object" (not "array", array is an object)
typeof null // Returns "object"
typeof function myFunc(){} // Returns "function"
undefined 和null 和“ ” 的区别
undefined 的类型是 undefined
null类型是 object
“ “ 类型是string
变量
JS中ES6之后就建议使用let和const而减少var的使用
//变量命名规则：1）不能以字母开头 2）不能包含空格和- 3）应该有含义
let name = 'Bin'; //用分号分割，一般用单引号写string
console.log(name);
//JS中可以在里面利用引号，但是需要和外层引号不同才有效
var answer = "It's alright"; // Single quote inside double quotes
var answer = "He is called 'Johnny'"; // Single quotes inside double quotes
var answer = 'He is called "Johnny"'; // Double quotes inside single quotes
const
const 在创建的时候必须赋值，赋值之后不可改变。
JS中没有赋值的变量默认赋值为undefined
JS数据类型是动态的，也就是变量类型可以变化，而java是静态类型语言，如下：
var x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
JS操作符 operators
let x = 2;
let y = 3;
let z = x ** y; //x的y次方
console.log(z)
//以下三个都可以用作x自增
x++;
x = x + 1;
x += 1;
console.log(x >= 1)
console.log(x === 1) //一般用===来验证类型和值均相等
console.log('bin' || false) // bin 会显示truthy的值,|| 操作符是根据falsy来判断的，返回第一个truthy的值
//falsy值为以下几个:
//undefined
//null
// 0
// false
// ' '
// NaN
== 和 === 的区别
=== 表示恒等，需要类型和值都value and type相等；== 表示相等即仅仅比较两边变量的数值是否相等。
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
JS flow control流程控制
和java语法基本一样
条件控制
let role = 1;
switch (role) {
case 1:
console.log(1)
break;
case 2:
console.log(2)
break;
default:
console.log("no user")
break;
}
//用if语句来实现，更简洁
let user = 'bin'
if (user === 'bin') console.log("no user")
else if (user === 'san') console.log("no user")
else console.log("ddd")
循环
for ：同java
while
do…while
for…in 遍历对象
for…of 遍历数组
//用for..in 来遍历对象的属性
const person = {
name: 'bin',
age: 30
}
for (let key in person) //key代表对象中的key值
{ //有两种方式来得到对象中的value值
console.log(key + " : " + person[key]); //用中括号方式来得到value值
console.log(key + " : " + person.key); //而用点的方式得到value值，点后面必须是和对象相同的key名称，所以只能用中括号的形式才是正确的
}
/*
name : bin
name : undefined
age : 30
age : undefined
*/
//用for..of来遍历数组
const colors = ['red', 'green', 'blue'];
for (let color of colors)
console.log(color);
//red
//green
//blue
JS array
const numbers = [3, 4]; //不可以重新赋值，但是可以修改里面的元素
console.log(numbers); //[ 3, 4 ]
//添加元素
numbers.push(5, 6);
console.log(numbers); //[ 3, 4, 5, 6 ]
numbers.unshift(1, 2);
console.log(numbers); //[ 1, 2, 3, 4, 5, 6 ]
numbers.splice(2, 2, 'a', 'b'); //第二个参数是删除的元素个数
console.log(numbers); //[ 1, 2, 'a', 'b', 5, 6 ]
//查找元素
console.log(numbers.indexOf('a')); //2
console.log(numbers.indexOf('c')); //-1没找到返回
console.log(numbers.includes('c')); //false
let found = numbers.find(element => {
return element > 4; //返回符合条件的第一个值
});
console.log(found); //5
const courses = [{
id: 1,
name: 'a'
},
{
id: 2,
name: 'b'
}
];
console.log(courses.includes({ //false 因为includes是查找到reference 不同
id: 1,
name: 'a'
}));
console.log(courses.find(courses => {
return courses.name === 'a'; //返回符合条件的第一个值
}));
//删除元素
const numbers2 = [1, 2, 4, 5, 6];
console.log(numbers2.pop()); //6,删除最后一个元素并作为返回值
console.log(numbers2); //[ 1, 2, 4, 5 ]
console.log(numbers2.shift()); //1
console.log(numbers2); //[ 2, 4, 5 ]
numbers2.splice(2, 1);
console.log(numbers2); //[ 2, 4 ]
//清空元素
//solution 1
let numbers3 = [1, 2, 3, 4, 5, 3];
let another3 = numbers3;
numbers3 = []; //会清空数组而不清空reference
console.log(numbers3); //[]
console.log(another3); //[ 1, 2, 3, 4, 5, 3 ]
//solution 2
let numbers4 = [1, 2, 3, 4, 5, 3];
let another4 = numbers4;
numbers4.length = 0; //会清空reference的数组
console.log(numbers4); //[]
console.log(another4); //[]
//合并元素和切断元素
const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = first.concat(second);
const slice = combined.slice(2, 5); //会切断并产生一个新数组而不改变原数组
console.log(combined); //[ 1, 2, 3, 4, 5, 6 ]
console.log(slice); //[ 3, 4, 5 ]
console.log(combined); //[ 1, 2, 3, 4, 5, 6 ]
const conbined2 = [...first, 'a', ...second];
console.log(conbined2); //[ 1, 2, 3, 'a', 4, 5, 6 ]
//遍历数组，两种方式
//for遍历
for (let number of conbined2) {
console.log(number);
}
//for each遍历，可带index
numbers.forEach((number, index) => console.log(index, number));
//数组排序
conbined2.sort();
console.log(conbined2); //[ 1, 2, 3, 4, 5, 6, 'a' ]
conbined2.reverse();
console.log(conbined2); //[ 'a', 6, 5, 4, 3, 2, 1 ]
const courses2 = [{
id: 1,
name: 'a'
},
{
id: 2,
name: 'b'
},
{
id: 3,
name: 'd'
},
{
id: 4,
name: 'c'
}
];
courses2.sort((a, b) => {
if (a.name < b.name) {
console.log(-1);
return -1;
}
if (a.name > b.name) {
console.log(1);
return 1;
}
return 0;
});
console.log(courses2);
/*
[ { id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 4, name: 'c' },
{ id: 3, name: 'd' } ]*/
验证元素
const array = [1, -1, 2, 5];
//验证每一个元素，如果有一个不符合条件则返回false并终止
const test = array.every(value => {
return value >= 0;
});
console.log(test);//false
//验证每一个元素，至少有一个符合条件则返回true并终止
const testSome = array.some(value => {
return value >= 0;
});
console.log(testSome);//true
filter过滤出符合条件的元素
const array = [1, -1, 2, 5];
const filterNumber = array.filter(n => {
return n >= 0;
});
console.log(filterNumber); //[ 1, 2, 5 ]
map方法
const array = [1, -1, 2, 5];
const items = array.map(n => {
return {
value: n
}; //把每个值放进一个对象中
});
console.log(items); //[ { value: 1 }, { value: -1 }, { value: 2 }, { value: 5 } ]
const items2 = array.map(n => {
return '' + n + '';
});
console.log(items2); //[ '1 ', '-1 ', '2 ', '5 ' ]
const html = ''
+ items2.join('') + '';
console.log(html); //- 1
- -1
- 2
- 5
reduce方法
const array = [1, -1, 2, 5];
//计算总和
//方式1
let sum = 0;
for (let iterator of array) {
sum += iterator;
}
console.log(sum);
//方式2 用reduce，reduce表示把整个数组缩减
const sum2 = array.reduce((accumulater, currentValue) => {
return accumulater + currentValue;
}, 0); //0为设置accumulater的初始值
console.log(sum2);
得到数组最大值
const array = [1, -1, 2, 5];
//计算最大值
const max = getMax(array);
function getMax(array) {
let maxValue = 0;
for (let iterator of array) {
if (maxValue < iterator) {
maxValue = iterator;
}
}
return maxValue;
}
console.log(max);//5
//用reduce方法
const max2 = array.reduce((a, b) => {
return a > b ? a : b;
}) //a作为存储值，a的值默认是array[0]。b为每次iterator的值，每次都会把返回值存储到a
console.log(max2);//5
console.log(array);//[1, -1, 2, 5]
JS function
js中方法是对象
JS中定义函数有两种方式
//function declaration
function walk() {
console.log('walk');
}
//function expression
const run = function () { //是对象
console.log('run');
};
let move = run; //引用给move
walk(); //walk
run(); //run
move(); //run
arguments
function sum(a, b) { //形参叫parameter
console.log(arguments);
return a + b;
}
console.log(sum(1)); //NaN 这里传入的参数叫argument，a=1 b=undefined
console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3, 4, 5)); //3 a=1,b=2，接收前两个参数，不会报错
/* arugments 是对象
[Arguments] { '0': 1 }
NaN
[Arguments] { '0': 1, '1': 2 }
3
[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
3
*/
rest operator
function sum2(a, ...args) { //rest operator
console.log(a); //1
console.log(args); //[ 2, 4, 5, 7, 8 ] array
}
sum2(1, 2, 4, 5, 7, 8);
default parameter
function sum(a, b = 3, c = 4) { //可以设置参数默认值
//当设置一个参数有默认值时，他后面的参数也必须有默认值，所以要把带默认值的参数放到最后面
console.log(a + b + c);
}
sum(1); //8
get和set方法
const person = {
firstName: 'Ren',
lastName: 'Charles',
get fullName() { //get方法
return `${this.firstName} ${this.lastName}`;
},
set fullName(value) { //set方法，必须有parameter
const parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};
console.log(person.fullName); //Ren Charles 可以直接像引用属性一样执行get方法
person.fullName = 'bin bin'; //这里执行的是set方法
console.log(person.fullName); //bin bin 执行get方法
js hoisting 就是将java的声明会放到最顶端，即使你在后面才声明。
this指针，在对象和类中指向对象，在方法或匿名回调方法中指向window
js中的对象object
什么是json
首先可以学习一下json然后对比学习js对象
键值对，对象中前面的是property
通过两种方式来使用对象中的property
person.lastName;
person["lastName"];
定义一个对象，这种方法定义对象不太好
const circle = {
radius: 1,
location: {
x: 1,
y: 2
},
draw: function () { //在对象中叫method在对象外叫function
console.log("draw");
}
};
circle.draw(); //call method
factory function and constructor function创建类
这两种方法已经过时，但是可能其他人会用到所以应该学习看懂。
JS中没有类只有对象，所以用创建函数的方式来创建类
创建类的两种方式：两种方式都可以创建类，只是看倾向于哪一种，java程序员更倾向于第二种，跟java中类很相似。
//1.factory function 返回值是一个对象
function creatCircle(radius) {
return {
radius,
draw() {
console.log('draw');
}
};
}
const myCircle = creatCircle(1); //创建对象
myCircle.draw();
//2.construct function naming: pascle name 有this 标志 ，注意这里是方法，所以用分号
function Circle(radius) {
this.radius = radius;
this.draw = function () {
console.log('draw');
}
}
//创建的对象
const circle = new Circle(1);
circle.draw();
//克隆对象
const another = { ...circle
};
利用const创建对象，不能再重新赋值这个对象，但是可以修改对象里的属性，添加和删除。删除对象中的属性，可以用 delete obj.property
const circle = {
radius: 1
};
circle.color = 'yellow';
circle.draw = function () {
console.log("dddd")
};
circle.draw();
delete circle.color;
delete circle.draw;
//circle.draw(); 报错
引用传递和值传递
let x = 10;
let y = x;
console.log(y); //10
x = 20;
console.log(y); //10 y值不会修改
let i = {
value: 10
};
let j = i;
console.log(j); //10
i.value = 20;
console.log(j); //20 y值会被修改
遍历对象
function Circle(radius) {
this.radius = radius;
this.draw = function () {
console.log('draw');
}
}
const circle = new Circle(10);
//遍历对象属性
for (let key in circle) {
if (typeof circle[key] !== 'function') //只显示非函数的属性
console.log(key, circle[key]);
}
//遍历对象key
const keys = Object.keys(circle);
console.log(keys); //[ 'radius', 'draw' ]
//查看是否包含某个key
if ('radius' in circle)
console.log('Circle has a radius');
string format
const name = 'Charles';
const another =
`
Hi ${name},
Thank you very much!
regards!!
`;
console.log(another);//会按照代码原格式输出
Dates对象
const now = new Date();
const date1 = new Date('May 11 2018 10:00');
const date2 = new Date('2018-03-11T10:00:00.000Z') //一般用这个时间作为客户端和服务器通用的时间
console.log(now); //2019-01-12T23:32:39.012Z
console.log(now.toISOString()); //2019-01-12T23:32:39.012Z
console.log(now.toDateString()); //Sat Jan 12 2019
console.log(now.toTimeString()); //23:32:39 GMT+0000 (Greenwich Mean Time)
console.log(date1); //2018-05-11T08:00:00.000Z
console.log(date1.toISOString()); //2018-05-11T08:00:00.000Z
console.log(date2); //2018-03-11T10:00:00.000Z
获取时间的一些方法 getFullYear(), 获取年
getDate()获取当天日期
getDay()获取当天星期
JS面向对象OOP
最好的方法是没有参数(parameter)的方法。用面向对象的好处就是在方法中较少使用parameter
私有和公有
//abstraction -hide the details,show the essentials
//类中的私有变量和私有方法
function Circle(radius) {
this.radius = radius; //这个是public的
let defaultLocation = {
x: 1,
y: 2
}; //这个是private property
let computeO = function (factor) { //这个是private method
console.log('private', factor);
}
this.draw = function () {
computeO(0.1); //在这里调用privat method
console.log('draw');
};
}
const circle = new Circle(20);
circle.draw();
JS的继承
js中prototype 就是parent,这个对象我们叫做objectBase,他是所有对象的父对象
ES6 classes
简单一句话，es6更倾向使整个模块静态化，也就是新增加的一些新功能个人感觉让js更倾向于java的语法。
es6默认使用 use strict。
创建类:非常类似于java语法
class Circle { //class declaration
constructor(radius) {
this.radius = radius;
this.move = function () { //这里尽量不要定义方法吧。。。。
console.log('move');
};
}
// Instance Method
draw() { //类中不需要加function关键字
console.log("draw");
}
// static method 对象不能调用，只有类自己调用
static parse(str) {
console.log('parse');
}
}
const c = new Circle(1);
console.log(c.radius);
c.move();
c.draw();
//c.parse();调用会报错
Circle.parse();
// class expression
const Square = class {
}
ES6 中直接在想要export的地方加关键字export，而用import来导入modules
ES6中bable工具把ES6代码转化成所有浏览器可以执行的es5 JS语言，相当于一个转化器和编译器
而Bundle是用来把所有的js文件合并成一个Js文件的工具，现在最流行的是webpack。
npm是一个安装所有第三方工具和库的软件工具
package.js下的script 可以用npm run script中的关键字来实现script的内容