JavaScript Foundation

JavaScript之父：Brendan Eich 。

-基本语法：借鉴了C语言和Java语言。
-数据结构：借鉴了Java，包括将值分成原始值和对象两大类。

  • 函数的用法：借鉴了Scheme和Awk语言，将函数当成第一等公民，引入闭包。
  • 原型继承模型：借鉴了Self语言。
  • 正则表达式：借鉴了Perl语言。
  • 字符串和数组处理：借鉴了Python语言。
JavaScript与ECMAScript的关系？
  • ECMAScript规定了浏览器脚本语言的标准。
  • ECMAScript是JavaScript的规格。
如何在浏览器中运行JavaScript？
  • <script> console.log('运行JS') </script>
  • <script src='./*'> </script>
JavaScript 声明变量
  • var a;
  • let a;
变量赋值
  • ES5
var a = 1;  //window.a = 1;  全局变量
function(){var a = 1;} //只能在函数体内访问到变量a
  • ES6新增结构赋值
let a = 1; //window.a ===undefined;
{
let a,b,c;
[a,b,c=3] = [1,2];   // let a = 1; let b = 2; let b =3;
}
{
let a,b,c;
[a,,b,,c] = [1,2,3,4,5,6,7,8,9,10];
console.log(a,b,c); //1,3,5
}
{
let o = {a:1,b:2};
let {a,b} = o;
console.log(a,b);//1,2
}
{
let o = {a:1,b:2};
let {a=2,b} = o;
console.log(a,b);//1,2
}
{
let metaData = {
 number:'1',
 info:[{
name:'chen'
}]
};
let {number:Num,info:[{name:name}]} = metaData;
console.log(Num,name);   // Num:'1',name:'chen'
}
{
    function test(){
         return [1,2,3,4,5,6,7]
     }
  let a;
[...a] = test(); // let a = [1,2,3,4,5,6,7];
}
{
let a = 1; let b = 2;
[a,b] = [b,a];
console.log(a,b)  //变量交换
}
{
let a,b,c;
[a,b,...c] = [1,2,3,4,5,6,7];  // let a = 1;let b = 2; let c = [4,5,6,7];
}
{
let a,b;
({a,b} ={a:1,b:2});
console.log(a,b); // 1,2;
}
JavaScript 变量声明提升
  • ES5
console.log(a); //undefind
var a = 1;
//等同如下
var a;
console.log(a);  //undefind
a = 1;
  • ES6:let声明变量不提升
console.log(a); // ReferenceError: a is not defined
let a = 1;
标识符
  • 定义：识别具体对象的一个名称（大小写敏感），如变量名，函数名。
  • 规则：
    • 第一个字符，可是任意Unicode字母，以及美元符号($)，和下划线(_)。
    • 第二个字符以及后面的字符，除了Unicode,美元符号以及下划线，还可以是数字0-9。
  • 保留字和关键字不能作为标识符（如：var 、class、false、true）。
注释
  • 单行：/这是注释/。
  • 多行：/*这是注释*/。
