原生JS 基础总结

0. 好习惯    分号  ;  花括号 {}， var   弄清楚 null  , undefined  区别 ， isNaN, === 与  == 区别
1.  prompt , confirm , alert  不同框框
数组常用方法
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
push和pop
push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']

unshift和shift
如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

2.  如果if的条件判断语句结果不是true或false怎么办

     JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true

3. //三种方式遍历数组
'use strict';
var arr = ['小明', '小红', '大军', '阿黄'];
arr.sort().forEach(function(name){
  console.log("欢迎 "+name);
});

'use strict';
var arr = ['Bart', 'Lisa', 'Adam'];

for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

for(var name of arr){
   console.log(name);
}

arr.foreach(function(name){
   console.log(name);
});

//Set 与 Map 的遍历

var userSet=new Set(["user1","user2","user3"]);
for(var user of userSet){
    console.log(user);
}

var userInfoMap=new Map([['jimi',12],['tom',17]]);
for(var userInfo of userInfoMap){
    console.log(userInfo[0]+'--><--'+userInfo[1]);
}
4. 判断本身自己有的属性，去掉继承过来的属性 如 Object 的 toString 等等
var person={
    name:"闹着玩",
    age: 18
}
for(var prop in person){
    if(person.hasOwnProperty(prop))
    console.log(person[prop]);
}

5. 函数 与 错误处理  (异步函数的错误只能够在内部捕获,外层包裹 try catch 并不会有什么卵用)
var abc=function(num){
    if(typeof  num !='number'){
        throw new Error('not a number');
    }
    else{
        if(num>=0){
            return num;
        }
        else
            return -num;
    }
};
try{
    //abc('ssf');
    alert(abc(-129));
}
catch(err){
    console.log(err.message);
}

6.  变量申明提升，赋值不会提升
我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：
function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

7. JSON 序列化生成字符串与反序列化生成对象
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

var s = JSON.stringify(xiaoming);
var person=JSON.parse(s);
console.log('name: '+person.name);
console.log(s);

var arr = [1, 2, 3];

其原型链是：
arr ----> Array.prototype ----> Object.prototype ----> null

函数也是一个对象，它的原型链是：
foo ----> Function.prototype ----> Object.prototype ----> null

function Person(name){
    this.name=name;
    this.hello=function(){
        alert('Hello '+this.name+' !');
    }
}
var person=new Person('frank');
var personStr=JSON.stringify(person);
alert(personStr);

由于Function.prototype定义了apply()等方法，因此，所有函数都可以调用apply()方法。
很容易想到，如果原型链很长，那么访问一个对象的属性就会因为花更多的时间查找而变得更慢，因此要注意不要把原型链搞得太长。
7. map /reduce 

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result=arr.map(function pow(x) {
    return x * x;
});
alert(result);

'use strict';

function product(arr) {
return arr.reduce(function multi_all(x,y){
  return x*y;
});
}

// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');

'use strict';

function string2int(s) {
  var strArray=s.split("");
    return strArray.map(function(x){
                           return +x;
                         })
                   .reduce(function(x,y){
                         return (x*10)+y;
                    });
}

// 测试:
if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {
    if (string2int.toString().indexOf('parseInt') !== -1) {
        console.log('请勿使用parseInt()!');
    } else if (string2int.toString().indexOf('Number') !== -1) {
        console.log('请勿使用Number()!');
    } else {
        console.log('测试通过!');
    }
}
else {
    console.log('测试失败!');
}

////////------------------------==================
'use strict';

var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);

console.log(r);

结果竟然是1, NaN, NaN，小明百思不得其解，请帮他找到原因并修正代码。
提示：参考Array.prototype.map()的文档。
由于map()接收的回调函数可以有3个参数：callback(currentValue, index, array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string, radix)没有忽略第二个参数，导致实际执行的函数分别是：
parseInt('0', 0); // 0, 按十进制转换
parseInt('1', 1); // NaN, 没有一进制
parseInt('2', 2); // NaN, 按二进制转换不允许出现2
可以改为r = arr.map(Number);，因为Number(value)函数仅接收一个参数。

x=>parseInt(x)

8. 高阶函数  filter
'use strict';
var arr=[];
for(let i=0;i<10;i++){
    arr.push(i);
}
alert(arr.filter(function(element){
    return element % 2===0;
}));

'use strict';
function  add(x,y,f){
    return f(x)+f(y);
}
alert('result: '+add(-5,6,Math.abs));

9.  filter

'use strict';
var arr = ['A', '', 'B', null, undefined, 'C', '  '];
alert(arr.filter(function(s){
    return s && s.trim();
}));

'use strict';

var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r=arr.filter(function(element,index,self){
   if(self.indexOf(element)===index){
    return true;
  }
   else return false;
});

console.log(r.toString());
去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
// ---------------=================-------------------
'use strict';

function get_primes(arr) {

return arr.filter(
function(element){
  if(element===1) return false;
  else{
     for(var i=2;i<element;i++){
        if(element%i===0) return false;
     }
     return true;
  }
}
);
}

// 测试:
var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    console.log('测试通过!');
} else {
    console.log('测试失败: ' + r.toString());
}

排序算法
排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序，排序的核心是比较两个元素的大小。如果是数字，我们可以直接比较，但如果是字符串或者两个对象呢？直接比较数学上的大小是没有意义的，因此，比较的过程必须通过函数抽象出来。通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。
'use strict';

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ['apple', 'Google', 'Microsoft']

原生JS基础总结