区块（块级作用域）
  • ES5：不存在块级作用域
{
var a = 1;
}
console.log(a); // 1
  • ES6:使用let、const声明变量或常量(存在块级作用域)
{
let a = 1; const b =1;
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: a is not defined
{
let a = 1;
let a = 2;
console.log(a) //"SyntaxError: Identifier 'a' has already been declared（同一作用域重复声明一个变量报错）。
}
{
var a = 1;
var a = 2;
console.log(a);//2 var 重复声明同一变量取最后一次声明的赋值。
}
条件语句
  • if语句
if(true){
console.log('我被执行了')
}else{
console.log('我永远不会被执行')
}
  • switch语句
var f = 'apple';
if(f ==='banana'){
console.log('banana')
}else if(f==='apple'){
console.log('apple')
}
//多个if(){}else if{}嵌套时使用switch语句
switch(f){
case 'banana' : console.log('banana');
break;
case 'apple':console.log('apple');
break;
default: console.log('default');
}
  • 三元运算符
    • expression ? do(true): do(false);
 let a = false;
 let b = a ? 1:2;
 console.log(b) // 2;
}```

- while循环语句
 -

{
let i = 0;
while(i<10){
console.log(i); //0~9
i++;
}
}
{
let i = 11;
do{
console.log(i);
i--;
}while(i<10);
}

- for循环语句

for(let i=0;i<100;i++){
console.log(i);//0~99
}

- break和continue关键字

{
for(let i=0;i<10;i++){

if(i>=5){break;}   
 console.log(i); //0～4

}
}
{
for(let i=0; i<10;i++){
if(i<=5){continue;}
console.log(i);// 6～9
}
}

##### 数据类型
- 数值（number）
- 字符串（string）
- 布尔值（boolean） 
 - 5个假值（null,undefined,0,'',NaN）
- undefined
- null
- 对象（object）
  - 数组(Array)  是一种对象
  - 函数(Function) 是一种对象
  - 普通对象  

##### 类型转换

{
let number = 1;
let string = number+'';
console.log(typeof string,string) //string,"1"
}
{
let number = 1;
let bool =!number;
console.log(typeof bool,bool) //boolean,false
}
{
let string = '123';
//let number = string -0;
let number = +string;
console.log(typeof number,number) //number,123
}
{
let string = 'hello';
let number = string - 0;
console.log(typeof number,number) //NaN;
}
{
let bool = true;
let number = bool -0;
//let number = !bool -0; number, 0
console.log(typeof number,number) //number,1
}

- ##### 字符串方法以及遍历
  - ES5

//遍历
{
let string = "hello";
for(let i = 0;i<string.length;i++){

console.log(string[i])

}
}
//method
{
let str = 'hello';
let newStr = str.substring(1,2); // [start,end)
console.log(str); // 'hello'
console.log(newStr) // 'e'
}
{
let str = 'world';
let newStr = str.substr(1,2); //start, deleteCount
console.log(str); // 'world'
console.log(newStr) // 'or'
}


- ES6

{
let string = "world";
for(let i of string){
console.log(i)
}
}

 ##### 声明对象以及读写属性、遍历对象
- Obejct是一种无序的集合
 - ES5

{
let o = {
name:'小花',
age:18,
skill: function(){console.log('say')}
};
/*let o = new Object({
name:'小花'
}) */
console.log(o.name); //"小花"
o.name = '小草';
console.log(o['name']);//"小草"
console.log('name' in o); //true
delete o.name; //o = {};
}
{
let o = {
name:'小草',
age:18
}
for(let i in o){
console.log(i); //name,age
console.log(o[i]); //小草,18
}
}

 - ES6

{
let name = 'xiaohua',age = 16;
let o = {
name,
age,
skill(){
console.log('say')
}
}
console.log(o.skill())
}
{
let a = 'b';
let es5_obj = {
a:'c',
b:'c'
}
let es6_obj ={
[a]:'c' //key可以用变量
}
console.log(es5_obj,es6_obj);
}


##### 声明数组、遍历数组
- Array是一种有序的集合

- 数组的一些方法
  - ES5

{
let array = [1,2,3,[4,5,6],{5:"6",6:"7",7:"8"}]; //声明数组
console.log(array);
console.log(array.length);//5;
for(let i = 0; i<array.length;i++){
console.log(i,"-",array[i]);
}
array.push(9,10,11,[12,13,14],{name:"array"});
console.log(array);
array.pop();
console.log(array.length);
}
{
let arr = [2,3,1,4,5];
arr.sort();
console.log(arr);//[1,2,3,4,5]
arr.sort(function(a,b){return a<b});
console.log(arr);//[5,4,3,2,1]
}
{
let arr = [1,2,3,4,5];
let deleteArr = arr.splice(0,2,0,1,2);//array.splice(start, deleteCount, item1, item2, ...)
console.log(arr);
console.log(deleteArr);
}
{
let arr = [1,2,3,4];
let arrStr = arr.join('--');
console.log(arr);
console.log(arrStr);
let newArrStr = arrStr.split('--');
console.log(newArrStr);
}

  - ES6

{ //将伪数组转换成数组
function arg(){
argArray = Array.from(arguments,(item)=> item2); //Array.from(arrayLike[, mapFn[, thisArg]])
console.log(argArray)
}
/
argArray = Array.from(arguments);
argArray.forEach(function(item){console.log(item)})
*/
arg(1,2,3,4,5)
}
{ //填充数组
let array = [1,2,3,4,5]; //arr.fill(value) arr.fill(value, start) arr.fill(value, start, end)
newArray = array.fill(0);
console.log(newArray);
console.log(array);
console.log(array.fill(9,0,3));
console.log(array);
}
{ //遍历数组
let array = [1,2,3,4,5];
for(let i of array){
console.log(i) //1,2,3,4,5
}
for(let i of array.keys()){
console.log(i)//0,1,2,3,4
}
for(let [i,v] of array.entries()){
console.log(i,v)
}
console.log(array.find((item)=>item>3)); //查找满足条件，只返回第一个
console.log(array.findIndex(item=>item>3));
{
let array = [1,2,3,4,5];
console.log(array.includes(1,0))//arr.includes(searchElement, fromIndex) //是否包含
}
}



##### 声明函数，函数提升，arguments及...rest，length属性，闭包，同步V.S.异步
 - ES5

// var say = function(){}; 只会提升var say
function say(x){ //提升整个函数
console.log(x);
console.log(arguments) //将传入所有实参生成一个伪数组，其实是一个key为有序下标的对象
return x //使函数具有返回值
}
say('hello'); //传入实参
console.log(say.length);//行参个数
var c =say('hello'); //返回值赋予变量c
console.log(c);
{ //立即执行函数 防止全局污染
!function(){
var a = 1;
console.log(a)
}();
!function(){
var a = 2;
console.log(a)
}();
}
{ //闭包
function f1(){
var a = 1;
function f2(){
a++;
console.log(a)
}
return f2;
}

let result = f1();
result();
}
{//同步
console.log(1);
console.log(2);
console.log(3);
}
{//异步
console.log(1);
setTimeout(function(){
console.log(2);
},3000)
console.log(3);
}

 - ES6

{ //ES6存在块及作用域，不需要使用匿名函数来防止全局污染
let a =1 ;
console.log(a);
}
{
let a = 2;
console.log(a);
}
{
function say(x,y = 'world'){ //行参默认值
console.log(x,y);
}
say('hello');
}
{
let say = (...arg)=>{
console.log(arg);
for(let i of arg){
console.log(i);
}
console.log(typeof arg.push) //这是一个真数组，和arguments不同
}
say('hello','world');
}
{
let x = 'china';
let say = (x,y = x)=>{
console.log(x,y);
}
say('hello');//"hello hello"
}
{
let x = 'china';
let say = (z,y = x)=>{ //变量作用域，和上一个例子比较
console.log(z,y);
}
say('hello');//"hello china"
}
{
let say = (x)=> x ;//此处如果加{}就不会有返回值
/*
var say = function(x){
return x
}
*/
let result = say(100);
console.log(result)
}
{ //函数作为返回值，函数作为参数的例子
let qux= ()=> (callback)=> callback();
let result = qux();
console.log(result);
result(()=>{console.log("执行了")})
}

类、原型、继承（面向对象）
  - ES5

{
function Person(name,age,gender){
this.name = name;
this.age =age;
this.gender = gender;
}
Person.prototype.born = function(){
console.log('born')
}
function Man(){
Person.apply(this,arguments)
this.sex = 'male'
}
let empty = function(){};
empty.prototype = Person.prototype;
Man.prototype = new empty();
console.log(Man.prototype.constructor = Man);
var man1 = new Man('张三',18,'male');
console.log(man1)
}
{
var name,age,gender;
var Person = {
name:name,
age:age,
gender:gender,
born:function(){console.log('born')}
}
var Man = Object.create(Person);
Man.sex = 'male';
console.log(Man)
}

  - ES6

{//ES6 类
class Person{
constructor(name='张三',age= 18,gender='male'){
this.name = name;
this.age =age;
this.gender = gender;
};
born(){
console.log('born')
};
die(){
console.log('die')
}
}
console.log(new Person)
class Man extends Person{//类的继承
constructor(){
super();
this.sex = 'Man'
}
}
let man1 = new Man()
console.log(man1)
console.log(man1.born())
}

##### 标准库
 - Array
 - String
 - Number
 - Function
 - Boolean
 - Math（console.dir(Math)  ）
  - Math.PI;              //3.141592653589793
  - Math.SQRT2;      //1.4142135623730951
  -Math.pow();
  -Math.sqrt(); 
  - Math.random()*50+50 ;// 50~100之间的伪随机数
 - Date
  - new Date() 
    - 
       ```
{
let date = new Date();
  console.log(date);//Sat Jun 03 2017 01:27:41 GMT+0800 (CST)
  console.log(date.getFullYear())  //2017
  console.log(date.getMonth()) // 5   0~11个月
  console.log(date.getDate())  //3    
  console.log(date.getDay())  //6 星期日为0,星期一为1。
  console.log(date.getHours());
  console.log(date.getMinutes())
  console.log(date.getSeconds())
}

  • toLocaleString()

  • Promise

{
  function breakfast(callback){
     console.log('吃早饭');
     callback&&callback();
  }
  function lunch(){
     console.log('吃午饭');
  }
  console.log(breakfast(lunch))
}
{
  let breakfast = function(){
    console.log('吃早饭');
    return new Promise(function(resolve,reject){
      resolve();
    })
  } 
  let lunch = function(){
    console.log('吃午饭');
    return new Promise(function(resolve,reject){
     resolve();
    })
  }
  let dinner = function(){
    console.log('吃晚饭')
  }
 breakfast().then(lunch).then(dinner)
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容

  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,716评论 2赞 17
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,053评论 1赞 10
  • 让你知道
    风儿说不知道 你是哪一株小草 是否垂着头 吹不到绿草帽 人们说不知道 你是哪一个少年 不招手的背影 好像都一样黑 ...
    浅暖姑娘阅读 282评论 3赞 3
  • 夫妻关系怎样影响了孩子的专注力？
    一、发现问题 我儿子刚上小学的时候，我还是挺淡定的，甚至有点信心满满的把他送去学校。不管怎么说，儿子应该不会学习太...
    安心小屋阅读 664评论 4赞 7
  • 简书咖啡馆20160522——一个人一座城的孤独生活
    普通人的生活轨迹大致相同。挥手告别校园，懵懵懂懂步入社会。总有对大城市的向往，背起行囊，孤身一人，向着目的地出发。...
    齐小奇阅读 825评论 31赞 9